Sourcerer code

“A computational process is indeed much like a sorcerer’s idea of a spirit. It cannot be seen or touched. It is not composed of matter at all. However, it is very real. It can perform intellectual work. It can answer questions. It can affect the world by disbursing money at a bank or by controlling a robot arm in a factory. The programs we use to conjure processes are like a sorcerer’s spells. They are carefully composed from symbolic expressions in arcane and esoteric programming languages that prescribe the tasks we want our processes to perform.”
from Structure and Interpretation of Computer Programs by Abelson, Sussman and Sussman.

Below is the html code (with embedded javascript) that our programming group tinkered with. All it does is draw a few rectangles, two filled with a linear gradient. The interesting bit is that this can be done; using the HTML5 canvas element, anything can be dynamically drawn on a web page. This Conway's Game of Life is a simple example of using HTML5's canvas tag to make an interactive program.

Note that I can't post the exact code because blogger interprets well-formed tags as html. I've replaced the initial "less than symbol" with a "[" and "greater than symbol" with "]", and these will need to be replaced. To tinker with the program, copy it to a text file and change the extension to .htm or .html, replace the symbols, and open the file in any browser. If this page is publicly posted, any browser can run the program. (I haven't posted the page, but I will soon.)

[!DOCTYPE html]
[html lang="en"]

[head]
    [title]My test canvas[/title]
[body]


[!-- comment --]


[canvas id = "canvas_1" width = "800" height = "400" ]
    This text is displayed if your browser does not support HTML5 Canvas.
[/canvas]



[script type="text/javascript"]

    var example_canvas = document.getElementById( 'canvas_1' );
    var draw_context   = example_canvas.getContext( '2d' );

     var lingrad = draw_context.createLinearGradient( 0, 0, 0, 150 );
     lingrad.addColorStop( 0.0, '#00ABEB' );
     lingrad.addColorStop( 0.5, '#fff'    );
     lingrad.addColorStop( 0.5, '#26C000' );
     lingrad.addColorStop( 1.0, '#fff'    );

    draw_context.fillStyle = lingrad;
    draw_context.fillRect( 30, 30, 150,  50 );
    draw_context.fillRect( 110, 110, 130, 130 );

    draw_context.strokeRect(  50,  50,  50,  50);
    draw_context.strokeRect( 150, 150, 150, 150 );

[/script]



[/body]
[/head]