SimplexNoise实现闪耀动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：SimplexNoise实现闪耀动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
document, body {
  margin: 0;
  min-height: 100vh;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

#container {
  align-items: center;
  display: flex;
  flex-direction: column;
}

button {
  max-width: 200px;
  margin-top: 10px;
}
</style>


</head>

<body >
  <div id="container"></div>

  
      <script type="module">
function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}import { SVG } from 'https://cdn.skypack.dev/@svgdotjs/svg.js';
import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
import * as dat from 'https://cdn.skypack.dev/dat.gui';
console.clear();

const dimensions = new Vec2(750, 500);

const config = {
  seed: 263,
  nscale: .005,
  sscale: 3,
  stepSize: 1,
  steps: 500,
  r: 10,
  iterations: 128,
  pos: dimensions.scaleNew(.5),
  startDistance: 50,
  breakLength: 1000,
  colour: '#FF0066' };

const vars = {
  i: 0 };

let noise;

var drawing = SVG().addTo('#container').size(dimensions.x, dimensions.y);

/// Create the download button
const dl = document.createElement('button');
dl.innerText = 'download';
dl.addEventListener('click', () => {
  const fileName = "untitled.svg";
  const url = "data:image/svg+xml;utf8," + encodeURIComponent(drawing.svg());
  const link = document.createElement("a");
  link.download = fileName;
  link.href = url;
  link.click();
});
document.body.querySelector('#container').appendChild(dl);

const setup = pos => {
  if (pos instanceof Vec2) config.pos = pos;
  drawing.clear();
  noise = new SimplexNoise(config.seed);
  vars.i = 0;
  config.iterant = Math.PI * 2 / config.iterations;
  draw();
};

const gui = new dat.GUI();
gui.add(config, 'seed').onChange(setup);
gui.add(config, 'sscale', 3, 20, .0001).onChange(setup);
gui.add(config, 'nscale', .0001, .01, .0001).onChange(setup);
gui.add(config, 'stepSize', 1, 30, 1).onChange(setup);
gui.add(config, 'steps', 20, 1000, 1).onChange(setup);
gui.add(config, 'iterations', 6, 512, 1).onChange(setup);
gui.add(config, 'startDistance', 0, 500, 1).onChange(setup);
gui.add(config, 'breakLength', 0, 1000, 1).onChange(setup);
// gui.add(config, 'r', 20, 100, 1).name('tilesize').onChange(setup);
var _start = new WeakMap();var _position = new WeakMap();var _direction = new WeakMap();var _offset = new WeakMap();var _stepsize = new WeakMap();
class Straightwalker {





  constructor(pos, dir, offset) {_start.set(this, { writable: true, value: void 0 });_position.set(this, { writable: true, value: void 0 });_direction.set(this, { writable: true, value: void 0 });_offset.set(this, { writable: true, value: void 0 });_stepsize.set(this, { writable: true, value: 1 });
    if (pos instanceof Vec2) _classPrivateFieldSet(this, _start, pos);
    this.offset = offset;
    this.pos = this.start.clone();
    this.dir = dir;
  }
  walk(l) {
    this.pos.add(this.dir.scaleNew(l));
  }
  get length() {
    return this.start.subtractNew(this.pos).length;
  }
  set offset(p) {
    if (p instanceof Vec2) _classPrivateFieldSet(this, _offset, p);
  }
  get offset() {
    return _classPrivateFieldGet(this, _offset) || new Vec2(0, 0);
  }
  set pos(p) {
    if (p instanceof Vec2) _classPrivateFieldSet(this, _position, p);
  }
  get pos() {
    return _classPrivateFieldGet(this, _position) || this.start.clone();
  }
  get start() {
    return _classPrivateFieldGet(this, _start) || new Vec2(0, 0);
  }
  set dir(p) {
    if (p instanceof Vec2) _classPrivateFieldSet(this, _direction, p.normalise());
  }
  get dir() {
    return _classPrivateFieldGet(this, _direction) || new Vec2(1, 0);
  .........完整代码请登录后点击上方下载按钮下载查看