Υποενότητα 10.2: Βίντεο στο p5

Εισαγωγή video

Για να εισαγάγουμε ένα βίντεο στο p5.js χρησιμοποιούμε τη συνάρτηση createVideo()  . Μέσα σε αυτή τη συνάρτηση βάζουμε τη διαδρομή στο αρχείο βίντεο.

Μπορούμε να συνδυάσουμε βίντεο με στοιχεία ελέγχου συμβάντων - event για αναπαραγωγή / παύση του βίντεο.

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα που δείχνει ένα βίντεο μαζί με ένα κουμπί ελέγχου:

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

}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα 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;
  }

}

Κάντε μια  Git commit με το μήνυμα "Insert video".

• Δείτε περισσότερα για την createVideo() function
• Δείτε περισσότερα για την loop() function

Δημιουργίες - play with video

Είναι διάφοροι τρόποι με τους οποίους μπορούμε να χρησιμοποιήσουμε βίντεο για να αναπτύξουμε κάτι δημιουργικό.

Στο παρακάτω παράδειγμα θα δούμε πώς μπορούμε να χειριστούμε εικονοστοιχεία βίντεο για να δημιουργήσουμε κάτι διαδραστικό στον καμβά.

Στο παράδειγμά μας, χρησιμοποιούμε επίσης τη συνάρτηση constrain(). 

Αυτή η συνάρτηση δέχεται 3 ορίσματα: n, που είναι ο αριθμός που θέλουμε να περιορίσουμε, χαμηλός, το οποίο είναι το ελάχιστο όριο και το υψηλό, το οποίο είναι το μέγιστο όριο.

Παράδειγμα

Εδώ είναι ένα παράδειγμα κώδικα που χειριζόμαστε εικονοστοιχεία βίντεο:

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

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα 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 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);
        }
    }
}

Κάντε μια  Git commit με το μήνυμα "play with video".

• Δείτε περισσότερα για την constrain()  function

Συνάρτηση createCapture()

Η συνάρτηση createCapture() επιτρέπει στο p5.js να συνδεθεί με την προεπιλεγμένη κάμερα του υπολογιστή σας και έτσι να εμφανίσει το αποτέλεσμα στην οθόνη.

Μέσα σε αυτή τη λειτουργία, θα πρέπει να καθορίσουμε τον τύπο των μέσων. Σε αυτή την περίπτωση, αυτό είναι το βίντεο, έτσι γράφουμε  createCapture(VIDEO)

Αν θέλουμε να εμφανίσουμε το βίντεο στον καμβά, χρησιμοποιούμε τη image() function. 

Για να αποκρύψουμε το βίντεο που δημιουργήθηκε εκτός του στοιχείου καμβά, χρησιμοποιούμε nameofvideo.hide();. 

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα όπου το p5.js χρησιμοποιεί την κάμερα σας:

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(){
  
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα 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);
}

Κάντε μια  Git commit με το μήνυμα "createCapture()".

• Δείτε περισσότερα για την createCapture() function