Drawing with Code

@dupdupdraw is a Twitter bot I made recently that interperets a Forth-inspired language to draw pictures. The most important thing to know about Forth is that if you want to add two and three, you write 2 3 +, not 2 + 3.

Note: @dupdupdraw was put to rest on January 14, 2018 after years of dedicated service. The account will stay up for posterity and the code remains accessible on Github.

The way @dupdupdraw works is it executes your tweet once for each pixel of the resulting 512x512 image, and the last three values on the stack become the red, green, and blue values of the pixel (in a range from 0-255). Some words, like numbers, have the same value for every pixel, while others, like x and y differ appropriately based on your position in the image. Some words don't have a fixed value, but instead do things to words that come before them; examples of this kind of words are +, -, mod, sin, or dist. For a full list of words and details check the README.

With that, let's get on to some quick examples. To try any of these out, just tweet them at @dupdupdraw.

☙ Stairs

x y mod dup dup

This was originally written by @ranjit.

1. x y mod takes the modulus of x by y.
2. dup dup duplicates the value twice, making the RGB values the same and the image gray.

☙ Looney Toons

128 256 256 dist 64 mod 0

1. 128 just puts a number on the stack. This will be a constant red value.
2. 256 256 dist gets the distance from the center and puts it on the stack.
3. 64 mod takes the modulus of that value by 64, producing the step-like effect. This is the green value.
4. 0 puts a value on the stack, this is a constant blue value.

☙ Circle

256 256 dist dup 64 < * dup dup

This is an example of the useful technique of using booleans to turn pixels on or off.

1. First 256 256 dist puts the distance from the center on the stack.
2. dup 64 < puts 1 on the stack if the distance is less than 64, otherwise it puts 0 on the stack.
3. The distance is multiplied by the 1 or 0, turning off pixels outside the radius of 64.
4. dup dup copies the value on the stack (0 or distance) twice so the RGB channels are the same, making the image gray.

☙ Noise

x y r x y < *

1. x y r puts the x and y values on the stack, as well as a random value that's generated for each pixel.
2. x y < * makes the top value (r) 0 unless x is less than y.

Take a look at the favorites for more ideas, and feel free to ask me if you have any questions. Ψ