NAV

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.

The DBT canvas

Tweet Format

To participate, send an @reply tweet to @designbytweet formatted like

@designbytweet command1; command2; command3; ...

where

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)