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

Συνάρτηση 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