Previous page : Previous Up Next - Pun
Next page : A bit of my calculator history
WordPress and animations
I thought it would be useful, to have some add some animation to the explanations, so I added a bit of JavaScript to the page To throw a ball – an animation. To be able to place the code in the page I use a plug-in, Shortcode Variables. Anyhow, you can try it here too:
To make animations work in a HTML Canvas using JavaScript, we must let the rendering actually happen. It will not work with an ordinary loop, because in such a loop the browser will be fully occupied with running the loop. One can instead create a timed loop where drawing, and then the rendering happens with a set interval. In this code this is done by the line
throwLoop=setInterval(loop, 20);
The function loop is called every 20 ms. This continues until x<0 (the ball is back) or t>4 (the time when the ball should be back) )(a little bit on the safe side here), when the endFlag is set. If so the trowLoop is stopped. This is done within the throwLoop.
if (endFlag){
clearInterval(throwLoop); // OK, time to leave. The ball is back.
}
I found that the yellow part of the graph was sometimes not completed. This if the system had other things to do at that time. To ensure that the graph will be complete I start the code that draws the green part with this:
if (yellowNotDone) {
yellowPart(2);
}
yellowNotDone=false;
The yellowNotDone flag is initially set. In this way I am sure that the yellow part will be drawn.
The below code works as a stand alone HTML-page. The code inserted in the shortcode is the text between the <body> and </body>.
<!DOCTYPE html>
<! This is version 2 of this.>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<script>
"use strict"
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let x; // x=various coordinates.
let t; // t=time.
let throwLoop; // The setInterval variable.
let clockAtStart; // Time at the beginning of a throw.
function init(){
ctx.strokeStyle="black";
ctx.fillStyle="black";
ctx.moveTo(10,300); // The vertical and horizontal axis for the ball.
ctx.lineTo(60,300);
ctx.moveTo(40,300);
ctx.lineTo(40,50);
for (x=1; x<=20; x++){ // Axis ticks...
ctx.moveTo(35,300-10*x);
ctx.lineTo(40,300-10*x);
}
ctx.font="10px Serif"; // ...and the scale numbers.
ctx.fillText("10 m",7,300-10*10+2);
ctx.fillText("20 m",7,300-10*20+2);
ctx.moveTo(105,200); // t-axis start
ctx.lineTo(390,200); // t-axis end
ctx.moveTo(110,350); // h-axis start
ctx.lineTo(110,50); // h-axis end
for (x=-20; x<=20; x+=5){ // v/t-diagram vertical scale.
ctx.moveTo(105,200-7*x);
ctx.lineTo(110,200-7*x);
ctx.fillText(x+" m/s",70,200-7*x+2);
}
for (x=1; x<=4; x++){ // v/t-diagram horizontal scale.
ctx.moveTo(110+66.2*x,195);
ctx.lineTo(110+66.2*x,205);
ctx.fillText(x+" s",110+66.2*x-5,215-Math.floor(x/2.5)*25); // Need the 1 and 2 below and
// 3 and 4 above the axis
}
ctx.stroke(); // Ball at the initial position.
ctx.strokeStyle="red";
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(55,300,5,0,2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.strokeStyle="white"; // I need to have these here to not get a short "glitch" at the start of
ctx.fillStyle="white"; // all but the first run. Not sure why.
}
init();
</script>
<button onclick="throwTheBall()">Throw</button>
<script>
function throwTheBall() {
init();
t=0; // It starts at time 0.
let d=new Date(); // Get the initial clock the lupe.
clockAtStart=d.getTime();
throwLoop=setInterval(loop, 20);
}
function yellowPart(t){ // For the upper part of the v/t-diagram.
ctx.strokeStyle="yellow";
ctx.fillStyle="yellow";
ctx.beginPath();
ctx.moveTo(112,198);
ctx.lineTo(112,200-20*7);
ctx.lineTo(112+65*t,200-(20-10*t)*7);
ctx.lineTo(112+65*t,198);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.strokeStyle="red"; // Red velocity line.
ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(112,200-20*7);
ctx.lineTo(112+65*t,200-(20-10*t)*7);
ctx.closePath();
ctx.stroke();
}
function greenPart(t){ // For the lower part of the v/r-diagram.
ctx.strokeStyle="greenyellow";
ctx.fillStyle="greenyellow";
ctx.beginPath();
ctx.moveTo(114+65*2,202);
ctx.lineTo(114+65*t+2,202-(20-10*t)*7);
ctx.lineTo(114+65*t,202);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.strokeStyle="red"; // Red velocity line.
ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(114+65*2,202);
ctx.lineTo(114+65*t,202-(20-10*t)*7);
ctx.closePath();
ctx.stroke();
}
function loop(){
//var n;
var endFlag=false;
var yellowNotDone=true;
ctx.beginPath();
ctx.closePath();
ctx.strokeStyle="white"; // Need this of some obscure reason to make it fill the lines.
ctx.fillStyle="white";
if (t==0) {
ctx.fillRect(0,0,399,399); // Paint the canvas white (to not make it transparant).
init();
}
d=new Date();
let now=d.getTime(); // Present time.
t=(now-clockAtStart)/1000; // t=number of seconds since it started.
x=20*t-5*t*t; // The position of the ball.
if (x<0 || t>4) { // If the ball is back again we're done.
x=0;
t=4;
endFlag=true;
}
ctx.fillRect(49,90,12,217); // Paint over old ball with white.
ctx.stroke();
ctx.strokeStyle="red"; // Draw the ball in a new position.
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(55,300-10*x,5,0,2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
if (t<2){ // Draw the yellow part of the v/t- diagram.
yellowPart(t);
} else { // Draw the green part of the v/t- diagram.
if (yellowNotDone) {
yellowPart(2);
}
yellowNotDone=false;
greenPart(t);
}
if (endFlag){
clearInterval(throwLoop);
}
}
</script>
</body>
</html>
Up a level : ProgrammingPrevious page : Previous Up Next - Pun
Next page : A bit of my calculator history
Last modified: