saved

.vscode/launch.json

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

README.md

@@ -1,89 +1,99 @@
 # Music Visualiser Project
 
-Name:
+Name: Fajar Albalushi,
+Bayan Alwardi
 
-Student Number: 
+Student Number: D20125707,
+D20125581
+
+# Youtube Video
+
+[![YouTube](https://user-images.githubusercontent.com/123570704/235653303-596fd465-284e-43c2-a2e4-f6dcb338d83a.jpg)](https://www.youtube.com/watch?v=5zI0J1447Vs)
 
-## 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
+This assignment showcases a visually captivating and funky representation of a song. The provided code employs various visualization techniques to create an immersive and engaging visual experience that complements the music. The code incorporates different modes of visualization, each offering its unique visual effects. These effects are carefully crafted to capture the energy and vibe of the music, resulting in a cool and vibrant visual representation. As the song plays, the visuals come to life, dynamically responding to the rhythm, tempo, and other elements of the music. The code utilizes techniques like amplitude analysis, frequency mapping, and rhythmic patterns to generate visually appealing and synchronized effects. The visual representation generated by the code is meant to enhance the listening experience, adding an extra layer of excitement and enjoyment. It creates a multisensory encounter where the audience can not only hear but also see the music come alive in a funky and visually stimulating manner. Overall, this assignment combines the power of sound and visuals to create a funky and visually mesmerizing representation of a song, resulting in an immersive and dynamic experience for the audience.
 
 # Instructions
+Run the code:
+Open the Processing sketch and click the "Run" button or press "Ctrl+R" (or "Cmd+R" on Mac) to start the visualizations.
 
-# How it works
+Explore visualization modes:
+Press the number keys (1, 2, 3, 4) to switch between different visualization modes.
+Each mode offers a unique visual effect, so feel free to try them out and see which one you like best.
 
-# What I am most proud of in the assignment
+Control the audio:
+Press the spacebar to pause/play the audio.
+This allows you to pause the music and focus solely on the visualizations, or resume the audio playback.
 
-# Markdown Tutorial
+Observe and enjoy:
+As the song plays, watch how the visuals respond to the music.
+Notice how the colors, shapes, and movements change in sync with the audio input.
 
-This is *emphasis*
+# How it works
+The visuals created by the provided code can be related to the song "Mantra" by interpreting the visuals in a way that captures the essence and mood of the song. Here's a possible interpretation:
+
+Bayan:
 
-This is a bulleted list
+Sphere (Mode 1):
+The dynamic lines and vibrant colors of the sphere visualization can represent the energetic and pulsating nature of the song "Mantra."
+The changing positions and lengths of the lines can mirror the rhythmic patterns and melodic movements in the music.
+The size and color variations of the dots can symbolize the different layers and frequencies present in the song, adding depth and complexity to the visual representation.
 
-- Item
-- Item
+-The sphere visualization represents the audio by drawing lines that vary in length and color based on the amplitude of the audio.
+-As the song plays, the lines change their positions and lengths, creating a dynamic and immersive visual experience.
+-The size of the dots also changes based on the amplitude, with different colors representing different frequencies.
+-The visual elements respond to the audio, resulting in an abstract and vibrant representation of the song.
 
-This is a numbered list
+https://user-images.githubusercontent.com/123604689/235656017-cc7cb52c-ae20-4dcc-975e-f09605cbae56.mov
 
-1. Item
-1. Item
+Spiral Nodes (Mode 3):
+The spiral pattern and fluid movements of the nodes can represent the continuous and cyclical nature of the song "Mantra."
+The nodes' interactions and bouncing movements can convey a sense of harmony and synchronization with the music.
+The changing thickness and color of the lines connecting the nodes can symbolize the intricate layers and textures in the song's composition, adding a sense of complexity and depth to the visual representation.
 
-This is a [hyperlink](http://bryanduggan.org)
+-This visualization consists of nodes arranged in a spiral pattern that react to the audio input.
+-The nodes move and bounce around the screen, with their speed and direction influenced by the frequency of the audio.
+-The lines connecting the nodes are drawn with varying thickness and color, reflecting the audio's intensity and frequency.
+-As the song progresses, the spiral nodes create a visually intricate and evolving pattern.
 
-# Headings
-## Headings
-#### Headings
-##### Headings
+https://user-images.githubusercontent.com/123604689/235656790-142de04e-0c49-49ae-aea1-3fb6aa91ad2f.mov
 
-This is code:
+Fajar:
 
-```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);
-}
-```
+Sound Particles (Mode 2):
+The moving particles in this visualization can symbolize the repetitive and trance-like nature of the song "Mantra."
+The particles' movements and sizes can follow the pulsating beats and subtle variations in the music, creating a mesmerizing and hypnotic visual effect.
+The changing colors of the particles can correspond to the shifting tones and emotions in the song, reflecting its introspective and evocative qualities.
 
-So is this without specifying the language:
+-This visualization displays moving particles that respond to the audio input.
+-The particles' positions and sizes are influenced by the amplitude of the audio, creating a visual effect that corresponds to the intensity of the sound.
+-The colors of the particles also change based on the audio input, further enhancing the visual representation of the song.
 
-```
-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);
-}
-```
+https://user-images.githubusercontent.com/123604689/235655738-f9708e1e-cc01-45cf-9286-2e05bf5a20db.mov
 
-This is an image using a relative URL:
+CDWaves (Mode 4):
+The circular waves in this visualization can signify the expansive and transformative qualities of the song "Mantra."
+The size and color variations of the waves can capture the ebb and flow of intensity and emotion throughout the song.
+The central circle representing the audio source can symbolize the core mantra or recurring motif in the music, while the surrounding waves reflect the subtle variations and harmonies that build upon it.
+By relating the visuals to the song's characteristics, such as its energy, repetition, cyclical nature, and transformative qualities, the visualizations can enhance the listener's experience and provide a synchronized and immersive representation of the song "Mantra."
 
-![An image](images/p8.png)
+-In this visualization, circular waves are created based on the audio input.
+-The size and color of the waves change dynamically with the amplitude of the audio.
+-The visualization includes a central circle that represents the audio source, with its size and color responding to the average amplitude of the audio.
+-The circular waves around the central circle are drawn with different colors and widths, representing different frequency bands in the audio.
 
-This is an image using an absolute URL:
+https://user-images.githubusercontent.com/123604689/235656205-7f4b17ef-9335-4daf-9d47-6a98f95477a6.mov
 
-![A different image](https://bryanduggandotorg.files.wordpress.com/2019/02/infinite-forms-00045.png?w=595&h=&zoom=2)
+# What I am most proud of in the assignment
+Fajar:
+I am proud of the code's responsiveness to the audio input. The visualizations dynamically adjust based on the amplitude, frequency, and rhythm of the music. This synchronization between the visuals and the music creates a seamless and coherent experience, where the visuals and music complement each other perfectly. Furthermore, this project helped me to gain better understanding of git. Throughout the project, we faced various challenges that tested our problem-solving abilities and teamwork. Aligning the audio and visual components was a critical aspect of the project. Achieving synchronization between the music and visuals required meticulous attention to detail and thorough testing. 
 
-This is a youtube video:
+Bayan:
+I am most proud of the visuals I created for the project. Despite facing difficulties and restrictions on my Mac OS which didn't allow me to use P3D for 3D visuals, I adapted and used my knowledge of shapes, dimensions, and colors to create visuals that gave a 3D feel to the project. I spent a lot of time experimenting with different shapes and colors to make sure the visuals were dynamic and interesting to look at while still synchronizing with the audio. I'm happy with the way the visuals turned out and I think they are a great complement to the audio. It was a challenging but rewarding experience and I'm proud of what I was able to achieve.
+
+# Markdown Tutorial
 
-[![YouTube](http://img.youtube.com/vi/J2kHSSFA4NU/0.jpg)](https://www.youtube.com/watch?v=J2kHSSFA4NU)
 
-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 |
 

java/.project

@@ -16,12 +16,12 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1616413840733</id>
+			<id>1679327021618</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/D20125581/sphere.java

@@ -0,0 +1,122 @@
+package D20125581;
+
+import ddf.minim.AudioBuffer;
+import ddf.minim.AudioInput;
+import ddf.minim.AudioPlayer;
+import ddf.minim.Minim;
+import processing.core.PApplet;
+
+public class sphere extends PApplet {
+  Minim minim;
+  AudioPlayer ap;
+  AudioInput ai;
+  AudioBuffer ab;
+
+  int mode = 0;
+  float y = 0;
+  float smoothedY = 0;
+  float smoothedAmplitude = 0;
+
+  public void keyPressed() {
+    if (key >= '0' && key <= '9') {
+      mode = key - '0';
+    }
+    if (keyCode == ' ') {
+      if (ap.isPlaying()) {
+        ap.pause();
+      } else {
+        ap.rewind();
+        ap.play();
+      }
+    }
+  }
+
+  public void settings() {
+    size(1024, 1000);
+    // fullScreen(P3D, SPAN);
+  }
+
+  public void setup() {
+
+    minim = new Minim(this);
+    ap = minim.loadFile("java/data/horizon.mp3", 1024);
+    ap.play();
+    ab = ap.mix;
+    colorMode(HSB);
+    y = height / 2;
+    smoothedY = y;
+
+  }
+
+  float off = 0;
+  float lerpedBuffer[] = new float[1024];
+
+  public void draw() {
+    float average = 0;
+    float sum = 0;
+    off += 1;
+
+    // Calculate sum and average of the samples
+    // Also lerp each element of buffer;
+    for (int i = 0; i < ab.size(); i++) {
+      sum += abs(ab.get(i));
+      lerpedBuffer[i] = lerp(lerpedBuffer[i], ab.get(i), 0.1f);
+    }
+    average = sum / (float) ab.size();
+
+    smoothedAmplitude = lerp(smoothedAmplitude, average, 0.1f);
+
+    // Calculate sum and average of the samples
+    // Also lerp each element of buffer;
+    for (int i = 0; i < ab.size(); i++) {
+      sum += abs(ab.get(i));
+      lerpedBuffer[i] = lerp(lerpedBuffer[i], ab.get(i), 0.1f);
+    }
+    average = sum / (float) ab.size();
+
+    smoothedAmplitude = lerp(smoothedAmplitude, average, 0.1f);
+
+    background(0);
+    noFill();
+    translate(width / 2, height / 2);
+
+    // Draw the sphere
+    float sphereRadius = 300;
+    int sphereDetail = 30;
+    for (float i = 0; i < PI; i += PI / sphereDetail) {
+      float r1 = sin(i) * sphereRadius;
+      float r2 = sin(i + PI / sphereDetail) * sphereRadius;
+      for (float j = 0; j < TWO_PI; j += TWO_PI / sphereDetail) {
+        float theta = random(0, PI);
+        float x1 = cos(j) * r1;
+        float y1 = sin(j) * r1;
+        float x2 = cos(j) * r2;
+        float y2 = sin(j) * r2;
+        float c = (int) ((theta / PI) * 255);
+        stroke(c, 255, 255);
+        line(x1, y1, -cos(i) * sphereRadius, x2, y2, -cos(i + PI / sphereDetail) * sphereRadius);
+      }
+    }
+
+    // Draw the dots
+    int numDots = 700;
+    for (int i = 0; i < numDots; i++) {
+      float theta1 = random(0, PI);
+      float theta2 = random(0, TWO_PI);
+      float x = sin(theta1) * cos(theta2) * sphereRadius;
+      float y = sin(theta1) * sin(theta2) * sphereRadius;
+      float z = -cos(theta1) * sphereRadius;
+      float movement = map(smoothedAmplitude, 0, 1, 0, 100); // map amplitude to movement range
+      x += random(-movement, movement);
+      y += random(-movement, movement);
+      z += random(-movement, movement);
+      float dotSize = map(smoothedAmplitude, 0, 1, 1, 10); // map amplitude to dot size range
+      ellipse(x, y, dotSize, dotSize);
+      int hue = (int) ((theta1 / PI) * 255);
+      fill(hue, 255, 255);
+    }
+
+  }
+}
+
+