Animation de particules en forme de cœur pulsant dans un canvas JavaScript

36 0 Animations mambetovv Suivre

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

Animation de particules en forme de cœur pulsant dans un canvas JavaScript

Recommandé

10 January 2026

Modèle HTML de portfolio de développeur Full Stack

19 May 2025

Montres connectées de luxe redéfinissant l'élégance et la technologie

22 July 2025

Icône de chargement CSS Spinner

HTML

CSS

window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));

var loaded = false;

var init = function () {
  if (loaded) return;
  loaded = true;

var mobile = window.isDevice;
  var koef = mobile ? 0.5 : 1;
  var canvas = document.getElementById('heart');
  var ctx = canvas.getContext('2d');
  var width = canvas.width = koef * innerWidth;
  var height = canvas.height = koef * innerHeight;
  var rand = Math.random;

ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.fillRect(0, 0, width, height);

var heartPosition = function (rad) {
    //return [Math.sin(rad), Math.cos(rad)];
    return [
      Math.pow(Math.sin(rad), 3),
      -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))
    ];
  };

var scaleAndTranslate = function (pos, sx, sy, dx, dy) {
    return [dx + pos[0] * sx, dy + pos[1] * sy];
  };

window.addEventListener('resize', function () {
    width = canvas.width = koef * innerWidth;
    height = canvas.height = koef * innerHeight;
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fillRect(0, 0, width, height);
  });

var traceCount = mobile ? 20 : 50;
  var pointsOrigin = [];
  var i;
  var dr = mobile ? 0.3 : 0.1;

for (i = 0; i < Math.PI * 2; i += dr)
    pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));

for (i = 0; i < Math.PI * 2; i += dr)
    pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));

for (i = 0; i < Math.PI * 2; i += dr)
    pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));

var heartPointsCount = pointsOrigin.length;

var targetPoints = [];

var pulse = function (kx, ky) {
    for (i = 0; i < pointsOrigin.length; i++) {
      targetPoints[i] = [];
      targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;
      targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;
    }
  };

var e = [];

for (i = 0; i < heartPointsCount; i++) {
    var x = rand() * width;
    var y = rand() * height;

e[i] = {
      vx: 0,
      vy: 0,
      R: 2,
      speed: rand() + 5,
      q: ~~(rand() * heartPointsCount),
      D: 2 * (i % 2) - 1,
      force: 0.2 * rand() + 0.7,
      f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",
      trace: []
    };

for (var k = 0; k < traceCount; k++)
      e[i].trace[k] = { x: x, y: y };
  }

var config = {
    traceK: 0.4,
    timeDelta: 0.01
  };

var time = 0;

var loop = function () {
    var n = -Math.cos(time);

pulse((1 + n) * .5, (1 + n) * .5);

time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;

ctx.fillStyle = "rgba(0,0,0,.1)";
    ctx.fillRect(0, 0, width, height);

for (i = e.length; i--;) {
      var u = e[i];
      var q = targetPoints[u.q];

var dx = u.trace[0].x - q[0];
      var dy = u.trace[0].y - q[1];

var length = Math.sqrt(dx * dx + dy * dy);

if (10 > length) {
        if (0.95 < rand()) {
          u.q = ~~(rand() * heartPointsCount);
        } else {
          if (0.99 < rand()) {
            u.D *= -1;
          }

u.q += u.D;
          u.q %= heartPointsCount;

if (0 > u.q) {
            u.q += heartPointsCount;
          }
        }
      }

u.vx += -dx / length * u.speed;
      u.vy += -dy / length * u.speed;

u.trace[0].x += u.vx;
      u.trace[0].y += u.vy;

u.vx *= u.force;
      u.vy *= u.force;

for (k = 0; k < u.trace.length - 1;) {
        var T = u.trace[k];
        var N = u.trace[++k];

N.x -= config.traceK * (N.x - T.x);
        N.y -= config.traceK * (N.y - T.y);
      }

ctx.fillStyle = u.f;

for (k = 0; k < u.trace.length; k++) {
        ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);
      }
    }

ctx.fillStyle = "rgba(255,255,255,1)";

for (i = u.trace.length + 13; i--;)
      ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);

window.requestAnimationFrame(loop, canvas);
  };

loop();
};

var s = document.readyState;

if (s === 'complete' || s === 'loaded' || s === 'interactive')
  init();
else
  document.addEventListener('DOMContentLoaded', init, false);

Comments 0

…