Buncha Dots

It's a buncha dots

by asemahle

HTML

<canvas></canvas>

CSS

*{margin:24;}
body{background:#222;text-align:center} 
canvas{
  background: rgba(255,255,255,0.9);
  border:5px solid rgba(0,0,0,0.5);
  display: inline-block;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
 
canvas.width = 300;
canvas.height = 300;

Number.prototype.mod = function(n) {
    return ((this%n)+n)%n;
};

class Particle {
	constructor(x,y,weight,friction) {
  	this.x = x;
    this.y = y;
    this.weight = weight;
    this.friction = friction;
    this.vx = 0;
    this.vy = 0;
    this.others = [];
  }
  
  force(fx, fy) {
  	this.vx +=  fx/this.weight;
    this.vy += fy/this.weight;
    this.vx *= this.friction;
    this.vy *= this.friction;
    this.x += this.vx;
    this.y += this.vy;
    this.x = this.x.mod( canvas.width );
    this.y = this.y.mod( canvas.height );
  }
  
  draw(ctx) {
  	let c1 = Math.floor((this.x * 256 / canvas.width).mod(256));
    let c2 = Math.floor((this.y * 256 / canvas.height).mod(256));
    let c3 = 255;
    ctx.fillStyle = `rgba(${c1}, ${c2}, ${c3}, 0.2)`;
    console.log(ctx.fillStyle,  `  rgba(${c1},${c2},${c3},0.2)`);
  	ctx.beginPath();
    ctx.arc(this.x, this.y, this.weight, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
  }
}

let particles = [];
for(let i=0;i<10;i++) {
	let x = Math.random() * canvas.width;
  let y = Math.random() * canvas.height;
  let weight = Math.random() * 5 + 5;
  let friction = 1 - (Math.random() / 20);
	particles.push(new Particle(x,y,weight,friction));
}

(function loop(){
  ctx.fillStyle = 'rgba(225,225,225,0.01)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle = 'rgba(0,0,0,1)';
  let fx = (Math.random() - 0.5) * 5;
  let fy = (Math.random() - 0.5) * 5;
  for(let p of particles) {
  	p.force(fx, fy);
  	p.draw(ctx);
  }
  window.requestAnimationFrame(loop);
})();