Pineapple Mirror ft. PPAP – ICM – Week8


  • Make a sketch using an image, video or live video (webcam) at the pixel level. Consider making an interactive “mirror” using the webcam. How can you manipulate the pixels to surprise, delight, upset or confuse the user?
  • Create a blog post documenting your work. Include links to other projects that serve as references, inspiration, or deal with similar ideas as your sketch.

Presentation – Code

Here is a quick intro video of me playing with the project.

You can play here.


I have watched the episodes of checkbox mirror and brightness mirror and I would like to experiment with createImg(). Pineapple is my favorite fruit and PPAP is a funny song that makes me happy. Therefore, I put two of my favorite things in the sketch to spread the happiness to others.


I spent three to four hours to figure out the checkbox situation where when I create nested for loops, the checkbox shows in one column. When I tried to use different functions such as createInput() and createButton(), they work normal. Therefore, I went to Ellen’s office hour and found out the code on github. It appears that we have to have the command “‘display’, ‘inline’);”. Otherwise, it won’t work on either the web editor or the offline editor.

When I have show() and hide(), it only hides everything and it doesn’t come back. The slider works but the function is not right for what I want to achieve.

With the help of Ellen, I figured out the function value and managed to change the value of the input of createInput(). With the change of size of the input, I managed to create a mirror with “_” and “X”.

Below is how I put in the createInput. Also, I experienced around createButton and createCheckbox as well.

Here is how I changed the value under the conditional statements.

When I switched to createImg(), there are problems that I encounter since I didn’t know which function to use to make the pineapple disappear to show the contrast in the video. I tried show() and hide() and even style(‘display’,’none’) yet the whole thing just disappears gradually.

I went to Alden’s office hour and figured out the CSS comment for the arguments. The goal is to make the image disappear when the pixel is brighter than the threshold. It turns out I have to use “visibility” to make it work.


I love practicing with the pixels and video pixels to be familiar with the media part of computational media. It is quite helpful to follow the video and then troubleshooting.

Worksheet Comments

I had such a fun time working with pixels. It is a new concept for me and it takes quite a while to get accustomed to the language and commands. But after watching a few videos of Shiffman and practice along the videos, I am more familiar with the commands. So working on the worksheet for this week is quite easy since I always could go back to the code we did in class or to Shiffman’s videos to get more comfortable in it.

The first task was to deal with pixels on an image of cat. Here is the sketch. When you press your mouse, you can see the effect. You can find the code here.

The second task requires your webcam. It is basically a web mirror with white and black pixels. Here is the sketch. You can find the code here.

One problem I tried to debug was on the second task in the worksheet. I followed the Shiffman’s video on Brightness Mirror and it helped a lot to understand the reverse index and map function along with the scale for the video. I was running into the issue of having updatePixels() at the end and loadPixels() at the top where I would only need video.loadPixels(). Since when I have them, the program doesn’t run at all.

Published by Yiting Liu


One thought on “Pineapple Mirror ft. PPAP – ICM – Week8

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with
Get started
<span>%d</span> bloggers like this: