ICM Final – Webcam Self-Portraits

CLICK HERE TO SEE & PLAY

Plz excuse the dead look in my eyes. It’s finals. Here are my questions for the class.

  1. How is interface of this website helping or hindering you from using it?
  2. In what ways do you feel this does or doesn’t capture your personality/identity?
  3. What would you do with the photos you save from this?
  4. How could this be more engaging and exciting for you?

Continue reading “ICM Final – Webcam Self-Portraits”

ICM Week 7 – Extra!

So, now I’ve updated my gif slider to take inputs from the user. Click here to play with it! 

Some nice inputs that have output gifs that make some sense are things like happy/sad or hello/goodbye. Obviously you can get a lot of weird gifs if you want, but I’ve got it set for a PG rating (:

Continue reading “ICM Week 7 – Extra!”

ICM Week 5

This week, I worked on creating a sketch using object oriented code. Since we also learned about arrays, I also wanted to work with that too. My inspiration started when I saw the SNL Papyrus Skit, which reminded me of every time I’ve cringed seen Curlz MT used in earnest and also this gem.

As a result, I created functions turn a .txt file of Waves into various arrays of letters or words, and then a couple functions to play with how they are drawn in p5.js. I wanted to add more ways to alter & move the text, but I didn’t really have time. Here it is below and the full code is available here.

Continue reading “ICM Week 5”

ICM Week 3 – Part 1

The first part of this week’s assignment is to create a sketch of some kind of rollover, button, or slider interaction from scratch. In the second part, I will swap sketches with a classmate and make some changes to his/her code. I’ll add a link to that post later.

I decided to create a slider that would change colors. I wanted the user to drag his/her cursor so the colors would change like turning a page in a multicolor book. Full code is available here and this is the final version.

Continue reading “ICM Week 3 – Part 1”

ICM Week 1

Reflecting on Computation
So far, my experience with computation has been focused on using code to analyze data or to optimize a process. This always resulted in the program spitting out some numbers or a matrix, which feels totally different than utilizing code to make something media-based and interactive.

I am really interested by the work done by Holly Herndon who uses computation to compose, produce, and make new sounds. I think her latest album Platform is really fascinating in the way digital aspects are integrated to strengthen her ideas about contemporary issues.

For me, the projects that involve data visualization are the most fascinating. When complicated or large sets of data are presented in a digestible way, it is so delightful to be able to quickly draw conclusions. For instance, I love the interactive New York Times articles since the info and interactions helps to drive the narrative of each article. I think this is really important since by making info more understandable it becomes more transparent and accessible to people. I imagine that I might make projects where I can present information in ways that are attractive and meaningful. Some frustrating problems I think we need to solve are how we might bring clarity on our healthcare systems, show the environmental impacts of our actions, and enrich storytelling through visualization and computation.

Creating a Screen Drawing in p5.js

I decided I would make a simple flower drawing. The final drawing is shown above and the code is available here. My process looked like this:

I started by looking through the p5 library reference to see which shapes I could use. I used ellipses and then the curve functions to make the flower and stem, respectively. I started by adding the basic shapes I would need – the curve, a circle, and ellipses. I had to try different ellipseMode() functions and transformations like the rotate() and angleMode() functions to place the petals in the right spot. I also messed around with the size and placement by changing the inputs to the shape functions. Since the shapes would overlap based on the order the functions were called, I eventually had to move the curve() function before the ellipse() functions so it would be behind the flower.

I had some questions that arose while making my drawing: How to use p5.js to create repeating shapes and patterns? Was there a way to make the petals by specifying a pattern instead of creating them individually? It was a little tedious to play with the positioning and sizing, but turning on the live update on the p5 web editor helped make things easier.

Quiz Answers