John Glacier Backdrop updates

Author: beachatel

.DS_Store

@@ -9,9 +9,7 @@
 
   <link rel="stylesheet" type="text/css" href="style.css">
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"
-    integrity="sha512-I0Pwwz3PPNQkWes+rcSoQqikKFfRmTfGQrcNzZbm8ALaUyJuFdyRinl805shE8xT6iEWsWgvRxdXb3yhQNXKoA=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="libraries/p5.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.js"
     integrity="sha512-TU9AWtV5uUZPX8dbBAH8NQF1tSdigPRRT82vllAQ1Ke28puiqLA6ZVKxtUGlgrH6yWFnkKy+sE6luNEGH9ar0A=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Projects/.DS_Store

@@ -2,137 +2,116 @@ let green, purpleFlower, redFlower, butterfly;
 let font;
 let points = [];
 let choice = 0;
-let gridSize = 90;
+let gridSize = 120;
 let mic, fft;
 let amplitude = 0;
 let smoothAmp = 0;
 let bassAmp = 0;
 let trebleAmp = 0;
-let sampleFactor;
-let colorShift;
+let images = [];
 
 function preload() {
-  green = loadImage("https://res.cloudinary.com/din8rv70n/image/upload/v1743678123/green_j4iti0.png");
-  purpleFlower = loadImage("https://res.cloudinary.com/din8rv70n/image/upload/v1743678122/purple_flower_yhbem7.png");
-  redFlower = loadImage("https://res.cloudinary.com/din8rv70n/image/upload/v1743678124/red_flower_xl2h6r.png");
-  butterfly = loadImage("https://res.cloudinary.com/din8rv70n/image/upload/v1743678118/butterfly_yr5u6w.png");
+  green = loadImage("Assets/green.png");
+  purpleFlower = loadImage("Assets/purple flower.png");
+  redFlower = loadImage("Assets/red flower.png");
+  butterfly = loadImage("Assets/butterfly.png");
 
-  font = loadFont("https://res.cloudinary.com/din8rv70n/raw/upload/v1743678117/camera_ett6ql.ttf"); // Replace with your font file
+  font = loadFont("Assets/camera.ttf");
+
+  images = [green, purpleFlower, redFlower, butterfly];
 }
 
 function setup() {
-  createCanvas(1920, 1200);
-  imageMode(CENTER);
+  createCanvas(1536,896);
+  imageMode(CORNER);
+ 
+  points = font.textToPoints("JOHN", width/2 - 380, height / 2 - 50, 250, {
+    sampleFactor: 0.07,
+    simplifyThreshold: 0,
+  });
 
-  points = font.textToPoints("JOHN GLACIER", 35, height / 2, 240, {
-    sampleFactor: sampleFactor, // Keep density the same
+  let additionalPoints = font.textToPoints("GLACIER", 170, height / 2 + 180, 250, {
+    sampleFactor: 0.07,
     simplifyThreshold: 0,
   });
 
+  points = points.concat(additionalPoints);
+
+
+  
+
   mic = new p5.AudioIn();
   mic.start();
 
   fft = new p5.FFT();
   fft.setInput(mic);
+
+  frameCount = 0;
 }
 
 function draw() {
   fft.analyze();
   let bass = fft.getEnergy("bass");
   let mid = fft.getEnergy("mid");
   let treble = fft.getEnergy("treble");
+
+  amplitude = (bass * 0.6 + mid * 0.3 + treble * 0.1) * 0.02;
+  smoothAmp = lerp(smoothAmp, amplitude, 0.1);
+  bassAmp = lerp(bassAmp, bass * 0.01, 0.1);
+  trebleAmp = lerp(trebleAmp, treble * 0.01, 0.1);
+
+  background(0);
+
+  //rectangle guidelines for layout
+//    fill(100);
+//    rectMode(CENTER);
+//  rect(width/2,50,10,height*2);
+//  rect(width/2,height/2,width,10);
 
-  amplitude = (bass * 0.6 + mid * 0.3 + treble * 0.1) * 0.015; // Weighted response  
-  smoothAmp = lerp(smoothAmp, amplitude, 0.1); // Smooth transition  
-  sampleFactor = map(bass,0,255,0.1,2);
-  bassAmp = lerp(bassAmp, bass * 0.01, 0.1); // Separate bass tracking  
-  trebleAmp = lerp(trebleAmp, treble * 0.01, 0.1); // Separate treble tracking  
+  nameAnimation(smoothAmp, bassAmp, trebleAmp);
+   
 
 
-  if (choice === 0) {
-    nameAnimation(smoothAmp, bassAmp, trebleAmp);
-      
-  } else if (choice === 1) {
-    // flowerSwipe(smoothAmp);
-      flowerSwipe(smoothAmp);
-  }
-}
 
 function nameAnimation(bass, treble, mid) {
-  // background("#f3d333",10);
-    background(0);
-
-
+  noStroke();
+  let t = frameCount * 0.03;
+  let baseRadius = 100 * 100;
+  let numCopies = 50;
+  let angleStep = TWO_PI / numCopies;
+  let xOffset = (t * 250) % width;
+  let yOffset = height / 1.35 + bass * 50;
 
   for (let i = 0; i < points.length; i++) {
     let p = points[i];
-
-    // Size pulsing effect from bass
-    let size = map(sin(frameCount * 0.02 + i * 0.05) * bass, -1, 1, 15, 25);
-
-    // Letter shaking effect from treble
-    let shakeX = map(noise(frameCount * 0.01 + i * 0.05), 0, 1, -treble * 0.2, treble * 0.2);
-    let shakeY = map(noise(frameCount * 0.02 + i * 0.05), 0, 1, -treble * 0.2, treble * 0.2);
-
-    // Rotation effect from mid frequencies
-    let rotation = map(sin(frameCount * 0.02 + i * 0.01) * mid, -1, 1, -PI / 4, PI / 4);
-
-    push();
-    noStroke();
-  let t = frameCount * treble / 50; // Time-based variable for smooth color change
-  let r = map(sin(t + i * 0.1), -1, 1, 200, 255);
-  let g = map(sin(t + i * 0.2), -1, 1, 50, 150);
-  let b = map(sin(t + i * 0.3), -1, 1, 100, 200);
-
-  // fillGradient('radial', {
-  //   from: [p.x, p.y, size * 2], // x, y, radius
-  //   to: [p.x, p.y, size / 2], // x, y, radius
-  //   steps: [
-  //     color(100, g, 200),
-  //     color(0, 0, b),
-  //     color(r, g, b)
-  //   ] // Array of p5.color objects or arrays containing [p5.color Object, Color Stop (0 to 1)]
-  // });
-  fill(r,g,b);
-  // ellipse(p.x, p.y, size / 5, size / 5);
-    pop();
-
-    push();
-    translate(p.x + shakeX, p.y + shakeY); // Apply shake effect
-    rotate(rotation); // Apply rotation effect
-
-    let images = [green, purpleFlower, redFlower, butterfly];
+    let size = map(sin(t + i * 0.1) * bass, -1, 1, 15, 40);
+    let smoothShakeX = map(sin(t + i * 0.1), -1, 1, -treble * 0.1, treble * 0.1);
+    let smoothShakeY = map(cos(t + i * 0.2), -1, 1, -treble * 0.1, treble * 0.1);
     let img = images[i % images.length];
-
-    image(img, 0, 0, size, size);
+    
+    push();
+    translate(p.x + smoothShakeX, p.y + smoothShakeY);
+    image(img, 0, 0, size / 1.5, size / 1.5);
     pop();
   }
 
+  // for (let i = 0; i < numCopies; i++) {
+  //   let angle = i * angleStep;
+  //   let scaleFactor = abs(sin(angle + t) * 1.5);
+  //   let x = xOffset + cos(angle) * baseRadius;
+  //   let y = yOffset + sin(angle) * baseRadius * scaleFactor;
+
+  //   push();
+  //   translate(x, y);
+  //   rotate(angle + t * 2);
+  //   scale(scaleFactor + 0.5);
+  //   let img = images[i % images.length];
+  //   image(img, 0, 0, 120, 120);
+  //   pop();
+  // }
+}
 }
 
 
-function flowerSwipe() {
-  // background(0,10);
-   background("#f3d333");
-  push();
-    imageMode(CORNER);
-for (let x = 0; x < width; x += gridSize){
-  for (let y = 0; y < height; y += gridSize){
-    let images = [green, purpleFlower, redFlower, butterfly];
-    let img1 = images[(x / gridSize + y / gridSize) % images.length];
-    image(img1, x, y, 100, 100);
-
-    
-  }
-}
 
-  pop();
-}
 
-function keyPressed() {
-  if (key === "1") {
-    choice = 0;
-  } else if (key === "2") {
-    choice = 1;
-  }
-}

Projects/John-Glacier-Backdrop/.DS_Store

@@ -5,4 +5,5 @@ html, body {
 
 canvas {
   display: block;
+
 }