Let’s pixl!

today, we’re going to draw little pixels together.

let’s start!

now you can place pixels on the screen by clicking somewhere. you can move around using the arrow keys and zoom in and out using the scroll wheel.

these are just the basics, the fun begins when you write some javascript to create some bigger shapes, rather than clicking them together yourself.

here’s an example:

function straight_line(from, to) {
    if (from.x == to.x) {
        for (var y = from.y; y < to.y; y++) {
            pixl.draw_pixl({x: from.x, y: y});
    } else if (from.y == to.y) {
        for (var x = from.x; x < to.x; x++) {
            pixl.draw_pixl({x: x, y: from.y});

in firefox, you can open the console using Ctrl + Shift + K or open a “scratchpad” by pressing Shift + F4. the console is ok for shorter commands, but for defining functions and little programs the scratchpad is better suited.

a small warning: don’t try to draw your masterpiece in here without saving the code for it. i wrote the server in a day and it breaks easily and doesn’t save the pixels across restart.

short reference

some ideas

Continue with the next tutorial.