0

我正在使用画布进行粒子交互文本项目，我想让我的画布粒子“活着”，在它们之间的小空间上弹跳一点或移动一点......就像这个例子：

https://codepen.io/enricotoniato/pen/gbzJYO

我该怎么做？它都是用blotter.js 库制作的。

<script src="https://cdn.rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script>
<script src="https://cdn.rawgit.com/bradley/Blotter/3007fe6e/build/materials/fliesMaterial.js"></script>

  var canvas = document.querySelector("#scene"),
  ctx = canvas.getContext("2d"),
  particles = [],
  amount = 0,
  mouse = {x:0,y:0},
  radius = 1;

var colors = ["#f04e92","#bd1f57", "#f29077","#d75a4a"];

var ww = canvas.width = window.innerWidth;
var wh = canvas.height = window.innerHeight;

function Particle(x,y){
  this.x =  Math.random()*ww;
  this.y =  Math.random()*wh;
  this.dest = {
    x : x,
    y: y
  };
  this.r =  Math.random()*1 + 0.5;
  this.vx = (Math.random()-0.1)*20;
  this.vy = (Math.random()-0.1)*2;
  this.accX = 0;
  this.accY = 0;
  this.friction = Math.random()*0.001 + 0.94;

  this.color = colors[Math.floor(Math.random()*5)];
}

Particle.prototype.render = function() {


  this.accX = (this.dest.x - this.x)/200;
  this.accY = (this.dest.y - this.y)/200;
  this.vx += this.accX;
  this.vy += this.accY;
  this.vx *= this.friction;
  this.vy *= this.friction;

  this.x += this.vx;
  this.y +=  this.vy;

  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
  ctx.fill();

  var a = this.x - mouse.x;
  var b = this.y - mouse.y;

  var distance = Math.sqrt( a*a + b*b );
  if(distance<(radius*70)){
    this.accX = (this.x - mouse.x)/90;
    this.accY = (this.y - mouse.y)/90;
    this.vx += this.accX;
    this.vy += this.accY;
  }

}

function onMouseMove(e){
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}

function onTouchMove(e){
  if(e.touches.length > 0 ){
    mouse.x = e.touches[0].clientX;
    mouse.y = e.touches[0].clientY;
  }
}

function onTouchEnd(e){
mouse.x = -9999;
mouse.y = -9999;
}

function initScene(){
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.font = "550px ao4";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("a", ww/2, wh/2);

  var data  = ctx.getImageData(0, 0, ww, wh).data;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "screen";

  particles = [];
  for(var i=0;i<ww;i+=Math.round(ww/250)){
    for(var j=0;j<wh;j+=Math.round(ww/250)){
      if(data[ ((i + j*ww)*4) + 3] > 250){
        particles.push(new Particle(i,j));
      }
    }
  }
  amount = particles.length;

}

function onMouseClick(){
  radius++;
  if(radius ===5){
    radius = 0;
  }
}

function render(a) {
  requestAnimationFrame(render);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < amount; i++) {
    particles[i].render();
  }
};

scene.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("click", onMouseClick);
window.addEventListener("touchend", onTouchEnd);
initScene();
requestAnimationFrame(render);
4

0 回答 0