Images and video

Lecture slides

https://slides.com/otso_havanto/programming-for-visual-artists-7/embed

Images in p5

Displaying an image with p5js:

let img;

function preload() {
  img = loadImage('name-of-your-image-on-sketch-files');
}

function setup() {
  createCanvas(img.width, img.height);
  image(img, 0, 0, width, height);
}

Webcam feed

Webcam grid example:

let webcam;
let sizeX;
let sizeY;

function setup() {
  createCanvas(640, 480);
  webcam = createCapture(VIDEO);
  webcam.hide();
  sizeX = width / 10;
  sizeY = height / 10;
}

function draw() {
  for (let y = 0; y < height - sizeY; y += sizeY) {
    for (let x = 0; x < width - sizeX; x += sizeX) {
      let camX = mouseX + map(noise(x, y), 0, 1, -50, 50);
      let camY = mouseY + map(noise(x + 100, y + 100), 0, 1, -50, 50);
      let subVideo = webcam.get(camX, camY, sizeX, sizeY);
      image(subVideo, x, y);
    }
  }
}

Extra: Grabbing colors from images

Assignment

Option 1: Generate a color palette based on an image. Use the generated colors on a sketch created earlier in the course.

Option 2: Choose and image and use the get and set functions to manipulate and fragment the image.

Option 3: Use a video or live webcam feed and use the get and set functions to manipulate and fragment the video.