Fork me on GitHub

DBN.js by nsfmc

a design by numbers port in javascript backed by canvas.
Paper 0
Pen 100
Repeat A 0 100
{
  Pen A
  Line A 0 A 100
}
Repeat B 25 75
{
  Pen B
  Line 25 B 75 B
}

Demos / Language

paper

Here's the paper command. You can use it to set the background color. It takes one argument, the value of the background from 0-100, inclusive.

paper 35

line

This is the line command. It takes four arguments, the first two are the starting x point and the last two represent the starting y point

paper 0
line 45 75 65 15
line 55 45 35 15

set

Here's the set command. You can use it to save numbers in variables with easy to remember names.

set a 65
line a 23 54 a
set a 23
line a 23 54 a
set a 3
line a 23 54 a

repeat

This is the repeat command, you use it to repeat things over and over again.

I'm curious about what that last command looked like if i had picked a bunch of a values, but i'm so lazy. But with repeat, I can find out what it'd look like!

paper 0
repeat a 3 65
{
  line a 23 54 a
}

I can even see it draw itself!

paper 0
repeat a 3 65
{
  pen a
  line a 23 54 a
}

Why not processing(.js)?

DBN is something altogether different than processing. While processing can be used to make very impressive graphics, it's perhaps a bit too powerful to be a pedagogical sketchbook. The point of this library is to make dbn accessible now that java applets are slowly being unsupported. Secondly, it's a very neat language and still incredibly expressive even though it's very limited.

Notes

The current implementation is fairly technically limited, it is capable of simple iteration, but it cannot deal with nested iteration (yet). The following commands are implemented: paper, line, repeat (non-nested), set. This means that there are still a good number of commands not yet defined (including command, forever, and the interactive ones)! Additionally, equations are not evaluated :(

Authors

Marcos Ojeda (subliminal@gmail.com) although design by numbers is itself © mit acg/plw.

Downloading & Collaboration

I could really use help! I'm no expert in writing a parser/compiler, so the current implementation is quite naïve. I'd love any help you can offer. I've considered using jison or peg.js, but these solutions seem a bit overkill, so right now the parser is fairly simple.

You can download this project in either zip or tar formats.

You can clone the project, like i do, with hg-git by running:

$ hg clone git://github.com/nsfmc/dbn.js

provided you have mercurial bookmarks and hg-git installed.