Drawing with Code
An Introduction to Working with @dupdupdraw
@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
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
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.
x y mod dup dup
This was originally written by @ranjit.
x y modtakes the modulus of x by y.
dup dupduplicates the value twice, making the RGB values the same and the image gray.
☙ Looney Toons
128 256 256 dist 64 mod 0
128just puts a number on the stack. This will be a constant red value.
256 256 distgets the distance from the center and puts it on the stack.
64 modtakes the modulus of that value by 64, producing the step-like effect. This is the green value.
0puts a value on the stack, this is a constant blue value.
256 256 dist dup 64 < * dup dup
This is an example of the useful technique of using booleans to turn pixels on or off.
256 256 distputs the distance from the center on the stack.
dup 64 <puts 1 on the stack if the distance is less than 64, otherwise it puts 0 on the stack.
- The distance is multiplied by the 1 or 0, turning off pixels outside the radius of 64.
dup dupcopies the value on the stack (0 or distance) twice so the RGB channels are the same, making the image gray.
x y r x y < *
x y rputs the x and y values on the stack, as well as a random value that's generated for each pixel.
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. Ψ