Videos to watch for this week are all about how to manipulate camera and pixels on canvas in p5.
Some takeaways from the video:
open and display webcam
createCapture();
grab an entire copy of the image
video.get();
get numeric pixel index in the image: x+y*width
pixel array [r1, g1, b1, alpha1, r2, g2, b2, alpha2,…]
get numeric pixel index in the pixel array: (x+y*width)*4
neglect the difference settings of display on various devices
pixelDensity(1);
contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc.
frameCount();
put DOM element inside the div
DOM.parent("id name of div");
create a line break
createSpan('<br />');
If only read pixels from the array, there’s no need to call updatePixels() — updating is only necessary to apply changes. updatePixels() should be called anytime the pixels array is manipulated or set() is called, and only changes made with set() or direct changes to pixels[] will occur. Reference: https://p5js.org/reference/#/p5/updatePixels
updatePixels();
Slit-Scan Video: a photographic and cinematographic process where a moveable slide, into which a slit has been cut, is inserted between the camera and the subject to be photographed. Reference: https://en.wikipedia.org/wiki/Slit-scan_photography , Golan Levin
in the copy() function, the first element represents the things you want to copy from; the next fours represent the rectangle that you want to copy from; the last four represent the rectangle that you want to copy to.
copy(srcImage, sx, sy, sw, sh, dx, dy, dw, dh)
seriously.js with p5.js for real-time manipulation of video in the browser
seriously.js draws a WebGL canvas:
give video an id in p5
vide.id('id_name');like in css, call the source using id name by adding a “#” in front of the name
seriously.source('#id_name');or use
seriously.sourceID('id_name');Connects the effects to the source and target by
effect.source = src;
target.source = effect;Chromakey effect is so cool that can extract people from background and apply any color or elements to the background.
Environment installation:
I followed the instruction to install the local server and browser auto-sync, however, I failed to install the auto-sync part. I run to code lab for help this Monday and with the help from Peiling, I knew the problem is that the file path of p5.js on my computer is not the same as it is included in the index.html. I moved p5.js to the same folder of my project folder and then the browser auto-sync worked.