用粒子畫布填充形狀

Question

我只是想知道是否有人可以向我指出一個正確的方向，使我可以用粒子填充不規則形狀的行，然后將其動畫化。

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

我認為可以工作的兩種方法是計算所需的密度，繪制出每行需要多少個粒子，並相應地定位。 這種方式似乎很及時，而且不是很可靠。

我似乎無法弄清楚該怎么做的第二種方法是在畫布上繪制形狀，然后用粒子生成填充形狀，使它們處於形狀約束中。

任何可以實現的一般概念將不勝感激。

讓我知道這是否沒有道理。

干杯

Answer 1

您可以使用合成將粒子限制為不規則形狀

對於動畫的每個循環：

• 清除畫布。

• 在畫布上繪制不規則形狀。

• 將合成設置為“源優先”。 僅當任何新繪制的像素位於現有不透明像素之上時，這才會導致出現任何新繪制 。 這是限制僅在不規則形狀內繪制粒子的秘密。

• 繪制一排粒子。 所有粒子只會出現在形狀內部。

這是示例代碼和演示。 我的示例只是為每個粒子行的大小設置動畫。 您可以應用設計要求來更改每行的大小和位置。

 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; } } 

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

 <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> 

Answer 2

如果我要解決此問題，我將以這種方式進行處理：

1. 創建一個可用於“創建”粒子的對象。
2. 根據所需密度創建該對象的盡可能多的新實例。

因此，基本上，所有工作都是由一個函數構造函數/對象完成的。

您希望該對象提供一些方法以將自身繪制到畫布上，存儲其x和y坐標，其速度和方向。

然后，您可以使用new關鍵字創建該對象的實例，並設置其x和y坐標以將它們分布在整個網格中。