How to implement HTML5 Canvas glowing fluid particle animation

How to implement HTML5 Canvas glowing fluid particle animation: BY Willie24 Nov,2020; Tags:
HTML5 Canvas HTML5 Animation

Introduction

This time I bring you another very characteristic HTML5 Canvas particle animation. It can be seen as a fluid animation or a particle animation. At the same time, against a black background, the fluid particles will also appear glowing animation. Special effects.

How to implement HTML5 Canvas glowing fluid particle animation

Instructions

Css Code

html, body {
  background: black;
  margin:0;
  padding:0;
}

Js Code

function initParticle(i) {
	var iy = void 0,ih = void 0,rd = void 0,rt = void 0,cx = void 0,sy = void 0,x = void 0,y = void 0,s = void 0,rv = void 0,vx = void 0,vy = void 0,t = void 0,h = void 0,si = void 0,l = void 0,ttl = void 0;

	iy = i + 1;
	ih = 0.5 * i | 0;
	rd = rand(spawnRadius);
	rt = rand(TAU);
	cx = cos(rt);
	sy = sin(rt);
	x = center[0] + cx * rd;
	y = center[1] + sy * rd;
	rv = randIn(0.1, 1);
	s = randIn(1, 8);
	vx = rv * cx * 0.1;
	vy = rv * sy * 0.1;
	si = randIn(0.1, 1);
	h = randIn(160, 260);
	l = 0;
	ttl = randIn(50, 200);

	positions[i] = x;
	positions[iy] = y;
	velocities[i] = vx;
	velocities[iy] = vy;
	hues[ih] = h;
	sizes[ih] = si;
	speeds[ih] = s;
	lifeSpans[i] = l;
	lifeSpans[iy] = ttl;
}

VIEW NOW