//"use strict"; // Created by Modi /* // get the lot sizes -0 +1 +2 +3 +4 +5 +6 +7 +8 +9 double daLotSizesBase[ ] = { 0.01, 0.01, 0.01, 0.01, 0.02, 0.02, 0.03, 0.03, 0.03, 0.03 }; double daLotSizesAdd[ ] = { 0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08, 0.09, 0.11 }; double daLotSizesPlus[ ] = { 0.01, 0.02, 0.03, 0.04, 0.06, 0.07, 0.09, 0.10, 0.12, 0.14 }; */ // Relative Relative Ballance % // lot sizes Orders -0 +10 +20 +30 +40 +50 +60 +70 +80 +90 +100 var daLotSizes = [ [ 1, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 0 ], [ 32, 7, 7, 7, 7, 14, 14, 21, 21, 21, 21, 0 ], [ 52, 14, 14, 21, 28, 35, 42, 49, 56, 77, 77, 0 ], [ 85, 21, 28, 35, 42, 49, 56, 63, 70, 99, 99, 0 ], [ 100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] ]; // define the mapping pane var RelativeOrdersSpot = 0; var lotLine = [ ]; // will store all lot drawn so far // calculate the lot size based on the total orders and the relative ballance function calculateLot ( dRelativeOrders, dRelativeBalance ) { dRelativeOrders = Math.abs ( dRelativeOrders ); // figure out between which two slot the orders are let iEndOrderSlot = 0; const iOrdersSlots = daLotSizes.length; for ( ; iEndOrderSlot < iOrdersSlots; iEndOrderSlot++ ) { if ( dRelativeOrders < daLotSizes[ iEndOrderSlot ][ RelativeOrdersSpot ] ) break; } let iStartOrderSlot = iEndOrderSlot - 1; if ( iStartOrderSlot < 0 ) iStartOrderSlot = 0; if ( iEndOrderSlot > iOrdersSlots - 1 ) iEndOrderSlot = iOrdersSlots - 1; // figure out between which two slots the balance is let iEndBallanceSlot = 1; const iBallanceSlots = daLotSizes[ 0 ].length - 1; // ignore the lot size const dBallanceStep = 100 / ( iBallanceSlots + 1 ); if ( dRelativeBalance > 100 ) iEndBallanceSlot = iBallanceSlots + 1; else if ( dRelativeBalance > 0 ) { let dBallanceBorder = dBallanceStep; for ( ; dRelativeBalance > dBallanceBorder; iEndBallanceSlot++, dBallanceBorder += dBallanceStep ) { if ( iEndBallanceSlot > iBallanceSlots ) break; // hit the end } } else iEndBallanceSlot = 1; let iStartBallanceSlot = iEndBallanceSlot - 1; if ( iStartBallanceSlot < 1 ) iStartBallanceSlot = 1; if ( iEndBallanceSlot > iBallanceSlots ) iEndBallanceSlot = iBallanceSlots; // adjust the lot differences so that to curve is smooth let dLotSize = 0; if ( dRelativeBalance > -100 ) { // start ballance slot side let dLot1 = interpolateLot ( daLotSizes[ iStartOrderSlot ][ iStartBallanceSlot ], daLotSizes[ iEndOrderSlot ][ iStartBallanceSlot ], daLotSizes[ iStartOrderSlot ][ RelativeOrdersSpot ], daLotSizes[ iEndOrderSlot ][ RelativeOrdersSpot ], dRelativeOrders ); // end ballance slot side let dLot2 = interpolateLot ( daLotSizes[ iStartOrderSlot ][ iEndBallanceSlot ], daLotSizes[ iEndOrderSlot ][ iEndBallanceSlot ], daLotSizes[ iStartOrderSlot ][ RelativeOrdersSpot ], daLotSizes[ iEndOrderSlot ][ RelativeOrdersSpot ], dRelativeOrders ); // order slot side dLotSize = interpolateLot ( dLot1, dLot2, iStartBallanceSlot * dBallanceStep, iEndBallanceSlot * dBallanceStep, dRelativeBalance ); } return dLotSize; } // smooth out the lot curves function interpolateLot( lot1, lot2, value1, value2, actualValue ) { if ( value2 - value1 !== 0 ) { return lot1 + ( lot2 - lot1 ) * ( actualValue - value1 ) / ( value2 - value1 ); } else return lot1; } // sliding motion, based on screen coordinates var rotationSpeedX = 0; // X rotation var startSlideX; var alpha = Math.PI/2; var beta = Math.PI/2; var rotationSpeedY = 0; // Y rotation var startSlideY; var mouseIsDown = false; // parts template and settings var outerBlock = [ ]; var parts = [ ]; var blockSize; var ballSize = 2.0; var lampDistance; var viewerDistance; // 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 = 20; var frameTime = 0, lastLoop = new Date( ), thisLoop; function getFrameRate ( ) { const thisFrameTime = ( thisLoop = new Date ( ) ) - lastLoop; frameTime += ( thisFrameTime - frameTime ) / filterStrength; lastLoop = thisLoop; return 1000 / frameTime; } // show the Info menu var infoCount = 0; function showInfo ( ) { if ( ( infoCount++ ) % 3 !== 0 ) return; const frameRate = getFrameRate ( ) * 3; // has to be calculated every frame $( '#info' ).html ( '

Frame Rate: ' + frameRate.toFixed ( 1 ) + '

' + '

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; blockSize = Math.min ( halfWidth, halfHeight ) * 0.8; lampDistance = -blockSize; // from 0 in negative Z direction viewerDistance = 3 * blockSize; var canvas = $( 'canvas' )[ 0 ]; canvas.width = width; canvas.height = height; ctx = canvas.getContext ( '2d', { alpha: false } ); // 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 ( ) { touchInfo = ""; }; // handle the mouse drag stuff canvas.onmousedown = function ( event ) { event.preventDefault ( ); startSlide ( event.pageX, event.pageY ); mouseIsDown = true; }; canvas.onmousemove = function ( event ) { event.preventDefault ( ); if ( mouseIsDown ) { slideView( event.pageX, event.pageY ); } }; canvas.onmouseleave = function ( ) { mouseIsDown = false; }; canvas.onmouseup = function ( ) { mouseIsDown = false; }; // handle the click stuff canvas.onclick = function ( ) { mouseIsDown = false; }; // handle the click stuff canvas.ondblclick = function ( ) { rotationSpeedX = 0; rotationSpeedY = 0; }; } // something changed in the settings initialize everything function init ( ) { initViewAndTouch ( ); createParts ( ); reInit ( ); animate ( ); } function reInit ( ) { ballSize = $( '#ballSize' ).prop ( 'value' ); } // calculate the lot to invest function drawLotManual ( ) { drawLot ( $( '#lotSlot' ).prop ( 'value' ), $( '#relativeBalance' ).prop ( 'value' ) ); } function drawLot ( dLotSlot, dBalanceSlot ) { const ballDistance = blockSize / 100; let dLot = calculateLot ( dLotSlot, dBalanceSlot ) * -ballDistance; dBalanceSlot *= ballDistance; dLotSlot *= ballDistance; addBall ( lotLine, 'DarkMagenta', 1.0, dBalanceSlot, dLotSlot, dLot ); } function drawAllLots ( ) { for ( let dBalanceSlot = -120; dBalanceSlot < 121; dBalanceSlot += 4 ) { for ( let dLotSlot = -120; dLotSlot < 121; dLotSlot += 4 ) { drawLot ( dLotSlot, dBalanceSlot ); } } } // create all involved parts function createParts ( ) { parts = []; // reset the parts outerBlock = []; let singlePart = {}; let balls = [ ]; makeSlotLots ( balls, blockSize ); singlePart[ 'balls' ] = balls; parts.push ( singlePart ); reInit ( ); // create the Mapping Pane function makeSlotLots ( part ) { const ballDistance = blockSize / 100; // axis for ( let iSlot = -100; iSlot < 101; iSlot += 5 ) { addBall ( part, 'DarkGoldenRod', 0.7, 0, iSlot * ballDistance, 0 ); } for ( let iRelativeBallance = -100; iRelativeBallance < 101; iRelativeBallance += 5 ) { if ( iRelativeBallance < 0 ) addBall ( part, 'Red', 0.7, iRelativeBallance * ballDistance, 0, 0 ); else addBall ( part, 'Green', 0.7, iRelativeBallance * ballDistance, 0, 0 ); } const iOrdersSlots = daLotSizes.length; // negative balance for ( let iSlot = 0; iSlot < iOrdersSlots; iSlot++ ) { for ( let iRelativeBallance = 0; iRelativeBallance < 100; iRelativeBallance += 5 ) { let dBalanceSlot = iRelativeBallance * ballDistance; let dLotSlot = daLotSizes[ iSlot ][ RelativeOrdersSpot ] * ballDistance; let dLot = daLotSizes[ iSlot ][ 1 ] * -ballDistance; addBall ( part, 'Blue', 1.0, -dBalanceSlot, dLotSlot, dLot ); addBall ( part, 'Blue', 1.0, -dBalanceSlot, -dLotSlot, dLot ); } } // positive balance const maximumDimensions = daLotSizes[0].length; const step = 100 / maximumDimensions; for ( let iSlot = 0; iSlot < iOrdersSlots; iSlot++ ) { for ( let iRelativeBallance = 1; iRelativeBallance < maximumDimensions; iRelativeBallance++ ) { let dBalanceSlot = iRelativeBallance * ballDistance * step; let dLotSlot = daLotSizes[ iSlot ][ RelativeOrdersSpot ] * ballDistance; let dLot = daLotSizes[ iSlot ][ iRelativeBallance ] * -ballDistance; addBall ( part, 'Green', 1.0, dBalanceSlot, dLotSlot, dLot ); addBall ( part, 'Green', 1.0, dBalanceSlot, -dLotSlot, dLot ); } } // intial lot addBall ( lotLine, 'Yellow', 1.0, 0, 0, 0 ); } function make3dLine ( part, x1, y1, z1, x2, y2, z2 ) { let deltaX = x2 - x1; let deltaY = y2 - y1; let deltaZ = z2 - z1; const lineLength = Math.sqrt ( deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ ); const numberOfPoints = lineLength / 5; deltaX /= numberOfPoints; deltaY /= numberOfPoints; deltaZ /= numberOfPoints; let deltaDegree = 360 / numberOfPoints; // rainbow for ( let point = -1, degree = 0; point < numberOfPoints - 1; point++, degree += deltaDegree ) { let color = 'hsla(' + Math.floor ( degree ) + ',100%,50%)'; addBall ( part, color, 0.6, x1, y1, z1 ); x1 += deltaX; y1 += deltaY; z1 += deltaZ; } } createContainingBox ( ); createLamp ( ); // count the balls totalBalls = outerBlock.length; for( let i = 0; i < parts.length; i++ ) { totalBalls += parts[ i ].balls.length; } } // create the containing box function createContainingBox ( ) { if ( !$( '#showBox' ).prop ( 'checked' ) ) return; // create the actual box for ( let step = -1; step <= 1; step += 0.2 ) { var sizeStep = blockSize*step; addBall ( outerBlock, 'rgba(140,140,140)', 0.7, blockSize, blockSize, sizeStep ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, blockSize, -blockSize, sizeStep ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, -blockSize, blockSize, sizeStep ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, -blockSize, -blockSize, sizeStep ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, sizeStep, blockSize, blockSize ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, sizeStep, -blockSize, blockSize ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, sizeStep, blockSize, -blockSize ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, sizeStep, -blockSize, -blockSize ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, blockSize, sizeStep, blockSize ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, -blockSize, sizeStep, blockSize ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, blockSize, sizeStep, -blockSize ); addBall ( outerBlock, 'rgba(140,140,140)', 0.7, -blockSize, sizeStep, -blockSize ); } } // create the lamp function createLamp ( ) { addBall ( outerBlock, 'lightYellow', 1.0, 0, 0, -blockSize ); addBall ( outerBlock, 'lightYellow', 1.0, 1, 1, -blockSize-2 ); addBall ( outerBlock, 'lightYellow', 1.0, -1, -1, -blockSize-2 ); addBall ( outerBlock, 'lightYellow', 1.0, 0, 0, -blockSize-2 ); } // add another ball function addBall ( part, color, alpha, x, y, z ) { part.push ( { x: x, y: y, z: z, size: +ballSize, color: color, alpha: +alpha } ); } // initialize the rotation factors var Axx, Axy, Axz; var Ayx, Ayy, Ayz; var Azx, Azy, Azz; function initRotate3d ( pitch, roll, yaw ) { const cosPitch = Math.cos ( pitch ); // pitch: y const sinPitch = Math.sin ( pitch ); const cosRoll = Math.cos ( roll ); // roll: x 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 doRotate3d ( ball ) { // pitch: x, roll: y, yaw: z return { x: Axx * ball.x + Axy * ball.y + Axz * ball.z, y: Ayx * ball.x + Ayy * ball.y + Ayz * ball.z, z: Azx * ball.x + Azy * ball.y + Azz * ball.z }; } let request; function animate ( ) { request = window.requestAnimationFrame ( animate ); ctx.globalAlpha = 1.0; ctx.fillStyle = 'rgba(0,0,0,' + $( '#fadeFactor' ).prop ( 'value' ) + ')'; ctx.fillRect ( 0, 0, width, height ); // rotate the whole thing or not updateViewAngle ( rotationSpeedX, rotationSpeedY ); // draw the axis if ( $( '#showAxis' ).prop( 'checked' ) ) { projectLine ( 'X', 0, 0, 0, blockSize, 0, 0, 'red' ); projectLine ( 'Y', 0, 0, 0, 0, blockSize, 0, 'green' ); projectLine ( 'Z', 0, 0, 0, 0, 0, blockSize, 'blue' ); } drawIt ( ); showInfo ( ); // draw a single part function drawIt ( ) { // parts let rotationStream = [ ]; const numberOfParts = parts.length; addToPart ( rotationStream, lotLine ); for ( let i = 0; i < numberOfParts; i++ ) { addToPart ( rotationStream, parts[ i ].balls ); } // do the shadow thing later... /* let ballShadow = [ ]; addToPart ( ballShadow, rotationStream ); // copy the shadow before adding the outer block illuminatePart ( rotationStream ); shadowPart ( ballShadow ); */ addToPart ( rotationStream, outerBlock ); // rotate the whole thing initRotate3d ( alpha, beta, 0 ); rotatePart ( rotationStream ); // rotatePart ( ballShadow ); // draw everything drawPart ( rotationStream ); // drawPart ( ballShadow ); } // calculate the distance from the lamp to get the size of the shadow function distanceFromLamp ( ball ) { const deltaZ = lampDistance - ball.z; return Math.sqrt ( ball.x * ball.x + ball.y * ball.y + deltaZ * deltaZ ) } // illuminate a part based on the distance from the lamp function illuminatePart ( part ) { const partLength = part.length; const lampHight = lampDistance - blockSize; for ( let i = 0; i < partLength; i++ ) { part[ i ].alpha = part[ i ].alpha + ( 1 - part[ i ].alpha ) * ( distanceFromLamp ( part[ i ] ) / lampHight - 0.5 ); } } // rotate a part function shadowPart ( part ) { const partLength = part.length; const lampHight = lampDistance - blockSize; for ( let i = 0; i < partLength; i++ ) { const ballDistanceFromLamp = distanceFromLamp ( part[ i ] ); const zoomFactor = -( lampHight ) / ( part[ i ].z + blockSize ); const zoomedX = part[ i ].x * zoomFactor; const zoomedY = part[ i ].y * zoomFactor; const absoluteZoomedX = Math.abs ( zoomedX ); const absoluteZoomedY = Math.abs ( zoomedY ); if ( absoluteZoomedX > blockSize || absoluteZoomedY > blockSize ) { if ( absoluteZoomedX > absoluteZoomedY ) { // any X wall const factorX = blockSize / absoluteZoomedX; part[ i ].y = zoomedY * factorX; part[ i ].z = -( lampHight * factorX - lampDistance ); if ( zoomedX > 0 ) part[ i ].x = blockSize; // positive X wall else part[ i ].x = -blockSize; // negative X wall } else { // any Y wall const factorY = blockSize / absoluteZoomedY; part[ i ].x = zoomedX * factorY; part[ i ].z = -( lampHight * factorY - lampDistance ); if ( zoomedY > 0 ) part[ i ].y = blockSize; // positive Y wall else part[ i ].y = -blockSize; // negative Y wall } } else { // bottom wall part[ i ].x = zoomedX; part[ i ].y = zoomedY; part[ i ].z = blockSize; } const shadowDistanceFromLamp = distanceFromLamp ( part[ i ] ); part[ i ].size *= shadowDistanceFromLamp / ballDistanceFromLamp; part[ i ].alpha = 0.1; } } function addToPart( partWhereToAdd, partToAdd ) { const partWhereToAddLength = partToAdd.length; for ( let i = 0; i < partWhereToAddLength; i++ ) { partWhereToAdd.push ( { x: partToAdd[ i ].x, y: partToAdd[ i ].y, z: partToAdd[ i ].z, size: partToAdd[ i ].size, color: partToAdd[ i ].color, alpha: partToAdd[ i ].alpha } ); } } // rotate a part function rotatePart ( part ) { const partLength = part.length; for ( let i = 0; i < partLength; i++ ) { const ball = doRotate3d( part[ i ] ); part[ i ].x = ball.x; part[ i ].y = ball.y; part[ i ].z = ball.z; } } // draw a part function drawPart ( part ) { const partLength = part.length; for ( let i = 0; i < partLength; i++ ) { drawBall( part[ i ] ); } } // draw a single ball function drawBall ( ball ) { const shrinkFactor = viewerDistance / ( viewerDistance + ball.z ); const x2d = halfWidth + ball.x * shrinkFactor; const y2d = halfHeight - ball.y * shrinkFactor; let factoredBallSize = ball.size * shrinkFactor; ctx.beginPath ( ); ctx.fillStyle = ball.color; ctx.globalAlpha = ball.alpha; ctx.fillRect ( x2d, y2d, factoredBallSize, factoredBallSize ); } // 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, p1, color ); } // draw a simple line (axis) function drawLine ( text, pa2d, pb2d, color ) { ctx.lineWidth = 2; ctx.strokeStyle = color; ctx.beginPath ( ); ctx.moveTo ( pa2d.x, pa2d.y ); ctx.lineTo ( pb2d.x, pb2d.y ); ctx.stroke ( ); ctx.font = "20px Arial"; ctx.fillStyle = color; ctx.textAlign = "center"; ctx.fillText ( text, pb2d.x, pb2d.y ); } // put it in perspective function project( x, y, z ) { const shrinkFactor = viewerDistance / ( viewerDistance + z ); return { x: halfWidth + x * shrinkFactor, y: halfHeight - y * shrinkFactor, ballSizeFactor: shrinkFactor }; } } // 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 deltaX = x - startSlideX; startSlideX = x; const deltaY = y - startSlideY; startSlideY = y; // y rotation not need for now updateViewAngle ( deltaX, deltaY ); rotationSpeedX += deltaX / 15; // rotationSpeedY += deltaY / 5; } // change view angle function updateViewAngle ( deltaX, deltaY ) { alpha += deltaX / 800; beta += deltaY / 800; } // document is loaded get the codes and set the call back $( document ).ready ( function ( ) { createParts ( ); drawLot ( 0, 0 ); drawAllLots ( ); 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; }); }, 600 ); });

📈 Slot Spot 📈