Scribd
Upload
4K views10 pages

Hi

The document describes a particle system that generates heart-shaped particles to represent love. It defines classes like Point, Particle, and ParticlePool to manage the particle positions, velocities, and rendering over time. The system uses requestAnimationFrame to continuously update and draw the particles on a canvas element based on elapsed time.

Uploaded by

Văn Nam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4K views10 pages

Hi

The document describes a particle system that generates heart-shaped particles to represent love. It defines classes like Point, Particle, and ParticlePool to manage the particle positions, velocities, and rendering over time. The system uses requestAnimationFrame to continuously update and draw the particles on a canvas element based on elapsed time.

Uploaded by

Văn Nam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

0 Transitional//EN">

<HTML>

<HEAD>
<meta charset="utf-8">
<TITLE> Love </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: #000;

}
.text{
color: #e3f309;
position: absolute;
height: 15%;

left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

canvas {

position: absolute;

width: 100%;

height: 100%;

</style>

</HEAD>

<BODY>

<h1 class="text" > Hi</h1>

<canvas id="pinkboard"></canvas>
<script>

/*

* Settings

*/

var settings = {

particles: {

length: 500, // maximum amount of particles

duration: 2, // particle duration in sec

velocity: 100, // particle velocity in pixels/sec

effect: -0.75, // play with this for a nice effect

size: 30, // particle size in pixels

},

};

/*

* RequestAnimationFrame polyfill by Erik Möller

*/

(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!


window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]
+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]
+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!
window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new
Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function()
{h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame)
{window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());

/*

* Point class

*/

var Point = (function() {

function Point(x, y) {

this.x = (typeof x !== 'undefined') ? x : 0;

this.y = (typeof y !== 'undefined') ? y : 0;

}
Point.prototype.clone = function() {

return new Point(this.x, this.y);

};

Point.prototype.length = function(length) {

if (typeof length == 'undefined')

return Math.sqrt(this.x * this.x + this.y * this.y);

this.normalize();

this.x *= length;

this.y *= length;

return this;

};

Point.prototype.normalize = function() {

var length = this.length();

this.x /= length;

this.y /= length;

return this;

};

return Point;

})();

/*

* Particle class

*/

var Particle = (function() {

function Particle() {

this.position = new Point();

this.velocity = new Point();

this.acceleration = new Point();

this.age = 0;

}
Particle.prototype.initialize = function(x, y, dx, dy) {

this.position.x = x;

this.position.y = y;

this.velocity.x = dx;

this.velocity.y = dy;

this.acceleration.x = dx * settings.particles.effect;

this.acceleration.y = dy * settings.particles.effect;

this.age = 0;

};

Particle.prototype.update = function(deltaTime) {

this.position.x += this.velocity.x * deltaTime;

this.position.y += this.velocity.y * deltaTime;

this.velocity.x += this.acceleration.x * deltaTime;

this.velocity.y += this.acceleration.y * deltaTime;

this.age += deltaTime;

};

Particle.prototype.draw = function(context, image) {

function ease(t) {

return (--t) * t * t + 1;

var size = image.width * ease(this.age / settings.particles.duration);

context.globalAlpha = 1 - this.age / settings.particles.duration;

context.drawImage(image, this.position.x - size / 2, this.position.y - size /


2, size, size);

};

return Particle;

})();

/*

* ParticlePool class
*/

var ParticlePool = (function() {

var particles,

firstActive = 0,

firstFree = 0,

duration = settings.particles.duration;

function ParticlePool(length) {

// create and populate particle pool

particles = new Array(length);

for (var i = 0; i < particles.length; i++)

particles[i] = new Particle();

ParticlePool.prototype.add = function(x, y, dx, dy) {

particles[firstFree].initialize(x, y, dx, dy);

// handle circular queue

firstFree++;

if (firstFree == particles.length) firstFree = 0;

if (firstActive == firstFree ) firstActive++;

if (firstActive == particles.length) firstActive = 0;

};

ParticlePool.prototype.update = function(deltaTime) {

var i;

// update active particles

if (firstActive < firstFree) {

for (i = firstActive; i < firstFree; i++)

particles[i].update(deltaTime);

}
if (firstFree < firstActive) {

for (i = firstActive; i < particles.length; i++)

particles[i].update(deltaTime);

for (i = 0; i < firstFree; i++)

particles[i].update(deltaTime);

// remove inactive particles

while (particles[firstActive].age >= duration && firstActive != firstFree) {

firstActive++;

if (firstActive == particles.length) firstActive = 0;

};

ParticlePool.prototype.draw = function(context, image) {

// draw active particles

if (firstActive < firstFree) {

for (i = firstActive; i < firstFree; i++)

particles[i].draw(context, image);

if (firstFree < firstActive) {

for (i = firstActive; i < particles.length; i++)

particles[i].draw(context, image);

for (i = 0; i < firstFree; i++)

particles[i].draw(context, image);

};

return ParticlePool;
})();

/*

* Putting it all together

*/

(function(canvas) {

var context = canvas.getContext('2d'),

particles = new ParticlePool(settings.particles.length),

particleRate = settings.particles.length / settings.particles.duration, //


particles/sec

time;

// get point on heart with -PI <= t <= PI

function pointOnHeart(t) {

return new Point(

160 * Math.pow(Math.sin(t), 3),

130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 *


Math.cos(4 * t) + 25

);

// creating the particle image using a dummy canvas

var image = (function() {

var canvas = document.createElement('canvas'),

context = canvas.getContext('2d');

canvas.width = settings.particles.size;

canvas.height = settings.particles.size;

// helper function to create the path

function to(t) {

var point = pointOnHeart(t);

point.x = settings.particles.size / 2 + point.x * settings.particles.size /


350;
point.y = settings.particles.size / 2 - point.y * settings.particles.size /
350;

return point;

// create the path

context.beginPath();

var t = -Math.PI;

var point = to(t);

context.moveTo(point.x, point.y);

while (t < Math.PI) {

t += 0.01; // baby steps!

point = to(t);

context.lineTo(point.x, point.y);

context.closePath();

// create the fill

context.fillStyle = '#FF968A';// mau trai tim

context.fill();

// create the image

var image = new Image();

image.src = canvas.toDataURL();

return image;

})();

// render that thing!

function render() {

// next animation frame

requestAnimationFrame(render);

// update time
var newTime = new Date().getTime() / 1000,

deltaTime = newTime - (time || newTime);

time = newTime;

// clear canvas

context.clearRect(0, 0, canvas.width, canvas.height);

// create new particles

var amount = particleRate * deltaTime;

for (var i = 0; i < amount; i++) {

var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());

var dir = pos.clone().length(settings.particles.velocity);

particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -


dir.y);

// update and draw particles

particles.update(deltaTime);

particles.draw(context, image);

// handle (re-)sizing of the canvas

function onResize() {

canvas.width = canvas.clientWidth;

canvas.height = canvas.clientHeight;

window.onresize = onResize;

// delay rendering bootstrap

setTimeout(function() {
onResize();

render();

}, 10);

})(document.getElementById('pinkboard'));

</script>

</BODY>

</HTML>

You might also like