// Created by Modi // rotation angles var alpha = 0; var beta = 0; 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; // 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 + '

' + '

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

' + '

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

' + '

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

' + '

StartSlideX: ' + Math.round( startSlideX ) + '

' + '

StartSlideY: ' + Math.round( startSlideY ) + '

' + touchInfo ); } // something changed in the settings init everything function init( ) { var canvas = $( 'canvas' )[0]; canvas.width = width = window.innerWidth; canvas.height = height = window.innerHeight; halfWidth = width / 2; halfHeight = height / 2; ctx = canvas.getContext( '2d' ); rotationSpeed = 0; size = $('#size').prop('value'); fade = $('#fade').prop('value'); // handle the touch stuff canvas.ontouchstart = function( event ) { event.preventDefault(); showTouches( event ); if( event.touches.length == 1 ) { startSlide( event.touches[0].pageX, event.touches[0].pageY ); } }; 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 } slideIt( event.touches[0].pageX, event.touches[0].pageY ); }; canvas.ontouchend = function( event ) { touchInfo = ""; }; // handle the mouse drag stuff canvas.onmousedown = function( event ) { event.preventDefault(); startSlide( event.pageX, event.pageY ); 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, event.pageY ); addBall( event.pageX, event.pageY ); // add a ball } }; // handle the mouse click stuff canvas.onclick = canvas.ondblclick = function( event ) { event.preventDefault(); addBall( event.pageX, event.pageY ); // add a ball mouseIsDown = false; }; /* if(window.DeviceMotionEvent) { window.addEventListener("devicemotion", motion, false); } else { console.log("DeviceMotionEvent is not supported"); } if(window.DeviceOrientationEvent){ window.addEventListener("deviceorientation", orientation, false); }else{ console.log("DeviceOrientationEvent is not supported"); } */ animate( ); } function motion(event) { // console.log("Accelerometer: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z ); } function orientation(event) { // console.log("Magnetometer: " + event.alpha + ", " + event.beta + ", " + event.gamma ); } // ball locations var balls = []; var ax = 0; var ay = 0; var az = 9.81/60; function updatePosition ( ball ){ //update velocity ball.vx += ax; ball.vy += ay; ball.vz += az; //update position ball.x += ball.vx; ball.y += ball.vy; ball.z += ball.vz; } var dFilterStrength = 20; var dx = 0; var dy = 0; // 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*(width-x2)/width; var b = 256*(height-y2)/height; var g = 256*y2/height; c = 'rgb( '+r+','+g+','+b+')'; } var factor = 3; var thisdx = (x2-startSlideX)/factor; var thisdy = (y2-startSlideY)/factor; dx += (thisdx-dx)/dFilterStrength; dy += (thisdy-dy)/dFilterStrength 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, vx: dx-5, vy: 3, vz: dy-6, c: c } ); } var request; function animate( ) { request = window.requestAnimationFrame( animate ); ctx.fillStyle = 'rgba( 0, 0, 0,' + fade + ')'; ctx.fillRect( 0, 0, width, height ); cosAlpha = Math.cos( alpha ); sinAlpha = Math.sin( alpha ); sinBeta = Math.sin( beta ); cosBeta = Math.cos( beta ); // draw the grid var x, y; if ( $('#showWheel').prop('checked') ) { } // remove fallen though balls while( balls.length > 0 && balls[0].z > 1000 ) { balls.shift( ); } // move the balls forward for( var i=0; i', '

💦 Gravity Stuff 💦