Submodule 18.2: Video in p5.js

play with video

They are various ways in which we can use videos to develop something creative.

In the below example we will see how we can manipulate video pixels to create something interactive on the canvas.

In our example, we also use the functionconstrain(). This function accepts 3 arguments: n, which is the number we want to constrain, low, which is the minimum limit and high, which is the maximum limit.

Example 

Here is an example code were we manipulate video pixels:

let myVideo;

function preload() {
    // similar with images we can also preload a video
    myVideo = createVideo('videos/Star.mp4');
}

function setup() {
    // make canvas same size with video
    let canvas = createCanvas(640, 360);
    //play the video
    myVideo.play();
    // automatically replay the video
    myVideo.loop();
}

function draw() {
    background(255);
    // load the pixels of video so we can do things with them
    myVideo.loadPixels();

    // constrain the value of mouseX between 10 and 50 px
    let stepSize = round(constrain(mouseX,10,50 ));

    for (let y = 0; y < height; y += stepSize) {
        for (let x = 0; x < width; x += stepSize) {
          // go through all pixels
          let i = (y * width + x) * 4;
          // make ellipse radius equal with stepSize which will be changing according to mouseX position
          let radius = stepSize ;
          // set as fill color the rgb values of video
          fill(myVideo.pixels[i], myVideo.pixels[i + 1], myVideo.pixels[i + 2]);
          ellipse(x, y, radius, radius);
        }
    }
}

You can see the result of the above code here. If the video is not playing, copy and paste the example locally. 

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex1022.js
3. Open the file ex812.html in your editor and save it as ex1022.html
4. In the ex1022.html file, update the link to ex1022.js  from exersice812.js
5. Go to the index.html file and create, under Module 10, a link to the ex1022.html  file with the title "play with video".

Modify the ex1022.jsfile and use your imagination and the above example, to manipulate the video pixel in order to develop your own new creation. You can see here an example.

Answer:

let myVideo;

function preload() {
    // similar with images we can also preload a video
    myVideo = createVideo('videos/Star.mp4');
}

function setup() {
    // make canvas same size with video
    let canvas = createCanvas(640, 360);
    //play the video
     myVideo.play();
    // automatically replay the video
    myVideo.loop();
  }

function draw() {
    background(255);
    // load the pixels of video so we can do things with them
    myVideo.loadPixels();

    // constrain the value of mouseX between 10 and 50 px
    let stepSizeX = round(constrain(mouseX,10,50 ));
    // constrain also the value of mouseY
    let stepSizeY = round(constrain(mouseY,20,70 ));

    for (let y = 0; y < height; y += stepSizeY) {
        for (let x = 0; x < width; x += stepSizeX) {
          // go through all pixels
          let i = (y * width + x) * 4;
          // make ellipse radius equal with stepSize which will be changing according to mouseX+mouseY position
          let radius = stepSizeX + stepSizeY ;
          // set as fill color the rgb values of video, change alpha according to mouseX
          fill(myVideo.pixels[i], myVideo.pixels[i + 1], myVideo.pixels[i + 2],stepSizeX);
          ellipse(x, y, radius, radius);
        }
    }
}

Do a Git commit with the message "play with video".

• See more about the constrain()  function