Utility Macros

apply-matrix

pop-matrix

print-matrixclj

push-matrix

reset-matrix

rotate

rotate-x

rotate-y

rotate-z

scale

shear-x

shear-y

translate

apply-matrix

Arguments
[n00 n01 n02 n03 n10 n11 n12 n13 n20 n21 n22 n23 n30 n31 n32 n33]clj[n00 n01 n02 n10 n11 n12]clj[a b c d e f]cljs
Docstring

Multiplies the current matrix by the one specified through the parameters. This is very slow because it will try to calculate the inverse of the transform, so avoid it whenever possible. The equivalent function in OpenGL is glMultMatrix().

Note that cljs has only 2d version and arguments differ see https://p5js.org/reference/#/p5/applyMatrix

Works only inside sketch functions?
Yes
Original Processing method
applyMatrix()
Original p5js method
applyMatrix()
Example
clojure specific
  • ; setup camera
    (q/camera 200 200 200 0 0 0 0 0 -1)
    (q/no-fill)
    ; draw box at [0 0 0]
    (q/box 50)
    ; move positiion by [50 -50 0] and draw box
    (q/apply-matrix 1 0 50 0 1 -50)
    (q/box 50)
    ; rotate position and move by [0 50 -50] and draw box
    (let [s (q/sin 1)
          c (q/cos 1)]
      (q/apply-matrix 1 0 0 0 0 c s 50 0 (- s) c -50 0 0 0 1))
    (q/box 50)
clojurescript specific
  • (q/no-fill)
    (q/rect 10 10 50 50)
    ; move position by 100, 100 and shear
    (q/apply-matrix 1 0 1 1 100 100)
    (q/rect 10 10 50 50)
    try example

pop-matrix

Arguments
[]
Docstring

Pops the current transformation matrix off the matrix stack. Understanding pushing and popping requires understanding the concept of a matrix stack. The push-matrix function saves the current coordinate system to the stack and pop-matrix restores the prior coordinate system. push-matrix and pop-matrix are used in conjunction with the other transformation methods and may be embedded to control the scope of the transformations.

Works only inside sketch functions?
Yes
Original Processing method
popMatrix()
Original p5js method
pop()
Example
(q/fill 255 0 0)
; draw rect at [20, 20]
(q/translate 20 20)
(q/rect 0 0 50 50)
; move by 150 to right and save matrix
(q/translate 150 0)
(q/push-matrix)
; rotate matrix and draw rect
(q/rotate 1)
(q/rect 0 0 50 50)
; pop matrix should revert rotation
(q/pop-matrix)
; move by another 150 pixels and draw rect
(q/translate 150 0)
(q/rect 0 0 50 50)
try example

push-matrix

Arguments
[]
Docstring

Pushes the current transformation matrix onto the matrix stack. Understanding [push-matrix and pop-matrix requires understanding the concept of a matrix stack. The push-matrix function saves the current coordinate system to the stack and pop-matrix restores the prior coordinate system. push-matrix and pop-matrix are used in conjunction with the other transformation methods and may be embedded to control the scope of the transformations.

Works only inside sketch functions?
Yes
Original Processing method
pushMatrix()
Original p5js method
push()
Example
(q/fill 255 0 0)
; draw rect at [20, 20]
(q/translate 20 20)
(q/rect 0 0 50 50)
; move by 150 to right and save matrix
(q/translate 150 0)
(q/push-matrix)
; rotate matrix and draw rect
(q/rotate 1)
(q/rect 0 0 50 50)
; pop matrix should revert rotation
(q/pop-matrix)
; move by another 150 pixels and draw rect
(q/translate 150 0)
(q/rect 0 0 50 50)
try example

reset-matrix

Arguments
[]
Docstring

Replaces the current matrix with the identity matrix. The equivalent function in OpenGL is glLoadIdentity()

Works only inside sketch functions?
Yes
Original Processing method
resetMatrix()
Original p5js method
resetMatrix()
Example
(q/rect 0 0 100 50)
(q/translate 250 250)
(q/rect 0 0 50 50)
; resetting brings us back to [0, 0]
(q/reset-matrix)
(q/rect 0 0 50 100)
try example

rotate

Arguments
[angle][angle vx vy vz]
Docstring

Rotates a shape the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to TWO-PI) or converted to radians with the radians function.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling (rotate HALF-PI) and then (rotate HALF-PI) is the same as (rotate PI). All transformations are reset when draw begins again.

Technically, rotate multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push-matrix and pop-matrix functions.

When 4 arguments are provided it produces a rotation of angle degrees around the vector vx vy vz. Check examples to better understand. This rotation follows the right-hand rule, so if the vector x y z points toward the user, the rotation will be counterclockwise.

Works only inside sketch functions?
Yes
Original Processing method
rotate()
Original p5js method
rotate()
Example
clojure specific
  • (q/camera 200 200 200 0 0 0 0 0 -1)
    (q/no-fill)
    (q/box 50)
    (q/push-matrix)
    (q/translate 100 0 0)
    (q/rotate 0.5)
    (q/box 50)
    (q/pop-matrix)
    (q/push-matrix)
    (q/translate 0 100 0)
    (q/rotate 0.5 1 0 0)
    (q/box 50)
    (q/pop-matrix)
    (q/push-matrix)
    (q/translate 0 0 100)
    (q/rotate 0.5 0 1 0)
    (q/box 50)
    (q/pop-matrix)
clojurescript specific
  • (q/stroke 100)
    (q/no-fill)
    (q/rect 0 0 52 52)
    (q/translate (/ (q/width) 4) (/ (q/height) 4))
    (q/rotate (/ q/PI 3))
    (q/rect 0 0 52 52)
    try example

rotate-x

Arguments
[angle]
Docstring

Rotates a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to (* PI 2)) or converted to radians with the radians function. Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a counterclockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling (rotate-x HALF-PI) and then (rotate-x HALF-PI) is the same as (rotate-x PI). If rotate-x is called within the draw function, the transformation is reset when the loop begins again. This function requires either the :p3d or :opengl renderer.

Works only inside sketch functions?
Yes
Original Processing method
rotateX()
Original p5js method
rotateX()
Example
(q/background 255)
; setup camera and draw box at [0 0 0]
(q/camera 200 200 200 0 0 0 0 0 -1)
(q/no-fill)
(q/box 50)
(q/push-matrix)
; move, rotate x axis and draw box
(q/translate 100 0 0)
(q/rotate-x 0.5)
(q/box 50)
(q/pop-matrix)
(q/push-matrix)
; move, rotate y axis and draw box
(q/translate 0 100 0)
(q/rotate-y 0.5)
(q/box 50)
(q/pop-matrix)
(q/push-matrix)
; move, rotate z axis and draw box
(q/translate 0 0 100)
(q/rotate-z 0.5)
(q/box 50)
(q/pop-matrix)
try example

rotate-y

Arguments
[angle]
Docstring

Rotates a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to (* PI 2)) or converted to radians with the radians function. Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a counterclockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling (rotate-y HALF-PI) and then (rotate-y HALF-PI) is the same as (rotate-y PI). If rotate-y is called within the draw function, the transformation is reset when the loop begins again. This function requires either the :p3d or :opengl renderer.

Works only inside sketch functions?
Yes
Original Processing method
rotateY()
Original p5js method
rotateY()
Example
(q/background 255)
; setup camera and draw box at [0 0 0]
(q/camera 200 200 200 0 0 0 0 0 -1)
(q/no-fill)
(q/box 50)
(q/push-matrix)
; move, rotate x axis and draw box
(q/translate 100 0 0)
(q/rotate-x 0.5)
(q/box 50)
(q/pop-matrix)
(q/push-matrix)
; move, rotate y axis and draw box
(q/translate 0 100 0)
(q/rotate-y 0.5)
(q/box 50)
(q/pop-matrix)
(q/push-matrix)
; move, rotate z axis and draw box
(q/translate 0 0 100)
(q/rotate-z 0.5)
(q/box 50)
(q/pop-matrix)
try example

rotate-z

Arguments
[angle]
Docstring

Rotates a shape around the z-axis the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to (* PI 2)) or converted to radians with the radians function. Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a counterclockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling (rotate-z HALF-PI) and then (rotate-z HALF-PI) is the same as (rotate-z PI). If rotate-y is called within the draw function, the transformation is reset when the loop begins again. This function requires either the :p3d or :opengl renderer.

Works only inside sketch functions?
Yes
Original Processing method
rotateZ()
Original p5js method
rotateZ()
Example
(q/background 255)
; setup camera and draw box at [0 0 0]
(q/camera 200 200 200 0 0 0 0 0 -1)
(q/no-fill)
(q/box 50)
(q/push-matrix)
; move, rotate x axis and draw box
(q/translate 100 0 0)
(q/rotate-x 0.5)
(q/box 50)
(q/pop-matrix)
(q/push-matrix)
; move, rotate y axis and draw box
(q/translate 0 100 0)
(q/rotate-y 0.5)
(q/box 50)
(q/pop-matrix)
(q/push-matrix)
; move, rotate z axis and draw box
(q/translate 0 0 100)
(q/rotate-z 0.5)
(q/box 50)
(q/pop-matrix)
try example

scale

Arguments
[sx sy][sx sy sz][s]
Docstring

Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call (scale 2) increases the dimension of a shape by 200%. Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling (scale 2) and then (scale 1.5) is the same as (scale 3). If scale is called within draw, the transformation is reset when the loop begins again. Using this function with the sz parameter requires specifying :p3d or :opengl as the renderer. This function can be further controlled by push-matrix and pop-matrix.

Works only inside sketch functions?
Yes
Original Processing method
scale()
Original p5js method
scale()
Example
(q/background 255)
; setup camera and draw box at [0 0 0]
(q/camera 200 200 200 0 0 0 0 0 -1)
(q/no-fill)
(q/box 50)
; draw box 50% smaller
(q/with-translation [100 0 0]
  (q/scale 0.5)
  (q/box 50)
  (q/scale 2))
; draw box 50% narrower but same length/height
(q/with-translation [0 100 0]
  (q/scale 1 0.5)
  (q/box 50)
  (q/scale 1 2))
; draw box 50% shorter and 150% taller, but same width
(q/with-translation [0 0 100]
  (q/scale 0.5 1 1.5)
  (q/box 50)
  (q/scale 2 1 0.75))
try example

shear-x

Arguments
[angle]
Docstring

Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the radians function. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling (shear-x (/ PI 2)) and then (shear-x (/ PI 2)) is the same as (shear-x PI). If shear-x is called within the draw function, the transformation is reset when the loop begins again. This function works in P2D or JAVA2D mode.

Technically, shear-x multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push-matrix and pop-matrix functions.

Works only inside sketch functions?
Yes
Original Processing method
shearX()
Original p5js method
shearX()
Example
; draw normal rect
(q/with-translation [125 125]
  (q/rect 0 0 100 50))
; draw rect sheared by y
(q/with-translation [375 125]
  (q/shear-y 0.5)
  (q/rect 0 0 100 50))
; draw rect sheared by x
(q/with-translation [125 375]
  (q/shear-x 0.5)
  (q/rect 0 0 100 50))
try example

shear-y

Arguments
[angle]
Docstring

Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the radians function. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling (shear-y (/ PI 2)) and then (shear-y (/ PI 2)) is the same as (shear-y PI). If shear-y is called within the draw function, the transformation is reset when the loop begins again. This function works in P2D or JAVA2D mode.

Technically, shear-y multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push-matrix and pop-matrix functions.

Works only inside sketch functions?
Yes
Original Processing method
shearY()
Original p5js method
shearY()
Example
; draw normal rect
(q/with-translation [125 125]
  (q/rect 0 0 100 50))
; draw rect sheared by y
(q/with-translation [375 125]
  (q/shear-y 0.5)
  (q/rect 0 0 100 50))
; draw rect sheared by x
(q/with-translation [125 375]
  (q/shear-x 0.5)
  (q/rect 0 0 100 50))
try example

translate

Arguments
[tx ty tz][tx ty][v]
Docstring

Specifies an amount to displace objects within the display window. The tx parameter specifies left/right translation, the ty parameter specifies up/down translation, and the tz parameter specifies translations toward/away from the screen. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling (translate 50 0) and then (translate 20, 0) is the same as (translate 70, 0). If translate is called within draw, the transformation is reset when the loop begins again. This function can be further controlled by the push-matrix and pop-matrix functions.

Works only inside sketch functions?
Yes
Original Processing method
translate()
Original p5js method
translate()
Example
(q/background 255)
; setup camera and draw box at [0 0 0]
(q/camera 200 200 200 0 0 0 0 0 -1)
(q/no-fill)
(q/box 50)
; draw 3 identical boxes in 3 different positions
; using different translate calls
(q/translate 100 0)
(q/box 50)
(q/translate [-100 100])
(q/box 50)
(q/translate 0 -100 100)
(q/box 50)
try example