Effet de particules de cœur battant avec JavaScript Canvas

10 0 Animations mambetovv Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Effet de particules de cœur battant avec JavaScript Canvas

Recommandé

2 November 2026

Jeu multijoueur de vol d'œufs en 3D en JavaScript et Canvas

16 September 2025

Modèle HTML de formulaire d'envoi de pièces TikTok

27 January 2026

Route de l'évasion

HTML

CSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #2c3e50
}

.box {
	width: 1000px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
}

#pinkboard {
	position: relative;
	margin: auto;
	height: 750px;
	width: 750px;
	animation: animate 1.2s infinite;
}

#pinkboard:before, #pinkboard:after {
	content: '';
	position: absolute;
	background: #6c5757;
	width: 100px;
	height: 160px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

#pinkboard:before {
	left: 100px;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
	box-shadow: 0 14px 28px rgba(186, 130, 130, 0.25),
				0 10px 10px rgba(165, 124, 124, 0.22);
}

#pinkboard:after {
	left: 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
}

@keyframes animate {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(.8);
	}
	60% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	background: rgba(0, 0, 0, 0.851);
}

canvas {
	position: absolute;
	width: 100%;
	height: 100%;
}

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 = '#f50b02';
    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'));

Comments 0

…