codeewander/pixel-Image

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

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