begin-contour

begin-shape

bezier-vertex

curve-vertex

end-contour

end-shape

quadratic-vertex

texture

texture-modeclj

texture-wrapclj

vertex

begin-contour

Arguments
[]
Docstring

Use the begin-contour and end-contour function to create negative shapes within shapes. These functions can only be used within a begin-shape/end-shape pair and they only work with the :p2d and :p3d renderers.

Works only inside sketch functions?
Yes
Original Processing method
beginContour()
Original p5js method
beginContour()
Example
(q/stroke 255 0 0)
(q/fill 0 127 0)
(q/begin-shape)
; outer shape
(q/vertex 250 20)
(q/vertex 400 400)
(q/vertex 50 400)
; inner shape
(q/begin-contour)
(q/vertex 200 200)
(q/vertex 250 380)
(q/vertex 300 200)
(q/end-contour)
(q/end-shape :close)
try example

begin-shape

Arguments
[mode][]
Docstring

Enables the creation of complex forms. begin-shape begins recording vertices. With no mode specified, the shape can be any irregular polygon.

The available mode keywords are :points, :lines, :triangles, :triangle-fan, :triangle-strip, :quads, :quad-strip.

After calling the begin-shape function, a series of vertex commands must follow. To stop drawing the shape, call end-shape. The vertex function with two parameters specifies a position in 2D and the vertex function with three parameters specifies a position in 3D. Each shape will be outlined with the current-stroke color and filled with the fill color.

Transformations such as translate, rotate, and scale do not work within begin-shape. It is also not possible to use other shapes, such as ellipse or rect within begin-shape.

Works only inside sketch functions?
Yes
Original Processing method
beginShape()
Original p5js method
beginShape()
Example
(let [gr (q/create-graphics 400 400 :p2d)]
  (q/with-graphics gr
    (q/stroke 255 0 0)
    (q/begin-shape :triangles)
    (q/vertex 200 40)
    (q/vertex 320 120)
    (q/vertex 320 280)
    (q/vertex 200 360)
    (q/vertex 80 280)
    (q/vertex 80 120)
    (q/end-shape))
  (q/image gr 0 0))
try example
(q/stroke 255 0 0)
; try all kinds of begin modes
(doseq [[ind begin-mode close-mode]
          [[0 nil nil] [1 nil :close] [2 :points] [3 :lines] [4 :triangles]
           [5 :triangle-fan] [6 :triangle-strip] [7 :quads] [8 :quad-strip]]
        :let [base-x (* 150 (mod ind 3))
              base-y (* 150 (quot ind 3))]]
  (if begin-mode (q/begin-shape begin-mode) (q/begin-shape))
  (q/vertex (+ base-x 50) (+ base-y 10))
  (q/vertex (+ base-x 80) (+ base-y 30))
  (q/vertex (+ base-x 80) (+ base-y 70))
  (q/vertex (+ base-x 50) (+ base-y 90))
  (q/vertex (+ base-x 20) (+ base-y 70))
  (q/vertex (+ base-x 20) (+ base-y 30))
  (if close-mode (q/end-shape close-mode) (q/end-shape)))
try example

bezier-vertex

Arguments
[cx1 cy1 cx2 cy2 x y][cx1 cy1 cz1 cx2 cy2 cz2 x y z]
Docstring

Specifies vertex coordinates for Bezier curves. Each call to bezier-vertex defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time bezier-vertex is used within a begin-shape call, it must be prefaced with a call to vertex to set the first anchor point. This function must be used between begin-shape and end-shape and only when there is no parameter specified to begin-shape.

Works only inside sketch functions?
Yes
Original Processing method
bezierVertex()
Original p5js method
bezierVertex()
Example
(q/background 255)
(q/camera -400 250 -100 500 250 0 0 0 1)
; draw first shape
(q/begin-shape)
(q/vertex 30 20)
(q/bezier-vertex 480 0 480 475 30 475)
(q/bezier-vertex 250 380 360 125 30 20)
(q/end-shape :close)
; draw second shape
(q/begin-shape)
(q/vertex 30 20 0)
(q/bezier-vertex 480 0 20 480 475 30 30 475 40)
(q/bezier-vertex 250 380 40 360 125 10 30 20 0)
(q/end-shape :close)
try example

curve-vertex

Arguments
[x y][x y z]
Docstring

Specifies vertex coordinates for curves. This function may only be used between begin-shape and end-shape and only when there is no mode keyword specified to begin-shape. The first and last points in a series of curve-vertex lines will be used to guide the beginning and end of a the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curve-vertex will draw the curve between the second, third, and fourth points. The curve-vertex function is an implementation of Catmull-Rom splines.

Works only inside sketch functions?
Yes
Original Processing method
curveVertex()
Original p5js method
curveVertex()
Example
(q/background 255)
(q/camera 50 200 50 50 0 0 0 0 1)
; draw first shape
(q/begin-shape)
(q/curve-vertex 0 0)
(q/curve-vertex 0 0)
(q/curve-vertex 100 20)
(q/curve-vertex 100 80)
(q/curve-vertex 20 80)
(q/curve-vertex 0 0)
(q/curve-vertex 0 0)
(q/end-shape :close)
; draw second shape
(q/begin-shape)
(q/curve-vertex 0 0 0)
(q/curve-vertex 0 0 0)
(q/curve-vertex 100 0 20)
(q/curve-vertex 100 0 80)
(q/curve-vertex 20 0 80)
(q/curve-vertex 0 0 0)
(q/curve-vertex 0 0 0)
(q/end-shape :close)
try example

end-contour

Arguments
[]
Docstring

Use the begin-contour and end-contour function to create negative shapes within shapes. These functions can only be within a begin-shape/end-shape pair and they only work with the :p2d and :p3d renderers.

Works only inside sketch functions?
Yes
Original Processing method
endContour()
Original p5js method
endContour()
Example
(q/stroke 255 0 0)
(q/fill 0 127 0)
(q/begin-shape)
; outer shape
(q/vertex 250 20)
(q/vertex 400 400)
(q/vertex 50 400)
; inner shape
(q/begin-contour)
(q/vertex 200 200)
(q/vertex 250 380)
(q/vertex 300 200)
(q/end-contour)
(q/end-shape :close)
try example

end-shape

Arguments
[mode][]
Docstring

May only be called after begin-shape. When end-shape is called, all of image data defined since the previous call to begin-shape is written into the image buffer. The keyword :close may be passed to close the shape (to connect the beginning and the end).

Works only inside sketch functions?
Yes
Original Processing method
endShape()
Original p5js method
endShape()
Example
(let [gr (q/create-graphics 400 400 :p2d)]
  (q/with-graphics gr
    (q/stroke 255 0 0)
    (q/begin-shape :triangles)
    (q/vertex 200 40)
    (q/vertex 320 120)
    (q/vertex 320 280)
    (q/vertex 200 360)
    (q/vertex 80 280)
    (q/vertex 80 120)
    (q/end-shape))
  (q/image gr 0 0))
try example
(q/stroke 255 0 0)
; try all kinds of begin modes
(doseq [[ind begin-mode close-mode]
          [[0 nil nil] [1 nil :close] [2 :points] [3 :lines] [4 :triangles]
           [5 :triangle-fan] [6 :triangle-strip] [7 :quads] [8 :quad-strip]]
        :let [base-x (* 150 (mod ind 3))
              base-y (* 150 (quot ind 3))]]
  (if begin-mode (q/begin-shape begin-mode) (q/begin-shape))
  (q/vertex (+ base-x 50) (+ base-y 10))
  (q/vertex (+ base-x 80) (+ base-y 30))
  (q/vertex (+ base-x 80) (+ base-y 70))
  (q/vertex (+ base-x 50) (+ base-y 90))
  (q/vertex (+ base-x 20) (+ base-y 70))
  (q/vertex (+ base-x 20) (+ base-y 30))
  (if close-mode (q/end-shape close-mode) (q/end-shape)))
try example

quadratic-vertex

Arguments
[cx cy cz x3 y3 z3][cx cy x3 y3]
Docstring

Specifies vertex coordinates for quadratic Bezier curves. Each call to quadratic-vertex defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadratic-vertex is used within a begin-shape call, it must be prefaced with a call to vertex to set the first anchor point. This function must be used between begin-shape and end-shape and only when there is no MODE parameter specified to begin-shape. Using the 3D version requires rendering with :p3d.

Works only inside sketch functions?
Yes
Original Processing method
quadraticVertex()
Original p5js method
quadraticVertex()
Example
(q/background 255)
; setup camera and draw axes
(q/camera 50 200 50 50 0 0 0 0 -1)
(q/line 0 0 0 0 0 100)
(q/line 0 0 0 0 100 0)
(q/line 0 0 0 100 0 0)
; draw first shape
(q/begin-shape)
(q/vertex 0 0)
(q/quadratic-vertex 30 50 10 100)
(q/quadratic-vertex 50 -50 90 100)
(q/quadratic-vertex 80 50 100 0)
(q/end-shape :close)
; draw second shape
(q/begin-shape)
(q/vertex 0 0 0)
(q/quadratic-vertex 30 0 50 10 0 100)
(q/quadratic-vertex 50 0 -50 90 0 100)
(q/quadratic-vertex 80 0 50 100 0 0)
(q/end-shape :close)
try example

texture

Arguments
[img]
Docstring

Sets a texture to be applied to vertex points. The texture function must be called between begin-shape and end-shape and before any calls to vertex.

When textures are in use, the fill color is ignored. Instead, use tint to specify the color of the texture as it is applied to the shape.

Works only inside sketch functions?
Yes
Original Processing method
texture()
Original p5js method
texture()
Example
clojure specific
  • (let [gr (q/create-graphics 100 100)]
      ; draw something on graphics that will be texture
      (q/with-graphics gr
        (q/background 255)
        (q/fill 255 0 0)
        (q/rect 0 60 100 40)
        (q/fill 0 150 0)
        (q/rect 0 0 100 60))
      ; draw graphics to see what we got
      (q/image gr 0 0)
      ; draw custom shape using texture we created above
      (q/with-translation [250 250]
        (q/begin-shape)
        (q/texture gr)
        (q/vertex 50 100 75 100)
        (q/vertex 100 50 100 75)
        (q/vertex 100 -50 100 25)
        (q/vertex 50 -100 75 0)
        (q/vertex -50 -100 25 0)
        (q/vertex -100 -50 0 25)
        (q/vertex -100 50 0 75)
        (q/vertex -50 100 25 100)
        (q/end-shape :close)))
clojurescript specific
  • ; 
    ; setup
    ; 
    (q/set-state! :image (q/load-image "https://placekitten.com/100/100"))
    ; 
    ; draw
    ; 
    (q/background 255)
    (if (zero? (.-width (q/state :image)))
      (q/text "Loading" 10 10)
      (let [gr (q/state :image)]
        (q/with-translation [50 0]
          (q/texture gr)
          (q/plane 200 200))))
    try example

texture-modeclj

Arguments
[mode]
Docstring

Sets the coordinate space for texture mapping. There are two options, :image and :normal.

:image refers to the actual coordinates of the image and :normal refers to a normalized space of values ranging from 0 to 1. The default mode is :image. In :image, if an image is 100 x 200 pixels, mapping the image onto the entire size of a quad would require the points (0,0) (0,100) (100,200) (0,200). The same mapping in NORMAL_SPACE is (0,0) (0,1) (1,1) (0,1).

Works only inside sketch functions?
Yes
Original Processing method
textureMode()
Original p5js method
None.
Example
clojure specific
  • (let [gr (q/create-graphics 100 100)]
      (q/with-graphics gr
        (q/background 255)
        (q/fill 255 0 0)
        (q/rect 0 60 100 40)
        (q/fill 0 150 0)
        (q/rect 0 0 100 60))
      (q/image gr 0 0)
      (q/with-translation [375 125]
        (q/begin-shape)
        (q/texture gr)
        (q/texture-mode :image)
        (q/vertex 0 0 0 0)
        (q/vertex 100 100 100 100)
        (q/vertex 0 100 0 100)
        (q/end-shape :close))
      (q/with-translation [125 375]
        (q/begin-shape)
        (q/texture gr)
        (q/texture-mode :normal)
        (q/vertex 0 0 0 0)
        (q/vertex 100 100 1 1)
        (q/vertex 0 100 0 1)
        (q/end-shape :close)))

texture-wrapclj

Arguments
[mode]
Docstring

Defines if textures repeat or draw once within a texture map. The two parameters are :clamp (the default behavior) and :repeat. This function only works with the :p2d and :p3d renderers.

Works only inside sketch functions?
Yes
Original Processing method
textureWrap()
Original p5js method
None.
Example
clojure specific
  • (let [txtr (q/create-graphics 100 100)
          mode (if (even? (q/frame-count)) :clamp :repeat)]
      (q/with-graphics txtr
        (q/background 255)
        (q/fill 255 0 0)
        (q/rect 0 60 100 40)
        (q/fill 0 150 0)
        (q/rect 0 0 100 60))
      (q/image txtr 0 0)
      (q/texture-wrap mode)
      (q/with-translation [200 200]
        (q/begin-shape)
        (q/texture txtr)
        (q/vertex 0 0 0 0)
        (q/vertex 200 0 200 0)
        (q/vertex 200 200 200 200)
        (q/vertex 0 200 0 200)
        (q/end-shape :close)))

vertex

Arguments
[x y z u v][x y u v][x y][x y z]
Docstring

All shapes are constructed by connecting a series of vertices. vertex is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons and is used exclusively within the begin-shape and end-shape functions.

Drawing a vertex in 3D using the z parameter requires the :p3d or :opengl renderers to be used.

This function is also used to map a texture onto the geometry. The texture function declares the texture to apply to the geometry and the u and v coordinates set define the mapping of this texture to the form. By default, the coordinates used for u and v are specified in relation to the image's size in pixels, but this relation can be changed with texture-mode.

Works only inside sketch functions?
Yes
Original Processing method
vertex()
Original p5js method
vertex()
Example
(q/background 255)
(q/camera 100 400 200 100 0 0 0 0 -1)
(q/line 0 0 0 0 0 150)
(q/line 0 0 0 0 150 0)
(q/line 0 0 0 150 0 0)
(let [txtr (q/create-graphics 100 100)]
  (q/with-graphics txtr
    (q/background 255)
    ; draw belarusian flag, kinda
    (q/fill 255 0 0)
    (q/rect 0 60 100 40)
    (q/fill 0 150 0)
    (q/rect 0 0 100 60))
  ; draw blue rect
  (q/fill 0 0 127)
  (q/begin-shape)
  (q/vertex 0 0)
  (q/vertex 100 0)
  (q/vertex 100 100)
  (q/vertex 0 100)
  (q/end-shape :close)
  ; draw another blue rect
  (q/begin-shape)
  (q/vertex 0 0 0)
  (q/vertex 100 0 0)
  (q/vertex 100 0 100)
  (q/vertex 0 0 100)
  (q/end-shape :close)
  ; draw rect using our custom texture
  (q/begin-shape)
  (q/texture txtr)
  (q/vertex 100 0 0 0)
  (q/vertex 200 0 100 0)
  (q/vertex 200 100 100 100)
  (q/vertex 100 100 0 100)
  (q/end-shape :close)
  ; draw another rect using our custom texture
  (q/begin-shape)
  (q/texture txtr)
  (q/vertex 100 0 0 0 0)
  (q/vertex 200 0 0 100 0)
  (q/vertex 200 0 100 100 100)
  (q/vertex 100 0 100 0 100)
  (q/end-shape :close))
try example