Introduction
Design by Tweet (DBT) enables Twitter users to collaboratively code visual compositions by writing tweets that use a simple Processing-inspired API.
Twitter users can participate by sending a specially formulated tweet to @designbytweet. In response, this account will automatically post an image of the composition after executing the user’s commands.
The Design by Tweet name mirrors that of Design by Numbers, one of John Maeda’s projects at the MIT Media Lab in the 1990s.
Canvas
The collaborative nature of DBT means that multiple users simultaneously contribute to a single drawing surface (canvas). In general, user commands are applied to the canvas in the order in which they are originally tweeted.
The DBT canvas is a fixed size, with a width of 1024 pixels and a height of 512 pixels (for optimal visibility on Twitter). The origin of the canvas, where the x- and y-coordinates are both equal to 0, is located at its top-left corner. From the origin, the x (horizontal) axis increases toward the right of the canvas, and the y (vertical) axis increases toward the bottom.
Tweet Format
To participate, send an @reply tweet to @designbytweet formatted like
@designbytweet command1; command2; command3; ...
where
@designbytweet
is the DBT Twitter handle, followed by a space, andcommand1; command2; command3; ...
is a sequence of one or more commands (see API Reference), each followed by a semicolon.
API Reference
Shape: 2D Primitives
ellipse(x, y, width, height)
Draw an ellipse with its center at point (512, 256), a width of 100 pixels, and a height of 100 pixels.
@designbytweet ellipse(512, 256, 100, 100);
Draws an ellipse (oval) to the canvas. An ellipse with equal width and height is a circle. The first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the ellipse’s width and height.
Parameter | Type | Description |
---|---|---|
x |
integer (literal) | x-coordinate of the center point |
y |
integer (literal) | y-coordinate of the center point |
width |
integer (literal) | width of the ellipse in pixels |
height |
integer (literal) | height of the ellipse in pixels |
line(x1, y1, x2, y2)
Draw a line connecting the points (256, 256) and (768, 256).
@designbytweet line(256, 256, 768, 256);
Draws a line (a direct path between two points) to the canvas. To color a line, use the stroke()
function. A line cannot be filled, therefore the fill()
function will not affect the color of a line. Lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight()
function.
Parameter | Type | Description |
---|---|---|
x1 |
integer (literal) | x-coordinate of the first point |
y1 |
integer (literal) | y-coordinate of the first point |
x2 |
integer (literal) | x-coordinate of the second point |
y2 |
integer (literal) | y-coordinate of the second point |
quad(x1, y1, x2, y2, x3, y3, x4, y4)
Draw a quadrilateral connecting the points (256, 100), (768, 356), (512, 412), and (192, 256).
@designbytweet quad(256, 100, 768, 356, 512, 412, 192, 256);
Draws a quadrilateral (a four sided polygon) to the canvas. A quadrilateral is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters, x1
and y1
, sets the first vertex (point) and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape.
Parameter | Type | Description |
---|---|---|
x1 |
integer (literal) | x-coordinate of the first point |
y1 |
integer (literal) | y-coordinate of the first point |
x2 |
integer (literal) | x-coordinate of the second point |
y2 |
integer (literal) | y-coordinate of the second point |
x3 |
integer (literal) | x-coordinate of the third point |
y3 |
integer (literal) | y-coordinate of the third point |
x4 |
integer (literal) | x-coordinate of the fourth point |
y4 |
integer (literal) | y-coordinate of the fourth point |
rect(x, y, width, height)
Draw a rectangle with its top-left corner at point (312, 156), a width of 400 pixels, and a height of 200 pixels.
@designbytweet rect(312, 156, 400, 200);
Draws a rectangle to the canvas. A rectangle is a four-sided shape with every angle at ninety degrees. The first two parameters set the location of the top-left corner, the third sets the width, and the fourth sets the height.
Parameter | Type | Description |
---|---|---|
x |
integer (literal) | x-coordinate of the top-left corner point |
y |
integer (literal) | y-coordinate of the top-left corner point |
width |
integer (literal) | width of the rectangle in pixels |
height |
integer (literal) | height of the rectangle in pixels |
triangle(x1, y1, x2, y2, x3, y3)
Draw a triangle with points (512, 100), (668, 412), and (356, 412).
@designbytweet triangle(512, 100, 668, 412, 356, 412);
Draws a triangle (a plane created by connecting three points) to the canvas. The first two parameters specify the first point, the middle two parameters specify the second point, and the last two parameters specify the third point.
Parameter | Type | Description |
---|---|---|
x1 |
integer (literal) | x-coordinate of the first point |
y1 |
integer (literal) | y-coordinate of the first point |
x2 |
integer (literal) | x-coordinate of the second point |
y2 |
integer (literal) | y-coordinate of the second point |
x3 |
integer (literal) | x-coordinate of the third point |
y3 |
integer (literal) | y-coordinate of the third point |
Shape: Attributes
strokeCap(type)
Set subsequently drawn lines to have squared endings.
@designbytweet strokeCap(SQUARE);
Sets the style for rendering line endings. These ends are either squared, extended, or rounded, each of which is specified with its corresponding parameter SQUARE
, PROJECT
, or ROUND
. The default cap is ROUND
.
Parameter | Type | Description |
---|---|---|
type |
constant | either SQUARE , PROJECT , or ROUND |
strokeJoin(type)
Set subsequently drawn lines to have rounded joints.
@designbytweet strokeJoin(ROUND);
Sets the style of the joints which connect line segments. These joints are either rounded, beveled, or mitered, each of which is specified with its corresponding parameter ROUND
, BEVEL
, or MITER
. The default joint is MITER
.
Parameter | Type | Description |
---|---|---|
type |
constant | either ROUND , BEVEL , or MITER |
strokeWeight(width)
Set subsequently drawn lines to be 20 pixels wide.
@designbytweet strokeWeight(20);
Sets the width of the stroke used for lines and the borders around shapes. All widths are set in units of pixels. The default weight of strokes is 1 pixel.
Parameter | Type | Description |
---|---|---|
width |
integer (literal) | width of the stroke in pixels |
Color: Setting
background(gray)
background(gray, alpha)
background(red, green, blue)
background(red, green, blue, alpha)
Fill the entire canvas with white.
@designbytweet background(255);
Fills the entire canvas with a color. Opaque background colors clear the canvas of any existing design (as well as reset fill / stroke colors and attributes to their default values), while colors with alpha transparency allow the existing design to remain visible.
Parameter | Type | Description |
---|---|---|
gray |
integer (literal) | gray value: 0 (black) to 255 (white) |
red |
integer (literal) | red component of an RGB color: 0 to 255 |
green |
integer (literal) | green component of an RGB color: 0 to 255 |
blue |
integer (literal) | blue component of an RGB color: 0 to 255 |
alpha |
integer (literal) | opacity: 0 (transparent) to 255 (opaque) |
fill(gray)
fill(gray, alpha)
fill(red, green, blue)
fill(red, green, blue, alpha)
Set subsequently drawn shapes to be filled with yellow.
@designbytweet fill(255, 255, 0);
Sets the color used to fill shapes. The default fill color is white.
Parameter | Type | Description |
---|---|---|
gray |
integer (literal) | gray value: 0 (black) to 255 (white) |
red |
integer (literal) | red component of an RGB color: 0 to 255 |
green |
integer (literal) | green component of an RGB color: 0 to 255 |
blue |
integer (literal) | blue component of an RGB color: 0 to 255 |
alpha |
integer (literal) | opacity: 0 (transparent) to 255 (opaque) |
noFill()
@designbytweet noFill();
Disables drawing the fill of shapes. If both noStroke()
and noFill()
are called, nothing will be drawn to the canvas.
noStroke()
@designbytweet noStroke();
Disables drawing the stroke (outline) of lines and shapes. If both noStroke()
and noFill()
are called, nothing will be drawn to the canvas.
stroke(gray)
stroke(gray, alpha)
stroke(red, green, blue)
stroke(red, green, blue, alpha)
Set subsequently drawn strokes to be ~50% (128/255) transparent cyan.
@designbytweet stroke(0, 255, 255, 128);
Sets the color used to draw lines and the borders around shapes. The default stroke color is black.
Parameter | Type | Description |
---|---|---|
gray |
integer (literal) | gray value: 0 (black) to 255 (white) |
red |
integer (literal) | red component of an RGB color: 0 to 255 |
green |
integer (literal) | green component of an RGB color: 0 to 255 |
blue |
integer (literal) | blue component of an RGB color: 0 to 255 |
alpha |
integer (literal) | opacity: 0 (transparent) to 255 (opaque) |