Previous
Next

Δημιουργίες - 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
Previous
Next