image

image-mode

load-image

mask-image

no-tint

tint

image

Arguments
[img x y][img x y width height]
Docstring

Displays images to the screen. Processing currently works with GIF, JPEG, and Targa images. The color of an image may be modified with the tint function and if a GIF has transparency, it will maintain its transparency. The img parameter specifies the image to display and the x and y parameters define the location of the image from its upper-left corner. The image is displayed at its original size unless the width and height parameters specify a different size. The image-mode function changes the way the parameters work. A call to (image-mode :corners) will change the width and height parameters to define the x and y values of the opposite corner of the image.

Works only inside sketch functions?
Yes
Original Processing method
image()
Original p5js method
image()
Example
(q/background 255)
; create graphics with circle
(let [gr (q/create-graphics 70 70)]
  (q/with-graphics gr
    (q/ellipse 35 35 70 70))
  ; draw graphics twice
  (q/image gr 0 0)
  (q/image gr 100 0 100 70))
try example

image-mode

Arguments
[mode]
Docstring

Modifies the location from which images draw. The default mode is :corner. Available modes are:

  • :corner - specifies the location to be the upper left corner and uses the fourth and fifth parameters of image to set the image's width and height.
  • :corners - uses the second and third parameters of image to set the location of one corner of the image and uses the fourth and fifth parameters to set the opposite corner.
  • :center - draw images centered at the given x and y position.
Works only inside sketch functions?
Yes
Original Processing method
imageMode()
Original p5js method
imageMode()
Example
(q/background 255)
(let [gr (q/create-graphics 100 100)]
  (q/with-graphics gr
    (q/fill 0 0 255)
    (q/stroke 0 0 255)
    (q/rect 0 0 100 100))
  (q/stroke-weight 10)
  ; use :corner mode
  (q/image-mode :corner)
  (q/image gr 50 50)
  (q/point 50 50)
  ; use :center mode
  (q/image-mode :center)
  (q/image gr 250 100)
  (q/point 250 100)
  ; use :corners mode
  (q/image-mode :corners)
  (q/image gr 350 50 400 150)
  (q/point 350 50)
  (q/point 400 150))
try example

load-image

Arguments
[filename]
Docstring

Loads an image into a variable of type PImage. Four types of images (.gif, .jpg, .tga, .png) may be loaded. To load correctly, images must be located in the data directory of the current sketch. In most cases, load all images in setup to preload them at the start of the program. Loading images inside draw will reduce the speed of a program.

The filename parameter can also be a URL to a file found online.

Image is loaded asynchronously. In order to check whether image finished loading use loaded?.

Works only inside sketch functions?
Yes
Original Processing method
loadImage()
Original p5js method
loadImage()
Example
clojure specific
  • ; 
    ; setup
    ; 
    (let [; create url to load image 100x100
          url "https://dummyimage.com/100x100/2c3e50/ffffff.png"]
      (q/set-state! :image (q/load-image url)))
    ; 
    ; draw
    ; 
    (let [im (q/state :image)]
      ; check if image is loaded using function loaded?
      (when (q/loaded? im) (q/image im 0 0)))
clojurescript specific
  • ; 
    ; setup
    ; 
    (let [; create url to load image 100x100
          url "https://placekitten.com/100/100"]
      (q/set-state! :image (q/load-image url)))
    ; 
    ; draw
    ; 
    (let [im (q/state :image)]
      ; check if image is loaded using function loaded?
      (when (q/loaded? im) (q/image im 0 0)))
    try example

mask-image

Arguments
[img mask][mask]
Docstring

Masks part of an image from displaying by loading another image and using it as an alpha channel. This mask image should only contain grayscale data. The mask image needs to be the same size as the image to which it is applied.

If single argument function is used - masked image is sketch itself or graphics if used inside with-graphics macro. If you're passing graphics to this function - it works only with :p3d and :opengl renderers.

This method is useful for creating dynamically generated alpha masks.

Works only inside sketch functions?
No
Original Processing method
PImage.mask()
Original p5js method
Image.mask()
Example
clojure specific
  • (q/background 255)
    ; define 2 images and a mask to apply to them
    (let [im (q/create-image 100 100 :argb)
          im2 (q/create-image 100 100 :argb)
          mask (q/create-image 100 100 :argb)]
      ; first image is a blue square with a red cross
      (dotimes [x 100]
        (dotimes [y 100]
          (if (or (< 0 (- x y) 5) (< 95 (+ x y) 100))
            (q/set-pixel im x y (q/color 255 0 0 255))
            (q/set-pixel im x y (q/color 0 0 255)))))
      ; second image is a green cross
      (dotimes [x 100]
        (dotimes [y 5]
          (q/set-pixel im2 (+ y 47) x (q/color 0 255 0))
          (q/set-pixel im2 x (+ y 47) (q/color 0 255 0))))
      ; mask is rectangles with different shades of gray
      (dotimes [x 100]
        (dotimes [y 100]
          (q/set-pixel mask x y (q/color 0 (* 40 (+ (quot x 20) (quot y 20)))))))
      ; draw first image, mask and image with mask applied
      (q/image im 20 20)
      (q/image mask 140 20)
      (q/mask-image im mask)
      (q/image im 260 20)
      ; draw second image, mask and image with mask applied
      (q/image im2 20 140)
      (q/image mask 140 140)
      (q/mask-image im2 mask)
      (q/image im2 260 140))
clojurescript specific
  • (q/background 255)
    ; define 2 images and a mask to apply to them
    (let [im (q/create-image 100 100)
          im2 (q/create-image 100 100)
          mask (q/create-image 100 100)]
      ; first image is a blue square with a red cross
      (dotimes [x 100]
        (dotimes [y 100]
          (if (or (< 0 (- x y) 5) (< 95 (+ x y) 100))
            (q/set-pixel im x y (q/color 255 0 0 255))
            (q/set-pixel im x y (q/color 0 0 255)))))
      (q/update-pixels im)
      ; second image is a green cross
      (dotimes [x 100]
        (dotimes [y 5]
          (q/set-pixel im2 (+ y 47) x (q/color 0 255 0))
          (q/set-pixel im2 x (+ y 47) (q/color 0 255 0))))
      (q/update-pixels im2)
      ; mask is rectangles with different shades of gray
      (dotimes [x 100]
        (dotimes [y 100]
          (q/set-pixel mask x y (q/color 0 (* 40 (+ (quot x 20) (quot y 20)))))))
      (q/update-pixels mask)
      ; draw first image, mask and image with mask applied
      (q/image im 20 20)
      (q/image mask 140 20)
      (q/mask-image im mask)
      (q/image im 260 20)
      ; draw second image, mask and image with mask applied
      (q/image im2 20 140)
      (q/image mask 140 140)
      (q/mask-image im2 mask)
      (q/image im2 260 140))
    try example

no-tint

Arguments
[]
Docstring

Removes the current fill value for displaying images and reverts to displaying images with their original hues.

Works only inside sketch functions?
Yes
Original Processing method
noTint()
Original p5js method
noTint()
Example
(q/background 255)
; create graphics with white circle
(let [gr (q/create-graphics 100 100)]
  (q/with-graphics gr
    (q/background 0 0)
    (q/fill 255)
    (q/ellipse 50 50 70 70))
  ; apply cyan tint
  (q/image gr 0 0)
  (q/tint 127 255 255)
  (q/image gr 100 0)
  ; remove tint
  (q/no-tint)
  (q/image gr 200 0))
try example

tint

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

Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by setting the alpha.

To make an image transparent, but not change it's color, use white as the tint color and specify an alpha value. For instance, (tint 255 128) will make an image 50% transparent (unless color-mode has been used).

The value for the parameter gray must be less than or equal to the current maximum value as specified by color-mode. The default maximum value is 255.

Also used to control the coloring of textures in 3D.

Works only inside sketch functions?
Yes
Original Processing method
tint()
Original p5js method
tint()
Example
(q/background 127)
(let [gr (q/create-graphics 100 100)]
  ; draw 4 circles of different color on the graphics
  (q/with-graphics gr
    (q/background 0 0)
    (q/fill 255)
    (q/ellipse 25 25 40 40)
    (q/fill 255 0 0)
    (q/ellipse 75 25 40 40)
    (q/fill 0 255 0)
    (q/ellipse 25 75 40 40)
    (q/fill 0 0 255)
    (q/ellipse 75 75 40 40))
  ; apply different types of tint
  (q/no-tint)
  (q/image gr 0 0)
  (q/tint 127)
  (q/image gr 120 0)
  (q/tint 255 127)
  (q/image gr 240 0)
  (q/tint 200 127 180)
  (q/image gr 0 120)
  (q/tint 200 127 180 127)
  (q/image gr 120 120))
try example