2D

These pages explain how to use the 2D primitives in the library

rect() - Rectangle

triangle() - Triangle

point() - Point

line() - Line

ellipse() - Ellipse

circle() - Circle

arc() - Arc

quad() - Quadrilateral

beginShape() - General Polygon

How are 2D Shapes drawn?

In 2D mode, shapes are defined by a sequence of vertices that are then connected into edges to form a closed region.

This is what the final shape looks like

The region can be filled with any color using fill(), and the edges can be colored using stroke().

Shortcut to common shapes

Some shapes have a known configuration of vertices (for example, we all know what the vertices of a square look like), and this gives us an advantage to use other simpler information (like the center of the square, and the length of its sides), and from that, we can calculate all the other vertices.

Shapes like circle(), ellipse(), arc(), square(), rect() offer that shortcut. You can always resort to using beginShape(), triangle(), or quad().

Vertices

quad(x1, y1, x2, y2, x3, y3, x4, y4)

Shortcut

rect(x, y, size, size)

Find these documents helpful? Let the people who made them help your child learn to code at Strivemath!

We'd love to hear your Feedback/Comments here.