Instructions for the assignment this week:

• Create and/or manipulate an image or video at the pixel level. The image should change over the course of the minute.
• Demo your experience in class:
  • Use the p5 editor's fullscreen link to show your project fullscreen
  • Use createCanvas(windowWidth, windowHeight);
  • Position and size screen elements in relation to the canvas width and height.
  • If your image is not big enough to fill the entire screen, be mindful about the color you select for the canvas.
• Create a blog post documenting your work. Address / include the following:
  • 1-3 words to describe the image.
  • Links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.
• Consult resources from syllabus for inspiration. Pixels Week 1 | Pixels Week 2

Process

I wanted to iterate on the pixelated videos we played with in class using our computers’ webcams. I liked how it distorts your view of an image. I also really have enjoyed the slit-scan “mirrors” I have seen in various exhibitions and museums, specifically these by choreographer and artist William Forsthye.

I opened my p5 web editor and started to combine the codes for some of the exercises we had done with these concepts, however, upon running the combined code, my Chrome tab would freeze up and I would have to close it and reopen it to edit the code again.

Question: I tried to introduce a slit-scan to my pixelated video and it just crashed the page - is that too much for p5 to handle?

**I need to go in and retry to do this in code - looks like I deleted it in my late night delirium

https://editor.p5js.org/zoemargolis/sketches/sN1Ck9jr0

I also found that the easy way to switch colormode to HSB turned my whole image weird colors. I did find sample code that looks like it may be able to account for the differences in how colors are called.

Question: I took my pixelated camera code and switched it to HSB colormode - why did my colors get weird immediately? I feel like it could be related to the way the camera outputs color but I’m not sure?

I slowed the frame rate to 1fps to more similarly imitate the slit-scan effect since I was not able to get that working.

The final thing I am working on is centering my video on the page so it does not distort with varying browser window widths and heights. This seems like a simple thing to do with a static image loaded into the page, but is proving to be more difficult to accomplish with live video feed from my laptop’s webcam.

Sample video at windowWidth x windowHeight. The image coming through gets distorted horizontally.

Sample video at windowWidth x windowHeight. The image coming through gets distorted horizontally.