skip to content

accidental gradient canvas trick

Last updated: Nov 6, 2022

I was using p5's createImage function to create a teeny tiny image, 2 pixels by 2 pixels, in order to test out a function to sort colors of each pixel.

function setup() {
createCanvas(400, 400)

function draw() {
let img = createImage(2, 2)

img.set(0, 0, color(255, 0, 0, 255))
img.set(1, 0, color(255, 0, 255, 255))
img.set(0, 1, color(0, 255, 255, 255))
img.set(1, 1, color(0, 0, 255, 255))


image(img, 0, 0, width, height)

What I expected with the last call to image was that the image would be drawn (zoomed in) with clear delineations between each pixel, like this:

image divided into four even quadrants colored red, magenta, cyan, and blue

In reality it ended up looking like this:

image divided into four quadrants colored red, magenta, cyan, blue; the colors blend into each other forming a gradient effect

This behavior is pretty simple to turn off by simply adding a noSmooth() in the setup function, but it was a sort of neat surprise to see the image appear this way at first!

I'm curious if something similar would happen using the Canvas API without the layer of p5 over it. This might be a good place to start - pixel manipulation with canvas on MDN.