arc

ellipse

line

point

quad

rect

triangle

arc

Arguments
[x y width height start stop][x y width height start stop mode]
Docstring

Draws an arc in the display window. Arcs are drawn along the outer edge of an ellipse defined by the x, y, width and height parameters. The origin or the arc's ellipse may be changed with the ellipse-mode function. The start and stop parameters specify the angles at which to draw the arc. The mode is either :open, :chord or :pie.

Works only inside sketch functions?
Yes
Original Processing method
arc()
Original p5js method
arc()
Example
(q/background 255)
(q/stroke 0)
(q/fill 220 200 255)
; draw default arc
(q/arc 50 100 200 170 0 q/QUARTER-PI)
; draw different arc modes
(doseq [[ind mode] [[0 :open] [1 :chord] [2 :pie]]]
  (q/arc (+ 50 (* ind 150)) 300 200 170 0 q/QUARTER-PI mode))
try example

ellipse

Arguments
[x y width height]
Docstring

Draws an ellipse (oval) in the display window. An ellipse with an equal width and height is a circle. The origin may be changed with the ellipse-mode function.

Works only inside sketch functions?
Yes
Original Processing method
ellipse()
Original p5js method
ellipse()
Example
(q/background 255)
(q/stroke 0)
(q/fill 220 200 255)
(q/ellipse 250 250 400 200)
try example

line

Arguments
[x1 y1 z1 x2 y2 z2][p1 p2][x1 y1 x2 y2]
Docstring

Draws a line (a direct path between two points) to the screen. The version of line with four parameters draws the line in 2D. To color a line, use the stroke function. A line cannot be filled, therefore the fill method will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the stroke-weight function. The version with six parameters allows the line to be placed anywhere within XYZ space.

Works only inside sketch functions?
Yes
Original Processing method
line()
Original p5js method
line()
Example
(q/background 255)
(q/camera 250 250 250 0 0 0 0 0 -1)
; red line
(q/stroke 255 0 0)
(q/line [0 0] [100 100])
; green line
(q/stroke 0 255 0)
(q/line 100 0 0 100)
; three blue lines
(q/stroke 0 0 255)
(q/line 0 0 0 170 120 100)
(q/line 170 120 100 50 -50 20)
(q/line 50 -50 20 0 0 0)
try example

point

Arguments
[x y][x y z]
Docstring

Draws a point, a coordinate in space at the dimension of one pixel.

Parameters:

  • x - the horizontal value for the point
  • y - the vertical value for the point
  • z - the depth value (optional)

Drawing this shape in 3D using the z parameter requires the :p3d or :opengl renderer to be used.

Works only inside sketch functions?
Yes
Original Processing method
point()
Original p5js method
point()
Example
(q/background 255)
(q/stroke-weight 10)
; red ponit
(q/stroke 255 0 0)
(q/point 10 10)
; blue point
(q/stroke 0 0 255)
(q/point 50 50 -200)
try example

quad

Arguments
[x1 y1 x2 y2 x3 y3 x4 y4]
Docstring

A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to be ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape.

Works only inside sketch functions?
Yes
Original Processing method
quad()
Original p5js method
quad()
Example
(q/background 255)
(q/fill 220 200 255)
(q/quad 100 120 450 70 260 390 10 380)
try example

rect

Arguments
[x y width height r][x y width height][x y width height top-left-r top-right-r bottom-right-r bottom-left-r]
Docstring

Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. These parameters may be changed with rect-mode.

To draw a rounded rectangle, add a fifth parameter, which is used as the radius value for all four corners. To use a different radius value for each corner, include eight parameters.

Works only inside sketch functions?
Yes
Original Processing method
rect()
Original p5js method
rect()
Example
(q/background 255)
(q/fill 220 200 255)
; normal rect
(q/rect 50 50 150 100)
; rect with rounded corners
(q/rect 300 50 150 100 20)
; rect with rounded corners where each corner is different
(q/rect 50 300 150 100 5 10 20 30)
try example

triangle

Arguments
[x1 y1 x2 y2 x3 y3]
Docstring

A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point.

Works only inside sketch functions?
Yes
Original Processing method
triangle()
Original p5js method
triangle()
Example
(q/background 255)
(q/fill 220 200 255)
(q/triangle 50 50 450 200 100 390)
try example