Chris McCormick

Phones are the new PCs. Android is the new Windows. Google is the new Microsoft.

18 android phones this year.

[ ]  dorkbotlondon #61
/|\  The summer season of dork is here
/ \

When:
   7pm, 4th June 2009
Where:
   The boxing club, Limehouse town hall, E14 7HA
   For directions and instructions for getting in to the building go here:
   http://dorkbotlondon.org/event/dorkbotlondon61/

Featuring presentations from the well-combed and frisky...

* RJDJ  - Chris McCormick
  (Pure data on the iphone)

* sketchPatch - Davide Della Casa
  (an online programming playground based on Processing, somewhere to
  experiment with code, reuse and collaborate on existing code, share
  and learn)

* Orbiter - an interactive sound environment - Vera-Maria Glahn & Marcus Wendt
  (Process of an interactive installation using generative sound and
  visuals and stereo motion tracking - from idea to play)

Plus!  Opendorks.  If you'd like to give a 7 minute ad-hoc
presentation about something then drop us a mail or let us know on the
night.  Or if you'd like to give a longer presentation drop us a mail
and we'll schedule you for a future dork.

http://dorkbotlondon.org/event/dorkbotlondon61/

I've been experimenting with the Javascript port of processing by John Resig and it seems like it could be quite good for rapidly prototyping games on the web. One of the great things about it is that it doesn't require any plugins or proprietary technologies like Flash, relying instead on the canvas element. There are some awesome demos of it in action on the website. I made a little fork which is optimised for the task of writing object oriented game code, which you can see in action below. Try clicking on the spinning asteroids.

My fork implements a basic mainloop into which you can inject new game entities with the function addEntity(); and a bunch of convenience methods which you can implement to draw your entities, or capture events like mouse clicks. As per processingjs, you can use processing's Java style syntax, or Javascript syntax instead. Here's the source to the above example:

size(400, 225);

function Asteroid(radius, x, y) {
    // variables
    this.x = x || random(0, width);
    this.y = y || random(0, height);
    this.angle = random(0, PI);
    this.radius = radius || 40;
    // velocities
    this.angleV = random(-0.1, 0.1);
    this.xV = random(-0.5, 0.5);
    this.yV = random(-0.5, 0.5);
    // structure of this shape
    this.points = [];
    this.randomPoint = function() {
        return random(-this.radius/2, this.radius/2);
    }
    for (i=0; i<round(this.radius / 5); i++)
        this.points.push([this.radius * Math.sin(i * PI / round(this.radius / 10)) + this.randomPoint(),
            this.radius * Math.cos(i * PI / round(this.radius / 10)) + this.randomPoint()]);
    this.poly = [];

    this.collisionPoly = function() {
        return this.poly;
    }

    this.mouseDown = function() {
        if (this.radius > 25) {
            addEntity(new Asteroid(this.radius / 3 * 2, this.x + this.randomPoint(), this.y + this.randomPoint()));
            addEntity(new Asteroid(this.radius / 3 * 2, this.x + this.randomPoint(), this.y + this.randomPoint()));
        }
        delEntity(this);
    }

    this.update = function() {
        // update all our state variables
        this.angle += this.angleV;
        this.x = (this.x + this.xV + width) % width;
        this.y = (this.y + this.yV + height) % height;
        // update our shape definition
        for (n=0; n<this.points.length; n++) {
            this.poly[n] = [this.points[n][0] * cos(this.angle) - this.points[n][1] * sin(this.angle) + this.x,
                this.points[n][0] * sin(this.angle) + this.points[n][1] * cos(this.angle) + this.y];
        }
    }

    this.draw = function() {
        stroke(255);
        noFill();
        beginShape();
        for (n=0; n<this.poly.length; n++) {
            vertex(this.poly[n][0], this.poly[n][1]);
        }
        endShape(CLOSE);
    }
}

addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());

I you want to check out all of the code, including my modified version of processingjs, I've put my bzr repository online and you can get it like this:

bzr co http://mccormick.cx/dev/gameprocjs/

Or you can click here to download a zipfile of the source.

The main thing to be aware of is that any object added with addentity() should have an update() method, which will get called once per game loop to update your object's state, and a draw() method where you should put the code to draw your object. Other useful methods which you can implement include mouseDown() and mouseUp(), both of which require that you provide a method called collisionPoly() which returns a list of points that define a collision polygon for your game entity. Later I hope to add my Javascript recursive dimensional clustering implementation which will make it really simple to detect in-game collisions and will also require a method called getBoundingBox() which will make the collision detection and mouse-click-detection much more efficient.

Anyway, if you're interested in using this I'd love to hear from you!

Here are some programmy things I have been exploring recently.

google-mobwrite is a framework for synchronising human edited text. It all integrates nicely with web pages through Javascript and the HTML textarea element (also other elements too), and also on the server side there are Python and other implementations of the protocol, including a ready-to-launch app-engine version. Very nice. I have implemented a very basic etherpad clone called txtfish using mobwrite.

processingjs.org is a basic Javascript and canvas element port of some of the Java-based proce55ing multimedia language/framework, magically called into being by the ultimate Javascript ninja, John Resig. This is cool because with the speedup in modern Javascript engines, it demonstrates the possible death of flash in the not too distant future, if we're lucky. Another cool and vaguely similar project is Raphael, although I haven't tried it yet myself.