• Parametric Design
• 2D
• Drawing II

Drawing II

Draw Loop

Stopping the draw loop

When you are using random values, you often don't want your layout to be continously redrawn. To stop the draw-cycle, simply call the noLoop() command.

function draw() {
  noLoop();
  // your code
}

Draw Speed

Normally the draw-cycle is called every 60 seconds. You can slow this down to a so called framerate of your choice:

function setup() {
  frameRate(10);
}

While the default framerate is 60, complex visuals can reduce the actual framerate. For smooth animations a framerate of at least 24 should be achieved.

Polygons

After all the abstract JavaScript basics, back to the drawing functions. In the last section we learned about basic shapes like circles and rectangles. All those shapes consist of points, which are connected to one another by lines and then the last point is connected to the first. These lines do not always have to be straight. Looking ahead at our laser cutter work, those lines are the path the laser cutter will take to cut our materials. Let's start with a simple example the rectangle:

rect(0, 0, 40, 20);
point(0,0);
point(40,0);
point(40,20);
point(0,20);

The rectangle consists of four points. We could also create our rectangle shape manually:

beginShape();
vertex(0, 0);
vertex(40, 0);
vertex(40, 20);
vertex(0, 20);
endShape(CLOSE);

We tell p5js that we want to start drawing a shape with the command beginShape();. Then we use the vertex(x, y) command to add a point to our shape. x and y are provided as numbers. When our shape is complete we use the endShape(); command. The CLOSE parameter tells p5js to connect the last point with the first point (if you don't use it, the shape will be open). Starting from this simple example we can build complex shapes.

If you are building more complex shapes, you should make sure that the points are aligned clockwise.

Polar Coordinates

Building a shape with the polar coordinates:

/lectures/2d/drawing2/polarsimple/sketch.jsView on GitHub

Nested loops and the polar-coordinate system (see also math):

/lectures/2d/drawing2/polarcomplex/sketch.jsView on GitHub

Quad & Triangle

If you only want to draw a polygon with 3 or 4 points, you can use the quad and triangle command. Both take a series of x,y parameters to define the points:

quad(0, 0, 40, 0, 40, 20, 0, 20);

triangle(0, 0, 40, 0, 40, 20);

Curves

If we want to go beyond straight lines, we can also use curves. There are three types of curve commands:

beginShape();
curveVertex(0, 0);
curveVertex(40, 0);
curveVertex(40, 20);
curveVertex(0, 20);
endShape(CLOSE);

curveVertex is the easiest command, as it generates the curves for you. With bezierVertex and quadraticVertex you need to build the curves yourself with control points (similar to how you would do it in a vector editing software):

beginShape();
vertex(0, 0); // we need to add a startpoint
quadraticVertex(20, 20, 40, 0);
endShape();

quadraticVertex takes for parameters, the first two are x, y coordinates of the control point and the second two x, y are the new point for our line. bezierVertex requires two control points (vector software) for the start and end of the line:

beginShape();
vertex(0, 0); // we need to add a startpoint
bezierVertex(10, 20, 30, 20, 40, 0);
endShape();

In the beginning when working with curves, it can help a lot to draw all the points and even connect normal points and control points (try editting the point coordinates and observe how the curve changes):

/lectures/2d/drawing2/controlpoints/sketch.jsView on GitHub

Inspiration: Chaotic Curves

/lectures/2d/drawing2/growingcurve/sketch.jsView on GitHub

Back to top