## Modelling a collection of lines

We can model a line using a JavaScript data structure. The following defines Line, which is a function to construct lines.

    Line = function(x1, y1, x2, y2) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
    }

As well as this we associate a method that is used to get the string representation for lines, this will make it easier to understand in the symbol table:

    Line.prototype.toString = function() {
      return "[(" + this.x1 + "," + this.y1 + "), (" + this.x2 + "," + this.y2 + ")]";
    };

We can now store these in our symbol table

    root.lookup('line1').assign(new Line(0, 0, 30, 50));

Or using the EDEN notation (somewhat)

    func Line { ${{
      var x1 = arguments[0];
      var y1 = arguments[1];
      var x2 = arguments[2];
      var y2 = arguments[3];
      return new Line(x1, y1, x2, y2);
    }}$; }

    line2 = Line(0, 0, 50, 30);
    line2.x1 = 30;

## Creating a simple visualisation with lines

Let's create a window dedicated to the visualisation. The browser provides the `window` object, which has an API for creating a new window:

    var strWindowFeatures = "resizable=yes,scrollbars=yes,status=yes";
    window.popup = window.open('', '', strWindowFeatures);

Note that the above attaches the popup to the predefined global `window`, so that it can be accessed later. We can now add content to this popup using JavaScript:

    window.popup.document.body.innerHTML = "<p>Hello World</p>";

the $ function (provided by a popular library called jQuery) allows us better abstractions for page manipulation:

    var $body = $(window.popup.document.body);
    $body.append('<p>one</p>');
    $body.append('<p>two</p>');

The HTML `<canvas>` element allows for procedural line drawing.

    var $body = $(window.popup.document.body);
    $body.append('<canvas width=500 height=500 style="border-color: black; border-width: 1px; border-style: solid;"></canvas>');

Model a picture using an EDEN list

    picture is [line1, line2];

We can attach a routine for drawing these lines in a HTML canvas

    Line.prototype.draw = function(context) {
      context.beginPath();
      context.moveTo(this.x1, this.y1);
      context.lineTo(this.x2, this.y2);
      context.stroke();
    };

Setup an agent to draw each element in the picture

    proc clearCanvas { ${{
      var canvas = $('canvas', window.popup.document).get(0);
      canvas.width = canvas.width;
    }}$; }

    proc drawPicture : picture {
      clearCanvas();
      ${{
      var picture = context.lookup('picture').value();
      var canvas = $('canvas', window.popup.document).get(0).getContext('2d');

      for (var i = 0; i < picture.length; ++i) {
        picture[i].draw(canvas);
      }
      }}$;
    }

    drawPicture();

Now we can move the lines around:

    line2.x2 = 100;

    line2.y2 = 300;

    line2.y1 = 130;

## Adding More Shape Types

    Box = function(x1, y1, x2, y2) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
    }

As well as this we associate a method that is used to get the string representation for lines, this will make it easier to understand in the symbol table:

    Box.prototype.toString = function() {
      return "Box [(" + this.x1 + "," + this.y1 + "), (" + this.x2 + "," + this.y2 + ")]";
    };

    Box.prototype.draw = function(context) {
      context.fillStyle = 'black';
      context.fillRect(this.x1, this.y1, this.x2, this.y2);
    };

We can now store these in our symbol table

    root.lookup('box1').assign(new Box(10, 20, 30, 50));

Or using the EDEN notation (somewhat)

    Box = function(x1, y1, x2, y2) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
    }

    func Box { ${{
      var x1 = arguments[0];
      var y1 = arguments[1];
      var x2 = arguments[2];
      var y2 = arguments[3];
      return new Box(x1, y1, x2, y2);
    }}$; }

    box2 = Box(0, 30, 20, 30);
    box2.x1 = 100;

## Adding more properties

    root.lookup('box1').assign(new Box(10, 20, 30, 50));