Introduction to Computational Media (ICM) - NYU ITP
Back to Home
Duban Morales
FINAL
Date 12/09/2024
FINAL
Date 12/09/2024
Cipher
Duban Morales
Assignment 10
Date 11/19/2024
Assignment 10
Date 11/19/2024
Sound Synthesis
Week 10 • Sound Composition
https://editor.p5js.org/Duban_Morales/sketches/U2M86R1lrx
I built off of the Coding Train's ADSR video and added two more oscillators to create two additional instruments. I experimented with different waveforms, switching between sine, triangle, and square, to explore different sounds. I also researched ADSR and the frequencies of certain notes to expand the script. My goal was to generate a song with randomized sounds, where the length of each note and its pitch were chosen randomly. I expected it to sound more melodic, but after working on it for a while, I had to turn the volume down significantly. Sometimes it plays something nice , other times i just refresh the page to make it stop. I had fun with this exploration into sound.
https://editor.p5js.org/Duban_Morales/sketches/U2M86R1lrx
I built off of the Coding Train's ADSR video and added two more oscillators to create two additional instruments. I experimented with different waveforms, switching between sine, triangle, and square, to explore different sounds. I also researched ADSR and the frequencies of certain notes to expand the script. My goal was to generate a song with randomized sounds, where the length of each note and its pitch were chosen randomly. I expected it to sound more melodic, but after working on it for a while, I had to turn the volume down significantly. Sometimes it plays something nice , other times i just refresh the page to make it stop. I had fun with this exploration into sound.
Duban Morales
Assignment 09
Date 11/12/2024
Assignment 09
Date 11/12/2024
I closely followed The Coding Train's hand pose tutorial on creating a drawing application. I left the feature that lets you change color with left hand . my spin on it was to implemented an eraser mode and a painting mode that you can toggle between by pressing 'E' on your keyboard. To indicate the current mode, I also added text at the top left of the screen that notifies the user of the active mode. I wish i would have spent more time on this, but i flew to Los Angeles late Friday night for family reasons and i am flying back to NY in a few hours so I wont miss any of my classes
.
Duban Morales
Assignment 08
Date 11/05/2024
Assignment 08
Date 11/05/2024
CREATE • PARTS OF A WHOLE
https://editor.p5js.org/Duban_Morales/sketches/aXlhe85un
An interactive mosaic that transforms an image into an abstract, alternative reality. I started by building a foundation with rectangles and circles, aiming for a structured layout. However, as I progressed, I felt the need to add a more organic quality, so I used AI to help shape these forms. I quickly learned that adding too many sides to an “organic” shape could result in jagged edges, which inspired me to find the right balance between fluidity and structure. To make the piece interactive, I programmed it to respond to
https://editor.p5js.org/Duban_Morales/sketches/aXlhe85un
An interactive mosaic that transforms an image into an abstract, alternative reality. I started by building a foundation with rectangles and circles, aiming for a structured layout. However, as I progressed, I felt the need to add a more organic quality, so I used AI to help shape these forms. I quickly learned that adding too many sides to an “organic” shape could result in jagged edges, which inspired me to find the right balance between fluidity and structure. To make the piece interactive, I programmed it to respond to
mouseX and mouseY movements, allowing viewers to control the size and saturation of the shapes, while a simple mouse press stops and starts the animation. To further abstract it from the source image, I inverted the colors.
Duban Morales
Assignment 07
Date 10/29/2024
Assignment 07
Date 10/29/2024
Iteration with AI
CREATE • ITERATION WITH AI
https://editor.p5js.org/Duban_Morales/sketches/4mudfYOcD
https://editor.p5js.org/Duban_Morales/sketches/4mudfYOcD
This week, I made another iteration to the puzzle strategy game, which transformed into a shooter game. I kept the control inversion on collisions. I also added a 90-degree rotation for obstacles at preset intervals to prevent players from staying in one position. The control inversion adds an extra layer of difficulty, requiring players to quickly adapt to unexpected changes, while the obstacle rotation forces players to stay on the move, making it harder to exploit safe spots and encouraging more dynamic, strategic gameplay.
This iteration followed several failed attempts to make the original game more complex, such as adding new mechanics like shifting obstacles, which ultimately made the game unplayable. I wanted to shift obstacle positions, but it made the game unplayable, as obstacles blocked the player's path entirely. The AI struggled to interpret my request for shifting obstacles effectively. It did help with adding a blaster and a counter. The blaster tracks how many times an object is hit, and after three hits, the object is destroyed.
This iteration followed several failed attempts to make the original game more complex, such as adding new mechanics like shifting obstacles, which ultimately made the game unplayable. I wanted to shift obstacle positions, but it made the game unplayable, as obstacles blocked the player's path entirely. The AI struggled to interpret my request for shifting obstacles effectively. It did help with adding a blaster and a counter. The blaster tracks how many times an object is hit, and after three hits, the object is destroyed.
Duban Morales
Assignment 06
Date 10/22/2024
Assignment 06
Date 10/22/2024
Simulation
CREATE • SIMULATION
https://editor.p5js.org/Duban_Morales/sketches/svcHR3qeo
I explored the concept of simulation by building on a previous sketch I created earlier in the semester. In this sketch, the goal is for the user to navigate across the canvas while avoiding obstacles. This kind of interactive simulation allows us to visualize a system in which the player must use strategic movement and quick decision-making to succeed.
To improve the code's structure, I used a class function to better organize and clean up the code, making it easier to manage and expand. I also added new gameplay features to increase the challenge and enhance the simulation's complexity. Now, whenever the user collides with an obstacle, the screen rotates. Additionally, the controls are inverted after a collision, further challenging the player's ability to adapt. I implemented a reset mechanic: after three collisions, the user is returned to the starting position.
https://editor.p5js.org/Duban_Morales/sketches/svcHR3qeo
I explored the concept of simulation by building on a previous sketch I created earlier in the semester. In this sketch, the goal is for the user to navigate across the canvas while avoiding obstacles. This kind of interactive simulation allows us to visualize a system in which the player must use strategic movement and quick decision-making to succeed.
To improve the code's structure, I used a class function to better organize and clean up the code, making it easier to manage and expand. I also added new gameplay features to increase the challenge and enhance the simulation's complexity. Now, whenever the user collides with an obstacle, the screen rotates. Additionally, the controls are inverted after a collision, further challenging the player's ability to adapt. I implemented a reset mechanic: after three collisions, the user is returned to the starting position.
Duban Morales
Assignment 05
Date 10/08/2024
Assignment 05
Date 10/08/2024
Time
https://editor.p5js.org/Duban_Morales/sketches/Ja0dAPi7q
The sketch generates circles that dynamically follow the mouse's movement over the canvas. As the mouse moves, each circle leaves a residual trace, representing the progression of temporal movement.
Upon mouse interaction, specifically when the mouse is pressed, the circles undergo a transformation: they transition to a solid state, and their dimensions are randomly selected from four predetermined values. This transformation symbolizes temporal modulation.
The interplay between transparency and variable sizing of the circles is intended to convey the individual contributions of each element to the overall composition. Enabling a retrospective tracing of the sequence of actions, constructing a perceptual timeline of when each object emerged on the canvas. The goal is to depict temporal continuity, where certain moments manifest as fluid and integrated, while others are distinctly pronounced, collectively forming a layered temporal narrative.
Duban Morales
Assignment 04
Date 10/01/2024
Assignment 04
Date 10/01/2024
Repetition with Loops
CREATE • PATTERNS -
https://editor.p5js.org/Duban_Morales/sketches/U9dGPd5cZ
I discovered a pattern in nature, specifically in leaves and the weather in NYC. I was inspired by a bonsai tree near my working desk at home and the few trees I can see from my window. The pattern begins with a representation of leaves as they come in different shapes and sizes, from the moment they start to grow until they fall from the tree or plant. Over the past few days, it has been raining in NYC; you can have a nice bright day and within 30 minutes, the skies suddenly turn gray and it starts to rain, but then it clears up shortly after. Since the theme I chose was nature, and I wanted to add another layer to the pattern, I decided to incorporate an interactive feature. By clicking the mouse over the canvas, the sky turns gray, and it begins to "rain" in the pattern.
https://editor.p5js.org/Duban_Morales/sketches/U9dGPd5cZ
I discovered a pattern in nature, specifically in leaves and the weather in NYC. I was inspired by a bonsai tree near my working desk at home and the few trees I can see from my window. The pattern begins with a representation of leaves as they come in different shapes and sizes, from the moment they start to grow until they fall from the tree or plant. Over the past few days, it has been raining in NYC; you can have a nice bright day and within 30 minutes, the skies suddenly turn gray and it starts to rain, but then it clears up shortly after. Since the theme I chose was nature, and I wanted to add another layer to the pattern, I decided to incorporate an interactive feature. By clicking the mouse over the canvas, the sky turns gray, and it begins to "rain" in the pattern.
Assignment 03
Date 09/24/2024
Interaction with Conditionals
Which choices are easier, harder? Which choices are false choices ? What internal or external factors influence the choice? How do others’ choices affect your choices? What choices surprise you with unexpected outcomes?
As the user navigates through through the scene as the blue rectangle closer to the bottom of the screen, they have to be careful not to follow the other rectangles because they are set on their own path. the red circles crashing into the other rectangles might not affect them as they would affect the users rectangle,
The red circles, on the other hand, serve as dynamic obstacles that add complexity to the scene. These circles move independently and present immediate danger, as coming into contact with them results in “failure”. The user must navigate skillfully between avoiding both the red circles and the movement patterns of the other blue rectangles. The challenge lies in recognizing that the blue rectangles, although similar in appearance, do not offer guidance or protection, and blindly following them is a false choice.
Successfully making it past the red circle obstacles brings a sense of accomplishment and reward, "the grass being greener on the other side." The user’s careful navigation and independent decision-making are what ultimately lead to success, rather than relying on following others. This encourages the player to trust their own judgment and forge their own path amidst the chaos.
Assignment 01
Date 09/06/2024
Self Portrait
https://editor.p5js.org/Duban_Morales/full/xW4ad3oX2
I moved on to the eyes, which were relatively simple. However, I encountered a small issue when adding the right pupil. It was being drawn behind the rectangle that made up the right eye, After realizing the order in which I was drawing the elements in the script, I managed to resolve that issue by moving the position, making sure the pupil was layered correctly.
Next came the mouth, which presented a bit more of a struggle. Using the arc() function, I had to figure out how to position the start and end points of the arc in radians, which initially confused me. After a quick search on how radians map to a circle, I was able to determine the correct angles and making the shape of the mouth as I wanted.
I used the same method to draw the ear however i thought it would be easier if i used the rotate() function to give the ear the right orientation. later this led to an issue when I tried to draw the eyebrows, as they weren’t appearing in the correct location. It took a bit of time to understand how the rotation affected everything that was being coded beneath the function, but once I did, I was able to reposition the eyebrows properly.
I used OBS software to record my process.
Assignment 02
Date 09/16/2024
CREATE OPPOSITES
https://editor.p5js.org/Duban_Morales/sketches/UdRek3osE
I decided to explore the contrast between order and chaos using two sets of moving circles.
First, I created the uniform circles. These circles move up and down in a predictable way—each one moves by a constant speed of 5 pixels in either direction. Whenever they hit the top or bottom of the canvas, they reverse direction, creating a controlled, rhythmic motion. This part of the sketch represents order and stability.
Next, I introduced the chaos circles. For these, I used random speeds to make their movement unpredictable. Each circle moves at a different, randomly generated speed, and when they hit the canvas boundaries, their speed changes to a new random value. This gives them an erratic, chaotic motion that contrasts with the smooth movement of the uniform circles.
Through this sketch, I aimed to show the relationship between control and randomness. The predictable movement of the first set of circles highlights order, while the unpredictable nature of the second set emphasizes chaos. Together, they create a visual balance of opposites, with both order and disorder coexisting on the same canvas.