Images and Pixels

This art project is dedicated to using images pixels as the building blocks of interactive graphics.

Source Code : Openprocessing

Notes

1. Using preload() funtion and loadImage() to load images before setup

function preload() {
  natureImg = loadImage("sunrise.jpg");
  noiseImg = loadImage("rain.jpg");
}

Reference: preload()

2. Draw image on canvas

image(noiseImg, 0, 0, width, height);

Reference: image()

3. Set image mode

imageMode(CENTER); //CORNER, CORNERS, or CENTER

Reference: imageMode()

4. Get a region of pixels from an image

let natureImg = loadImage("nature.jpg");
let clr = natureImg.get(mouseX, mouseY);
fill(clr);

Reference: get()

5. Using noise texture as filter

push();
blendMode(MULTIPY);
image(noiseImg, 0, 0, width, height);
pop();

Reference: blendMode(mode)

Image sources

Base Image

Image(as filter)

Reference

p5.js