Skip to content

Instantly share code, notes, and snippets.

Created February 20, 2016 07:54
Show Gist options
  • Save anonymous/eac9c2624536fce95ed2 to your computer and use it in GitHub Desktop.
Save anonymous/eac9c2624536fce95ed2 to your computer and use it in GitHub Desktop.
Heart particles
<canvas id='c'></canvas>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 400,
cx = cw / 2;
var ch = c.height = 400,
cy = ch / 2;
var frames = 0;
var R = 100;// for the heart path
var howMany = 300;// how many particles
var p = []; // particles array
var D = 25;
/*var colors = [170, 180, 190, 200, 210];*/
var colors = [340, 350, 360, 0, 10, 20];
ctx.fillStyle = "rgba(0,0,0,.05)";
var cx = [cw / 2, cw / 2 + R, cw / 2 - R];
var cy = [ch / 2, R, R];
function Particle() {
var a = (Math.random() * 2 * Math.PI);
var r = ~~(Math.random() * R);
var index = Math.floor(Math.random() * 3)
this.x = cx[index] + r * Math.cos(a);
this.y = cy[index] + r * Math.sin(a);
this.ix = (Math.random()) * (Math.random() < 0.5 ? -1 : 1); //positive or negative
this.iy = (Math.random()) * (Math.random() < 0.5 ? -1 : 1); //positive or negative
this.hue = colors[Math.round(Math.random() * colors.length) + 1]
}
function createParticle() {
var particle = new Particle();
p.push(particle);
}
for (var i = 0; i < howMany / 2; i++) {
createParticle();
}
function Draw() {
frames++
if (frames % 2 == 0 && p.length < howMany) {
createParticle();
}
ctx.fillRect(0, 0, cw, ch);
thePath(R, 1);// the current path for isPointInPath
ctx.strokeStyle = "hsla(0,50%,20%,.3)";
ctx.stroke();
for (var i = 0; i < p.length; i++) {
ctx.fillStyle = p[i].c;
if (ctx.isPointInPath(p[i].x, p[i].y)) {
p[i].x += p[i].ix;
p[i].y += p[i].iy;
} else {
p[i].ix = -1 * p[i].ix;
p[i].iy = -1 * p[i].iy;
p[i].x += p[i].ix;
p[i].y += p[i].iy;
}
}
compare();
window.requestAnimationFrame(Draw);
}
window.requestAnimationFrame(Draw);
function compare() {
for (var i = 0; i < p.length; i++) {
var a = p[i];
for (var j = i + 1; j < p.length; j++) {
var b = p[j];
var dist = distance(a, b);
if (dist < D) {
var c = {};
var alp = (D - dist) / D;
var hue = a.hue;
ctx.strokeStyle = "hsla(" + hue + ",87%, 44%," + alp + ")";
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
}
}
}
function distance(a, b) {
var ac = b.y - a.y;
var bc = b.x - a.x;
var ab = Math.sqrt(ac * ac + bc * bc);
return ab;
}
function thePath(R, r) {//draw a heart
ctx.beginPath();
ctx.moveTo(200, R);
ctx.arc(300, R, R - r, Math.PI, Math.PI * 0.23);
ctx.lineTo(200, 350);
ctx.arc(100, R, R - r, Math.PI * 0.77, 0);// NO stroke!!!
}
function randomIntFromInterval(mn, mx) {
return ~~(Math.random() * (mx - mn + 1) + mn);
}
body {
margin: 0;
overflow: hidden;
background: #eee;
font-family: Courier, monospace;
font-size: 14px;
background-color: #000;
}
#c {
display: block;
margin: calc(50vh - 175px) auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment