Efecto de partículas de corazón latiendo con JavaScript Canvas

9 0 mambetovv Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Efecto de partículas de corazón latiendo con JavaScript Canvas

Recomendado

22 May 2025

Deslizadores de tres figuras 3D

25 March 2025

Un código de andrej.social.network

29 April 2025

Sitio web con IA (NO FUNCIONA)

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

…