Заполнение формы с помощью холста частиц

Question

Просто интересно, может ли кто-нибудь указать мне в хорошем направлении, чтобы я мог заполнить неправильную форму частицами, рядами, которые тогда были бы анимированными.

Это ближайший пример я могу найти - http://www.wkams.com/#!/work/detail/coca-cola-music-vis

два способа я могу думать будет работать это работать плотность я хочу, сопоставьте, сколько частиц будет необходимо для каждой строки, а также позиции соответственно. Этот способ кажется довольно своевременным и не очень надежным.

Второй способ, который я не могу понять, как бы я это сделал, - это нарисовать фигуру на холсте, а затем наполнить форму частицами, удерживая их в ограничениях формы.

Любая общая концепция того, как это можно было бы сделать, будет очень признательна.

Сообщите мне, если это не имеет смысла.

Приветствия

Answer 1

Если бы я подойти к этой проблеме, я бы об этом так:

1. Создать объект, который может быть использован для «создания» частиц.
2. Создайте столько новых экземпляров этого объекта, сколько необходимо для необходимой плотности.

Итак, в основном, вся работа выполняется одним конструктором/объектом.

Вы хотите, чтобы этот объект предоставлял методы для рисования на холсте, сохранял его координаты x и y, его скорость и направление.

Затем вы можете создать экземпляры этого объекта с новым ключевым словом и установить координаты x и y для их распространения по сетке.

Answer 2

Вы можете использовать композитинга, чтобы ограничить частицы внутри неправильной формы

Для каждого цикла вашей анимации:

• Очистить холст.

• Нарисуйте свою нерегулярную форму на холсте.

• Установить композицию в 'source-atop'. Это приведет к появлению любых новых рисунков только в том случае, если какой-либо вновь нарисованный пиксель поверх существующего непрозрачного пикселя. В этом секрет, чтобы ваши частицы были нарисованы только внутри вашей неправильной формы.

• Нарисуйте свои ряды частиц. Все частицы появятся только внутри формы.

Вот пример кода и демонстрационный пример. Мой пример просто анимирует размер каждой строки частиц.Вы можете применить свои требования к дизайну для изменения размера позиции & позиции каждой строки.

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>