Computational Media


Cardboard Turntable

This project was incredibly fun to make for this class. I used a lot of the knowledge from this class in order to make this turntable. This turntable is fully functional and interacts with p5.js to create music. The discs move and spin according to the speed and pitch of the music which is controlled by the slider besides each disc. The tonearm also controls whether or not the music is playing depending on where it is placed. The slider in the middle controls the crossfade and determines how much of each song is playing.

I went with the look of cardboard to add to the playfullness of the turntable. I wanted it so that children would not be intimidated and that the parts are easily replaceable and able to draw and manipulate. I also wanted to showcase the craftiness and handiwork of the hand-cut design. I constructed the whole turntable with just an X-acto knife and hot glue. The tonearms are made of potentiometers and the sliders are sliding potentiometers. the spinning discs are made of continuous servos.

Using the measurements I wanted, I created this Illustrator file to help with the contruction of the turntable. I then printed them out and cut out the pieces by hand accordingly.

The next step was to test out if it worked. An issue I had was having both motors work simutaneously. It seemed as if each motor was taking turns spinning. With some help from Koji, I figured out that I needed more power. The 5V from the Arduino was not enough to power the whole thing, so I attachd a 9V battery. Everything worked smoothly after that, but I wasted so much time figuring that out.

Through this project, I learned how to solder and organize wires. I also learned to put things together in a cohesive way. I had to build things in a way so that it is sturdy and attractive at the same time.

This is the final product of all the hard work from this project.

Link to sketch

This is the p5.js sketch that I originally tested for this project. I had the discs spin according to the slider positions. The music also went faster or slower according to the sliders as well. I learned a lot from using the p5 sound library which was something I didn't really utilize much in my previous projects.

This is the final project that I submitted. The songs and titles are matched up. I tried to make it so that the physical turntable controlled the p5 sketch, but it was really difficult because the sensors were not always consistent. It was very glitchy with the rotation animations, and all the animations became very choppy. In the end, I decided to present the final turntable with the physical turntablw without the anmations in sync and with only the music.

Week 7

This sketch was so fun to do. The hardest part was finding what kind of information I wanted to work with. I ended up using top films. I wanted to make the front of the theater where the names of the films are displayed. I used the informations such as the title, director, stars, year, and country. Sometimes the title won't fit (ex: Eternal Sunshine of the Spotless Mind), but I will figure it out later. The challenge with this sketch was getting the sketch to display a random film off the list every time. I learned that the random() function can't be used as a global variable, so it had to be put in the setup.

Link to sketch

Week 6

This was a difficult project for me. I tried to use the video input to make an ID card. It was working fine until I tried to add in text. The next next input kept overriding the previous one and it was just so frustrating. I think the issue was with the draw() loop. I will figure this out another time.

Link to sketch

Week 5

This week's project is a combination of all the things I have learned in this course so far. So far, I have been comfortable illustrating and animating in p5.js, even though it is a headache most of the time. I think the biggest challenge is knowing how to work within the limitations of p5.js and knowing what it is capable of.

The hardest part about this week's assignment was combining everything I have learned. Sometimes, I would have to separate each interactive part of the sketch and then combine them later. However, this method requires me to remember to change variable names that may interfere each other. I had different versions of the sketch just because sometimes combining the sketches would break the whole sketch.

Link to sketch


Link to sketch

The synthesis was such an interesting experience. At first, it was very overwhelming. It was extremely intimidating to see the examples and trying to figure out how to possibly make something remotely similar. Pilar and I came up with the idea to use two potentiometers and create an etch-a-sketch. The difficult part was to make the two sensors work with each other and get the mapped readings to appear correctly. In the end, we created exactly what we sought out to do, and it was extremely satisfying.

Week 4

I tried.

This sketch was particularly challenging because I had to push the limitations of how I could improve my previous sketch. The most challenging part was working with so many different functions that I created. A lot of thos functions worked independently and so it was best to be left alone. I had issues with for loops and push() and pop(). In the end, I made an interesting ramen drawing instead of a hot dog. I commented out so much code and got frustrated.

Link to sketch

Week 3

For this assignment, Chris and I wanted something that reflected cat culture on the internet. The hardest part of the assignment was figuring out what we wanted to do. We had a lot of ideas and ultimately decided that we wanted to do something with patterns and surprises.

At first, we wanted to do a large pattern that evolved with the mouse movement. However, we then decided on something more unexpected. We wanted to have the look of a tumblr gif but with more interactivity.

Some issues we bumped into were the for loops. we wanted the dots to go across and down depending on the size of the canvas but we ultimately ran into some infinite loops with the height.

Link to sketch

Week 2

Animating my previous sketch was very fun but frustrating. It was difficult mostly because there are so many elements in this sketch.

I had an issue with the refreshing of the text. At first, it just kept looping through because I had the random words cycle through in the draw() function. However, after putting it in the setup instead, it solved my problem. I also had to put my array of words as a global variable as well.

Link to sketch

Week 1

Computational media has always been a huge interest of mine. Web development has been a huge part of my studies, and is always something I love to do. My favorite part of web devolopment is CSS animation. I love drawing and animating in CSS. I noticed that p5.js is very similar and can do what I have been doing with CSS and jQuery. One thing I have been striving to do was make my work much more interactive. I believe that interactivity is a huge part of creating a meaningful experience for a user, and that is something I plan to learn from this course.

For this first project, I wanted to create something that I would normally use CSS to do, but this time, using p5.js.

Link to sketch

The first step to this sketch was finding something to draw. I wanted to challenge myself and found an image of a hot dog cart that I wanted to replicate. I had to think of the illustration in terms of layers and which elements were in which layers.

At first, I drew everything separately in the draw() function. However, after I finished, I realized how messy it looked so I put every element of the hot dog stand in its own function.

function draw() {
     background(255, 250, 250);

The only issue I had was figuring out the text alignment. I wanted to center the text on the sign, however, when I tested on different browsers and computers, it does not always look centered. With every other issue, the documentation on the p5.js site was very useful and straightforward.

The web editor was an interesting experience. I am used to using Brackets for all my web development needs and I'm used to my specific environment. I sometimes catch myself using certain shortcuts that won't work in the web editor. It will take some getting used to.