OOP Project - Meet Me Halfway

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "github.copilot"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.debug.settings.onBuildFailureProceed": true
+}

README.md

@@ -1,89 +1,53 @@
 # Music Visualiser Project
 
-Name:
+Name: 
+Arushi Singh
+Jenied Sayago
+Tania Satavalekar.
 
 Student Number: 
-
-## Instructions
-- Fork this repository and use it a starter project for your assignment
-- Create a new package named your student number and put all your code in this package.
-- You should start by creating a subclass of ie.tudublin.Visual
-- There is an example visualiser called MyVisual in the example package
-- Check out the WaveForm and AudioBandsVisual for examples of how to call the Processing functions from other classes that are not subclasses of PApplet
+C22359751
+C22380473
+C21331753
 
 # Description of the assignment
+We chose the song "Meet Me Halfway" by the Black-Eyed Peas for our project. We felt as though there was a lot to work with within the song, whether it was the beat, the pace or the lyrics. We were also familiar with the song and upon our intial analysis of the song when we began this project, we agreed that the song rose and fell sufficiently to work with for our visuals.
 
-# Instructions
-
-# How it works
-
-# What I am most proud of in the assignment
-
-# Markdown Tutorial
+Some parts that stood out to us were the lyrics, the constantly changing pace and intensity and the cover art for the 2009 album, "The End" which depicts a green skull. We thought it would be really interesting to implement and combine with the song along with other visuals. 
 
-This is *emphasis*
+In this visual assignment, you will find visuals of a pulsing heart, a breaking heart, the cover art implemented as a visual, a spinning "The End" CD with surrounding synth strobe lights and a pair of eyes with moving, colour changing pupils that pulse to the beat, accompanied by "Game of Life" visuals.
 
-This is a bulleted list
-
-- Item
-- Item
-
-This is a numbered list
-
-1. Item
-1. Item
-
-This is a [hyperlink](http://bryanduggan.org)
+# Instructions
+Press SPACEBAR to run the code.
+Hit numbers from 1 to 6 to view the visuals!
 
-# Headings
-## Headings
-#### Headings
-##### Headings
+# How it works
+We used components of MyVisual such as the amplitude and frequency of the song to make our shapes or images react to the song. The visuals use this in real time as they are rendered when their respective key is pressed. All our visuals use various shapes that also visualise the lyrics of the song - whether it be a plants revolving around each other or heart split into half. This adds an even more immersive feel to our visuals.
 
-This is code:
 
-```Java
-public void render()
-{
-	ui.noFill();
-	ui.stroke(255);
-	ui.rect(x, y, width, height);
-	ui.textAlign(PApplet.CENTER, PApplet.CENTER);
-	ui.text(text, x + width * 0.5f, y + height * 0.5f);
-}
-```
+# Arushi Singh: What I am most proud of in the assignment
+For me, I really enjoyed this assignment and branching out with other creative choices while also implementing ideas from this module too. 
+I am incredibly proud of my heart visual as it was very much a trial and error process, with a lot of finicking around and adjusting. I had made my heart visual using trignometry and though it was hard and out of my depth at times, I really used features from sin, cos and tan to map out a heart shape. I'm also really glad that I managed to get it pulsating and beat like a heart to the beat and that I had the heart split directly down and came together without overlapping.
 
-So is this without specifying the language:
+As for my second visual, I really wanted to implement something similar to having a face or using the art that the song is almost always associated with and so, managing to get the image and to recolour it to a grey so it could truly change colour was a challenge but in my opinion, a really smart move. I really liked how it came together overall.
 
-```
-public void render()
-{
-	ui.noFill();
-	ui.stroke(255);
-	ui.rect(x, y, width, height);
-	ui.textAlign(PApplet.CENTER, PApplet.CENTER);
-	ui.text(text, x + width * 0.5f, y + height * 0.5f);
-}
-```
+If I had more time, I would've liked to have the eyes in the art to have been like strobe lights or lasers just to add a bit more to the visual. I would have also liked to have a camera feature that uses the laptop camera to register bodies and faces (using OpenCV library for example) and have that react to the music and combine the two visuals together. Overall, I am really proud of the how my visuals came together and enjoyed it thoroughly.
 
-This is an image using a relative URL:
 
-![An image](images/p8.png)
+# Jenied Sayago: What I am most proud of in the assignment
+I found this assignment to be really interersting and a great opportunity for learning. I used some elements of my learning and taking it to a whole other level. 
 
-This is an image using an absolute URL:
+For my visuals, I felt really proud of designing my planets visual. It took time trying to get all the different features and elements to work alongside each other but it came through. It was really intricate with beat spikes, stars and a Saturn-like planet along with having it display with different colours and I'm glad I put that work in and it shows.  The rings were proven to be some challenge but with a lot of attempts and rendering, I got there and it really did pay off, I feel super proud of how it came together.
 
-![A different image](https://bryanduggandotorg.files.wordpress.com/2019/02/infinite-forms-00045.png?w=595&h=&zoom=2)
+As for my hearts visual, I was glad I could fill my screen entirely without it being overwhelming. I really liked the synth especially, I like that I got it to flow rather than spike, almost like an ocean wave. The heart beating was really nice and I felt as though it was really in theme with the other visuals. This visual took time to map out placements and was tediuous in this way but other than that there was no big issues.
 
-This is a youtube video:
+If I had more time to put in, I would've liked to make my heart visual stand out a bit more by either having the eye behind my heart visual blink or I would transform the squares into cubes in the heart visual so that they could pulse and explode to the beat or with timing. Other than that, I am pleased with how it all came together and feel proud and happy with my visuals overrall.
 
-[![YouTube](http://img.youtube.com/vi/J2kHSSFA4NU/0.jpg)](https://www.youtube.com/watch?v=J2kHSSFA4NU)
+# Tania Satavalekar: What I am most proud of in the assignment
+Reflecting onn this assignment, I am really proud of how I applied the concepts I learned throughout this module. I think that this sentiment is really evident in my visual components.
 
-This is a table:
+One standout feature is the grid visual code. I enjoyed making the grid, however, initally, I was trying to implement of the Game of Life code. Although it presented a significant challenge during the labs, it resulted in one of the most memorable visuals I've ever created and it was something I was really proud of. I really enjoyed that it looked like confetti or fireworks and it struck a chord with me so I found it to be perfect to implement into this project, I was hoping to incorporate it in some way, it was a bummer I wasn't able to incorporate it due to render difficulties. The eyes were also a part that brought me pride. The  sketching out a pair of circles and mapping visuals and creating borders to bounce back and forth was somewhat simple but it adds a whimsical charm and a bit of fun.  Sometimes, the most straightforward elements can put the most fun into a visual composition, and in this case, it added a playful twist that resonated with all of us.
 
-| Heading 1 | Heading 2 |
-|-----------|-----------|
-|Some stuff | Some more stuff in this column |
-|Some stuff | Some more stuff in this column |
-|Some stuff | Some more stuff in this column |
-|Some stuff | Some more stuff in this column |
+I'm thrilled with the outcome of my synth waves. It took a lot of work to map it so they look like they come out of the CD rather than have it off centre, but with many attempts I got it to work. They turned out even better than I had imagined, and they complemented the spinning CD visual seamlessly. The CD idea was in my head for a long time and I found myself making it so much more complicated than it had to be, especially with the way they rotate to the beat and pacing of the song. A simple image I made transparent sufficed perfectly and was all that was needed to make this visual sing. The synergy between these effects enchanced the overall both these effects really complimented each other, leaving me proud.
 
+If given the time, i would've loved to implement and code up live lyrics that sync up to the song but it was proving to be much harder than I thought when I did attempt. Having lyrics pop up and circles explode to the beat would've had a great effect. Another idea I had was a Synesthesia water like effect that would move and rise and fall like water but also change colour. This would've taken up a lot of time however, I hope to create that visual someday soon as a side project.

java/.project

@@ -16,12 +16,12 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1616413840733</id>
+			<id>1710347915364</id>
 			<name></name>
 			<type>30</type>
 			<matcher>
 				<id>org.eclipse.core.resources.regexFilterMatcher</id>
-				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
 			</matcher>
 		</filter>
 	</filteredResources>

java/src/c21331753/TaniaVisual1.java

@@ -0,0 +1,120 @@
+package c21331753;
+
+import ie.tudublin.CombinedVisual;
+import processing.core.PApplet;
+
+public class TaniaVisual1 extends PApplet {
+    CombinedVisual cv;
+    int cols, rows;
+    int resolution = 20; // Change the resolution to 1 for a grid covering the entire screen
+    boolean[][] grid;
+    boolean[][] next;
+
+    public TaniaVisual1(CombinedVisual cv) {
+        this.cv = cv;
+    }
+
+    public void render() {
+        cv.calculateAverageAmplitude();
+        float amplitude = cv.getSmoothedAmplitude();
+        cv.background(0);
+        cv.colorMode(HSB, 360, 100, 100);
+
+        // Call setup method to initialize the Game of Life grid
+        setup();
+        updateGrid();
+        drawGrid();
+
+        float eyeSize = 300; // Increase eye size
+
+        // Draw eyes in the center of the screen
+        float centerX = cv.width / 2;
+        float centerY = cv.height / 2;
+        cv.fill(255); // Eye color (white)
+        cv.stroke(255); // Eye stroke (white)
+        drawEye(centerX - 200, centerY, eyeSize); // Left eye
+        drawEye(centerX + 200, centerY, eyeSize); // Right eye
+    }
+
+
+
+    private void drawEye(float x, float y, float size) {
+        // Draw outer eye
+        cv.strokeWeight(2);
+        cv.fill(255); // Eye color (white)
+        cv.ellipse(x, y, size, size);
+
+        // Calculate pupil movement based on amplitude
+        float pupilDiameter = size / 4;
+        float pupilX = map(cv.getSmoothedAmplitude(), 0, 1, x - 100, x + 300); // Map amplitude to pupil's diameter range
+
+        // Calculate pupil color based on amplitude
+        float pupilColor = map(cv.getSmoothedAmplitude(), 0, 1, 0, 360); // Map amplitude to hue
+
+        // Draw pupils
+        cv.fill(pupilColor, 80, 80); // Set pupil color
+        float bounceOffset = map(sin(frameCount * 0.5f), -1, 1, -size / 2, size / 2); // Calculate bouncing offset
+        cv.ellipse(pupilX, y + bounceOffset*2, pupilDiameter, pupilDiameter); // Draw pupil at calculated X position with bouncing effect
+    }
+
+    public void setup() {
+        cols = width;
+        rows = height;
+        grid = new boolean[cols][rows];
+        next = new boolean[cols][rows];
+        // Initialize grid randomly
+        for (int i = 0; i < cols; i++) {
+            for (int j = 0; j < rows; j++) {
+                grid[i][j] = random(1) > 0.5;
+            }
+        }
+    }
+
+    private void updateGrid() {
+        // Compute next generation based on rules
+        for (int i = 0; i < cols; i++) {
+            for (int j = 0; j < rows; j++) {
+                int neighbors = countNeighbors(grid, i, j);
+                if (grid[i][j]) {
+                    next[i][j] = (neighbors == 2 || neighbors == 3);
+                } else {
+                    next[i][j] = (neighbors == 3);
+                }
+            }
+        }
+        // Swap grids
+        boolean[][] temp = grid;
+        grid = next;
+        next = temp;
+    }
+
+    private int countNeighbors(boolean[][] grid, int x, int y) {
+        int count = 0;
+        for (int i = -1; i <= 1; i++) {
+            for (int j = -1; j <= 1; j++) {
+                int col = (x + i + cols) % cols;
+                int row = (y + j + rows) % rows;
+                if (grid[col][row]) {
+                    count++;
+                }
+            }
+        }
+        if (grid[x][y]) {
+            count--;
+        }
+        return count;
+    }
+
+    private void drawGrid() {
+        for (int i = 0; i < cols; i++) {
+            for (int j = 0; j < rows; j++) {
+                float x = i * resolution;
+                float y = j * resolution;
+                float hue = random(360); // Generate a random hue value
+                cv.fill(hue, 80, 80); // Set fill color using the random hue
+                cv.stroke(255);
+                cv.rect(x, y, resolution - 1, resolution - 1);
+            }
+        }
+    }
+}

java/src/c21331753/TaniaVisual2.java

@@ -0,0 +1,56 @@
+package c21331753;
+
+import ie.tudublin.CombinedVisual;
+import processing.core.PApplet;
+import processing.core.PImage;
+
+public class TaniaVisual2 extends PApplet {
+    CombinedVisual cv;
+    PImage img;
+    float angle = 0;
+    float circleSize = 700; // Increase circle size to make it larger
+    float imgAngle = 0; // Initial angle for image rotation
+
+    public TaniaVisual2(CombinedVisual cv) {
+        this.cv = cv;
+        img = cv.loadImage("images/coverCD.png");
+        img.resize(cv.width / 3, cv.height / 3); // Resize the image to make it smaller
+    }
+
+    public void render() {
+        cv.calculateAverageAmplitude();
+        float amplitude = cv.getSmoothedAmplitude();
+        cv.colorMode(HSB, 255);
+        cv.background(0);
+        drawRainbowSynthRing(); // Draw rainbow synth ring first so it's behind the image
+        drawSpinningImage(cv.width / 2, cv.height / 2); // Draw the spinning image in the center
+        //drawAmplitudeCircles(); // Draw amplitude circles
+    }
+
+
+    private void drawRainbowSynthRing() {
+        float halfWidth = cv.width / 2;
+        float halfHeight = cv.height / 2;
+        float circleSize = (float) (cv.getSmoothedAmplitude() * halfHeight * 2);
+        cv.noFill();
+        float amplitude = cv.getSmoothedAmplitude();
+        for (int i = 0; i < 360; i += 10) {
+            float hue = cv.frameCount % 360;
+            cv.stroke(hue, 255, 255);
+            float x = halfWidth + cos(radians(i)) * circleSize;
+            float y = halfHeight + sin(radians(i)) * circleSize;
+            cv.ellipse(halfWidth, halfHeight, x, y);
+        }
+    }
+
+    private void drawSpinningImage(float x, float y) {
+        cv.pushStyle();
+        cv.imageMode(CENTER);
+        cv.translate(x, y);
+        cv.rotate(angle);
+        cv.image(img, 0, 0);
+        cv.popStyle();
+        float amplitude = cv.getSmoothedAmplitude();
+        angle += amplitude; 
+    }
+}