// Created by Modi // Created by Modi // sliding motion, based on screen coordinates var viewRotation = 0.01; // rotation acceleration var alpha = Math.PI/5+Math.PI; // X rotation var cosAlpha, sinAlpha; var rotationSpeedX = 0; var startSlideX; var beta = Math.PI/18; // Y rotation var sinBeta, cosBeta; var rotationSpeedY = 0; var startSlideY; var mouseIsDown = false; // engine template and settings var piston = []; var crankShaft = []; var pistonRod = []; var rodFactor = 0.7; var engineSize; var ballSize = 2.0; var fadeFactor = 0.6; var engineRotation = 0.01; var rotationSpeedEngine = 0; // store the coordinates of each touch var touchInfo = "" function storeTouches( event ) { touchInfo = "" for (let 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 ( ) { const thisFrameTime = ( thisLoop = new Date() ) - lastLoop; frameTime += ( thisFrameTime - frameTime ) / filterStrength; lastLoop = thisLoop; return ( 1000 / frameTime ).toFixed( 1 ); } // show the Info menu var infoCount = 0; function showInfo ( ) { const frameRate = getFrameRate( ); // has to be calculated every frame if ( (infoCount++)%3 != 0 ) return; const totalBalls = ( piston.length + pistonRod.length + crankShaft.length ) * 3; $( '#info' ).html( '

Frame Rate: ' + frameRate + '

' + '

Balls: ' + totalBalls + '

' + '

Rotation X: ' + rotationSpeedX.toFixed( 3 ) + '

' + '

Rotation Y: ' + rotationSpeedY.toFixed( 3 ) + '

' + touchInfo ); } // view and touch/mouse handling var width, halfWidth; var height, halfHeight; var ctx; function initViewAndTouch( ) { width = window.innerWidth; height = window.innerHeight; halfWidth = width / 2; halfHeight = height / 2; engineSize = Math.min( halfWidth, halfHeight ); var canvas = $( 'canvas' )[0]; canvas.width = width; canvas.height = height; ctx = canvas.getContext( '2d' ); viewRotation = $('#viewRotation').prop('value'); // handle the touch stuff canvas.ontouchstart = function( event ) { event.preventDefault(); storeTouches( event ); if( event.touches.length == 1 ) { startSlide( event.touches[0].pageX, event.touches[0].pageY ); } }; canvas.ontouchmove = function( event ) { event.preventDefault(); storeTouches( event ); if(event.touches.length==1) { slideView( 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 ); mouseIsDown = true; }; canvas.onmouseleave = canvas.onmouseup = function( event ) { mouseIsDown = false; }; canvas.onmousemove = function( event ) { event.preventDefault(); if ( mouseIsDown ) { slideView( event.pageX, event.pageY ); } }; // handle the click stuff canvas.onclick = function(event) { event.preventDefault(); mouseIsDown = false; }; // handle the click stuff canvas.ondblclick = function( event ) { rotationSpeedX = 0; rotationSpeedY = 0; rotationSpeedEngine = 0; } } // something changed in the settings initialize everything function init( ) { initViewAndTouch(); ballSize = $('#ballSize').prop('value'); fadeFactor = $('#fadeFactor').prop('value'); engineRotation = $('#engineRotation').prop('value'); createEngine( ); animate( ); } // rotation factors var Axx, Axy, Axz; var Ayx, Ayy, Ayz; var Azx, Azy, Azz; // initialize the rotation factors function initRotate( pitch, roll, yaw ) { const cosPitch = Math.cos( pitch ); // pitch: x const sinPitch = Math.sin( pitch ); const cosRoll = Math.cos( roll ); // roll: y const sinRoll = Math.sin( roll ); const cosYaw = Math.cos( yaw ); // yaw: z const sinYaw = Math.sin( yaw ); Axx = cosYaw*cosPitch; Axy = cosYaw*sinPitch*sinRoll - sinYaw*cosRoll; Axz = cosYaw*sinPitch*cosRoll + sinYaw*sinRoll; Ayx = sinYaw*cosPitch; Ayy = sinYaw*sinPitch*sinRoll + cosYaw*cosRoll; Ayz = sinYaw*sinPitch*cosRoll - cosYaw*sinRoll; Azx = -sinPitch; Azy = cosPitch*sinRoll; Azz = cosPitch*cosRoll; } // do the actual rotation function doRotate( px, py, pz ) { // pitch: x, roll: y, yaw: z return { x: Axx*px + Axy*py + Axz*pz, y: Ayx*px + Ayy*py + Ayz*pz, z: Azx*px + Azy*py + Azz*pz } } function createEngine( ) { piston = []; // reset the parts crankShaft = []; pistonRod = []; let step = 0; // piston for ( step = -0.1; step < 0.4; step += 0.1) { makeHorizontalCircle( piston, 0, 0, -engineSize*step, engineSize/4, 'green' ); } // piston rod for ( step = 0.1; step < rodFactor; step += 0.1) { makeHorizontalCircle( pistonRod, 0, 0, engineSize*step, engineSize/12, 'slateGrey' ); } for ( step = -0.1; step < 0.11; step += 0.05) { makeVerticalCircle( pistonRod, engineSize*step, 0, 0, engineSize/12, 'slateGrey' ); makeVerticalCircle( pistonRod, engineSize*step, 0, rodFactor*engineSize, engineSize/12, 'slateGrey' ); } // crank shaft for ( step = 0.1; step < 0.3; step += 0.1) { makeVerticalCircle( crankShaft, engineSize*step, 0, 0, engineSize/3, 'slateGrey' ); makeVerticalCircle( crankShaft, -engineSize*step, 0, 0, engineSize/3, 'slateGrey' ); } for ( step = 0.2; step < 0.3; step += 0.05) { makeVerticalCircle( crankShaft, engineSize*step, 0, 0, engineSize/16, 'navy' ); makeVerticalCircle( crankShaft, -engineSize*step, 0, 0, engineSize/16, 'navy' ); } } // create a horizontal circle function makeHorizontalCircle( part, x, y, z, radius, color ) { const step = 5 / radius; const maxAngle = $('#showPartially').prop('value'); for ( let angle = 0; angle < maxAngle; angle += step ) { const degree = angle * 360 / 2 / Math.PI; color = 'hsla( ' + degree + ',100% ,50%, 0.6 )'; addBall( part, x + radius*Math.cos( angle ), y + radius*Math.sin( angle ), z, color ); } } // create a horizontal circle function makeVerticalCircle( part, x, y, z, radius, color ) { const step = 5 / radius; const maxAngle = $('#showPartially').prop('value'); for ( let angle = 0; angle < maxAngle; angle += step ) { if ( radius > engineSize / 14 ) { // gradient only for big ones let degree = angle * 360 / 2 / Math.PI; color = 'hsla( ' + degree + ',100% ,50%, 0.6 )'; } addBall( part, x, y + radius*Math.cos( angle ), z + radius*Math.sin( angle ), color ); } } // add another ball function addBall( part, x, y, z, color ) { part.push( { x: x, y: y, z: z, c: color } ); } var request; function animate( ) { request = window.requestAnimationFrame( animate ); ctx.fillStyle = 'rgba( 0, 0, 0,' + fadeFactor + ')'; ctx.fillRect( 0, 0, width, height ); // rotate the whole thing or not rotationSpeedX += +viewRotation; rotationSpeedY += +viewRotation; updateViewAngle( rotationSpeedX, rotationSpeedY ); // draw the axis if ( $('#showAxis').prop('checked') ) { projectLine ( 'X', 0, 0, 0, engineSize, 0, 0, 'red' ); projectLine ( 'Y', 0, 0, 0, 0, engineSize, 0, 'green' ); projectLine ( 'Z', 0, 0, 0, 0, 0, engineSize, 'blue' ); } rotationSpeedEngine += +engineRotation; // offset X, Y, Z and delta Pitch, Roll, Yaw const phaseShift = 2 * Math.PI / 3; drawPiston ( -engineSize*0.55, 0, engineSize*0.5, 0, -phaseShift, 0 ); drawPiston ( 0, 0, engineSize*0.5, 0, 0, 0 ); drawPiston ( +engineSize*0.55, 0, engineSize*0.5, 0, phaseShift, 0 ); showInfo(); // draw a single piston // offset X, Y, Z and delta Pitch, Roll, Yaw function drawPiston ( oX, oY, oZ, dP, dR, dY ) { const engineRotationAngle = Date.now()/3e2 + dR + rotationSpeedEngine; const rodLength = rodFactor*engineSize; const rodJournalY = Math.sin( engineRotationAngle )*engineSize/4; const rodJournalZ = Math.cos( engineRotationAngle )*engineSize/4; const zPiston = rodJournalZ - Math.sqrt( rodLength*rodLength - rodJournalY*rodJournalY ); const rodAngle = Math.asin( rodJournalY/rodLength ); // piston rod initRotate( dP, rodAngle, dY ); rotateDrawPart( pistonRod, oX, oY, zPiston + oZ ); // piston drawPart( piston, oX, oY, zPiston + oZ ); // crank shaft initRotate( dP, engineRotationAngle, dY ); rotateDrawPart( crankShaft, oX, oY, oZ ); } // rotate a part function rotateDrawPart ( part, oX, oY, oZ ) { for( let i = 0; i < part.length; i++) { const ball = doRotate( part[i].x, part[i].y, part[i].z ); drawBall ( ball.x + oX, ball.y + oY, ball.z + oZ, part[i].c ); } } // draw a part function drawPart ( part, oX, oY, oZ ) { for( let i = 0; i < part.length; i++) { drawBall ( part[i].x + oX, part[i].y + oY, part[i].z + oZ, part[i].c ); } } // draw a single ball function drawBall( x, y, z, color ) { const p2D = project( x, y, z ); ctx.beginPath( ); ctx.fillStyle = color; ctx.fillRect( p2D.x, p2D.y, ballSize, ballSize ); }; // project a simple grid line function projectLine( text, x0, y0, z0, x1, y1, z1, color ) { const p0 = project( x0, y0, z0 ); const p1 = project( x1, y1, z1 ); drawLine( text, p0.x, p0.y, p1.x, p1.y, color ); }; // draw a simple line (axis) function drawLine( text, x0, y0, x1, y1, color ) { ctx.globalAlpha = 0.3; ctx.lineWidth = 2; ctx.strokeStyle = color; ctx.beginPath( ); ctx.moveTo( x0, y0 ); ctx.lineTo( x1, y1 ); ctx.stroke( ); ctx.font = "20px Arial"; ctx.fillStyle = color; ctx.textAlign = "center"; ctx.fillText( text, x1, y1 ); }; // put it in perspective function project( x, y, z ) { const x2 = x*cosAlpha - y*sinAlpha; const y2 = ( x*sinAlpha + y*cosAlpha )*sinBeta - z*cosBeta; return { x: halfWidth + x2, y: halfHeight - y2 } }; } // restart the stuff function resize( ) { window.cancelAnimationFrame( request ); init( ); }; // sliding motion function startSlide( x, y ) { startSlideX = x; startSlideY = y; }; // slide it function slideView( x, y ) { const dx = x - startSlideX; startSlideX = x; const dy = y - startSlideY; startSlideY = y; updateViewAngle( dx, dy ); rotationSpeedX += dx / 5; rotationSpeedY += dy / 5; }; // change view angle function updateViewAngle( dx, dy ) { alpha += dx / 800; beta += dy / 800; cosAlpha = Math.cos( alpha ); sinAlpha = Math.sin( alpha ); sinBeta = Math.sin( beta ); cosBeta = Math.cos( beta ); }; // document is loaded get the codes and set the call back $( document ).ready( function( ) { createEngine( ); setTimeout( function( ) { $( '.menuButton' ).click( function( ) { $( this ).toggleClass( 'show' ); $( '.menuSections' ).toggleClass( 'show' ); }); $( '.helpButton' ).click( function( ) { $( '.helpSections' ).toggleClass( 'show' ); }); $( '.infoButton' ).click( function( ) { $( '.infoSections' ).toggleClass( 'show' ); }); $( '.resetButton' ).click( function( ) { rotationSpeedX = 0; rotationSpeedY = 0; rotationSpeedEngine = 0; }); }, 600 ); });

“chill pill pistons”