The programming interface of Drag & Code is designed to provide simple mechanisms to create graphics. It is inspired by the API of Processing.
The functions to draw shapes on the graphics area take coordinates to position the shape. In contrast to a Cartesian coordinate system, the Y axis is flipped, i.e. it increases from the top of the screen to the bottom. The point
0,0 therefore denotes the top left corner.
point(x,y): draw a point.
line(x1,y1,x2,y2): draw a line from the first point to the second point.
rect(x,y,width,height[,radius]): draw a rectangle at the given coordinates (
y) with the given size (
height). The last parameter (
radius) is optional and can be used to draw rounded rectangles with the specified radius.
ellipse(cx,cy,width,height): draw an ellipse with the center point at the given coordinates (
cy) with the given size (
arc(cx,cy,w,h,start,stop[,mode]): draw a segment of an ellipse.
The first four parameter describe the ellipse itself, as for the
ellipse function. The parameters 5 and 6 denote the start and the stop angle of the ellipse segment. The angles have to be specified in radians in the range of
TWO_PI. To convert degrees (range
360) to radians, you can use
radians(degrees). The last parameter can be used for different arc modes, see below.
The following image shows the four different arc modes.
background(200); // QUARTER_PI == radians(45), PI+HALF_PI == radians(270) arc(50, 50, 80, 80, QUARTER_PI, PI+HALF_PI); arc(150, 50, 80, 80, QUARTER_PI, PI+HALF_PI, OPEN); arc(250, 50, 80, 80, QUARTER_PI, PI+HALF_PI, CHORD); arc(350, 50, 80, 80, QUARTER_PI, PI+HALF_PI, PIE);
There are two different kinds of colors: the fill color, which is used to fill shapes like an ellipse, and the stroke color, which is the color of the border of an ellipse or a line.
A color is represented by up to four numbers in the range of 0 - 255. If only one value is given, it represents a gray color, where 0 is black and 255 is white. If three values are given, the values represent the color channels red, green and blue. Both variants can have an additional parameter representing the transparency, where 0 means transparent and 255 represents fully opaque.
fill(color): set the fill color.
noFill(): disable the filling of shapes.
stroke(color): set the line color.
noStroke(): disable the drawing of lines.
strokeWeight(weight): set the width of the lines
background(color): set the background color of the drawing area.
The following code will draw a rectangle with an orange border without a fill color on a gray background:
background(200); stroke(255, 127, 0); noFill(); rect(10, 10, 100, 100);
For convenience, the following mathematical functions and constants are provided:
sqrt(value): the square root
log(value): the logarithm to base
atan2: trigonometric functions
radians(degrees): convert degrees to radians
degrees(radians): convert radians to degrees
round: function to round down, round up or round to the nearest integer value
random([[low,]high]): get a random value
QUARTER_PI: mathematical constants useful for describing angles
alert (use with care!) and more advanced maths functions which are available via the
if conditions as well as loops and functions. However, if loops or functions are used, the code will not be executed automatically but the run button (or
Ctrl+Enter) has to be used to prevent accidental infinite loops.
In case of an infinite loop, the tab or window which contains the web application has to be closed. After reloading the website, the code should be still there and can be edited to remove the infinite loop.
The rendering of the shapes is implemented using the HTML Canvas element. There is also an SVG version available which has a better performance for interaction but is slower for more complex drawings. Note that the SVG renderer is not feature-complete and does not support the image export functionality.