xchen218

[xchen218]

Final Project - Music Visualization

Website Link: https://chichi-creative-coding-final-project.glitch.me/

Slides Link: https://docs.google.com/presentation/d/1K5ozwjSur1HJk2W698iMVvK9c_6H2CAA9AqMTxfHS1w/edit?usp=sharing

Initially, I got the idea from the visualizor of a music app that I use. I love listening to music and I think music visualisation is very satisfying. And I am also inspired by these two music interactive websites that present cool music visualisations such as Mikutap and Patatap. At first, I was thinking to pick some songs that are suitable for doing visulizations, such as electronic musics. I tried to create different effects for electronic music but I am not satisfy with it. Then I realised that this is gonna be the last project I did in college because I am graduating this semester. When I looked back to the three and a half year of my college life, music has been a really big part of it that I would listen to music when I am studying. So I decided to do visualisers for the songs that I really like, not songs that are suitable for presenting. I chose five songs from my study song list and put them into this project. Five songs are in different languages, different color theme and carries different moods.

For the project website, the background was taken last year when I was still in New York. I really like the sky and sunset in New York and I think choose this photo will give this project more memories. In my code, some commands and functions only works in glitch/p5 and some only works in Safari/Chrome. So I include the p5 link in the website.

Every song was added visualisations based on their emotions and colors. The Isolation one really quiet that you can hear rain, the clock ticking in the background, so I made a clock for this one. The main idea of this isolation project is that I know most of people will have a period that we want to be isolated, away from everyone or everything. That’s the reason why the color of the song name is changing and it sometimes blends into the background. I know we have the option to be outgoing and positive at some point, so the text size can be changed by the mouse. And if I clicked, there will be a white stroke which prevents the text bleeding into the background.

I think this project is more than just a final project because I chose songs that are meaningful to me. I learned how to create effects that I like for the songs. While doing the project, since I need to test the code so many times, I listen to the songs like again and again and again. But I didn’t feel boring or annoying because it brings me back to the days that I was listening to them while I was writing papers, studying for exams or so on. They are in different languages, carry different mood, and in different colour themes. Just like my college life that have a lot of different experience and emotions. So the finished project is important but I think the process is more important. What I get from this process is that we should live with the things we love and work for the things we dream for. I think love and passion are where power and inspiration come from.

[xchen218]

Assignment 9 - Machine Learning Cat Filter

link: https://machinelearning-cat-filter.glitch.me/

For this project, Kayla and I created a machines learning cat filter. When user clicks on the link, your camera will be on and a cat filter will appear. The cat face will follow the user. Kayla built the basic structure: the machine learning cat face. And I added a color feature to the cat filter. When the user moves, the cat face will change color along with the movement. I wanted to add a screen filter that will change color along with the movement too and I failed after several attempts. But Kayla figured it out and added a light pinky filter to the project. I also wanted to add an audio option that when the user click the screen, music will be played. I tried to put music in sketch code and html and neither one works. Kayla tried several ways too but we did not figure it out at the end so we commented it out. 

[xchen218]

Assignment8-Audio Project+Guest Speaker Response

For this week’s assignment, I created a window that can play multiple musics: https://pressed-audio.glitch.me/

I was having trouble to have the music played at first. After searching online and see tutorials, I realised that I have to download the music first and copy the link to the code. I tried to include music in p5.js code and html, and they both work. I also had trouble to link my css to the html. And I found out that in my css link, “rel="stylesheet"” is missing. It took me a long time but the process of finding out what’s wrong enable me to get to know Glitch more. That’s helpful. This week, I get to understand more the relationship between html, css, and p5.js while solving the problems I encountered. I was also having trouble with putting the script in the middle. I finally put it in the center using position: absolute, and adjusting the percentage of top/bottom elements. But i think that’s not the best solution though.

In response to Arntz’s guest speaking last week, I think the code and how music can made using codes is interesting and cool. The idea of combining coding and music is “romantic” and special that it’s like the collision of art and computer science. It also inspired me that audio/music can be linked with many coding projects to make user interaction much more interesting and more abundant in terms of experience. One example he showed us was that the code/the view changes along with the music, beat, or rhythm. His idea reminds me the music interaction websites I found that users can control the view and sound of the website: https://aidn.jp/mikutap/, https://www.patatap.com. These kinds of interactions are very satisfying and cool.

[xchen218]

Assignment7-Glitch

This week’s link: https://group-project-creativeding.glitch.me/

For this week, we made our project into a virtual birthday card. I added a birthday cake that if the user clicked, the candle will be lighten up. My computer vpn crashed this week and it’s super unstable for me to watch youtube videos and get on Glitch. So I started working on the project late on the weekend. I watched the tutorials through my phone but I didnt quite understand this week’s videos. I watched them twice and tried to play around with what Ellies built in Glitch. I think I kind of starting to get it and understand what would change the output. The group project helps me to understand what I didnt get from the tutorial videos.

[xchen218]

Assignment6-OOP group project

Original: https://editor.p5js.org/ekriebel1/sketches/26Qmjo8L8

After I add/change: https://editor.p5js.org/xchen218/sketches/3FeFehHWH

I am not really good at thinking of some concepts or create a story. Every week, deciding what to create would be the hardest part for me. For this week’s assignment, I made changes and add new features after my partner Ellie built a code with basic objects and environment. Rather than building the basic structure, I am more good at adding features or building from a project and turn it into something that I would think of. For this one, I changed the details based on the original one that Ellie made. I made the circles move and bounce a little bit more. And I changed the background color and add an array of colors to the circles. I chose a cyberpunk color palette to make them look like neon flashing lights.

Find: https://p5js.org/examples/objects-objects-2.html

I found this example under object oriented programming. In this example, the class is used to make reusable groups of lines. You dont have to create a new group of lines if you want to change something. You can just change the elements in the class. This one, the lines are lining up into retengles that will move along with the mouse. These lines can be adjusted as a class to make rectangles with different width/height.

[xchen218]

Assignment5-Remake Button

This week I remade my button assignment. Actually it was not that easy for me cuz I thought I understand what function means after watching the tutorials, but it tunrs out sometimes the project works but sometimes it doesnt. I watched the tutorials videos over again and compare his codes with mine and tried to figure out which part makes it work or not. I spent too much time on figuring out the functions so I didnt make it more complex. Meet with my group mate definitely helped my project. She gave me ideas about making the project into a robot face. I didnt think of that but it’s really good idea. Though I didnt make it more complex to interact. Also, my groupmate looked at my codes and told me where can be more concise and clear. 

First Link: https://editor.p5js.org/xchen218/sketches/uNRRavj1U

Remake Button Link:https://editor.p5js.org/xchen218/sketches/K3keOCcK4

[xchen218]

Assignment#4-Loops

https://editor.p5js.org/xchen218/sketches/9ABmS3Cmg

For this week’s assignment, I used loops to make an old tv scene with scrolling error sign. The old tv background was made after watching the tutorial about loops. I add a random transparency feature to make them flash and looked like a broken old tv. And the error sign was made after watching the other assigned videos this week. Without loops, I might have to make every single little square with seperate codes (i think that would be hundreds of them). And then random transparency feature is needed to add to every single one.

[xchen218]

Assignment3-Button Sketch

Link:  https://editor.p5js.org/xchen218/sketches/uNRRavj1U

For this week’s assignment, I created three shapes that user can interact with. If user hovers on the big circle and rectangle, their colors will change. I chose contrast color as their hidden color, which will be appeal to the user. And the color combination will be comfortable to look at as well. For the little square in the middle, if users click on it, its color will change randomly.

For the gratifying user interaction on the web, I found another similar website as the one I found last week: https://www.patatap.com. The mikutap I found last week uses click as the way users interact with the website. When I click on different spot on the screen, it will make different sounds. It’s background music and beat is cool and we can create our own rhythm/music by clicking. The Patatap I found this week enables users to interact by pressing a-z on the keyboard. Every key represents a different instrument/sound and the screen will show different animation. I enjoy these kinds of interactive websites is because it not only satisfy me visually but also acoustically.

Except for the tutorial videos, I also looked up other work code online.

Reference: https://p5js.org/examples/hello-p5-interactivity-1.html

https://editor.p5js.org/melisa_cald/sketches/r1QwbX2JQ

[xchen218]

Findings:

Example of Web-Based code driven media that uses user interaction to tell a compelling story:

https://aidn.jp/mikutap/

[xchen218]

Assignment2: Interactive Code

https://editor.p5js.org/xchen218/sketches/NG67QIH9r

I watched the assigned tutorials for this week and came up with an idea of doing a scratch-off-ticket thing. And I really like things in pixel style. So I did a hidden “I Love You” image in pixels for this week’s interactive code. People will not see the hidden message until they use the mouse to scratch the whole image. And by clicking the mouse, users can start over and play it again.

[xchen218]

Self-Portrait

https://editor.p5js.org/xchen218/sketches/LUZnipgBd

I had an overview of how p5.js works after watching the tutorials. I figured more details out when I actually get into coding. I first created the face and ears as the foundation of the portrait. Then I added my bangs using command “vertex.” It took time but it was easier to use “vertex” or “line” because the shape is irregular. I dont know how to code curve lines yet so I made two ellipses, one in face color and one in eyes color. I put the face-color one on top to make smiley eyes. My bangs are black and the rest are blue (though they turn green now). So I looked up tutorials and figured out that the three arguments for command color are red, green and blue. And after trying, I filled my hair with color blue.

[xchen218]

My siblings, me & skateboard🛹