JSFiddle - React, Tailwind, and code Playground

by andyw_

JavaScript

/**
 * Draws a particle sphere/spiral on canvas.
 * 
 * @author Hakim El Hattab | http://hakim.se
 */
(function(){
	var d = document,
		canvas = d.body.appendChild( d.createElement( 'canvas' ) ),
		context = canvas.getContext( '2d' ),
		time = 0,
		w = 5,
		h = 5,
		cos = Math.cos,
		sin = Math.sin,
		PI = Math.PI;
	
	function resize() {
		canvas.width = w = innerWidth;
		canvas.height = h = innerHeight;
	}

	// Monitor browser resize
	addEventListener( 'resize', resize, false );

	// Initial size
	resize();
	
	// The main animation loop
	setInterval( function() {
		context.clearRect( 0, 0, w, h );
		context.fillStyle = 'rgba(0,0,0,1)';
		context.globalCompositeOperation = 'lighter';
		
		time += .1;
		
		// The number of particles to generate
		i = 5000;
		
		while( i-- ) {
			// The magic
			r = ( ( w + h ) * 0.2 ) * ( cos( ( time + i ) * ( .4 + ( ( sin(time*0.00002) / PI ) * .5 ) ) ) / PI );
			
			context.fillRect( sin(i) * r + (w/2), 
							  cos(i) * r + (h/2), 
							  1, 
							  1 );
		}
	}, 16 );
})()