background

background-image

clear

fill

no-fill

no-stroke

stroke

background

Arguments
[gray][r g b][r g b a][gray alpha]
Docstring

Sets the color used for the background of the Processing window. The default background is light gray. In the draw function, the background color is used to clear the display window at the beginning of each frame.

It is not possible to use transparency (alpha) in background colors with the main drawing surface, however they will work properly with create-graphics. Converts args to floats.

Works only inside sketch functions?
Yes
Original Processing method
background()
Original p5js method
background()
Example
; red
(q/background 255 0 0)
(let [; create graphics to test backgrounds
      gr (q/create-graphics 100 100)]
  (q/with-graphics gr
    ; grey
    (q/background 120))
  (q/image gr 0 0)
  (q/with-graphics gr
    ; light-grey transparent
    (q/background 70 120))
  (q/image gr 70 70)
  (q/with-graphics gr
    ; cyan
    (q/background 0 255 255))
  (q/image gr 140 140)
  (q/with-graphics gr
    ; semitransparent blue
    (q/background 0 0 255 120))
  (q/image gr 210 210))
try example

background-image

Arguments
[img]
Docstring

Specify an image to be used as the background for a sketch. Its width and height must be the same size as the sketch window. Images used as background will ignore the current tint setting.

Works only inside sketch functions?
Yes
Original Processing method
background()
Original p5js method
background()
Example
clojure specific
  • ; 
    ; setup
    ; 
    (let [; create url to image to used as background
          url (str "https://dummyimage.com/"
                   (q/width)
                   "x"
                   (q/height)
                   "/2c3e50/ffffff.png")]
      (q/set-state! :image (q/load-image url)))
    ; 
    ; draw
    ; 
    (let [im (q/state :image)]
      ; check if image is loaded by checking its size matches sketch size
      (when (= (.-width im) (q/width)) (q/background-image im)))
clojurescript specific
  • ; 
    ; setup
    ; 
    (let [; create url to image to used as background
          url (str "https://placekitten.com/" (q/width) "/" (q/height))]
      (q/set-state! :image (q/load-image url)))
    ; 
    ; draw
    ; 
    (let [im (q/state :image)]
      ; check if image is loaded by checking its size matches sketch size
      (when (= (.-width im) (q/width)) (q/background-image im)))
    try example

clear

Arguments
[]
Docstring

Clears the pixels within a buffer. This function only works on graphics objects created with the create-graphics function meaning that you should call it only inside with-graphics macro. Unlike the main graphics context (the display window), pixels in additional graphics areas created with create-graphics can be entirely or partially transparent. This function clears everything in a graphics object to make all of the pixels 100% transparent.

Works only inside sketch functions?
Yes
Original Processing method
clear()
Original p5js method
clear()
Example
; reusing the same graphics to draw 3 things
(let [g (q/create-graphics 200 200 :p2d)]
  (q/background 255)
  ; draw red square
  (q/with-graphics g
    (q/fill 255 0 0)
    (q/rect 25 25 150 150))
  (q/image g 0 0)
  ; draw circle without clearing
  ; red square is still present
  (q/with-graphics g
    (q/fill 0 255 0)
    (q/ellipse 100 100 150 150))
  (q/image g 50 50)
  ; draw triangle but with clear
  (q/with-graphics g
    (q/clear)
    (q/fill 0 0 255)
    (q/triangle 25 25 175 25 25 175))
  (q/image g 100 100))
try example

fill

Arguments
[gray][r g b][r g b alpha][gray alpha]
Docstring

Sets the color used to fill shapes. For example, if you run (fill 204 102 0), all subsequent shapes will be filled with orange. This function casts all input as a float. If nil is passed it removes any fill color; equivalent to calling no-fill.

Works only inside sketch functions?
Yes
Original Processing method
fill()
Original p5js method
fill()
Example
; blue background
(q/background 0 0 255)
; grey
(q/fill 120)
(q/rect 1 1 100 100)
; semitransparent light grey
(q/fill 80 120)
(q/rect 70 70 100 100)
; green
(q/fill 0 255 0)
(q/rect 140 140 100 100)
; semitransparent red
(q/fill 255 0 0 120)
(q/rect 210 210 100 100)
try example

no-fill

Arguments
[]
Docstring

Disables filling geometry. If both no-stroke and no-fill are called, nothing will be drawn to the screen.

Works only inside sketch functions?
Yes
Original Processing method
noFill()
Original p5js method
noFill()
Example
(q/background 255)
; set background to grey
(q/stroke 0)
(q/fill 120)
(q/rect 1 1 100 100)
; remove background, only border left
(q/no-fill)
(q/rect 70 70 100 100)
try example

no-stroke

Arguments
[]
Docstring

Disables drawing the stroke (outline). If both no-stroke and no-fill are called, nothing will be drawn to the screen.

Works only inside sketch functions?
Yes
Original Processing method
noStroke()
Original p5js method
noStroke()
Example
(q/background 255)
(q/stroke-weight 10)
; set stroke to black
(q/fill 120)
(q/stroke 0)
(q/rect 30 30 100 100)
; remove stroke, no border around square
(q/no-stroke)
(q/rect 100 100 100 100)
try example

stroke

Arguments
[gray][x y z alpha][x y z][gray alpha]
Docstring

Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current color-mode (the default color space is RGB, with each value in the range from 0 to 255). If nil is passed it removes any fill color; equivalent to no-stroke.

Works only inside sketch functions?
Yes
Original Processing method
stroke()
Original p5js method
stroke()
Example
(q/background 255)
(q/stroke-weight 10)
; grey
(q/stroke 120)
(q/rect 10 10 100 100)
; semitransparent light grey
(q/stroke 80 120)
(q/rect 80 80 100 100)
; green
(q/stroke 0 255 0)
(q/rect 150 150 100 100)
; semitransparent red
(q/stroke 255 0 0 120)
(q/rect 220 220 100 100)
try example