Newton's Cradle on HTML5 Canvas
Written by 10 February 2013
This is a Newton's Cradle that I made with HTML5 and the canvas element. It isn't perfect and a couple things could be fixed but it is still pretty cool.
Code Snippet:
<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlfreecode.com - Coded by: Krishna Eydat -->
<html>
<head>
<style type="text/css">
canvas{ border:#00FF00 5px solid;}
</style>
<script type="application/javascript" language="javascript">
function draw(angle,nState){
var canvas = document.getElementById('canvas'); //referance the canvas element on page
var ctx = canvas.getContext('2d'); // establish a 2d context for the canvas
var r = 100; // radius
var cx = 225; // center point x axis
var cy = 175; // center point y axis
var px = 100; // point of x on canvas
var py = 100; // point of y on canvas
var i;
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(550,100);
ctx.strokeStyle="#00FF00";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(550,100);
ctx.strokeStyle="#00FF00";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(242,100);
ctx.lineTo(242,275);
ctx.strokeStyle="#00FF00";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(274,100);
ctx.lineTo(274,275);
ctx.strokeStyle="#00FF00";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(307,100);
ctx.lineTo(307,275);
ctx.strokeStyle="#00FF00";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(340,100);
ctx.lineTo(340,275);
ctx.strokeStyle="#00FF00";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(372,100);
ctx.lineTo(372,275);
ctx.strokeStyle="#00FF00";
ctx.stroke();
////////////////strings above state below//////////////////////
switch (nState) {
case 0: // setup/initialization
ctx.fillStyle = "#00FF00";
// draw Newton's Cradle
for (i = 0; i < 5; i++ ) {
ctx.beginPath();
ctx.fillRect (cx + (i * 33), cy + r, 32, 32);
ctx.stroke();
}
nState++;
nSweep = 90;
break;
case 1:
ctx.clearRect(0,101,257,400); // clear canvas for redrawing
py = cy + (r* Math.sin(Math.PI * angle / 180));
px = cx + (r* Math.cos(Math.PI * angle / 180));
ctx.fillRect (px, py, 32, 32); // draw the rectangle
ctx.beginPath();
ctx.moveTo(242 ,100);
ctx.lineTo(px + 16,py + 16);
ctx.strokeStyle="#00FF00";
ctx.stroke();
angle++;
if (angle == (90 + nSweep)) {
nState++;
}
break;
case 2:
ctx.clearRect(0,101,256,400); // clear canvas for redrawing
py = cy + (r* Math.sin(Math.PI * angle / 180));
px = cx + (r* Math.cos(Math.PI * angle / 180));
ctx.fillRect (px, py, 32, 32); // draw the rectangle
ctx.beginPath();
ctx.moveTo(242 ,100);
ctx.lineTo(px + 16,py + 16);
ctx.strokeStyle="#00FF00";
ctx.stroke();
angle--;
if (angle == 90){
nState++;
nSweep = nSweep - 5;
if (nSweep <= 0) {
nState = 5;
}
}
break;
case 3:
ctx.clearRect(355,101,175,400); // clear canvas for redrawing
py = cy + (r* Math.sin(Math.PI * angle / 180));
px = cx + 132 + (r* Math.cos(Math.PI * angle / 180));
ctx.fillRect (px, py, 32, 32); // draw the rectangle
ctx.beginPath();
ctx.moveTo(372 ,100);
ctx.lineTo(px + 16,py + 16);
ctx.strokeStyle="#00FF00";
ctx.stroke();
angle--;
if (angle == 90 - nSweep){
nState++;
}
break;
case 4:
ctx.clearRect(355,101,175,400); // clear canvas for redrawing
py = cy + (r* Math.sin(Math.PI * angle / 180));
px = cx + 132 + (r* Math.cos(Math.PI * angle / 180));
ctx.fillRect (px, py, 32, 32); // draw the rectangle
ctx.beginPath();
ctx.moveTo(372 ,100);
ctx.lineTo(px + 16,py + 16);
ctx.strokeStyle="#00FF00";
ctx.stroke();
angle++;
if (angle == 90){
nState = 1;
nSweep = nSweep - 5;
if (nSweep <= 0) {
nState = 5;
}
}
break;
case 5:
nState = 5;
break;
}
var loopTimer = setTimeout('draw('+angle+','+nState+')',1); // animate the draw function
}
</script>
</head>
<body bgcolor="black">
<canvas id="canvas" width="550" height="400"></canvas>
<br /> <br />
<button onClick="draw(90,0)">animate</button>
</body>
</html>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!