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);
}

Displaying parts of an image:

let img;

function preload() {
  img = loadImage('sunset.jpg');
}

function setup() {
  createCanvas(img.width, img.height);
  background(255);
}

function draw() {
  let w = map(noise(frameCount * 0.01), 0, 1, 50, 200);
  let x = noise(frameCount * 0.01 + 100) * (width - w);
  let y = noise(frameCount * 0.01 + 200) * (height - w);
  let subImage = img.get(x, y, w, w);
  image(subImage, x, y);
}

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.