生长自由js动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Freedom 4</title>
<style>
      body {
  background: black;
}
      canvas.drawer {
        position:fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
      }
    </style>

</head>
<body translate="no">

<script>
      // Liam Egan
// 2019

let initialise = function () {
  let application = new Application();
  // application.scaleFactor = 2;
  // application.clearOnRedraw = Application.FADE;
  application.fadeColour = 'rgba(0,0,0,.12)';
  application.fillColour = 'rgba(30,30,30,1)';
  application.onResize();
  let vfield = new VectorField();
  vfield.scale = 2000;
  vfield.amplitude = 10;
  // vfield.debug = true;

  application.addActor(vfield);

  let maxNum = 1000;
  let num = 0;

  let addTracer = (position, colour) => {
    if (num > maxNum) return;

    let tracer = new BranchTracer(position.x, position.y);
    tracer.field = vfield;
    let momentum = new Vector(Math.random(), Math.random());
    momentum.length = Math.random() * 2;
    tracer.momentum = momentum;
    tracer.friction = 0.97;

    if (colour) {
      tracer.colour = colour;
    } else {
      tracer.colour = 'RGBA(' + 100 + Math.round(Math.random() * 155) + ',' + 100 + Math.round(Math.random() * 155) + ',255,0.5)';
    }

    application.addActor(tracer);

    num = application.actors.length;

    return tracer;
  };
  let seed = addTracer(new Vector(window.innerWidth / 2, window.innerHeight / 2), 'RGBA(255, 100, 100, 0.5)');
  seed.initial = true;
  seed.branchChance = 15;
  seed.friction = 0.9975;
  seed.onBranch = addTracer;

  // setInterval(()=> {
  //   vfield.z = Math.random() * 10000;
  // }, 10000)


  let stage = application.stage;
  document.body.appendChild(stage);
  application.onPointerMove({ clientX: window.innerWidth / 2, clientY: window.innerHeight / 2 });
  application.render();
  application.animating = true;

  // application.runFor(60 * 120);

  return;
};










class Application {
  constructor() {
    this.stage = document.createElement('canvas');

    this.animate = this.animate.bind(this);

    this.onResize = this.onResize.bind(this);
    this.onPointerDown = this.onPointerDown.bind(this);
    this.onPointerup = this.onPointerup.bind(this);
    this.onPointerMove = this.onPointerMove.bind(this);

    this.initialiseEvents();
  }

  initialiseEvents() {
    window.addEventListener('resize', this.onResize, false);
    document.addEventListener('pointerdown', this.onPointerDown, false);
    document.addEventListener('pointerup', this.onPointerup, false);
    document.addEventListener('pointermove', this.onPointerMove, false);
  }

  deInitialiseEvents() {
    window.removeEventListener('resize', this.onResize, false);
    document.removeEventListener('pointerdown', this.onPointerDown, false);
    document.removeEventListener('pointerup', this.onPointerup, false);
    document.removeEventListener('pointermove', this.onPointerMove, false);
  }

  addActor(actor) {
    if (actor instanceof Actor) {
      this.actors.push(actor);
    }
  }

  runFor(ticks) {
    let interval = 1 / 60;
    let i = 0;

    for (i; i < ticks; i++) {
      this.triggerEvent('application-animate', { now: this.now, then: this.then, interval: interval, application: this });

      this.render();
    }

  }

  animate(delta) {
    this.now = Date.now();
    let interval = this.now - this.then;

    this.triggerEvent('application-animate', { now: this.now, then: this.then, interval: interval, application: this });

    this.render(delta);

    this.then = this.now;

    // remove dead actors
    if (delta - this.removalTest > 5000 || !this.removalTest) {
      this.removalTest = delta;
      for (let i = this.actors.length - 1; i >= 0; i--) {
        if (this.actors[i].dead === true) {
          this.actors.splice(i, 1);
        }
      }
    }

    if (this.animating) {
      requestAnimationFrame(this.animate);
    }
  }

  render(delta) {
    let dims = this.dimensions;

    if (this.animatingOut) {
      this.opacity += .02;
      if (this.opacity >= 1) this.animatingOut = false;
      this.context.fillStyle = `rgba(10,10,10,${this.opacity}`;
      this.context.fillRect(0, 0, dims.width, dims.height);
    }

    if (this.clearOnRedraw == Application.CLEAR) {
      this.context.clearRect(0, 0, dims.width, dims.height);
    } else if (this.clearOnRedraw == Application.FADE) {
      this.context.fillStyle = this.fadeColour;
      this.context.fillRect(0, 0, dims.width, dims.height);
    }

    this.actors.forEach(actor => {
      actor.render(this);
    });
  }

  onResize(e) {
    this.dimensions = new Vector(window.innerWidth * 2, window.innerHeight * 2);
  }
  onPointerDown(e) {

  }
  onPointerup(e) {

  }
  onPointerMove(e) {
    let pointer = new Vector(e.clientX, e.clientY);
    this.triggerEvent('application-pointermove', { pointer: pointer });
  }

  triggerEvent(event, data) {
    if (window.CustomEvent) {
      var event = new CustomEvent(event, { detail: data });
    } else {
      var event = document.createEvent('CustomEvent');
      event.initCustomEvent(event, true, true, data);
    }

    document.dispatchEvent(event);
  }

  get actors() {
    if (!this._actors) this._actors = [];

    return this._actors;
  }

  set scaleFactor(value) {
    if (value >= 1) {
      this._scaleFactor = value;
      this.onResize();
    }
  }
  get scaleFactor() {
    return this._scaleFactor || 1;
  }

  set dimensions(value) {
    if (value instanceof Vector) {
      value.scale(this.scaleFactor);
      this.stage.width = value.width;
      this.stage.height = value.height;
      this.context.fillStyle = this.fillColour;
      this.context.fillRect(0, 0, this.dimensions.width, this.dimensions.height);
      this._dimensions = value;
    }
  }
  get dimensions() {
    return this._dimensions || new Vector(0, 0);
  }

  set stage(value) {
    if (value instanceof HTMLCanvasElement) {
      value.className = this.className;
      this._stage = value;
      this.context = this.stage.getContext('2d');
      this.context.fillStyle = this.fillColour;
      this.context.fillRect(0, 0, this.dimensions.width, this.dimensions.height);
      this.onResize();
    }
  }
  get stage() {
    return this._stage || null;
  }

  set now(value) {
    if (!isNaN(value)) this._now = value;
  }
  get now() {
    return this._now || 0;
  }

  set then(value) {
    if (!isNaN(value)) this._then = value;
  }
  get then() {
    return this._then || 0;
  }

  set animating(value) {
    if (value === true && this.animating !== true) {
      this._animating = true;

      this.now = Date.now();
      this.then = this.now;

      requestAnimationFrame(this.animate);
    }
  }
  get animating() {
    return this._animating === true;
  }

  set fadeColour(value) {
    this._fadeColour = value;
  }
  get fadeColour() {
    return this._fadeColour || 'rgba(255,255,255,.5)';
  }

  set fillColour(value) {
    this._fillColour = value;
  }
  get fillColour() {
    return this._fillColour || 'rgba(255,255,255,1)';
  }

  set clearOnRedraw(value) {
    if ([Application.NOCLEAR, Application.CLEAR, Application.FADE].indexOf(value) > -1) {
      this._clearOnRedraw = value;
    }
  }
  get clearOnRedraw() {
    return this._clearOnRedraw || Application.NOCLEAR;
  }

  get className() {
    return 'drawer';
  }}


Application.NOCLEAR = 0;
Application.CLEAR = 1;
Application.FADE = 2;

class Actor {
  constructor(x, y, w, h) {
    this.dimensions = new Vector(w, h);
    this.position = new Vector(x, y);
  }

  render() {

  }

  set dimensions(value) {
    if (value instanceof Vector) this._dimensions = value;
  }
  get dimensions() {
    return this._dimensions || new Vector(0, 0);
  }

  set position(value) {
    if (value instanceof Vector) this._position = value;
  }
  get position() {
    return this._position || new Vector(0, 0);
  }}


class VectorField extends Actor {
  constructor(x = 0, y = 0, w = 0, h = 0) {
    super(x, y, w, h);

    this.noise = new Noise();

    this.helpers = [];

    this.mousepos = new Vector(0, 0);

    this.onResize = this.onResize.bind(this);
    this.onPointerMove = this.onPointerMove.bind(this);

    // document.addEventListener('application-pointermove', this.onPointerMove, false);
    window.addEventListener('resize', this.onResize);
    this.onResize();
  }

  render(application) {
    this.helpers.forEach(helper => {
      helper.render(application);
    });
  }

  preDraw() {}
  postDraw() {}

  solveForPosition(v) {
    if (!v instanceof Vector) return;

    v = v.clone();
    v.x -= window.innerWidth / 2;
    v.y -= window.innerHeight / 2;

    let scale = this.scale;
    let amp = this.amplitude;

    //     let waveform = new Vector(Math.cos(v.x / scale) * amp, Math.sin(v.y / scale) * amp);
    //     return new Vector(waveform.y - waveform.x, -waveform.x - waveform.y);

    let envelope = this.amplitude;

    let noise = this.noise.noise(v.x / scale, v.y / scale, this.z) * scale;
    if (noise > envelope) noise = envelope;
    if (noise < -envelope) noise = -envelope;
    let noise1 = this.noise.noise(v.y / scale, v.x / scale, this.z / scale);
    let transV = new Vector(1, 0);
    transV.length = noise;
    transV.angle = noise1 * 10;
    return transV;

    let transv = v.subtractNew(this.mousepos);
    transv = new Vector(transv.y - transv.x, -transv.x - transv.y);

    transv.length *= 0.03;
    if (transv.length > 50) {
      transv.length = 50;
    }
    transv.length -= 50;
    transv.length *= -1;

    return transv;
  }

  onPointerMove(e) {
    this.mousepos = e.detail.pointer;

    this.helpers.forEach(helper => {
      helper.vector = this.solveForPosition(helper.position);
    });
  }

  onResize(e) {
    if (!this.debug) return;

    this.helpers.forEach(helper => {
      helper.destroy();
    });
    this.helpers = [];

    let w = this.sampleWidth;
    let curpos = new Vector(0, 0);

    while (curpos.y < window.innerHeight + w) {
      curpos.x = 0;
      while (curpos.x < window.innerWidth + w) {
        this.helpers.push(new Arrow(curpos.x, curpos.y, 10, 10, this.solveForPosition(curpos)));
        curpos.x += w;
      }
      curpos.y += w;
    }
  }

  set scale(value) {
    if (value > 0) {
      this._scale = value;
    }
  }
  get scale() {
    return this._scale || 500;
  }

  set amplitude(value) {
    if (value > 0) {
      this._amplitude = value;
    }
  }
  get amplitude() {
    return this._amplitude || 10;
  }

  set sampleWidth(value) {
    if (value > 0) this._sampleWidth = value;
  }
  get sampleWidth() {
    return this._sampleWidth || 30;
  }

  set z(value) {
    if (value > 0) this._z = value;
  }
  get z() {
    return this._z || 30;
  }

  set mousepos(value) {
    if (value instanceof Vector) this._mousepos = value;
  }
  get mousepos() {
    return this._mousepos || new Vector(0, 0);
  }

  set debug(value) {
    this._debug = value === true;
  }
  get debug() {
    return this._debug === true;
  }

  get strokeStyle() {
    return 'black';
  }

  get strokeWidth() {
    return 0;
  }}


class Tracer extends Actor {
  constructor(x = 200, y = 200, w = 40, h = 20) {
    super(x, y, w, h);

    this.onAnimate = this.onAnimate.bind(this);

    document.addEventListener('application-animate', this.onAnimate, false);

    this.friction = 0.95;
    this.momentum = new Vector(1, 0);
  }

  onAnimate(e) {
    let force = this.field.solveForPosition(this.position).multiplyScalar(0.01);
    let app = e.detail.application;
    let oldPosition = this.position.c.........完整代码请登录后点击上方下载按钮下载查看