Live Web Wk 8: Pixel Manipulation


Excited for pixel manipulation! Didn’t have much of a strong concept behind this assignment, just wanted to play around and implement some features. A couple of functions I wanted:
a.) sliders to control different aspects of the color and pixels
b.) a way for the image and video to be downloaded
c.) a record button that doesn’t have a preset time but is determined by when user clicks stop and start

Was able to tackle the above features. Test codes here. One compromise, I couldn’t figure out how to get the video to be downloaded locally. Currently, it just saves to server and the captured image shows up on a new window. Something to improve upon. Also, this is way too laggy!

Originally, I actually wanted to make a slit-scan video capture because it’s such a cool (even if cliche) effect. Well, did some research, tried a few things out but ended up not figuring it out. It’s possible that looking at all the javascript example code for slit-scans psyched me out. Hoping to try again at some point…so keeping these reference links for future self.

References for slit-screen:

General References:

Notes to remember:

class*="col-"   /* means select class that contains this text
em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.


  • why are none of my apps showing up when I try “forever list” on the terminal? the apps are all still running though.
  • the window is very laggy, not exactly sure why. My guess is the threshold equation. I wonder if there is a way to minimize the lag.
  • how can I download the video blob locally when user stops recording?