// Created by Modi // quality variable. Standard quality - 1.00 var quality = 1.00; // rotation angles var alpha = 0; // Math.PI; var beta = Math.PI/2; var cosAlpha = Math.cos( alpha ); var sinAlpha = Math.sin( alpha ); var sinBeta = Math.sin( beta ); var cosBeta = Math.cos( beta ); var mouseIsDown = false; // fix the settings var rotationSpeedX = 0; var rotationSpeedY = 0; var angle = 40; // sliding motion var startSlideX; var startSlideY; var doRoll = false; var doPitch = false; // 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: ' + clickedBalls.length + '

' + '

RotationX: ' + rotationSpeedX.toFixed( 3 ) + '

' + '

RotationY: ' + rotationSpeedY.toFixed( 3 ) + '

' + '

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

' + '

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

' + '

sinBeta: ' + sinBeta.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 = Math.round( quality * window.innerWidth ); canvas.height = height = Math.round( quality * window.innerHeight ); halfWidth = width / 2; halfHeight = height / 2; ctx = canvas.getContext( '2d' ); rotationSpeedX = 0; rotationSpeedY = 0; // 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, event.touches[0].pageY ); } }; canvas.ontouchmove = function( event ) { event.preventDefault(); showTouches( event ); if( event.touches.length == 1 ) { addBall( event.touches[0].pageX, event.touches[0].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 } }; canvas.onmousedown = function( event ) { event.preventDefault(); startSlide( event.pageX, event.pageY ); //addBall( event.pageX, event.pageY ); // add a ball mouseIsDown = true; }; // handle the mouse click stuff canvas.onclick = function( event ) { event.preventDefault(); addBall( event.pageX, event.pageY ); // add a ball mouseIsDown = false; }; canvas.onmouseup = function( event ) { event.preventDefault(); startSlideX = null; startSlideY = null; mouseIsDown = false; }; // handle the mouse double click stuff canvas.ondblclick = function( event ) { event.preventDefault(); resize( ); }; animate( ); } // ball locations var clickedBalls = []; var spatialBalls = []; function rotate( px, py, pz, pitch, roll, yaw ) { // pitch:x roll:y yaw:z var cosPitch = Math.cos( pitch ); var sinPitch = Math.sin( pitch ); var cosRoll = Math.cos( roll ); var sinRoll = Math.sin( roll ); var cosYaw = Math.cos( yaw ); var sinYaw = Math.sin( yaw ); var Axx = cosYaw*cosPitch; var Axy = cosYaw*sinPitch*sinRoll - sinYaw*cosRoll; var Axz = cosYaw*sinPitch*cosRoll + sinYaw*sinRoll; var Ayx = sinYaw*cosPitch; var Ayy = sinYaw*sinPitch*sinRoll + cosYaw*cosRoll; var Ayz = sinYaw*sinPitch*cosRoll - cosYaw*sinRoll; var Azx = -sinPitch; var Azy = cosPitch*sinRoll; var Azz = cosPitch*cosRoll; return { x: Axx*px + Axy*py + Axz*pz, y: Ayx*px + Ayy*py + Ayz*pz, z: Azx*px + Azy*py + Azz*pz } } // add another ball function addBall( x2, y2 ) { // on virtual screen x2 = x2 - halfWidth; y2 = halfHeight - y2; clickedBalls.push( { x: x2, y: y2, z: 0 } ); // rotated ball var p = rotate ( x2, y2, 0, beta, 0, alpha ); spatialBalls.push( { x: p.x, y: p.y, z: p.z } ); } var request; function animate( ) { request = window.requestAnimationFrame( animate ); ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; ctx.fillRect( 0, 0, width, height ); // get the settings doRoll = $('#doRoll').prop('checked'); doPitch = $('#doPitch').prop('checked'); var showWheel = $('#showWheel').prop('checked'); var showAxis = $('#showAxis').prop('checked'); var showDots = $('#showDots').prop('checked'); // rotate the whole thing or not if ( doRoll ) rotationSpeedX *= 1; // slowdown else rotationSpeedX = 0; if ( doPitch ) rotationSpeedY *= 1; // slowdown else rotationSpeedY = 0; slide( rotationSpeedX, rotationSpeedY ); cosAlpha = Math.cos( alpha ); sinAlpha = Math.sin( alpha ); sinBeta = Math.sin( beta ); cosBeta = Math.cos( beta ); // project the grid var x, y; if ( showWheel ) { for( x = -100; x <= 100; x += 25 ) { projectGrid( x, -100, 100, x, 100, 100 ); projectGrid( x, -100, -100, x, 100, -100 ); projectGrid( x, 100, -100, x, 100, 100 ); projectGrid( x, -100, -100, x, -100, 100 ); } projectGrid( 100, -100, 0, 100, 100, 0 ); // middle horizontal projectGrid( 100, 0, -100, 100, 0, 100 ); // middle vertical projectGrid( -100, -100, 0, -100, 100, 0 ); // middle horizontal projectGrid( -100, 0, -100, -100, 0, 100 ); // middle vertical for( y = -100; y <= 100; y +=25 ) { projectGrid( -100, y, 0, 100, y, 0 ); projectGrid( -100, y, 100, 100, y, 100 ); projectGrid( -100, y, -100, 100, y, -100 ); } } addFlash ( startSlideX, startSlideY ); if ( showDots ) { // project the dots ctx.globalAlpha = 0.7; for( var i=0; i

🙄 Dimensional Mapping 🙄