碰撞的圆环

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const conversionFactor = 180 / Math.PI;

let radianToDegrees = function(radian) {
	return radian * conversionFactor;
}
let degreesToRadian = function(degrees) {
	return degrees / conversionFactor;
}

class Vector {
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
	reset(x, y) {
    this.x = x;
    this.y = y;
	}
  resetToVector(v) {
    if(v instanceof Vector) {
      this.x = v.x;
      this.y = v.y;
    }
  }
  clone() {
    return new Vector(this.x, this.y);
  }
  add(vector) {
    this.x += vector.x;
    this.y += vector.y;
    return this;
  }
  addNew(vector) {
    let v = this.clone();
    return v.add(vector);
  }

addScalar(scalar) {
    return this.add(new Vector(scalar, scalar));
  }
  addScalarNew(scalar) {
    let v = this.clone();
    return v.addScalar(scalar);
  }
  subtract(vector) {
    this.x -= vector.x;
    this.y -= vector.y;
    return this;
  }
  subtractNew(vector) {
    let v = this.clone();
    return v.subtract(vector);
  }

subtractScalar(scalar) {
    return this.subtract(new Vector(scalar, scalar));
  }

subtractScalarNew(scalar) {
    let v = this.clone();
    return v.subtractScalar(scalar);
  }

divide(vector) {
    if(vector.x !== 0) {
      this.x /= vector.x
    } else {
      this.x = 0;
    }
    if(vector.y !== 0) {
      this.y /= vector.y
    } else {
      this.y = 0;
    }
    return this;
  }

divideNew(vector) {
    let v = this.clone();
    return v.divide(vector);
  }

divideScalar(scalar) {
    var v = new Vector(scalar, scalar);
    return this.divide(v);
  }

divideScalarNew(scalar) {
    let v = this.clone();
    return v.divideScalar(scalar);
  }

multiply(vector) {
    this.x *= vector.x;
    this.y *= vector.y;
    return this;
  }

multiplyNew(vector) {
    let v = this.clone();
    return v.multiply(vector);
  }

multiplyScalar(scalar) {
    var v = new Vector(scalar, scalar);
    return this.multiply(v);
  }

multiplyScalarNew(scalar) {
    let v = this.clone();
    return v.multiplyScalar(scalar);
  }

scale(scalar) {
    return this.multiplyScalar(scalar);
  }

scaleNew(scalar) {
    return this.multiplyScalarNew(scalar);
  }

rotate(radian) {
  	var x = (this.x * Math.cos(radian)) - (this.y * Math.sin(radian));
  	var y = (this.x * Math.sin(radian)) + (this.y * Math.cos(radian));

this.x = x;
		this.y = y;

return this;
  }
  rotateNew(radian) {
    let v = this.clone();
    return v.rotate(radian);
  }

rotateDeg(degrees) {
    return this.rotate(degreesToRadian(degrees));
  }
  rotateDegNew(degrees) {
    return this.rotateNew(degreesToRadian(degrees));
  }

rotateBy(radian) {
		return this.rotate(radian);
  }

rotateByNew(radian) {
    return this.rotateNew(radian);
  }

rotateDegBy(degrees) {
		return this.rotateDeg(degrees);
  }

rotateDegByNew(radian) {
    return tjos.rotateDegNew(radian);
  }
	rotateTo(radian) {
		return this.rotate(radian-this.angle);
	};

rotateToNew(radian) {
    let v = this.clone();
    return v.rotateTo(radian);
	};
  rotateToDeg(degrees) {
    return this.rotateTo(degreesToRadian(degrees));
  }
  rotateToDegNew(degrees) {
    return this.rotateToNew(degreesToRadian(degrees));
  }
	normalise() {
		return this.divideScalar(this.length);
	}
	normaliseNew() {
		return this.divideScalarNew(this.length);
	}
	distance(vector) {
		return this.subtractNew(vector).length;
	}
	distanceX(vector) {
		return this.x - vector.x;
	}
	distanceY(vector) {
		return this.y - vector.y;
	}

dot(vector) {
		return (this.x * vector.x) + (this.y * vector.y);
	}
	cross(vector) {
		return (this.x * vector.x) - (this.y * vector.y);
	}

isEqualTo(vector) {
    return this.x === vector.x && this.y === vector.y;
  }

slopeOf(vector) {
    return ( vector.y - this.y ) / ( vector.x - this.x );
  }

set x(x) {
    if(typeof x == 'number') {
      this._x = x;
    } else {
      throw new TypeError('X should be a number');
    }
  }
  get x() {
    return this._x || 0;
  }

set y(y) {
    if(typeof y == 'number') {
      this._y = y;
    } else {
      throw new TypeError('Y should be a number');
    }
  }
  get y() {
    return this._y || 0;
  }

set lengthSquared(length) {
    var factor;
    if(typeof length == 'number') {
      factor = length / this.lengthSquared;
      this.multiplyScalar(factor);
    } else {
      throw new TypeError('length should be a number');
    }
  }
  get lengthSquared() {
    return (this.x * this.x) + (this.y * this.y);
  }
  set length(length) {
    var factor;
    if(typeof length == 'number') {
      factor = length / this.length;
      this.multiplyScalar(factor);
    } else {
      throw new TypeError('length should be a number');
    }
  }
  get length() {
    return Math.sqrt(this.lengthSquared);
  }
  set angle(radian) {
    if(typeof radian == 'number') {
      this.rotateTo(radian);
    } else {
      throw new TypeError('angle should be a number');
    }
  }
  get angle() {
    return Math.atan2(this.y, this.x);
  }

set angleInDegrees(degrees) {
    if(typeof degrees == 'number') {
      this.rotateToDeg(degrees);
    } else {
      throw new TypeError('angle should be a number');
    }
  }
  get angleInDegrees() {
    return radianToDegrees(Math.atan2(this.y, this.x));
  }
	set width(w) {
		this.x = w;
	}
	get width() {
		return this.x;
	}
	set height(h) {
		this.y = h;
	}
	get height() {
		return this.y;
	}

get area() {
		return this.x * this.y;
	}

get slope() {
    return this.y / this.x;
  }

}

const smoothstep = function (edge0, edge1, x) {
  let t = (x - edge0) / (edge1 - edge0);
  t = Math.min(Math.max(t, 0), 1);
  return t * t * (3.0 - 2.0 * t);
};
class Particle {
  constructor(position, velocity) {
    this._canvas = document.createElement('canvas');
    this.canvas.width = this.dimensions.width + 2;
    this.canvas.width = this.dimensions.height + 2;
    this.ctx = this.canvas.getContext('2d');

this.position = position;
    this.velocity = velocity;

this.render();
  }

render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.beginPath();
    this.ctx.lineWidth = 1.;
    this.ctx.strokeStyle = "#000000";
    this.ctx.arc(this.halfDims.width + 1, this.halfDims.height + 1, this.halfDims.width, 0, 2 * Math.PI);
    this.ctx.stroke();
    this.ctx.closePath();
    this.ctx.beginPath();
    this.ctx.arc(this.halfDims.width + 1, this.halfDims.height + 1, this.halfDims.width - this.ringWidth, 0, 2 * Math.PI);
    this.ctx.stroke();
  }

solve() {

const acceleration = new Vector(0, 0);
    let l = mousepos.subtractNew(this.position);
    let sqD = l.lengthSquared;
    let d = Math.sqrt(sqD);
    let force = 5000. / (sqD * d);
    force *= smoothstep(300, 0, d);
    acceleration.subtract(l.scale(force));

this.render();

const checkParticle = particle => {
      const l = particle.position.subtractNew(this.position);
      const sqD = l.lengthSquared; // The distance squared (cheaper than calculating actual distance, see: Pythagoras)
      d = Math.sqrt(sqD);

const force = 20000. / d / (sqD * d);

if (d < 200) {
        let a = smoothstep(200, 50, d) * .5;
        const s = this.position.clone();
        const offset = new Vector(this.halfDims.width - 5., 0).rotate(l.angle);
        s.add(offset);
        this.controller.ctx.beginPath();
        this.controller.ctx.moveTo(s.x, s.y);
        this.controller.ctx.strokeStyle = `rgba(0,0,0,${a})`;
        s.resetToVector(particle.position);
        s.subtract(offset);
        this.controller.ctx.lineTo(s.x, s.y);
        this.controller.ctx.stroke();

a = smoothstep(200, 50, d);
        this.ctx.beginPath();
        this.ctx.strokeStyle = `rgba(0,0,0,${a})`;
        this.ctx.lineWidth = this.ringWidth;
        this.ctx.arc(this.halfDims.width + 1, this.halfDims.height + 1, this.halfDims.width - this.ringWidth * .5, l.angle - a, l.angle + a);
        this.ctx.stroke();
      }

acceleration.subtract(l.scale(force));
    };

this.controller.particles.forEach(particle => {
      if (particle === this) return;
      checkParticle(particle);
    });
    this.velocity.add(acceleration);
    if (this.velocity.length > 5.) this.velocity.length = 5.;
    this.velocity.scale(.995);

this.position.add(this.velocity);
    if (this.position.x > this.controller.dimensions.x + this.dimensions.x * 4) {
      this.position.x = -this.dimensions.x;
    } else if (this.position.x < -this.dimensions.x * 4) {
      this.position.x = this.controller.dimensions.x + this.dimensions.x;
    }
    if (this.position.y > this.controller.dimensions.y + this.dimensions.y * 4) {
      this.position.y = -this.dimensions.y;
    } else if (this.position.y < -this.dimensions.y * 4) {
      this.position.y = this.controller.dimensions.y + this.dimensions.y;
    }
  }

get canvas() {
    return this._canvas;
  }

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

set velocity(value) {
    if (value instanceof Vector) {
      this._velocity = value;
    }
  }
  get velocity() {
    if (!(this._velocity instanceof Vector)) this.velocity = new Vector(0, 0);
    return this._velocity;
  }

set dimensions(value) {
    if (value instanceof Vector) {
      this._dimensions = value;
      this._halfDims = value.multiplyScalarNew(.5);
      this.canvas.width = this.dimensions.width + 2;
      this.canvas.height = this.dimensions.height + 2;
    }
  }
  get dimensions() {
    if (!(this._dimensions instanceof Vector)) this.dimensions = new Vector(50, 50);
    return this._dimensions;
  }
  get halfDims() {
    return this._halfDims;
  }

get ringWidth() {
    return 10;
  }}

class Stage {
  constructor(w, h) {
    this._canvas = document.createElement('canvas');
    this.resize(w, h);
    this.ctx = this.canvas.getContext('2d');

this.run = this.run.bind(this);
  }

run() {
    if (this.running === true) requestAnimationFrame(this.run);
    this.render();
  }

render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.particles.forEach(particle => {
      particle.solve();
      const pos = particle.position.subtractNew(particle.halfDims);
      this.ctx.drawImage(particle.canvas, pos.x, pos.y);
    });
  }

resize(w, h) {
    this.dimensions = new Vector(w, h);
  }

addParticle(particle) {
    if (particle instanceof Particle && particle.controller !== this) {
      if (particle.controller) particle.controller.removeParticle(particle);
      particle.controller = this;
      this.particles.push(particle);
    }
  }
  removeParticle(particle) {
    this.particles.forEach((_particle, i) => {
      if (_particle === particle) this.particles.splice(i, 1);
    });
  }

set dimensions(value) {
    if (value instanceof Vector) {
      this._dimensions = value;
      this._halfDims = value.multiplyScalarNew(.5);
      this.canvas.width = this.dimensions.width;
      this.canvas.height = this.dimensions.height;
    }
  }
  get dimensions() {
    if (!(this._dimensions instanceof Vector)) this.dimensions = new Vector(50, 50);
    return this._dimensions;
  }
  get halfDims() {
    return this._halfDims;
  }

get canvas() {
    return this._canvas;
  }

get particles() {
    if (!this._particles) this._particles = [];
    return this._particles;
  }

set running(value) {
    if (this.running === false && value === true) {
      this._running = true;
      requestAnimationFrame(this.run);
    }
  }
  get running() {
    return this._running === true;
  }}

const app = new Stage(window.innerWidth, window.innerHeight);

const numParticles = window.innerWidth * window.innerHeight * .00005;

for (let i = 0; i < numParticles; i++) {
  app.addParticle(new Particle(new Vector(Math.random() * window.innerWidth, Math.random() * window.innerHeight), new Vector(0, 0)));
}

const mousepos = new Vector(-1000, 0);
window.addEventListener('pointermove', e => {
  mousepos.x = e.clientX;
  mousepos.y = e.clientY;
});

document.body.appendChild(app.canvas);
window.addEventListener('resize', e => {
  app.resize(window.innerWidth, window.innerHeight);
});

app.running = true;

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg