SVG: Car on a road and event programming

Demonstration of a car traveling on a road and triggering an event when it reaches its goal.

The car is an image that is dynamically added to the decor. It rolls until the "NEW YORK" sign that it touches and tilts.
To achieve this animation, we define two goals: 1) move and 2) tilt the sign, which is written very simply by goal oriented programming: we set an AND relation between the x position value to be reached, and a call to a function that tilts the panel.

The program tests the second term of an AND expression only once the first term is true. So long as the position x has not reached the given value, the function is not called.

The function returns true when it is called, so that the two terms of the condition will have the true value and the condition will be met, the goal is reached and the animation stops.

x=

Description of the source code ...

Building the scenery

The sky and the road are drawn with two rectangles and two images are inserted in a svg tag to create a static setting.

<svg id="road" width="640" height="250">
  <rect x="0" y="0" width="640" height="240" style="fill:rgb(240,248,255);" />
  <rect x="0" y="240" width="640" height="8" style="fill:rgb(0,128,0);" />
  <image width="280" height="328" xlink:href="code/tree.svg" transform="scale(0.7) translate(350, 16)"/>
  <image id="sign" width="141" height="140" xlink:href="code/sign.svg" transform="scale(0.8) translate(600, 162)"/>
</svg>

Dynamically adding an image

The car is not part of the scenery, it is normal to add it dynamically.

An <image> tag is generated that we will add to the <svg> tag through the appendChild method of the DOM.

var road = document.getElementById("road");
var car
function addCar() {
  car = document.createElementNS('http://www.w3.org/2000/svg','image');
  car.setAttributeNS('http://www.w3.org/1999/xlink','href',"code/car.svg");
  car.setAttribute("width", 715);
  car.setAttribute("height", 296);
  car.setAttribute("transform", "scale(0.4) translate(10,305)");
  road.appendChild(car);
}

Moving images

A function is created to move the car, another for tilting the panel when the car reach it.

function moveCar(x) {
  var t = "scale(0.4) translate(" + x + " 305)";
  car.setAttribute("transform", t);
}

function toppleSign() {
  var sign = document.getElementById("sign");
  sign.setAttribute("transform", "scale(0.8) translate(600, 162) rotate(30,60,100)");
  return true;
}

Main program: just assigning a goal

The main program is summed up in one statement: we define a goal which is represented by a condition to achieve, and define how to achieve this goal: x is incremented and the moveCar() function is called.

In Scriptol language:

int x = 10
void move()
  to ((x > 720) and toppleSign()) for 20, 4
    x + 1
    moveCar(x)
  /to
return	

Converted to JavaScript:

var x=10;
function move()
{
   scriptol.goal(function() { 
      return(((x>720)&&toppleSign()))},20*1000,function(){
        x+=1;
        moveCar(x);
   },4);
   return;
}

The "for 20.4" in the Scriptol code has the following meaning: The animation has a duration limited to 20 seconds, and every move is made after a period of 4 milliseconds, to make the speed of the animation independent of that of the computer.

Download the source code and SVG images (License MIT):

The Car.html file is generated from the car.sol file with the command: solj -w car. (See the complete Scriptol manual on this site).