Week 04 | Images & Video #

Inspiration #

Rubber ducks? #

New p5js functions that we are going to need today #

These functions are called once when you either press a key on your keyboard or a button on your mouse/touchpad. This is often more desired functionality compared to the keyIsPressed and mouseIsPressed system variables that we have been using.

External files #

Take a look at this arrow icon on the p5js web editor. Click it!

This reveals something very importatnt about working with p5.js. Our code is part of a website with some additional files.

index.html The html file that provides the structure for the website. It uses the HTML markup language to describe how the page is structures.
sketch.js This is the file we have been working with so far. The actual JavaScript file that has all of our code.
style.css This CSS file is used to describe how all of the elements on the webpage should look like

We can add additional files here (images, videos, sound, text etc.) if we want to use them in our code.

Click the arrow icon pointing down next to where it says “Sketch Files”
“Create Folder”
Name the folder data. Note that you can name this however you want but I’m using data as that name is used in Processing and other creative coding environments.
Select the folder you just created and press the arrow icon next to it
This menu shows options to create or upload files to the folder

Upload all of your files to this folder in today’s examples.

Working with images #

You can use your own images, or if you want to follow along with my examples, you can download this .zip file:

Chromatrope Images

And I have this png image with transparent background you can use:

This flower is from the Biodiversity Heritage Library.

Working with video #

Video files #

Live video #

Using live video capture from your webcam is not really that much more difficult than using any other image.

The p5js widget that I have been using does not work with the live video. So I will just provide the code examples and links to the projects on the p5js editor.

let capture;

function setup() {
  createCanvas(400, 400);
  capture = createCapture(VIDEO);
  // you can use this to hide the video preview under the canvas
  capture.hide();
}

function draw() {
  background(220);
   image(capture, 0, 0, width, width * capture.height / capture.width);
}