It was a journey of debugging... I did exactly the what Shiffman did in his videos and the code just did not work on my computer for I don't know why.
I was going over Shiffman's video trying to refresh what was talked in class and trying to understand how the pixels on the canvas are communicating with the video pixels. I pretty much watched his video like 5,6 times, because I thought I missed some parts or did something wrong during the process that caused the failure of the code, but I am not sure. The problems I encountered are listed as followed:
The sketch I posted was actually the one that kind of worked but there are problems during the process that I could not understand why:
After creating two slider bars, I was trying to map the slider value into the radius of the "paint brush" and also the alpha value of the fill(), but p5 kept telling me that it cannot read property "value". So instead of mapping the slider value, I tried to map the mouseX value to just check if there is something wrong with the slider or there is something up with the mapping or I don't know... It turned out that mapping the mouseX value into the radius size did not work either for some weird reason. I was already so frustrated at this point since I kept rewatching the videos and kept re-writting, reading my code to make sure I did it correctly.
Those problems were about mapping the slider values to control the pixels, there are other weird problems too.
This time, the mapping worked magically but the color of the pixels turned into black and white after I mapped the value for vScale. I literally did not change anything else in the code or whatsoever. I honestly did not know what was going on.
In addition, I was trying to see what different it makes between placing the background in setup and draw, and the result was just so weird again. In Shiffman's video, the background was put in set up with no given value of alpha, but mine sketch only works when I put the background in the draw function with a given alpha. When I tried putting the background in set up, the following image is what the sketch showed.
All the other sketches that I did following Shiffman's instruction completely failed me too:
It all went down when I was trying to make this offset framing thing, At the begining, this same exact sketch literally only showed black screen with no information on it. (The code I did is exactly following what Shiffman instructed in the video) After trying to debug it and rewrite it for multiple times, I gave up. However, when I revisited the same exact sketch after lunch, the video magically showed up. Now the video is finally showing up, but there is not supposed to be gap in-between each frame, they should all be flushed. At this point, I moved on to another sketch, another video and of course another problem.
Again, a similar situation where I did exactly what Shiffman instructed and failed magically. I literally thought there was something wrong with my browser or even my computer, so I pulled out my pc and tried it there. The result, of course, is another failed sketch. For some reason, I think p5 just could not read the video pixels from the camera or I really don't know...