Intro to Computational Media

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?

This week we focused on video and sound. The video/imaging processing component is through DOM library and then there is a separate library for sound. I wanted to combine both of them to make a synth that you control with your webcam. I know the sounds are choppy and awful sounding. Once I closed more tabs and tested the sounds individually it sounded like a normal sine wave, so I think my computer/Chrome was struggling to handle all of the code.

Here's a video of it in action below & you can play with it on my website here.

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 (:

This week we talked about APIs and how we can utilize information from the internet. Specifically, I worked with using the Giphy API to make my last week's DOM project more variable and exciting. Now my sketch will use Giphy's database to pull up cute cat and dog gifs. There is honestly some weird stuff when you query "cat + dog", but that's based on how Giphy categorizes the gifs. Most of it is of actually cats and dogs (sorry if weird stuff pops up). Click here to view my improved cat/dog gif slider website.

This week I worked with DOM library within p5. I was able to work with ready-made sliders, buttons, and more. Armed with these tools, I made a website where you can view gifs on a sliding scale from cat to dog. A screenshot of the initial page is below. View and interact with the website here.

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.

For this week, I focused on creating a sketch that would use functions to help organize my code and cut down on repetition. My sketch is below, and the full code is available here.

The second part of this week's assignment was to change my classmate's code. I started with Chengchao's sketch.

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.

This week I created a sketch that has all of the following elements:

• One element controlled by the mouse.
• One element that changes over time, independently of the mouse.
• One element that is different every time you run the sketch.

I decided to make a drawing where you can fly a kite. The full code is available here.

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

• W1/Q1
• W1/Q2
• W1/Q3