Tuesday, July 27, 2010

Pallette color cycling

Old School Color Cycling with HTML5
A good description of the technique with fantastic examples, including JavaScript and C++ code.

Sunday, July 18, 2010

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"]

    [title]My test canvas[/title]

[!-- comment --]

[canvas id = "canvas_1" width = "800" height = "400" ]
    This text is displayed if your browser does not support HTML5 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 );



Saturday, July 10, 2010

Teletype gaming and LOVE

Short text based interactive game programs, at the dawn of gaming as an industry, were in a sense simple and trivial. But their influence on the narrow group of people who encountered them was profound. What was behind the curtain? Is this high tech timesharing system a toy, or just being used as a toy? The answer surprised everyone.

For retro-programmers the full content of the book "Basic Computer Games" is available online.
The classic book BASIC Computer Games, published by Creative Computing, inspired a generation of programmers. The games were written by many people, and compiled by David H. Ahl. The fabulous illustrations accompanying each game were done by George Beker.

I've included all the games here for your tinkering pleasure. I've tested and tweaked each one of them to make sure they'll run with Vintage BASIC, though you may see a few oddities. That's part of the fun of playing with BASIC: it never works quite the same on two machines. The games will play better if you keep CAPS LOCK on, as they were designed to be used with capital-letter input.
These text games were designed for teletypewriters or line printers, in an era when memory was valued, succinctness was necessary, and GOTO was considered useful. (Currently "Go To Statement Considered Harmful".)

I've only browsed the contents of more than 100 games. The style is short and sweet: a description of the game, an illustration of a session, and the BASIC code itself.

One of my favorites, although I didn't encounter it back in the days of teletype terminals, is LOVE, an instance of ASCII art programmed by David Ahl, the author of the book. The program generates a facsimile of the iconic pop-art piece LOVE, by Robert Indiana, with a dose of recursion.

Here is Artsy's gallery of Indiana's corpus of work, which gives a good sense of his range.
"I think of my peace paintings as one long poem, with each painting being a single stanza."
-Robert Indiana

A younger generation might more easily recognize Indiana's HOPE graphic, created for and used in Obama's 2008 presidential campaign.