Ct.1

.gitignore

@@ -20,3 +20,7 @@
 
 # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
 hs_err_pid*
+
+
+# OS generated files
+.DS_Store

.vscode/launch.json

@@ -1,5 +1,12 @@
 {
     "configurations": [
+        {
+            "type": "java",
+            "name": "CiaraVisual1",
+            "request": "launch",
+            "mainClass": "C22787471.CiaraVisual1",
+            "projectName": "java"
+        },
         {
             "type": "java",
             "name": "CodeLens (Launch) - Main",

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.project.explorer.showNonJavaResources": false
+}

README.md

@@ -1,89 +1,75 @@
 # Music Visualiser Project
 
-Name:
+Audio Name: Crazy Frog - Axel F
 
-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
-
-# Description of the assignment
-
-# Instructions
-
-# How it works
-
-# What I am most proud of in the assignment
-
-# Markdown Tutorial
-
-This is *emphasis*
-
-This is a bulleted list
-
-- Item
-- Item
-
-This is a numbered list
-
-1. Item
-1. Item
+| Name | Student Number |
+|-----------|-----------|
+|Amy Ibourk | C22308773 |
+|Roxana Rakhmatullina | C21374751 |
+|Ciara Trani | C22787471 |
+|Aleena Mattathil | C22790201 |
 
-This is a [hyperlink](http://bryanduggan.org)
+## Video
+[![YouTube](images/AleenaVisual2.png)](https://youtu.be/r7nN0u-_N_8)
 
-# Headings
-## Headings
-#### Headings
-##### Headings
+# Screenshots
+### Visual 1
+![An image](images/AmyVisual.png)
 
-This is code:
+### Visual 2
+![An image](images/RoxanaVisual1-1.png)
+![An image](images/RoxanaVisual1-2.png)
 
-```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);
-}
-```
+### Visual 3
+![An image](images/CiaraVisual1-1.png)
+### Visual 4
+![An image](images/AleenaVisual2.png)
 
-So is this without specifying the language:
+### Visual 5
+![An image](images/AleenaVisual1.png)
 
-```
-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);
-}
-```
+# Description of the Project
+Using Processing, our team created visuals for our chosen audio Axel F by Crazy Frog. Aleena had to have 2 visuals as the music repeated and also so we all had a similar limit of time to work on. Her visual shows a swirl. Ciaras visual shows rainbow scribbles moving around.Amys visual shows a rose like flower shape and then exposes another abstract shape inside it. It expands to the beat.Roxanas visual is of a frog image that bounces up and down the screen bouncing off the wall and every time it lands on the ground it squishes. There is a rainow aura around the frog and also rainbow grass at the bottom of the screen hip hop .
 
-This is an image using a relative URL:
+# How it works
+There is a switch statement with the number keys allowing us to switch between each visual. Amy's visual is 1, Roxana's is 2, Ciara's is 3 and Aleena's are 4 and 5. We also implemented the visuals automatically changing according to the timing of the song. Time stamps : 0-27s Amy, 28-42s Aleena, 43-1.10s Roxana, 1.11-1.24s Aleena, 1.24-1.50s Ciara
 
-![An image](images/p8.png)
+### AmyVisual1
+In this visual, there are 3 elements:
+1. There are 24 rotating cubes displayed using a for loop to create a visual in the centre of the screen. The size and colour are dependant on the amplitude of the audio. The rotation variable gives it a spinning effect as it increments by 0.1 each time render() is called (60 times per second).
+1. Then there is a lines from centre visual. 30 lines are created using a for loop. The lines start from the centre and radiate outwards. The colour and length of each line is based on the amplitude.
+1. The outer pattern is created by an array of squares. It begins by every square being initialised, each one being slightly bigger and rotated more than the previous. In render() it calls the method display() from the square class to  change the colour and sized depending on the almplitude and spin the squares around.
 
-This is an image using an absolute URL:
+### AleenaVisual1
+This visual displays 4 waveforms. 
+3 waveforms make the background layer. The screen is divided into 3 sections - one for each waveform. Each section of the screen displays a waveform representing a different portion of the audio signal. The waveform color changes based on the audio amplitude, creating a dynamic visual representation of the audio input. 
+The foreground layer renders a spectrum analyzer by dividing the screen into bars, each representing a frequency range, and dynamically changing their height and color based on the audio input
 
-![A different image](https://bryanduggandotorg.files.wordpress.com/2019/02/infinite-forms-00045.png?w=595&h=&zoom=2)
+### AleenaVisual2
+The first element in this visual are the colour changing spirals. They are rendered by calculating their size, position, and color based on the audio amplitude and drawing them using trigonometric functions
+The second element features a radial burst which is rendered by drawing lines that radiate outward from the center of the screen. The brightness of the lines is determined by the amplitude of the audio signal
 
-This is a youtube video:
+### RoxanaVisual1
+I am also happy with how my visual turned out. Though, I had a few issues throughout the process of making it perfect, I managed to do what I aimed to do. RoxanaVisual1.java works by firstly declaring the package in this instance C21374751 student number,after import statements and class declaration it declares the fields such as ourvisual ov, images and floats variables which will be used in RoxanaVisual1 . Then I constructed the body for the frog image and grass such as positioning and moveent like the frog hopping then with render i set the background colours to fade, and make it so the frog bounces back when it reaches the walls and changes directions and change and crates the raimbow aura around the frog image by altering an ellipse , also im render i coded the squish effect and the grass to alter in height
 
-[![YouTube](http://img.youtube.com/vi/J2kHSSFA4NU/0.jpg)](https://www.youtube.com/watch?v=J2kHSSFA4NU)
+### CiaraVisual1
+The way my code works is that it iterates over the audio buffer to draw dynamic visualizations. By adjusting stroke colors, drawing ellipses based on audio amplitudes, and rotating lines around them, it creates engaging visual representations of the audio input.
 
-This is a table:
 
-| 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 |
+# What I am most proud of in the assignment
+### Amy
+- Firstly, I am proud of how well our group worked together. We met up a few times to work on our project together, as well as asked eachother for help when we needed it.
+- I am also happy with how my visual turned out. Though, I had a few issues throughout the process of making it perfect, I managed to do what I aimed to do.
+
+### Aleena
+- At first this assignment had me very overwhelmed. The fact that it was a group project really alienated the stress, knowing that 4 of us would be working together to achieve this common goal. I am really proud of how the 4 of us worked together - meeting up on our days off and, if we were stuck or had an issue, our communication in the groupchat where we would work together to solve one person's bug.
+- While coding my own visuals, I really had a creative block and imaginitave visuals were not coming to me. I'm proud at how I tackled this obstacle. I started with basic visuals - a waveoform and a spiral, and just trialed and errorred different visuals that would add to the base visual
+
+### Roxana
+- I chose the song for this and im half proud of myself and half hate myself for choosing such an upbeat, classic and fun yet such an annoying somewhat repetitive song,
+- I also notes the time stamps for the code which we then changed it to just have a switch case but its the thought that counts
+- I am also proud of how I got the frog to squish whever it landed while hopping, I found it quite hard to do and it did have issues with it like it would stay squished the whole time or not be there at all. To fix this i had to fix the statement so that the size changed on the frogs vertical posotion.
+
+### Ciara
+- I'm most proud of how this project showcases our creative individuality. I like how different and unique each of our visuals are from each other and I think it suits the music that we've chosen. The aspect I love the most about my part is the fast movement of the shapes and lines. It goes well with the upbeat song in the background.
 

java/.project

@@ -21,7 +21,7 @@
 			<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/C21374751/RoxanaVisual1.java

@@ -0,0 +1,79 @@
+package C21374751;
+
+import ie.tudublin.OurVisual;
+import processing.core.*;
+
+public class RoxanaVisual1
+{
+    OurVisual ov;
+    PImage frogImage;
+    float xPos; // Horizontal position of the frog image
+    float yPos; // Vertical position of the frog image
+    float hopSpeed; // Horizontal speed of the frog
+    float angle; // Angle for rainbow colors
+    int numGrassLines; // Number of grass lines
+    float grassSpacing; // Spacing between grass lines
+
+    public RoxanaVisual1(OurVisual ov)
+    {
+        this.ov = ov;
+        frogImage = ov.loadImage("images/frog.png"); // Load the frog image from the "images" folder
+        frogImage.resize(120, 0); // Resize the image width to 120 pixels, keep aspect ratio (slightly bigger)
+        xPos = frogImage.width / 2; // Start the frog at the left edge of the screen
+        yPos = ov.height - frogImage.height / 2; // Start the frog at the bottom of the screen
+        hopSpeed = 5; // Horizontal speed of the frog
+        angle = 0; // Initialize angle for rainbow colors
+        numGrassLines = 30; // Number of grass lines
+        grassSpacing = ov.width / numGrassLines; // Calculate spacing between grass lines
+    }
+
+    public void render()
+    {
+        // Calculate background color based on time
+        float bgBrightness = PApplet.abs(PApplet.sin((float)(ov.frameCount * 0.02))) * 255;
+        ov.background(0, 0, bgBrightness); // Set background to fade from black to blue and back to black
+
+        // Update frog position
+        xPos += hopSpeed;
+
+        // Check if frog reaches edges of the screen
+        if (xPos > ov.width - frogImage.width / 2 || xPos < frogImage.width / 2) {
+            // Reverse direction when frog reaches the right or left wall
+            hopSpeed = -hopSpeed;
+        }
+
+        // Draw rainbow aura around the frog
+        ov.noFill();
+        for (int i = 0; i < 6; i++) {
+            ov.stroke((i * 60) % 255, 255, 255); // Rainbow colors
+            float auraSize = 50 + 20 * PApplet.sin(angle + i * PApplet.TWO_PI / 6);
+            ov.ellipse(xPos, yPos, frogImage.width + auraSize, frogImage.height + auraSize);
+        }
+
+        // Calculate squish factor based on frog's vertical position relative to the bottom of the screen
+        float squishFactor = 1.0f - (yPos / (ov.height - frogImage.height / 2));
+        float squishedHeight = frogImage.height * squishFactor;
+
+        // Draw frog image
+        ov.imageMode(PApplet.CENTER); // Set image mode to center
+        ov.image(frogImage, xPos, yPos, frogImage.width, squishedHeight); // Display frog image with squish effect
+
+        // Make the frog jump higher
+        float hopAmount = 20 * PApplet.sin((float)(ov.frameCount * 0.1)); // Adjust the hop amount as needed
+        yPos = ov.constrain(yPos + hopAmount, 0, ov.height - frogImage.height / 2); // Ensure the frog stays within the screen
+
+        angle += 0.05; // Increment angle for rainbow colors
+
+
+
+
+        // Draw grass lines at the bottom of the screen
+        for (int i = 0; i < numGrassLines; i++) {
+            float grassX = i * grassSpacing; // Calculate x position for each grass line
+            float grassHeight = ov.random(40, 100); // Randomize grass height
+            ov.strokeWeight(10); // Set grass line thickness
+            ov.stroke((i * 60) % 225, 255, 225); // Rainbow colors // Set grass color to green
+            ov.line(grassX, ov.height, grassX, ov.height - grassHeight); // Draw a vertical grass line
+        }
+    }
+}

java/src/C22308773/AmyVisual1.java

@@ -0,0 +1,126 @@
+package C22308773;
+
+import ddf.minim.AudioBuffer;
+import ie.tudublin.OurVisual;
+import processing.core.*;
+
+public class AmyVisual1
+{
+    OurVisual ov;
+    float cy = 0;
+    float cx = 0;
+    float hue = 0f;
+
+    //cube variables
+    float rotation;   
+    float numCubes = 24f;                         
+    float offset = (float)((float)ov.PI/(numCubes * 2));  
+
+    //lines from centre visual variables
+    int numLines = 30;            
+    float angleStep = ov.TWO_PI / numLines; //spacing of the lines
+
+    //square pattern variables
+    Square[] squares;
+    int numSquares = 12;
+
+
+    public AmyVisual1(OurVisual ov)
+    {
+        this.ov = ov;
+        cy = this.ov.height / 2;
+        cx = this.ov.width / 2;
+
+
+        squares = new Square[numSquares];
+        for (int i = 0; i < numSquares; i++) 
+        {
+            squares[i] = new Square(); 
+            squares[i].rotation = i * 24;
+            squares[i].size = i * 25;
+            squares[i].squareNum = i; 
+
+        }
+
+    }
+
+
+    public void render()
+    {
+
+        ov.colorMode(PApplet.HSB);
+        ov.lights();
+        ov.background(0);
+
+        //calling square pattern
+        for (Square square : squares)
+        {
+            square.display();
+        }
+
+
+        //calling lines from centre visual
+        for (int i = 0; i < numLines; i++) 
+        {
+            ov.noFill();
+
+            hue = ov.map(ov.getSmoothedAmplitude(), 0, 1, 0, 256);
+            ov.stroke(hue, 175, 255);
+            float angle = i * angleStep;
+            float x1 = cx + ov.cos(angle) * (ov.getSmoothedAmplitude() * (ov.height/2) * 1.5f);
+            float y1 = cy + ov.sin(angle) * (ov.getSmoothedAmplitude() * (ov.height/2) * 1.5f);
+
+            ov.line(cx, cy, x1, y1);
+
+        }
+
+        ov.translate(ov.width/2, ov.height/2); 
+
+        //calling cube centre visual
+        for(int i = 0; i < numCubes; i++) 
+        {
+            float hue = ov.map(ov.getSmoothedAmplitude(), 0, 1, 0, 256);
+            ov.fill(hue, 175, 255);
+            ov.stroke(hue, 100, 100);
+            ov.pushMatrix();
+            ov.rotateY(rotation + offset*i);
+            ov.rotateX(rotation/2 + offset*i);
+            ov.box(200 * (ov.getSmoothedAmplitude() * 3));
+            ov.popMatrix();
+        }
+        rotation += 0.01f;    
+
+
+    }
+
+
+    class Square
+    {
+        float side = 100;
+        float rotation = 0;
+        float halfH = ov.height / 2;
+        int size = 0;    
+        int squareNum;
+
+
+        public void display()
+        {
+            hue = ov.map(ov.getSmoothedAmplitude()+(squareNum/100), 0, 1, 0, 256);
+            side = (ov.getSmoothedAmplitude() * halfH * 3) + size;
+
+            ov.stroke(hue, 175, 255);
+            ov.noFill();
+            ov.strokeWeight(3);
+
+            ov.pushMatrix();
+            ov.translate(cx, cy);
+            ov.rotate(rotation);
+            ov.rectMode(ov.CENTER);
+            ov.rect(0, 0, side, side, 25);
+            ov.popMatrix();
+
+            rotation += 0.01f;   
+        }
+    }
+}
+