The Farrellel Postulate

There's so much power sitting in our web browsers. Let's have some fun.

Let's use canvas to build up a little JavaScript animation toy from scratch. At the end, we'll have a web page with a canvas that's painted by a function we can code on the page itself.

Starting Up...

Starting from a blank page called index.html, we'll create our canvas and draw something simple.

start screen with ping square

Now that we know canvas is working and we can write to it. Let's set up a small animation.

bouncing square in canvas

Ok... Now, let's take it to another level. We're going to create an bare bones IDE right in our browser. First, we need to update our html to add a textarea and a button to compile our code.

html for an in browser IDE

Then we'll change our script to add some functionality to make us able to change the draw function.

First, let's make it so that the text area is pre-populated with the draw function's code.

html for an in browser IDE

Our next part is going to use some dark magic. We're going to use eval to turn a string into executed code. This isn't something that should be taken lightly. Because we're controlling the input and execution, it's ok in this case (and fun!), but this is one of those super powers that can easily be abused.

Caveat Emptor!

Using the eval function to change strings into executed code is SUPER DANGEROUS.

This new code combines the magic of eval and JavaScript's first-class functions to take the code written in the text area and to replace the draw function with what we've typed. We make it easier on ourselve to append the window.requestAnimationFrame(drawFunc) function in code instead of making us type it every time.

Check out the image below. In it, we change objSize, click the ▲ button, and see the square change size. changing the draw function on the fly

As we can see by the documentation at MDN, this use of eval isn't very safe. Before we get too far along, let's change it to use the Function capability as recommended. It's still dangerous, but not quite as much.

We're going to make some tweaks to make our IDE able to run more arbitrary code. First, we'll add a button to clear the screen

<div>
   <div>
     <input type="button" id="updateDraw" onclick="updateDrawFunc(this)" value="▲" title="Update Code"></input>
+    <input type="button" id="clearScreen" onclick="clearScreen(this)" title="Clear" value="⎚"></input>
   </div>
   <div>
     <textarea id="code" rows=14, cols=57></textarea>
   </div>
</div>
<script>
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = 420;
  canvas.height = 250;
  var [dx, dy, xpos, ypos, objSize] = [1, 1, 0, 0, 10];
  var code='ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n'+
    'if(xpos + objSize > canvas.width || xpos < 0) dx*=-1;\n' +
    'if(ypos + objSize > canvas.height || ypos < 0) dy*=-1;\n' +
    'xpos+= dx;\n' +
    'ypos+= dy;\n' +
    'ctx.fillRect(xpos, ypos, objSize, objSize);';
  document.getElementById("code").value = code;
  var drawFunc = draw;

+ function clearScreen() {
+   ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+
  function updateDrawFunc() {
    var code = document.getElementById("code").value;
    ctx.clearRect(0,0,canvas.width,canvas.height);

bouncing square in canvas with a clear function working

Next, let's make it so we can pause animations and a step forward function. Step backwards will require some more thought. In order to update the display value of our buttons using html entities, we need to switch from using <input> to <button>.

<canvas id="canvas"></canvas>
     <div>
       <div>
-<input type="button" id="updateDraw" onclick="updateDrawFunc(this)" value="▲" title="Update Code"></input>
-<input type="button" id="clearScreen" onclick="clearScreen(this)" title="Clear" value="⎚"></input>
+<button id="animate" onclick="updateAnimating(this)"  title="Pause">⏸</button>
+<button id="stepForward" onclick="step(this)"  title="Step Forward">></button>
+<button id="updateDraw" onclick="updateDrawFunc(this)"  title="UpdateCode">▲</button>
+<button id="clearScreen" onclick="clearScreen(this)" title="Clear">⎚</button>
       </div>
       <div>
 <textarea id="code" rows=14, cols=57></textarea>
       </div>
     </div>
     <script>
+      var active = true;
       var canvas = document.querySelector('canvas');
       var ctx = canvas.getContext('2d');
       canvas.width = 420;

====

document.getElementById("code").value = code;
       var drawFunc = draw;

+      function updateAnimating(elem) {
+if(active) {
+  elem.innerHTML= '▶';
+  elem.title = "Start";
+  active = false;
+} else {
+  active = true;
+  elem.innerHTML= '⏸';
+  elem.title = "Pause";
+  window.requestAnimationFrame(drawFunc);
+}
+      }
+
       function clearScreen() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
       }

+      function step() {
+// Only allow step if animations are paused
+if(!active) {
+  drawFunc();
+}
+      }
+
       function updateDrawFunc() {
 var code = document.getElementById("code").value;
 ctx.clearRect(0,0,canvas.width,canvas.height);
-drawFunc=Function(code + "; window.requestAnimationFrame(drawFunc);");
+drawFunc=Function(code + "; if(active) { window.requestAnimationFrame(drawFunc); }");
       }

function draw() {

====

xpos+= dx;
 ypos+= dy;
 ctx.fillRect(xpos, ypos, objSize, objSize);
-window.requestAnimationFrame(drawFunc);
+if(active) {  window.requestAnimationFrame(drawFunc); }
       }

drawFunc();

bouncing square in canvas with a pause and step function working

Til now, our application has been dependent on some global variables that track its state. That constrains out toy to the animation we've been demoing. Let's fix that so we can make our ide more flexible. Our function needs a way to have a record of what the current state is. One way we can approach this is to create a dummy global object at startup and allow our draw function to manage it.

====

var ctx = canvas.getContext('2d');
       canvas.width = 420;
       canvas.height = 250;
-      var [dx, dy, xpos, ypos, objSize] = [1, 1, 0, 0, 10];
-      var code='ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n'+
-'if(xpos + objSize > canvas.width || xpos < 0) dx*=-1;\n' +
-'if(ypos + objSize > canvas.height || ypos < 0) dy*=-1;\n' +
-'xpos+= dx;\n' +
-'ypos+= dy;\n' +
-'ctx.fillRect(xpos, ypos, objSize, objSize);';
+      var st = null;
+      var code = 'if(!st) {\n' +
+'  st = new Object();\n' + 
+'  [st.dy, st.dx, st.xpos, st.ypos, st.objSize] = [1, 1, 0, 0, 10];\n' +
+'}\n\n' +
+'ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n'+
+'if(st.xpos + st.objSize > canvas.width || st.xpos < 0) st.dx*=-1;\n' +
+'if(st.ypos + st.objSize > canvas.height || st.ypos < 0) st.dy*=-1;\n' +
+'st.xpos+= st.dx;\n' +
+'st.ypos+= st.dy;\n' +
+'ctx.fillRect(st.xpos, st.ypos, st.objSize, st.objSize);';
       document.getElementById("code").value = code;
       var drawFunc = draw;

====

}

working with anonymous state object

Ok. We're about wrapped up with this first section. We'll build on this in a subsequent post to make this a live coding experience. For now, though, let's test our toy to see if we can draw some arbitrary animation.

posted 2022-09-18

Let's Make an Animation Toy

Starting Up...

Caveat Emptor!