用粒子帆布填充形状

Question

只是想知道是否有人能指出我的方向，我可以填充不规则形状的颗粒，行，然后可以动画。

这是我能找到的最接近的例子 - http://www.wkams.com/#!/work/detail/coca-cola-music-vis

我认为可行的两种方法是计算出我想要的密度，确定每行需要多少个粒子，并相应地定位。这种方式似乎非常及时，而且不是很强大。

第二种方法，我似乎无法弄清楚我将如何做到这一点，就是在画布上绘制形状，然后用粒子生成填充形状，使它们保持在形状的约束下。

非常感谢任何关于如何做到这一点的一般概念。

如果没有意义，请告诉我。

干杯

Answer 1

您可以使用合成将粒子限制在不规则形状内

对于动画的每个循环：

• 清除画布。

• 在画布上绘制不规则形状。

• 将合成设置为＆source-atop＆＃39;。只有当任何新绘制的像素位于现有的不透明像素上时，才会显示任何新图形。这是限制粒子仅在不规则形状内绘制的秘密。

• 绘制你的粒子行。所有粒子都只出现在形状内部。

这里是示例代码和演示。我的例子只是动画每个粒子行的大小。您可以应用您的设计要求来改变尺寸和尺寸。每一行的位置。

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
//
ctx.fillStyle='skyblue';

var PI2=Math.PI*2;
//
var w=132;
var h=479;
//
var x1=29;
var x2=177;
var x3=327;
//
var nextTime=0;
var delay=16*2;
var isFading=true;
var isComplete=false;
var opacity=100;

var imgCount=2;
var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/multple/coke.png";
var label=new Image();label.onload=start;label.src="https://dl.dropboxusercontent.com/u/139992952/multple/label.png";
function start(){
  console.log(imgCount);
  if(--imgCount>0){return;}

  requestAnimationFrame(animate);

  $('#again').click(function(){
    nextTime=0;
    delay=16*2;
    opacity=100;
    isFading=true;
  });
}

function overlay(clipX,x,alpha){
  ctx.globalAlpha=alpha;
  ctx.drawImage(img,clipX,0,w,h,x,0,w,h);
}

function fillParticles(radius,margin){
  var rr=radius*2+margin;
  ctx.save();
  ctx.clearRect(0,0,cw,ch);
  overlay(x3,50,1.00);   
  ctx.globalCompositeOperation='source-atop';
  ctx.beginPath();
  var rows=parseInt(ch/(rr))-2;
  var cols=parseInt(cw/rr);
  for(var r=0;r<rows;r++){
    for(var c=0;c<cols;c++){
      ctx.arc(c*rr,h-(r*rr),radius,0,PI2);
      ctx.closePath();
    }}
  ctx.fill();
  ctx.restore();
  overlay(x2,50,1.00);
}

function animate(time){

  if(!isComplete){ requestAnimationFrame(animate); }

  if(time<nextTime){return;}

  if(isFading){
    if(--opacity>0){
      ctx.clearRect(0,0,cw,ch);
      overlay(x1,50,opacity/100);
      overlay(x2,50,1.00);
    }else{
      isFading=false;
      overlay(x2,50,1.00);
      ctx.drawImage(label,70,210);            
      nextTime=time+1000;
    }
  }else{
    delay=1000;
    fillParticles(parseInt(Math.random()*8)+2,3);         
    ctx.drawImage(label,70,210);            
    nextTime=time+delay;
  }

}

＆＃13;

body{ background-color:white; padding:10px; }
#canvas{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=again>Again</button>
<br>
<canvas id="canvas" width=250 height=500></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我要解决这个问题，我会这样做：

1. 创建一个可用于“创建”粒子的对象。
2. 根据所需密度创建该对象的新实例。

所以，基本上，所有的工作都是由一个函数构造函数/对象完成的。

您希望此对象提供将自身绘制到画布的方法，存储其x和y坐标，其速度和方向。

然后，您可以使用new关键字创建此对象的实例，并设置它们的x和y坐标以将它们分布在网格中。