My final Pcomp and ICM project was what I showed in the winter show. I created a game board where people can turn different physical controls, or knobs/ potentiometers, and then it would change the visuals in the video that they were seeing. I then wanted to capture their moves, and for them to be able to send it to an instagram that I created so that they can see what they created using the given controls, and to see what others did.
I wanted my design to resemble the arcade game below (on the left). I wanted to make my game board look pretty retro yet really weird and trippy. The design board I ended up with is below on the right. I first created the box, and then spray painted it black. I then painted trippy designs over it with acrylic paint. For the knobs, I bought a trippy looking piece of acrylic, and laser cut them into different sized circles so people can spin them like a DJ panel.
Overall, my project at the winter show was successful. People liked my 90’s arcade themed game, with trippy 3D graphic visuals. Some people even caught on, and played the game as if it were a DJ board for 3D graphics, which was what I was going for.
1. It took me a long time to get the hang of Three.js. I only started to really understand the code until about a week or two before the winter show.
2. Learning node.js and how a server works was really foreign to me. Shawn helped me understand it better by helping me with my reset button.
3. The way I put together my project, was that I coded all the different backgrounds separately. Learning how to combine different sketches/different blocks of code was difficult.
4. Fabrication- I did not take Intro to Fab, and did not know how to use the shop tools, or know how to cut wood! Learning how to do this without a class was a bit challenging.
5. I wanted to include 3D models into my project. I found it extremely difficult to figure out how to include them into Three.js so that they would look normal. Every time I tried, the mesh would look weird. I tried importing the models into Blender first, but that didn’t work. However, I am not so familiar with Blender either…Perhaps Three.js needs better documentation on this, or maybe I need to ask someone with more experience in this– it was hard to find someone familiar with the library at ITP. It was also hard to find someone at ITP with experience in Blender. I watched a couple of tutorials of Blender and Three.js on YouTube, Lynda.com, but it was still hard for me to fully understand. Luckily, the only model that loaded properly into Three.js were the 3D toilets…and everyone enjoyed those!
6. Audio analyzer- it was hard for me to figure out how to get some of the shapes in my sketches to expand and contract to the frequency of the sound. In the end, I got it to work. It just took time.
7. Soldering and learning how a rotary switch worked was a bit difficult. In the end, although I only used potentiometers, I found that using header pins was a better solution to attaching a rotary switch. \
8. TIME! I wish I had more time to explore and perfect my project.
What I learned
1. How to make basic 3D graphics using Three.js
2. The drill press is amazing, and much better to make holes in a board then using a hand drill.
3. The webm file in the CCapture.js library does not work (at least not for my computer). This library was supposed to capture the canvas so that I could then send it to instagram so people could see what they made. However, though the capture of the canvas was working, and it downloaded the webm files of the captured video, when played back, the webm files were all black. I’m not sure why this was the case. By the time I found another way to capture the canvas, it was the day of the winter show, and given the little time, I was too scared to try and incorporate it and play around and mess up my other code.
4. How to fabricate a box, and use many tools in the shop.
5. How to wire and attach a rotary switch.
I learned a lot while creating this project. If I had more time, I would have perfected the space sketch (it was a bit wonky- the 3D toilets were black instead of white, and some knobs didn’t work well with it). I would have made the 3D toilets appear all over the screen and spinning around, so that it wasn’t stationary all in one spot. I would have added more background sketches, and perhaps added more than 6 controls to manipulate the 3D graphics. I would have also added an oscillation component where users can change the oscillation of their music. Last, I would have tried harder, or asked some more people outside of ITP how to add other 3D models to Three.js.
WordPress isn’t allowing me to add my video to this page, but below is a picture with the intro page, and one of the visuals produced.