iashris · rayanfer32 · Jul 1, 2023 · Jul 1, 2023 · Jul 1, 2023
diff --git a/README.md b/README.md
@@ -6,3 +6,8 @@ The project works for both Processing 2 and 3. Please ensure you have the [Ess](
 
 ## Future Goals
 [12th october 2016] I plan to make a web app for enabling live visualization using p5js. I however will need to find for a replacement to the Ess library. 
+
+## p5js demo
+https://editor.p5js.org/Rayanfer32/sketches/1kcdl_URM
+
+![image](https://github.com/rayanfer32/Roses-in-Resonance-Music-Visualization/assets/37145078/c6ffa9e6-77b2-4799-9cf4-163a00a69b7a)
diff --git a/assets/AI_Test_Kitchen_melodic_acoustic_guitar_reverb_latent_music (1).mp3 b/assets/AI_Test_Kitchen_melodic_acoustic_guitar_reverb_latent_music (1).mp3
diff --git a/assets/AI_Test_Kitchen_melodic_acoustic_guitar_reverb_latent_music.mp3 b/assets/AI_Test_Kitchen_melodic_acoustic_guitar_reverb_latent_music.mp3
diff --git a/assets/Inconsolata.otf b/assets/Inconsolata.otf
diff --git a/assets/beethoven5th.wav b/assets/beethoven5th.wav
diff --git a/assets/piano.wav b/assets/piano.wav
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roses in Resonance</title>
+    <script src="./roses_in_resonance.js"></script>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/roses_in_resonance.js b/roses_in_resonance.js
@@ -0,0 +1,101 @@
+// original author : @iashris
+// p5js fork author: @rayanfer32
+// Updated the code to work in p5js web using chatgpt ofcourse and digging down the rabbit hole of Krister Ess library and its uses, 
+// I discovered that p5js natively supports spectrum generation using p5.sound library 
+// https://editor.p5js.org/Rayanfer32/sketches/1kcdl_URM
+
+let a = 0;
+let loveColors = ["#A61458", "#C92B68", "#F74F70", "#FF939B"];
+let harmonyColors = ["#14472C", "#185027", "#3A724A", "#77AA84"];
+let peaceColors = ["#2C774E", "#2C8646", "#789C84", "#ECEEEC"];
+let myChannel, myFFT;
+let spectrum_min = 50;
+let spectrum_max = 200;
+let theta;
+let thetacum = 0;
+let dafuq;
+
+let DEBUG_VARIABLES = false
+
+function preload() {
+    let audioFile1 =
+        "AI_Test_Kitchen_melodic_acoustic_guitar_reverb_latent_music.mp3";
+    let audioFile2 =
+        "AI_Test_Kitchen_melodic_acoustic_guitar_reverb_latent_music2.mp3";
+
+    let audioFile3 = "piano.wav";
+    let audioFile4 = "beethoven5th.wav";
+    myChannel = loadSound("./assets/" + audioFile1);
+
+    inconsolata = loadFont("assets/Inconsolata.otf");
+}
+function setup() {
+    createCanvas(600, 600, WEBGL);
+
+    // * reference: https://p5js.org/reference/#/p5.FFT
+    myFFT = new p5.FFT();
+    myChannel.loop();
+    myChannel.amp(0.5);
+    background(255);
+    textFont(inconsolata);
+    textSize(24);
+
+    smoothnessSlider = createSlider(1, 10, 5, 1);
+    smoothnessSlider.position(10, 10);
+    smoothnessSlider.style('width', '80px');
+}
+
+function draw() {
+    // * test spectrum
+    function testSpectrum() {
+        spectrum = myFFT.analyze();
+        noStroke();
+        fill(loveColors[0]);
+        for (let i = 0; i < spectrum.length; i++) {
+            let x = map(i, 0, spectrum.length, 0, width);
+            let h = -height + map(spectrum[i], 0, 255, height, 0);
+            rect(x, height, width / spectrum.length, h);
+        }
+    }
+    // background(255);
+    // testSpectrum();
+    // * end spectrum test
+
+    strokeWeight(4);
+
+    spectrum = myFFT.analyze();
+    theta =
+        (spectrum[20] +
+            spectrum[60] +
+            spectrum[100] +
+            spectrum[140] +
+            spectrum[180] +
+            spectrum[220]) /
+        (256 * smoothnessSlider.value());
+    thetacum += theta;
+    constrainedTheta = constrain(theta, 0.3, 0.4);
+    mappedTheta = map(constrainedTheta, 0, 0.4, 0, 3.93);
+    strokeColor = loveColors[int(mappedTheta)];
+
+    if (DEBUG_VARIABLES) {
+        fill("black");
+        translate(-150, -100)
+        text(`@theta=${theta}`, 0, 0); // should be always < 1
+        text(`@thetacum=${thetacum}`, 0, 30);
+        text(`@constrainedTheta=${constrainedTheta}`, 0, 60);
+        text(`@mappedTheta=${mappedTheta}`, 0, 90);
+        translate(150, 100)
+    }
+
+    stroke(color(strokeColor));
+    rotateY(cos(thetacum / 40));
+    rotateZ(sin(thetacum / 40));
+    fill(220, 150);
+    box(300 - a * 10);
+    a += 0.005;
+    if (a > 30) {
+        a = 30;
+    }
+
+
+}