Creative Coding Lab

https://saramui.github.io/CCLAB/Sara-miniProject10/

https://github.com/saramui/CCLAB/tree/main/Sara-miniProject10

 

I thought that my imaginary creature mini-project would be a good project for me to integrate with html user interface elements. This is because there are different variables that I can use html buttons to change.

My first idea was to have my creature start and stop walking, so I made buttons for those functions. I had trouble with actually implementing these buttons, because I tried putting the walk function in an if statement, but then my character wouldn’t even appear on the page. I fixed this by first declaring and making my creature show up on the page, and then defining his movement in the if statement. 

Another set of buttons I implemented was to change the background color of the project. Since my original background was light blue, I decided to call that ‘daytime’ and add a dark blue to represent the ‘nighttime’. This also initially did not work, but I soon realized that it was because I had declared a variable with the same name as a preexisting function. After I changed the name of the function, the backgrounds ended up working. 

I also struggled with the background. When I initially uploaded the image, it was a weird size and ended up showing up again next to the first background image. Because I only wanted one image to be my background, I looked up what to do and saw that I could use no-repeat to ensure that my image only appears once. 

One challenge I couldn’t fix was the way that the framecounts of my project would continue to change even after I pressed the stop walking button on my creature, which would mean that when I pressed start walking again he would teleport to another part of the canvas. 

1) Working Title and Elevator Pitch

Coloring Music

This project uses synesthesia to visualize music using colors.  

2) Concept

I wanted to explore the topic of synesthesia as well as base my project around the concept of sound visualization. As someone who does not have chomesthesia, I wanted to create a platform for people who also don’t have it to experience what chomesthesia is like.  As someone who is very interested in music and likes looking at pretty images, I thought this would be a perfect chance for me to connect these two into an interactive experience that everyone can enjoy.

I wanted my project to be generative enough that it would yield a different output for every input, which would make interacting with my project more interesting. 

I also wanted my project to be easy to understand and use, since not everyone is familiar with how a piano and the process of chromesthesia works.

3) Sources / Related Art & Practice

https://www.soundoflife.com/blogs/experiences/seeing-sound-hearing-colours-exploring-the-concept-of-chromesthesia

This article taught me what synesthesia and chomesthesia are and how they work relative to the different senses that are used. I also found this image, which I can use as a reference for which colors I can use for each key. 

https://www.youtube.com/watch?v=LMBx6AYaRXc

I really liked the visual and the movement of the video. I also really liked the translucent circles of the image and wanted to combine the two to be the visual in my final project. 

4) Production / Methodology

I plan to use keys on the keyboard to replicate piano keys so that one button can match up to one key on the piano. I decided to use piano notes because I thought that it would be the best way to represent chromesthesia, since their research was done on piano notes. I also thought that it would be the most familiar to people, whether they have piano experience or not, just by being able to tell notes and what their intervals were with each other; they would be able to use my project to play real songs that exist if they want to. 

The visual portion of my project will involve shapes that are triggered to draw when the note is pressed. I want there to be some kind of movement in my visuals to accompany the moving sounds, but also some kind of stability so that the project isn’t too visually crowded.

https://saramui.github.io/CCLAB/final/

https://github.com/saramui/CCLAB.git

Sara Mui

Playing with Colors

Using colors to visualize musical notes.

This project is a demonstration of the way that chromesthesia works. When each musical note is played on the keyboard, the visuals on the page change to the color that the sound is associated with.

In this project, I wanted to explore the way that people with synesthesia see and experience the world. I wanted to combine that interest with a way to do audio visualization, where playing sounds induces a visual. I combined these two by matching a color to a note. I used a graphic to scientifically match the colors and sounds to stimulate the experience of chromesthesia as closely as possible.

I decided to present my project two ways, one to show the animation of the visuals while the notes are being played, showing the visuals and process someone with chromesthesia could see when they are listening to different sounds, and one that creates a still image, ultimately an ‘art piece’ that someone with chromesthesia could envision. 

the home page explaining what chromesthesia is and some inspirations I had.

the project page in the animation feature, showing the header.

the project page in the still animation feature with the reference alert pop-up.

 

Reflection:

1) Process: Design and Composition

I wanted my visualization of the sound to show movement as the note is playing. I was inspired by the concept of raindrops dissipating in water and wanted to play with the size opacity of the shape: as the sound of the note gets softer, the size of the shape expands and the opacity of the image gets less opaque. I wanted to experiment with pushing and splicing arrays, since when a note disappears, the image should too. This was also because I had really slow code for Project A and didn’t want that to happen again. 

I decided to include two modes, because my goal all along was to include different versions of my projects. At first, I had wanted to try different color palettes, but after doing more research I decided against deviating from the original theme of my project, where there are scientific findings about a certain note matching to one specific color. I then decided to create two modes based on where the background is being called in the code. I thought this would be a good idea because in the Animation mode you are able to see the circles decreasing in transparency and can see the different circles popping up and disappearing. I thought of this as more of an experience that someone with chromesthesia would have while listening to music. The Still Piece mode was inspired by people who use their chromesthesia to make still life art pieces. I thought that if each circle drew on top of the other it would be able to create an art piece that was representative of the musical piece itself, with every image being uniquely different since there are random variables in the code. 

I also thought that it would be a good idea for there to be a reference of which key on the piano corresponded to which button on the keyboard without having to go back to the home page (since I didn’t include a button and it would take a lot of time to go back and forth). However, I didn’t want to have an image on the project page because I only wanted the project page to be the project’s canvas for the entire window. I then realized that the alerts would be the best option to use in this case.

 

2) Process: Technical 

My initial code of having a keyIsPressed function spawning circles that increased in size while decreasing in opacity was pretty simple to implement as a class, especially with the ability to push and splice objects. The first challenge I faced was how I would be able to change the color of the objects whose color was previously defined in the constructor of the class. I was then told by a classmate that I can define keyCodes in the update of the class, which is what I ended up doing. I also did not realize that I needed to have each rbg value for a color (since one of the values can be 0) until I tried testing my project and found that the colors were weird when I didn’t define one of the values as 0. After fixing that problem, it was only a matter of using an external keyPressed function to play the sounds and the basis of my project was finished. 

The next challenge I had was implementing a form of variety in my project, since I had wanted it to have multiple modes. My initial idea was to have different color schemes, but the deviation from chromesthesia and the way that I didn’t know how to code that stopped me from pursuing that idea. I did end up realizing I could have different modes by having the background called in either setup() or draw() because when I first coded it I had background in the wrong place, which made the animation look wonky. My next challenge was being able to implement that, because background can’t be called in both at the same time; it would make my project look weird. I ended up thinking of using booleans and linking them with html buttons on my website. If a certain button was pressed, it would call one of the background functions. I really liked what that ended up being. My next step was trying to create a clear background function for if someone was finished with the Still Piece and wanted a clean slate, but was ultimately unable to do that without clicking on the animation button again. 

 

3) Reflection and Future Development

I think my project is a good reflection of what I had initially set out to do. I had wanted to create a connection between hearing music and seeing visuals, which is what I ended up making. 

Some critique that I got was that there should be different shapes, more contrasts in color, have the animation appear overtop the still piece, and for the background color of the page to change colors when a key is pressed. 

Some stuff that I would’ve liked to work more on is the ability to have circles of multiple colors appear when multiple keys are pressed. I would also like to have circles of a color last until they’re spliced, even if the corresponding key is not pressed. I would also have liked to have my buttons be on top of the canvas so that the canvas could have been the true size of the window.

In terms of future projects, I would always like to have a clear canvas button, and buttons that link each page together. 

https://drive.google.com/drive/folders/1l1EPsdycc8jf2Aq2tA5eSKaaNz-TkGXp?usp=sharing

The song I chose to do was Blue by Keshi. Because of the name of the song, I thought it would be good to make the background of my pages the color blue. I made the text a slightly lighter blue so that it could still be blue-themed but there would still be contrast for easy viewing.

I decided that for my two pages I wanted one to be the lyrics and one to be an about page for the song. I wanted to include an about page because I really like the meaning of the song and wanted people to be able to understand it while they were listening to it.

I initially wanted to embed the music video so that viewers would be able to watch the video, but I couldn’t get the embed to work. I ended up only inserting the audio on the page with the lyrics. 

Another problem I had was when I copy and pasted the lyrics, they pasted as one giant paragraph, but I wanted the spacings between each line to show in the way that normal lyrics do. I solved this by putting <br> after every line, and twice to show space between verses.

With regards to the file names, I had trouble with identifying the different elements of the project because I had named them the same thing, so I had to rename them. 

A benefit of the Web is the ability for information to be shared with and accessed by different people, no matter where they are. My friends and I are able to send things to each other and communicate from different sides of the world. However, this can also be an “ill effect” of the web, since there is information that people who use the Web aren’t able to access. One example of this that I have experienced is that because I live in China, there are many websites that I used to be able to access in the States but am unable to access now. Even though there is a way for me to continue being able to access that information (using VPNs), there are people who don’t have that freedom to access the information.

Universality is the concept of allowing everyone to upload and have access to any information on the Web. The Web should be accessible by everyone regardless of age, disability, and language. Isolation is when data and information are stored only in the website that you use, and cannot be transferred to another one. 

Open standards and closed worlds are related to universality and isolation in that open standards are universal and accessible to everyone, where you don’t need to pay to be able to access them. However, closed worlds limit access to just that application, meaning that people might not have access to those closed worlds, even with Web access.

The Web is an application that runs on the internet. The internet functions as a network that transmits information to different places. 

More than 10 years after this text was published, the concept of social machines is still prevalent today. However, with the rise of social machines for good (such as rating systems, informational sources), these can also be manipulated to promote “bad” things (i.e. the rise of cancel culture on social media).

https://editor.p5js.org/saramui/sketches/WMMyOVeOR

Sara Mui

Falling Leaves

Making Art with Leaf Pathing

My project aims to show the visualization of the falling of leaves and how they can be affected by natural elements.

I was interested in seeing the paths that leaves take when they fall, and how that compares to the different ways that other leaves fall. I wanted to emulate an autumn experience by using colors that are representative of fall, such as different shades of orange, green and red. I wanted to incorporate an interactive element that essentially resembles the wind, with the different arrow keys representing the different directions of the wind. I added an object trail (with help from The Coding Train) to show where the leaves were before and where they are now. I decided to make the trail different stroke weights to add character.

1. how the initial project looks.

2. what the project looks like when leaves spawn.

3. what the project looks like after the leaves loop again.

4. what the project looks like when you interact with it using the arrow keys.

 

https://editor.p5js.org/saramui/sketches/4lElfNDRX

I was inspired by an old meme of a dove headbanging and decided to make a version of it with my goose stuffed animal. I first drew my goose with simple shapes, but translating within the class and ensuring that the values were of the format this.x, this.y was a little bit confusing. I eventually got it, and then I colored the pieces according to what my stuffed animal looked like.  My next step was to make it animate, which is what I had the most trouble with. I asked Phyllis for help, but we were ultimately unable to make the animation that I wanted. I then decided to scrap my original idea and try using a different approach to animate the goose head. I played with the settings until I was happy with my dancer.

The benefit of my class not relying on any code outside of its own definition is that it makes things very concise and structured in its own class; I don’t need to refer to different parts of the code to call or redefine something I need. 

This was a great experience for me because I got to learn and practice the concept of classes and how to implement them, which is something I feel is essential to know and would help with my Project A. 

https://editor.p5js.org/saramui/sketches/L07uTioyL

My first step for this mini project was to make the creature. I was inspired by the character Pompompurin and decided to draw him with various ellipses. I initially had trouble with the rotations for his ears and arms, but after changing ellipse more from CORNER to CENTER, things became much easier,However, it was after I finished drawing him that I realized that with the functions and coordinates I used, he would not be able to move. I then redefined that origin of the canvas and rewrote all the coordinates in terms of x and y with respect to the new origin. I then experimented with the function that would make him walk, which was essentially moving him up and down a sine wave very quickly. I translated him to outside of the canvas and made him loop back around and continue walking through the screen. I also added some clouds to make the scene look more interesting. 

I used translate() when I wanted to draw something in reference to something else, like all of Pom’s body parts. I used push() and pop() to separate all of his individual body parts so none of them would overlap and affect each other.  A user-defined function made it easy for me to see and understand my code, because I had sectioned off each part and was able to refer to my codes very conveniently.

https://editor.p5js.org/saramui/sketches/Txddxxzkn

Going into this project, I knew that I wanted to play with different positions of objects, colors, and opacities. I also wanted to incorporate randomness into my art since I think a good generative pattern should produce a different yield every time. 

For the first image, I played with the random size and location of the circles while keeping the opacity the same. 

For the second image, I wanted to experiment with putting circles in a grid. I then thought of lowering the opacity as the y-position gets bigger. I eventually added a decreasing circle size as the circles went down. I kept the same color for one run of the circles because I thought it would make the drawing more cohesive, but the color changes with every run.

For the third image, I initially wanted to experiment with ellipses and change their size relative to their location, but I thought it looked very messy and decided to go with squares instead. I do wish that I would have been able to get it to work with ellipses.

For the fourth image, I was inspired by the previous image to work with the origin in the middle of the drawing. I then used random colored lines and put circles at the end of them.

For the fifth image, I wanted to play with the rotations of triangles in a grid, and thought that a gradient of colors would be good to show the progression of the image.

For the sixth image, I wanted to see what random placement and length of lines would look like with different stroke weights. I thought that it would be nice to have a grayscale drawing.

For the seventh image, I finally experimented with movement in my image, and thought that a grayscale drawing would be fun to show that with.

For the eighth image, I wanted to keep the x-position constant, and created a series of random sized ellipses in a column. I added two more to make the drawing more full. 

For the last image, I wanted to play with the randomness of shapes of triangles and put them in a grid for easy viewing. I also made them random colors to look more fun. 

In the end, I think that using the computer to draw yields faster and more random results than drawing by hand. Shapes can also be kept more consistent digitally than manually.

https://editor.p5js.org/saramui/sketches/9pSXcDAAU

When I first started my project, I knew I wanted to do something with circles while manipulating their fill and stroke. When I saw that I had to include a line in the assignment, I decided to try and integrate circles and lines. Instead of having the lines go through the middle of the circle, I liked having the circles hang off the line better. It was then that I decided I would do something with lights, since I was inspired by string lights. The first interactive measure I put was drawing the line while the mouse button was pressed. I liked the thought of having a color changing string, so I made the line and stroke of the circles change into random colors with every frame. I wanted different color lights too, and thought that it would be good to incorporate interactivity into the color of the lights. I eventually implemented a keyPress that would change the color of the circles every time I pressed it. I also decided to implement a size changer for the lights and accompanying stroke to include more interactivity and customization. It was then that I learned about the difference between just the Pressed and the IsPressed functions, since the former activates the function when the button is pressed once, while the latter is only able to be used while the button is pressed down.

The main thing I learned from this project was how to think logically about what responses I wanted from what stimuli and how that translates into a sequence that the computer can understand.