Intro to Comp Media: DriVR prototype

For this week's assignment, I started to work on a digital prototype for an idea I have for the p.comp final. I want to create a device that allows you to edit and direct your own car chase movie scene. The device would be a steering wheel, an accelerator, and a brake pedal. For this prototype, I've turned the functions of the components to key presses on a keyboard. The left and right arrows would represent the steering wheel, the up arrow is the accelerator, and the down arrow is the brake. When you turn the wheel, the car chase scene switches to another scene from another movie. Accelerating and braking would speed and slow down the scene. 

I had several issues with loading these car chase scenes, I think mostly due to the web editor. I was first unable to upload clips more than 10mb (later the limit decreased to 5mb). I was also unable to find the path of the uploaded files programmatically. It looks like the web editor automatically translates file paths of uploaded files to the actual file path on the amazon web servers. I think once I set up a local environment, most of these issues will be fixed.

code here

Intro to Comp Media: ITPness

Some guy compiled a 25k+ entry'd json of comments from pornhub content. I decided to use it in this week's assignment. It probably wasn't the best idea, but by the time I realized that, I was already too far in.

These comments were like 99% incredibly vulgar, so I first decided to clean up the language a bit by replacing certain "bad" words with a "good alternative". I used the same data structure that I used for my Morse code translation in my previous assignment. The replacing of these words reminded me of the R rated movies shown on like TNT or something and how they would have dubbed lines over swear words.

As these new translations started printing out, some of them actually reminded me of comments people would say to others for their first couple ICM assignments. So I took several ICM projects from the first week and imported them into my project (sorry, I didn't ask for permission. let me know if you want them taken down!)

Finally, I implemented it so that several users(someone from the class) would "comment" on a random p5.js sketch, simulating a live stream of comments like you would see on video streaming sites such as... YouTube. These comments are PG-ified to the best of my abilities.

After reading through hundreds of these pornhub comments, I experienced a numbness in my brain. Censorship became such a meaningless concept to me during this time of desensitization. Not sure where I'm going with this, but if you want to see the unedited versions of the comments, you can comment out "c = filterBadWord(c);" in the code. 

code here

Intro to Comp Media: Morso

Play the game here!

View code here.

I created a little game that kind of teaches you morse code. I used two DOM elements: a button to start the game and a textfield to input the text that you wish to play with.

I had some trouble centering some of the DOM elements. I tried to add a div, but I wasn't too sure on how to add already created elements to it. There are also a lot of other features that I wish to incorporate into Morso:

• collision detection between Morso and the morse code
• multiple difficulties
• more visual effects

Hopefully I will be able to incorporate some physical computing elements to this project it with a real morse code dialer!

ICM + PComp: Synthesis

For the synthesis, Stephanie and I implemented a physical analog input into our previous p5.js projects. For Steph's project, we used an FSR to simulate her rain sketch. The harder the FSR is pressed, the more the rain falls.

As for my project, I used a potentiometer to control my "Repetition" p5.js sketch. (https://alpha.editor.p5js.org/projects/SyZG0BV6)

I had some trouble setting up the connectivity between the Arduino and the p5 library, but eventually got it after some troubleshooting. In the original sketch, I controlled the animation by holding and releasing the mouse button. After reading the values from the analog input of the potentiometer, I changed the original code of the sketch to control the animation based off those physical variables.

https://alpha.editor.p5js.org/projects/SyZG0BV6

Intro to Comp Media: Repetition

https://alpha.editor.p5js.org/projects/SyZG0BV6

In this week's assignment, Grau and I created a sketch that includes differently sized circles depending on the position of the mouse. These circles will then grow or shrink depending on the mouse state (clicked or released, respectively). The user is able to stop and start the circles from changing by hitting any button on the keyboard.

We took a bit of inspiration from both mine and Grau's previous assignments. The growing and shrinking circle was a new feature in Grau's assignment, and the logic for changing colors and size depending on the mouse position was from my previous assignment. We combined these features and added the logic that calculates the distance from any circle to the mouse. The interaction was then added so that the user is able to control the expansion and reduction of the circles.

Intro to Comp Media: Animated p5.js

I have animated the sketch that I drew last week. There were three requirements to this new animated sketch:

• one element controlled by the mouse
• one element that changes over time, independently of the mouse
• one element that changes everytime the sketch starts up

By utilizing the mouseX and mouseY constants, I am able to change the size of the spirals, the color of the background, and the positioning of the tetris pieces, all based off the positioning of the mouse. 

The element that changes over time, independently of the mouse, would be the rotating tetris pieces and the forever growing circle that is added in the middle of the sketch. 

The element that changes everytime when the sketch is started would be the color of the growing ellipse and the color of one one of the tetris pieces.

I added these previous additions to the sketch because I wanted the tetris pieces to look like they are actually falling or spiraling down into whatever hole they've fallen into. And because vertigo is a state of disorientation, the mouse does not do what the user expects it to do.

In addition to these animations, I also removed almost all the instances of any hardcoding. Variables are used instead of constant values, so this sketch could easily be changed to another canvas side.

The trickiest thing about the project was the rotation of the pieces. I eventually had to restart my progress for the rotating pieces, because I was essentially using trial and error to find the correct positions. When I started on a fresh slate, it allowed me to clearly position the pieces exactly where I wanted them.

Intro to Comp Media: p5.js portrait

I worked as an Android Developer at my last job for two years. During that job, my favorite part of it was debugging and tracing through code that I did not personally write. It was voyeuristic and enlightening, reading someone's computational diary and learning about another person. However, you could not see that through the final product. That is what makes computation fascinating to me because there are so many different ways to tackle a specific problem. I am very interested in projects that can visualize or depict an individual's problem solving thought process through their interaction with an external device. Games come to mind. Boardgames or puzzle games that require the player to solve a specific problem really show a side of human creativity and behavior that I find fascinating. 

With that being said, the hardest part of this assignment was not solving the problem, but figuring out what WAS the problem. I didn't really want to completely remake a known piece of art. Nor did I want to create something that looks dumb. So I did a bit of both.

I love watching movies and I love playing video games. Vertigo's movie poster is pretty famous for its design seeing as how I had a poster of it hanging in my room before I even watched the movie (it was ok). I decided I would try to recreate that poster, but with a twist by replacing the silhouettes of the man and woman with some Tetris pieces.

I attempted to recreate the spiral in the Vertigo poster and completely failed. There was no way I was going to spend my time recreating it manually since I knew it could be done with some kind of algorithm. But good luck staring and analyzing that spiral without getting any migraines. I decided to go for something much simpler. I ended up with this:

To be honest, I thought this looked really stupid. The repeated circles did not give me the headaches I wanted, and the Tetris block looked completely out of place. The upside was that the circles and the iris ended up looking a bit like H.A.L.

In order to add to the disorientating nature that the original Vertigo poster had, I played around with how I was creating the circles in my loop. I was surprised to see that such minor changes, like incrementing the position of a coordinate, could cause such a cool looking effect. I also lowered the opacity for most of my fills, which made the portrait a bit more glowy. This is the end product:

The web editor is pretty easy to use. I kind of wish it had some sort of capability to automatically autocomplete method names like in an IDE, but having the reference page on another browser tab was good enough. It did crash on me a couple times, and I lost a bit of progress because I didn't save. There should definitely be some sort of auto-save. Overall, it was a fun and fresh experience, and I can't wait to get even deeper into p5.js.