The first (a tad larger) bit of JavaScript on this site

Up a level : Programming
Previous page : Previous Up Next - Pun
Next page : A bit of my calculator history

WordPress and animations

(This was done a few years ago. My programming skills in JavaScript has hopefully developed a bit since then. See for example this that was written less than a year after.)

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);

1	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. 
    }

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;

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

<!DOCTYPE html>

<! This is version 2 of this.>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

<br>

"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>

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 : Programming
Previous page : Previous Up Next - Pun
Next page : A bit of my calculator history

Last modified: Jul 23, 2023 @ 12:43