blend

copy

display-filter

filter-shaderclj

get-pixel

image-filter

pixels

set-image

set-pixel

update-pixels

blend

Arguments
[x y width height dx dy dwidth dheight mode][src-img x y width height dx dy dwidth dheight mode][src-img dest-img x y width height dx dy dwidth dheight mode]
Docstring

Blends a region of pixels from one image into another with full alpha channel support. If src-img is not specified it defaults to current-graphics. If dest-img is not specified it defaults to current-graphics.

Note: it is recommended to use blend-mode instead of blend.

Available blend modes are:

  • :blend - linear interpolation of colours: C = A*factor + B
  • :add - additive blending with white clip: C = min(A*factor + B, 255)
  • :darkest - only the darkest colour succeeds: C = min(A*factor, B)
  • :lightest - only the lightest colour succeeds: C = max(A*factor, B)
  • :difference - subtract colors from underlying image.
  • :exclusion - similar to :difference, but less extreme.
  • :multiply - Multiply the colors, result will always be darker.
  • :screen - Opposite multiply, uses inverse values of the colors.
  • :overlay - A mix of :multiply and :screen. Multiplies dark values and screens light values.
  • :hard-light - :screen when greater than 50% gray, :multiply when lower.
  • :soft-light - Mix of :darkest and :lightest. Works like :overlay, but not as harsh.
  • :dodge - Lightens light tones and increases contrast, ignores darks. Called "Color Dodge" in Illustrator and Photoshop.
  • :burn - Darker areas are applied, increasing contrast, ignores lights. Called "Color Burn" in Illustrator and Photoshop.

In clj the following blend modes are also supported: :subtract - subtractive blending with black clip: C = max(B - A*factor, 0)

In cljs the following blend modes are also supported: :replace - the pixels entirely replace the others and don't utilize alpha (transparency) values.

Works only inside sketch functions?
Yes
Original Processing method
blend()
Original p5js method
blend()
Example
clojure specific
  • ; 
    ; setup
    ; 
    (q/no-loop)
    ; 
    ; draw
    ; 
    (q/background 255 100 20 50)
    (let [im (q/create-image 50 50 :rgb)
          modes [:blend :add :subtract :darkest :lightest :difference :exclusion
                 :multiply :screen :overlay :hard-light :soft-light :dodge :burn]
          splitted (partition-all 5 modes)]
      ; draw 3 squares of different color on the graphics
      (dotimes [x 10]
        (dotimes [y 10]
          (q/set-pixel im (+ x 10) (+ y 10) (q/color 255 0 0))
          (q/set-pixel im (+ x 30) (+ y 10) (q/color 0 255 0))
          (q/set-pixel im (+ x 20) (+ y 30) (q/color 0 0 255))))
      ; draw all possible blended modes
      (dotimes [row (count splitted)]
        (dotimes [col (count (nth splitted row))]
          (let [mode (nth (nth splitted row) col)]
            ; blend with sketch itself
            (q/blend 400 0 50 50 (* col 55) (* row 55) 50 50 mode)
            ; blend with image
            (q/blend im 0 0 50 50 (* col 55) (+ 170 (* row 55)) 50 50 mode)
            ; blend image to image
            (q/blend im
                     (q/current-graphics)
                     0
                     0
                     50
                     50
                     (* col 55)
                     (+ 340 (* row 55))
                     50
                     50
                     mode)))))
clojurescript specific
  • ; 
    ; setup
    ; 
    (q/no-loop)
    ; 
    ; draw
    ; 
    (q/background 255 100 20 50)
    (let [im (q/create-image 50 50)
          modes [:replace :blend :add :darkest :lightest :difference :exclusion
                 :multiply :screen :overlay :hard-light :soft-light :dodge :burn]
          splitted (partition-all 5 modes)]
      ; draw 3 squares of different color on the graphics
      (dotimes [x 10]
        (dotimes [y 10]
          (q/set-pixel im (+ x 10) (+ y 10) (q/color 255 0 0))
          (q/set-pixel im (+ x 30) (+ y 10) (q/color 0 255 0))
          (q/set-pixel im (+ x 20) (+ y 30) (q/color 0 0 255))))
      (q/update-pixels im)
      ; draw all possible blended modes
      (dotimes [row (count splitted)]
        (dotimes [col (count (nth splitted row))]
          (let [mode (nth (nth splitted row) col)]
            ; blend with sketch itself
            (q/blend 400 0 50 50 (* col 55) (* row 55) 50 50 mode)
            ; blend with image
            (q/blend im 0 0 50 50 (* col 55) (+ 170 (* row 55)) 50 50 mode)
            ; blend image to image
            (q/blend im
                     (q/current-graphics)
                     0
                     0
                     50
                     50
                     (* col 55)
                     (+ 340 (* row 55))
                     50
                     50
                     mode)))))
    try example

copy

Arguments
[src-img [sx sy swidth sheight] [dx dy dwidth dheight]][[sx sy swidth sheight] [dx dy dwidth dheight]][src-img dest-img [sx sy swidth sheight] [dx dy dwidth dheight]]
Docstring

Copies a region of pixels from one image to another. If src-img is not specified it defaults to current-graphics. If dest-img is not specified - it defaults to current-graphics. If the source and destination regions aren't the same size, it will automatically resize the source pixels to fit the specified target region. No alpha information is used in the process, however if the source image has an alpha channel set, it will be copied as well.

Works only inside sketch functions?
Yes
Original Processing method
copy()
Original p5js method
copy()
Example
clojure specific
  • (q/background 255)
    (let [im (q/create-image 100 100 :rgb)]
      ;  gradient on the image
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      ; draw original image
      (q/image im 0 0)
      ; copy left top quarter to the right top quarter
      (q/copy im im [0 0 50 50] [50 0 50 50])
      ; copy the whole image to the sketch, essentially just draw it
      (q/copy im [0 0 100 100] [120 0 100 100])
      ; copy top left 50x50 square of sketch 
      ; to the 100x100 square at [240, 0] position
      (q/copy [0 0 50 50] [240 0 100 100]))
clojurescript specific
  • (q/background 255)
    (let [im (q/create-image 100 100)]
      ;  gradient on the image
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      (q/update-pixels im)
      ; draw original image
      (q/image im 0 0)
      ; copy left top quarter to the right top quarter
      (q/copy im im [0 0 50 50] [50 0 50 50])
      ; copy the whole image to the sketch, essentially just draw it
      (q/copy im [0 0 100 100] [120 0 100 100])
      ; copy top left 50x50 square of sketch 
      ; to the 100x100 square at [240, 0] position
      (q/copy [0 0 50 50] [240 0 100 100]))
    try example

display-filter

Arguments
[mode level][mode]
Docstring

Originally named filter in Processing Language. Filters the display window with the specified mode and level. Level defines the quality of the filter and mode may be one of the following keywords:

  • :threshold - converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The level must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
  • :gray - converts any colors in the image to grayscale equivalents. Doesn't work with level.
  • :invert - sets each pixel to its inverse value. Doesn't work with level.
  • :posterize - limits each channel of the image to the number of colors specified as the level parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.
  • :blur - executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no level parameter is used, the blur is equivalent to Gaussian blur of radius 1.
  • :opaque - sets the alpha channel to entirely opaque. Doesn't work with level.
  • :erode - reduces the light areas. Doesn't work with level.
  • :dilate - increases the light areas. Doesn't work with level.
Works only inside sketch functions?
Yes
Original Processing method
filter()
Original p5js method
filter()
Example
(q/background 255)
(let [orig (q/create-graphics 100 100)
      modes [[:threshold] [:threshold 0.2] [:gray] [:invert] [:posterize 20]
             [:blur] [:blur 3] [:opaque] [:erode] [:dilate]]
      splitted (partition-all 4 modes)]
  ; draw 10x10 square from circles of different color
  (q/with-graphics orig
    (q/color-mode :rgb 1.0)
    (q/background 1)
    (q/no-stroke)
    (q/ellipse-mode :corner)
    (doseq [r (range 0 1 0.1)
            b (range 0 1 0.1)]
      (q/fill r 0 b)
      (q/ellipse (* r 100) (* b 100) 10 10)))
  ; apply different filters, four filters per row
  (q/image orig 0 0)
  (dotimes [row (count splitted)]
    (dotimes [col (count (nth splitted row))]
      (let [mode (nth (nth splitted row) col)
            dest (q/create-graphics 100 100)]
        (q/with-graphics dest
          (q/image orig 0 0)
          (apply q/display-filter mode))
        (q/image dest (* col 120) (* 120 (inc row)))))))
try example

filter-shaderclj

Arguments
[shader-obj]
Docstring

Originally named filter in Processing Language. Filters the display window with given shader (only in :p2d and :p3d modes).

Works only inside sketch functions?
Yes
Original Processing method
filter()
Original p5js method
None.
Example
clojure specific
  • (q/background 255)
    (let [orig (q/create-graphics 100 100)
          shd (q/load-shader (.getPath (clojure.java.io/resource
                                         "SimpleShader.glsl")))]
      (q/with-graphics orig
        (q/color-mode :rgb 1.0)
        (q/background 1)
        (q/no-stroke)
        (q/ellipse-mode :corner)
        (doseq [r (range 0 1 0.1)
                b (range 0 1 0.1)]
          (q/fill r 0 b)
          (q/ellipse (* r 100) (* b 100) 10 10)))
      (q/image orig 0 0)
      (q/filter-shader shd)
      (q/image orig 100 100))

get-pixel

Arguments
[img x y w h][x y w h][img][][img x y][x y]
Docstring

Reads the color of any pixel or grabs a section of an image. If no parameters are specified, a copy of entire image is returned. Get the value of one pixel by specifying an x,y coordinate. Get a section of the image by specifying an additional width and height parameter. If the pixel requested is outside of the image window, black is returned. The numbers returned are scaled according to the current color ranges, but only RGB values are returned by this function. For example, even though you may have drawn a shape with (color-mode :hsb), the numbers returned will be in RGB.

Getting the color of a single pixel with (get x y) is easy, but not as fast as grabbing the data directly using the pixels function.

If no img specified - current-graphics is used.

Works only inside sketch functions?
Yes
Original Processing method
get()
Original p5js method
Image.get()
Example
(q/background 255)
(let [gr (q/create-graphics 100 100)]
  ; draw circle on the graphics
  (q/with-graphics gr
    (q/background 255)
    (q/fill 127 255 180)
    (q/ellipse 50 50 70 70))
  ; draw original graphics
  (q/image gr 0 0)
  ; copy graphics and draw it
  (q/image (q/get-pixel gr) 0 120)
  ; use get-pixel to get color of specific pixel
  ; and draw square
  (q/fill (q/get-pixel gr 50 50))
  (q/rect 120 120 100 100)
  ; use get-pixel to copy part of the graphics
  (q/image (q/get-pixel gr 0 0 50 50) 240 120)
  ; use get-pixel to copy part of the sketch itself
  (q/image (q/get-pixel) 400 400)
  (q/fill (q/get-pixel 50 50))
  (q/rect 120 240 100 100)
  (q/image (q/get-pixel 0 0 50 50) 240 240))
try example

image-filter

Arguments
[img mode][img mode level]
Docstring

Originally named filter in Processing Language. Filters given image with the specified mode and level. level defines the quality of the filter and mode may be one of the following keywords:

  • :threshold - converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The level must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
  • :gray - converts any colors in the image to grayscale equivalents. Doesn't work with level.
  • :invert - sets each pixel to its inverse value. Doesn't work with level.
  • :posterize - limits each channel of the image to the number of colors specified as the level parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.
  • :blur - executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no level parameter is used, the blur is equivalent to Gaussian blur of radius 1.
  • :opaque - sets the alpha channel to entirely opaque. Doesn't work with level.
  • :erode - reduces the light areas. Doesn't work with level.
  • :dilate - increases the light areas. Doesn't work with level.
Works only inside sketch functions?
Yes
Original Processing method
PImage.filter()
Original p5js method
filter()
Example
(q/background 255)
(let [orig (q/create-graphics 100 100)
      modes [[:threshold] [:threshold 0.2] [:gray] [:invert] [:posterize 20]
             [:blur] [:blur 3] [:opaque] [:erode] [:dilate]]
      splitted (partition-all 4 modes)]
  ; draw 10x10 square from circles of different color
  (q/with-graphics orig
    (q/color-mode :rgb 1.0)
    (q/background 1)
    (q/no-stroke)
    (q/ellipse-mode :corner)
    (doseq [r (range 0 1 0.1)
            b (range 0 1 0.1)]
      (q/fill r 0 b)
      (q/ellipse (* r 100) (* b 100) 10 10)))
  ; apply different filters, four filters per row
  (q/image orig 0 0)
  (dotimes [row (count splitted)]
    (dotimes [col (count (nth splitted row))]
      (let [mode (nth (nth splitted row) col)
            clone (q/get-pixel orig)]
        (apply q/image-filter clone mode)
        (q/image clone (* col 120) (* 120 (inc row)))))))
try example

pixels

Arguments
[img][]
Docstring

Array containing the values for all the pixels in the display window or image. This array is therefore the size of the display window. If this array is modified, the update-pixels function must be called to update the changes. Calls .loadPixels before obtaining the pixel array.

Works only inside sketch functions?
Yes
Original Processing method
pixels[]
Original p5js method
pixels
Example
clojure specific
  • (q/background 255)
    (let [size 50
          gr (q/create-graphics size size :p2d)]
      ; draw red circle on the graphics
      (q/with-graphics gr
        (q/background 255)
        (q/fill 255 0 0)
        (q/ellipse (/ size 2) (/ size 2) (* size (/ 2 3)) (* size (/ 2 3))))
      ; draw original graphics
      (q/image gr 0 0)
      ; get pixels of the graphics and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels gr)
            half (/ (* size size) 2)]
        (dotimes [i half] (aset-int px (+ i half) (aget px i))))
      (q/update-pixels gr)
      (q/image gr (+ size 20) 0)
      ; get pixels of the sketch itself and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels)
            half (/ (* (q/width) (q/height)) 10)]
        (dotimes [i half] (aset-int px (+ i half) (aget px i))))
      (q/update-pixels))
clojurescript specific
  • (q/background 255)
    (let [size 50
          gr (q/create-graphics size size :p2d)]
      ; draw red circle on the graphics
      (q/with-graphics gr
        (q/background 255)
        (q/fill 255 0 0)
        (q/ellipse (/ size 2) (/ size 2) (* size (/ 2 3)) (* size (/ 2 3))))
      ; draw original graphics
      (q/image gr 0 0)
      ; get pixels of the graphics and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels gr)
            half
              (* 4 (* (q/display-density) size) (/ (* (q/display-density) size) 2))]
        (dotimes [i half] (aset px (+ i half) (aget px i))))
      (q/update-pixels gr)
      (q/image gr (+ size 20) 0)
      ; get pixels of the sketch itself and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels)
            half (/ (* 4
                       (* (q/display-density) (q/width))
                       (* (q/display-density) (q/height)))
                    10)]
        (dotimes [i half] (aset px (+ i half) (aget px i))))
      (q/update-pixels))
    try example

set-image

Arguments
[x y src]
Docstring

Writes an image directly into the display window. The x and y parameters define the coordinates for the upper-left corner of the image.

Works only inside sketch functions?
Yes
Original Processing method
set()
Original p5js method
set()
Example
clojure specific
  • (q/background 255)
    (let [im (q/create-image 100 100 :rgb)]
      ; draw gradient on the image
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      ; draw image on sketch
      (q/set-image 10 10 im))
clojurescript specific
  • (q/background 255)
    (let [im (q/create-image 100 100)]
      ; draw gradient on the image
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      (q/update-pixels im)
      ; draw image on sketch
      (q/set-image 10 10 im))
    try example

set-pixel

Arguments
[x y c][img x y c]
Docstring

Changes the color of any pixel in the display window. The x and y parameters specify the pixel to change and the c parameter specifies the color value. The color parameter is affected by the current color-mode (the default is RGB values from 0 to 255).

Setting the color of a single pixel with (set-pixel x y) is easy, but not as fast as putting the data directly into pixels.

This function ignores image-mode.

Due to what appears to be a bug in Apple's Java implementation, the point and set-pixel methods are extremely slow in some circumstances when used with the default renderer. Using :p2d or :p3d will fix the problem. Grouping many calls to point or set-pixel together can also help. (Bug 1094)

Works only inside sketch functions?
Yes
Original Processing method
PImage.set()
Original p5js method
Image.set()
Example
clojure specific
  • (q/background 255)
    (let [im (q/create-image 100 100 :rgb)]
      ; draw gradient on the image
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      ; draw image on sketch
      (q/set-image 10 10 im))
  • (q/background 255)
    ; create image and draw gradient on it
    (let [im (q/create-image 100 100 :rgb)]
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      ; draw image twice
      (q/image im 0 0)
      (q/image im 50 50))
clojurescript specific
  • (q/background 255)
    (let [im (q/create-image 100 100)]
      ; draw gradient on the image
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      (q/update-pixels im)
      ; draw image on sketch
      (q/set-image 10 10 im))
    try example
  • (q/background 255)
    ; create image and draw gradient on it
    (let [im (q/create-image 100 100)]
      (dotimes [x 100]
        (dotimes [y 100] (q/set-pixel im x y (q/color (* 2 x) (* 2 y) (+ x y)))))
      (q/update-pixels im)
      ; draw image twice
      (q/image im 0 0)
      (q/image im 50 50))
    try example

update-pixels

Arguments
[img][]
Docstring

Updates the display window or image with the data in the pixels array. Use in conjunction with pixels. If you're only reading pixels from the array, there's no need to call update-pixels unless there are changes.

Certain renderers may or may not seem to require pixels or update-pixels. However, the rule is that any time you want to manipulate the pixels array, you must first call pixels, and after changes have been made, call update-pixels. Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change.

Works only inside sketch functions?
Yes
Original Processing method
updatePixels()
Original p5js method
updatePixels()
Example
clojure specific
  • (q/background 255)
    (let [size 50
          gr (q/create-graphics size size :p2d)]
      ; draw red circle on the graphics
      (q/with-graphics gr
        (q/background 255)
        (q/fill 255 0 0)
        (q/ellipse (/ size 2) (/ size 2) (* size (/ 2 3)) (* size (/ 2 3))))
      ; draw original graphics
      (q/image gr 0 0)
      ; get pixels of the graphics and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels gr)
            half (/ (* size size) 2)]
        (dotimes [i half] (aset-int px (+ i half) (aget px i))))
      (q/update-pixels gr)
      (q/image gr (+ size 20) 0)
      ; get pixels of the sketch itself and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels)
            half (/ (* (q/width) (q/height)) 10)]
        (dotimes [i half] (aset-int px (+ i half) (aget px i))))
      (q/update-pixels))
clojurescript specific
  • (q/background 255)
    (let [size 50
          gr (q/create-graphics size size :p2d)]
      ; draw red circle on the graphics
      (q/with-graphics gr
        (q/background 255)
        (q/fill 255 0 0)
        (q/ellipse (/ size 2) (/ size 2) (* size (/ 2 3)) (* size (/ 2 3))))
      ; draw original graphics
      (q/image gr 0 0)
      ; get pixels of the graphics and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels gr)
            half
              (* 4 (* (q/display-density) size) (/ (* (q/display-density) size) 2))]
        (dotimes [i half] (aset px (+ i half) (aget px i))))
      (q/update-pixels gr)
      (q/image gr (+ size 20) 0)
      ; get pixels of the sketch itself and copy
      ; the first half of all pixels to the second half
      (let [px (q/pixels)
            half (/ (* 4
                       (* (q/display-density) (q/width))
                       (* (q/display-density) (q/height)))
                    10)]
        (dotimes [i half] (aset px (+ i half) (aget px i))))
      (q/update-pixels))
    try example