A very interesting View

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),
    
    cen = {x:w/2, y:h/2},
    radiant = 0,
    particles = [],
    particleCount = 1,
    frame = 0,
    middleCover = ctx.createRadialGradient(cen.x, cen.y, 0, cen.x, cen.y, 20);

middleCover.addColorStop(0, 'rgba(0, 0, 0, .1)');
middleCover.addColorStop(1, 'rgba(0, 0, 0, 0)');

function anim(){
  window.requestAnimationFrame(anim);
  
  update();
}
anim();

function Particle(){
  this.x = cen.x;
  this.y = cen.y;
  this.vx = Math.cos(radiant);
  this.vy = Math.sin(radiant);
  
  this.color = 'hsl(rad, 80%, 50%)'
    .replace('rad', ((radiant/Math.PI)*180)|0);
}
Particle.prototype.update = function(){
  this.x += this.vx;
  this.y += this.vy;
  
  ctx.fillStyle = this.color;
  ctx.fillRect(this.x, this.y, 2, 2);
}
function update(){
  
  ctx.fillStyle = 'rgba(0, 0, 0, .04)';
  ctx.fillRect(0, 0, w, h);
  
  radiant += .1;
  radiant %= Math.PI*2;
  
  ++frame;
  if(frame > particleCount){
    frame = 0;
    particles.push(new Particle);
  }
  
  for(var i = 0; i < particles.length; ++i){
    var par = particles[i];
    par.update();
    
    if(par.x > w || par.x < 0 || par.y > h || par.y < 0){
      particles.splice(i, 1);
      --i;
    }
  }
  
  ctx.fillStyle = middleCover;
  ctx.beginPath();
  ctx.arc(cen.x, cen.y, 20, 0, Math.PI*2);
  ctx.fill();
}

document.addEventListener('click', function(){
  for(var i = 0; i < 10; ++i) update();
})


for(var i = 0; i < 100; ++i) update();

See the Pen Spiral of rainbowy particles by towc (@MateiGCopot) on CodePen.

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注