Drag & Code - Documentation

The programming interface of Drag & Code is designed to provide simple mechanisms to create graphics. It is inspired by the API of Processing.

Shapes

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.

Primitive Shapes

  • 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 (x and y) with the given size (width and 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 (cx and cy) with the given size (width and height).

Ellipse Segments

  • 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 0 and TWO_PI. To convert degrees (range 0 to 360) to radians, you can use radians(degrees). The last parameter can be used for different arc modes, see below.

Example

The following image shows the four different arc modes.

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);

Settings

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.

Example

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);

Math functions

For convenience, the following mathematical functions and constants are provided:

  • sqrt(value): the square root
  • pow(basis,exponent): exponential
  • log(value): the logarithm to base e
  • sin, cos, tan, asin, acos, atan, atan2: trigonometric functions
  • radians(degrees): convert degrees to radians
  • degrees(radians): convert radians to degrees
  • floor, ceil, round: function to round down, round up or round to the nearest integer value
  • random([[low,]high]): get a random value
  • PI, TWO_PI, HALF_PI, QUARTER_PI: mathematical constants useful for describing angles

Expert Information

The Drag & Code programming interface is created using simple means and executes the code directly in the browser. The entered code is evaluated in a separate function within the global JavaScript scope. This implies that all functions which are available in JavaScript are also available here, including alert (use with care!) and more advanced maths functions which are available via the Math object.

Beside basic function calls, more advanced language concepts of JavaScript will also work. This includes variables, 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.