// Created by Modi // rotation angles var alpha = Math.PI/8; var beta = Math.PI/18; var cosAlpha = Math.cos( alpha ); var sinAlpha = Math.sin( alpha ); var sinBeta = Math.sin( beta ); var cosBeta = Math.cos( beta ); var mouseIsDown = false; var size = 2.0; var fade = 0.6; var slow = 0.01; // fix the settings var rotationSpeed = 0; // sliding motion var startSlideX; var startSlideY; // setup the canvas var width, halfWidth; var height, halfHeight; var ctx; var touchInfo = "" function showTouches( event ) { touchInfo = "" for (var i = 0; i < event.touches.length; i++) { touchInfo += '

Touch ' + i + ' X -> ' + Math.round( event.touches[i].pageX ) + ' Y -> ' + Math.round( event.touches[i].pageY ) + '

'; } } // calculate the frame rate per second // The higher filterStrength, the less the fps will reflect temporary variations // A value of 1 will only keep the last value var filterStrength = 60; var frameTime = 0, lastLoop = new Date(), thisLoop; function getFrameRate ( ) { var thisFrameTime = ( thisLoop = new Date() ) - lastLoop; frameTime += ( thisFrameTime - frameTime ) / filterStrength; lastLoop = thisLoop; return ( 1000 / frameTime ).toFixed( 1 ); } function showInfo ( ) { $( '#info' ).html( '

Frame Rate: ' + getFrameRate( ) + '

' + '

Balls: ' + balls.length + '

' + '

Rotation: ' + rotationSpeed.toFixed( 3 ) + '

' + '

sinAlpha: ' + sinAlpha.toFixed( 3 ) + '

' + '

cosAlpha: ' + cosAlpha.toFixed( 3 ) + '

' + '

cosBeta: ' + cosBeta.toFixed( 3 ) + '

' + touchInfo ); } // something changed in the settings init everything function init( ) { width = window.innerWidth; height = window.innerHeight; halfWidth = width / 2; halfHeight = height / 2; var canvas = $( 'canvas' )[0]; canvas.width = width; canvas.height = height; ctx = canvas.getContext( '2d' ); size = $('#size').prop('value'); fade = $('#fade').prop('value'); slow = $('#slow').prop('value'); // handle the touch stuff canvas.ontouchstart = function( event ) { event.preventDefault(); showTouches( event ); if( event.touches.length == 1 ) { addBall( event.touches[0].pageX, event.touches[0].pageY ); // add a ball startSlide( event.touches[0].pageX ); } }; canvas.ontouchmove = function( event ) { event.preventDefault(); showTouches( event ); for( var i = 0; i < event.touches.length; i++ ) { addBall( event.touches[i].pageX, event.touches[i].pageY ); // add a ball } if(event.touches.length==1) { slideIt( event.touches[0].pageX ); } }; canvas.ontouchend = function( event ) { touchInfo = ""; }; // handle the mouse drag stuff canvas.onmousedown = function( event ) { event.preventDefault(); startSlide( event.pageX ); addBall( event.pageX, event.pageY ); // add a ball mouseIsDown = true; }; canvas.onmouseleave = canvas.onmouseup = function( event ) { mouseIsDown = false; }; canvas.onmousemove = function( event ) { event.preventDefault(); if ( mouseIsDown ) { slideIt( event.pageX ); addBall( event.pageX, event.pageY ); // add a ball } }; // handle the click stuff canvas.onclick = function(event) { event.preventDefault(); addBall( event.pageX, event.pageY ); // add a ball mouseIsDown = false; }; // handle the click stuff canvas.ondblclick = function( event ) { rotationSpeed = 2; } animate( ); } // ball locations var balls = []; // add another ball function addBall( x2, y2 ) { var c = 'slategrey'; if($('#randomColor').prop('checked')) { c = '#' + Math.floor ( Math.random( ) * 16777215 ).toString( 16 ); } if($('#smoothColor').prop('checked')) { var r = 256*x2/width; var b = 256*(height-y2)/height; var g = 256*y2/height; c = 'rgb( '+r+','+g+','+b+')'; } y2 = halfHeight - y2; x2 = x2 - halfWidth; var x = x2*cosAlpha; var y = -x2*sinAlpha; var z = -y2; balls.push( { x: x, y: y, z: z, c: c } ); } var request; function animate( ) { request = window.requestAnimationFrame( animate ); ctx.fillStyle = 'rgba( 0, 0, 0,' + fade + ')'; ctx.fillRect( 0, 0, width, height ); // rotate the whole thing or not rotationSpeed += +slow; slide( rotationSpeed ); cosAlpha = Math.cos( alpha ); sinAlpha = Math.sin( alpha ); sinBeta = Math.sin( beta ); cosBeta = Math.cos( beta ); // draw the wheel if ( $('#showWheel').prop('checked') ) { for( let i = -100; i <= 100; i += 200 ) { drawGrid( i, -100, 100, i, 100, 100 ); drawGrid( i, -100, -100, i, 100, -100 ); drawGrid( i, 100, -100, i, 100, 100 ); drawGrid( i, -100, -100, i, -100, 100 ); drawGrid( -100, i, 100, 100, i, 100 ); drawGrid( -100, i, -100, 100, i, -100 ); } } // draw the balls for( let i=0, max=balls.length; i', '

🌪 Tornado 🌪