// // The Ferris Wheel Simulator // Copyright c Brian P. Vogl // Conceived Febuary 3 2019 // Original JS version // Started February 3 2019 // Complete Feburary 3 2019 // var canvas = document.getElementById("thecanvas"); // canvas.style.backgroundColor = "white"; var ctx; var bbox = canvas.getBoundingClientRect(); var stepi = Math.PI / 200; var angle = 0; var radius = 49; var scale = 7; Ferris(); function Ferris() { if(ctx = canvas.getContext('2d')) { canvas.oncontextmenu = function (event) { event.preventDefault(); }; } setInterval(do_display, 50); } function draw_gondola(Xpos, Ypos, nbr) { ctx.strokeStyle = '#000000'; ctx.lineWidth = 2; switch(nbr) { // Select the color to appear on the face of the polygon case 0 : ctx.fillStyle = 'orange'; break; case 1 : ctx.fillStyle = 'green'; break; case 2 : ctx.fillStyle = 'yellow'; break; case 3 : ctx.fillStyle = 'red'; break; case 4 : ctx.fillStyle = 'blue'; break; case 5 : ctx.fillStyle = 'pink'; break; case 6 : ctx.fillStyle = 'lime'; break; case 7 : ctx.fillStyle = 'magenta'; break; } ctx.beginPath(); ctx.moveTo(Xpos, Ypos); ctx.lineTo(Xpos - scale, Ypos + 2 * scale); ctx.lineTo(Xpos - scale, Ypos + 4 * scale); ctx.lineTo(Xpos + scale, Ypos + 4 * scale); ctx.lineTo(Xpos + scale, Ypos + 2 * scale); ctx.lineTo(Xpos, Ypos); ctx.closePath(); ctx.fill(); ctx.stroke(); } function do_display() { // rotate the wheel to the next angle var polyX = [ 0, 0, 0, 0, 0, 0, 0, 0 ]; var polyY = [ 0, 0, 0, 0, 0, 0, 0, 0 ]; var step = 2 * Math.PI / 8; ctx.clearRect(0, 0, canvas.width, canvas.height); // Set up Poly and Draw the Gondolas for(var t = 0; t < 8; t++) { polyX[t] = canvas.width / 2 + radius * Math.sin(angle + step * t); polyY[t] = -20 + canvas.height / 2 + radius * Math.cos(angle + step * t); draw_gondola(polyX[t], polyY[t], t); } // Draw the Wheel ctx.beginPath(); ctx.strokeStyle = '#000000'; ctx.lineWidth = 1; for(var t = 0; t < 8; t++) { if(t == 0) ctx.moveTo(polyX[t], polyY[t]); else { ctx.lineTo(polyX[t], polyY[t]); } } ctx.closePath(); ctx.stroke(); // Draw the Wheels guts var ptrA = [0, 2, 1, 3]; var ptrB = [4, 6, 5, 7]; for(var t = 0; t < 4; t++) { ctx.moveTo(polyX[ptrA[t]], polyY[ptrA[t]]); ctx.lineTo(polyX[ptrB[t]], polyY[ptrB[t]]); ctx.stroke(); } // Draw the Stand ctx.beginPath(); ctx.strokeStyle = '#000000'; ctx.lineWidth = 3; ctx.moveTo(canvas.width / 2, canvas.height / 2 - 20); ctx.lineTo(10, canvas.height - 10); ctx.lineTo(canvas.width - 10, canvas.height - 10); ctx.closePath(); ctx.stroke(); // Set up our new angle. angle += stepi; if( angle > 2 * Math.PI ) angle = 0; }