// Created by Modi // quality variable. Standard quality - 1.00 var quality = 1.00; // 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; // fix the settings var rotationSpeedX = 1; var rotationSpeedY = 1; var angle = 40; // sliding motion var startSlideX; var startSlideY; var rollX = false; var rollY = 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: ' + balls.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 = 2; 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 } }; // handle the mouse click stuff canvas.onclick = canvas.ondblclick = function( event ) { event.preventDefault(); addBall( event.pageX, event.pageY ); // add a ball mouseIsDown = false; }; animate( ); } // ball locations var balls = []; function rotate(pitch, roll, yaw) { var cosa = cosAlpha; // Math.cos(yaw); var sina = sinAlpha; // Math.sin(yaw); var cosb = cosBeta; // Math.cos(pitch); var sinb = sinBeta; // Math.sin(pitch); var cosc = Math.cos(0); // roll var sinc = Math.sin(0); // roll var Axx = cosa*cosb; var Axy = cosa*sinb*sinc - sina*cosc; var Axz = cosa*sinb*cosc + sina*sinc; var Ayx = sina*cosb; var Ayy = sina*sinb*sinc + cosa*cosc; var Ayz = sina*sinb*cosc - cosa*sinc; var Azx = -sinb; var Azy = cosb*sinc; var Azz = cosb*cosc; for (var i = 0; i < points.length; i++) { var px = points[i].x; var py = points[i].y; var pz = points[i].z; points[i].x = Axx*px + Axy*py + Axz*pz; points[i].y = Ayx*px + Ayy*py + Ayz*pz; points[i].z = Azx*px + Azy*py + Azz*pz; } } // add another ball function addBall( x2, y2 ) { var px = (x2 - halfWidth)*cosAlpha; var pz = -(halfHeight - y2)*cosBeta; var py = -(halfHeight - y2)*sinBeta*sinAlpha; /* var x2 = x*cosAlpha - y*sinAlpha; var y2 = ( x*sinAlpha + y*cosAlpha )*sinBeta - z*cosBeta; */ // red // var x = x2*cosAlpha; // green // var y = ( -x2*sinAlpha + y2*sinBeta ); // blue // var z = -y2*cosBeta;// + x2*sinBeta; // yaw -> screen x var sina = sinAlpha; var cosa = cosAlpha; // roll -> not used var sinb = 0; var cosb = 1; // pitch -> screen y var sinc = sinBeta; var cosc = cosBeta; var Axx = cosa*cosb; var Axy = cosa*sinb*sinc - sina*cosc; var Axz = cosa*sinb*cosc + sina*sinc; var Ayx = sina*cosb; var Ayy = sina*sinb*sinc + cosa*cosc; var Ayz = sina*sinb*cosc - cosa*sinc; var Azx = -sinb; var Azy = cosb*sinc; var Azz = cosb*cosc; var x = Axx*px + Axy*py + Axz*pz; var y = Ayx*px + Ayy*py + Ayz*pz; var z = Azx*px + Azy*py + Azz*pz; balls.push( { x: x, y: y, z: z } ); } var request; function animate( ) { request = window.requestAnimationFrame( animate ); ctx.clearRect( 0, 0, width, height ); // get the settings rollX = $('#rollX').prop('checked'); rollY = $('#rollY').prop('checked'); var showWheel = $('#showWheel').prop('checked'); // rotate the whole thing or not if ( rollX ) rotationSpeedX *= 1; // slowdown else rotationSpeedX = 0; if ( rollY ) 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 ); // draw the grid var x, y; if ( showWheel ) { for( x = -100; x <= 100; x += 25 ) { drawGrid( x, -100, 100, x, 100, 100 ); drawGrid( x, -100, -100, x, 100, -100 ); drawGrid( x, 100, -100, x, 100, 100 ); drawGrid( x, -100, -100, x, -100, 100 ); } drawGrid( 100, -100, 0, 100, 100, 0 ); // middle horizontal drawGrid( 100, 0, -100, 100, 0, 100 ); // middle vertical drawGrid( -100, -100, 0, -100, 100, 0 ); // middle horizontal drawGrid( -100, 0, -100, -100, 0, 100 ); // middle vertical for( y = -100; y <= 100; y +=25 ) { drawGrid( -100, y, 0, 100, y, 0 ); drawGrid( -100, y, 100, 100, y, 100 ); drawGrid( -100, y, -100, 100, y, -100 ); } } // move the balls forward ctx.globalAlpha = 0.7; for( var i=0; i', '

🌐 Knäuel 🌐