Target JavaScript

In this graphic example with Canvas, we will see how a simple function makes JavaScript a target programming language.

An example shows a car moving along the road, to its destination, its purpose. The simplest programming principle is to define a goal as an expression and put the action that seeks that goal into an iteration.

Display

The goal is to let the car to the right edge of the frame.

JavaScript code

var car = new Image();
car.src="images/car-green.png";

var roadCanvas = document.getElementById("road");
var roadCtx = roadCanvas.getContext("2d");

function scenery() {
  roadCtx.fillStyle="white";
  roadCtx.rect(0,0,640,160);
  roadCtx.fill();
}

var xcar= 0;

car.onload=function() {
  roadCtx.drawImage(car, xcar, 60);
}	

var carInterval;
var stopFlag=false;
function startCar() {
  carInterval = setInterval(function() {
    scenery();
    roadCtx.drawImage(car, xcar, 60);
    xcar++;
    if(xcar >= 400 || stopFlag) {
      clearInterval(carInterval);
      return true;
    }	
  }, 20); 
}

HTML-code

<input type="button" value="Avancer" onClick="stopFlag=false;startCar()">
<input type="button" value="Stopper" onClick="stopFlag=true">

Perhaps you can add a time limit, in which case you are just trying to get closer to the goal. But it gets harder to deal with, especially if there are multiple objects to animate at the same time.

However, goal-oriented programming will make everything very simple. You define a target function that has the following arguments:

1. Condition to be fulfilled, goal.
2. Maximum duration parameter.
And
3. actions that must be done iteratively to get closer to the goal.

Goal-oriented demonstration

Source Code for Target

var stopDuo=false;
var goal = function(condi, dur, actio) { 
    var iter = setInterval(function() {
      if(condi() || stopDuo) {
        clearInterval(iter); 
        clearTimeout(limiter);
        return;
      }
      actio();
    }, 0);
    if(dur == "&") dur = 2147483647;
    var limiter=setTimeout(function() { clearInterval(iter); }, dur);
}

JavaScript Animation Code

var orange = new Image();
orange.src="images/car-orange.png";

var green = new Image();
green.src="images/car-green.png";

var raceCanvas = document.getElementById("race");
var raceCtx = raceCanvas.getContext("2d");

var xgreen = 0;
var xorange = 0 ;

green.onload=function() {
  raceCtx.drawImage(green, xgreen, 220);
}

orange.onload=function() {
  raceCtx.drawImage(orange, xorange, 60);
}

function redraw() 
{
  raceCtx.fillStyle="white";
  raceCtx.rect(0,0,640,320);
  raceCtx.fill();
  raceCtx.drawImage(orange, xorange, 60);
  raceCtx.drawImage(green, xgreen, 220);
}

function startDuo() {
 goal( function() { return (xorange >= 400); }, "&", function() {
    redraw();
    xorange++;
 });
 goal( function() { return(xgreen >= 400); }, "&", function() {
    redraw();
    xgreen+=2;
 });
}

HTML-code

<input type="button" value="Avancer" onClick="stopDuo=false;startDuo()">
<input type="button" value="Stopper" onClick="stopDuo=true;">

As you can see, all this works asynchronously. Both cars move simultaneously, independently of each other. You can define an assignment function that works synchronously:

var goalSync=function(condi, dur, actio) { 
  stopFlag = false;
  if(dur == "&") dur = 2147483647;
  var limiter=setTimeout(function() { stopFlag=true; }, dur);
  while(stopFlag == false) {
    if(condi()) {
      clearTimeout(limiter);
      stopFlag=true;
      return;
    }
    actio();
  }
}

In this case, the cars would move one after another.

Both objects are part of the scriptol.js framework used by the Script-JavaScript compiler. The language has a simpler syntax for implementing the target orientation.