How to Make 3D Animation of Particle Spiral Lines in HTML5 Canvas

How to Make 3D Animation of Particle Spiral Lines in HTML5 Canvas: BY Robert4 Nov,2020; Tags:
HTML5 Canvas HTML5 Animation

Introduction

Today I will bring you a cool HTML5 Canvas animation, which consists of several basic animations, one is particle animation and the other is spiral animation. The first is to combine the pixel particles into a spiral line on the canvas drawing board, and then use JavaScript to move the particles to visually form an animation special effect of the spiral line fluctuation.

How to Make 3D Animation of Particle Spiral Lines in HTML5 Canvas

Instructions

Css Code

body {
  background: #203656;
  margin: 0;
}
#target { background: #203656; }

Js Code

var c = createjs, stage = new c.StageGL("target"), t=0, count=0, w, h, max, min;
var dotR = 8, amp0Amt=1, amp1Amt=0.2, maxDots=2000, speed=2.5;
c.Ticker.timingMode = c.Ticker.RAF;
c.Ticker.on("tick", tick);
stage.setClearColor("#201624");

var dotTemplate, dots=[];

while (dots.length < maxDots) {
	getDot();
}

function tick(evt) {
	var d = evt.delta;

	var fov = min*1;
	for (var i=0, l=dots.length; i<l; i++) {
		var dot = dots[i];
		var t = (dot.t += d*0.0001*speed*dot.speed);
		var x = t%1*w-w/2;
		x += Math.cos(t*dot.p1)*min*dot.a1*amp1Amt;
		var y = Math.sin(t*Math.PI*4+Math.PI)*min*dot.r*0.25;
		y += Math.sin(t*dot.p1)*min*dot.a1*amp1Amt
		var z = Math.cos(t*Math.PI*4+Math.PI)*min*dot.r*0.25;
		z += Math.cos(t*dot.p1)*min*dot.a1*amp1Amt;
		
		var s = fov/(z+fov);
		x *= s;
		y *= s;
		
		dot.x = x+w/2;
		dot.y = y+h/2;
		dot.getChildAt(1).alpha = 1-s;
		
		dot.scaleX = dot.scaleY = Math.pow(s*(1+dot.size),2)*0.3;
	}
	
	stage.update();
}

VIEW NOW