粒子运动 JS 画布 - Blotter.js

问题描述

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

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,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,ww,wh).data;
  ctx.clearRect(0,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,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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）