Submodule 18.2: Video in p5.js

Insert video

In order to insert a video in p5.js we use the function createVideo()  . Inside this function we put the path to the video file.

We can combine videos with event controls to play/pause the video.

Example 

Here is an example code which shows a video together with a control button:

// set let playing to be false in the beginning
let playing = false;
let myVideo;
let myButton;


function setup() {
  // display the video
  myVideo = createVideo(['videos/Star.mp4']);
  myButton = createButton('play');
  // when button is pressed call the PausePlay function
  myButton.mousePressed(PausePlay);
}

// play or pause video
function PausePlay() {
  // if playing is true
  if (playing) {
    // make the video pause
    myVideo.pause()
    playing = false;
  }
  // else let the video play
  else {
    myVideo.play();
    playing = true;
  }

}

You can see the result of the above code here

Exercise

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

Modify the ex1021.jsfile and use as a base the above example to create a video which will automatically replay. You can see here an example.

Answer:

// set let playing to be false in the beginning
let playing = false;
let myVideo;
let myButton;


function setup() {
  // display the video
  myVideo = createVideo(['videos/Star.mp4']);
  myButton = createButton('play');
  // when button is pressed call the PausePlay function
  myButton.mousePressed(PausePlay);
}

// play or pause video
function PausePlay() {
  // if playing is true
  if (playing) {
    // make the video pause
    myVideo.pause();
    playing = false;
  }
  // else let the video play
  //use loop to make it replay
  else {
    myVideo.loop();
    playing = true;
  }

}

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

• See more about the createVideo() function
• See more about the loop() function

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

createCapture()

The function createCapture() enables p5.js to connect to the default camera of your computer and thus display the result in the screen.

Inside this function, we should specify the type of media. In this case, this is video, thus we write createCapture(VIDEO)

If we want to display the video on the canvas we use the image() function. 

In order to hide the video created outside the canvas element we use nameofvideo.hide();. 

Example 

Here is an example code where p5.js uses your webcam: 

let camVideo;
function setup(){
  createCanvas(600,800);
  // make the connection to the webcam
  camVideo = createCapture('VIDEO');
  //set background color
  background(244,98,44);

}
function draw(){
  
}

You can see the result of the above code here

Exercise

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

Modify the ex1023.jsfile and use as a base the above example and the theory in order to hide the initial video that is outside the canvas and display the video only inside the canvas. You can see here an example.

Answer:

let camVideo;
function setup(){
  createCanvas(600,600);
  // make the connection to the webcam
  camVideo = createCapture('VIDEO');
  background(244,98,44);
  //hide initial video
  camVideo.hide();

}
function draw(){
  // display video on the canvas
  image(camVideo,0,0);
}

Do a Git commit with the message "createCapture()".

• See more about the createCapture() function