Final - Aysenur Karakus/Art&Chaos

mySketch
xxxxxxxxxx
 
// laci partiküllü kaybolan kilit kod
​
let particles = []; // Array of particles
let sound, fft;
let redCircles = []; // New red flashing circles
let invert = false; // No inverted colors initially
let lastBassChange = 0; // Variable to track the last bass rhythm change time
let lastTrebleChange = 0; // Variable to track the last treble rhythm change time
let contrastChangeThreshold = 0.1; // Threshold to trigger contrast change
let lastMouseMoveTime = 0; // Variable to track the last mouse movement time
let mouseIdleTime = 500; // Time (in ms) before particles disappear when the mouse is idle
​
function preload() {
  sound = loadSound('ambush.of.traitors.mp3'); // Loaded music file
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();
  frameRate(60);
​
  fft = new p5.FFT(); // FFT for frequency analysis
  sound.loop(); // Loop the music
​
  // Initial positions for red flashing circles
  for (let i = 0; i < 10; i++) {
    redCircles.push(new RedCircle(random(width), random(height)));
  }
}
​
function draw() {
  let bass = fft.getEnergy("bass");
  let treble = fft.getEnergy("treble");
​
  // Check contrast change: The contrast will change randomly based on the rhythm of the music
  if (bass > contrastChangeThreshold && millis() - lastBassChange > random(100, 500)) {
    invert = !invert; // Toggle contrast
    lastBassChange = millis(); // Update last bass change time
  }
​
  if (treble > contrastChangeThreshold && millis() - lastTrebleChange > random(100, 500)) {
    invert = !invert; // Toggle contrast
    lastTrebleChange = millis(); // Update last treble change time
  }
​
  // Change the background to white when the music is strong
  if (invert) {
    background(255); // White background
  } else {
    background(0, 30); // Black background with more prominent trails
  }
​
  // Blinking effect
  let blink = frameCount % 15 < 8; // Faster blinking
​
  // Contrast/inversion color change and blinking effect
  if (isMouseInCanvas()) {
    particles.push(new Particle(mouseX, mouseY, invert, blink)); // Add new particles with mouse
  }
  addRhythmicCircles(bass, treble, blink, invert); // Add small circles in sync with the rhythm
​
  // Check mouse movement
  if (millis() - lastMouseMoveTime < mouseIdleTime) {
    // Show particles when the mouse moves
    for (let i = particles.length - 1; i >= 0; i--) {
      let p = particles[i];
      p.update();
      p.display();
      if (p.isOffScreen()) {
        particles.splice(i, 1); // Remove particles off-screen
      }
    }
  } else {
    // Clear particles if the mouse has been idle for too long
    particles = [];
  }
​
  // Add red flashing circles
  for (let circle of redCircles) {
    circle.update();
    circle.display();
  }
​
  // Frequency data
  let spectrum = fft.analyze();
  let waveform = fft.waveform();
​
  // Change the color of the lines based on the frequency and enhance them
  if (frameCount % 5 === 0) { // More frequent changes
    for (let i = 0; i < 20; i++) {
      let randomX = random(width);
      let randomY = random(height);
      let freqColor;
      // Vary the color tones (navy and purple tones)
      if (random() > 0.5) {
        freqColor = color(random(30, 50), random(30, 50), random(100, 150), 255); // Navy tones
      } else {
        freqColor = color(random(100, 150), 0, random(100, 150), 255); // Purple tones
      }
      if (invert) {
        freqColor = color(255 - red(freqColor), 255 - green(freqColor), 255 - blue(freqColor)); // Inverted color
      }
      if (blink) {
        stroke(freqColor);
        strokeWeight(random(2, 4));
        line(randomX, randomY, randomX + random(-150, 150), randomY + random(-150, 150));
      }
    }
  }
​
  // Wavy long lines, red-orange tones
  noFill();
  stroke(255, 100, 0, 200); // Red-orange color
  strokeWeight(3);
  beginShape();
  let waveX = random(width);
  let waveY = random(height);
  for (let i = 0; i < waveform.length; i++) {
    let x = map(i, 0, waveform.length, 0, width);
    let y = map(waveform[i], -1, 1, height / 2 - 200, height / 2 + 200);
    waveX += sin(frameCount * 0.01) * 3; // Move like a snake
    waveY += cos(frameCount * 0.01) * 3;
    if (invert) {
      stroke(255 - 255, 255 - 100, 255 - 0, 200); // Inverted color
    }
    vertex(waveX + x, waveY + y);
  }
  endShape();
​
  // Acoustic chaos effect (big bursts at high frequencies)
  if (treble > 250) {
    for (let i = 0; i < 10; i++) { // Chaotic points
      let chaosX = random(width);
      let chaosY = random(height);
      let chaosColor = color(255, 50, 0, 180); // Red-orange
      if (invert) {
        chaosColor = color(255 - red(chaosColor), 255 - green(chaosColor), 255 - blue(chaosColor)); // Inverted color
      }
      if (blink) {
        fill(chaosColor);
        noStroke();
        ellipse(chaosX, chaosY, random(50, 80)); // Large bursts
      }
    }
  }
}
​
// Particle class
class Particle {
  constructor(x, y, invert, blink) {
    this.x = x;
    this.y = y;
    this.alpha = 255; // Opacity
    this.angle = random(TWO_PI); // Initial angle
    this.radius = random(5, 20); // Small particles
    this.speed = random(0.5, 1.5); // Speed
    this.invert = invert; // Contrast color change
    this.blink = blink; // Blinking effect
    
    // CMYK -> RGB conversion
    let particleColor;
    if (this.invert) {
      // If the canvas is white, CMYK(100, 100, 0, 50) -> RGB(128, 128, 255)
      particleColor = color(128, 128, 255);
    } else {
      // If the canvas is black, CMYK(0, 89, 100, 0) -> RGB(0, 0, 255)
      particleColor = color(0, 0, 255);
    }
    this.color = particleColor;
  }
​
  // Update particle movement
  update() {
    this.x += cos(this.angle) * this.speed; // X movement
    this.y += sin(this.angle) * this.speed; // Y movement
    this.alpha -= 3; // Gradual decrease in opacity
    this.angle += random(-0.1, 0.1); // Small changes in angle
  }
​
  // Display the particle
  display() {
    strokeWeight(1);
    stroke(this.color);
    noFill();
    ellipse(this.x, this.y, this.radius * 2); // Hollow circles
  }
​
  // Remove the particle when it goes off-screen
  isOffScreen() {
    return this.x < 0 || this.x > width || this.y < 0 || this.y > height || this.alpha <= 0;
  }
}
​
// Check if the mouse is within the canvas
function isMouseInCanvas() {
  return mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height;
}
​
// Function: Add small circles synchronized with the rhythm
function addRhythmicCircles(bass, treble, blink, invert) {
  // Spread small circles in sync with the music
  if (bass > 150 || treble > 150) { // If the music is strong, add small circles
    let numCircles = map(bass + treble, 0, 512, 5, 20); // Determine the number of circles
    for (let i = 0; i < numCircles; i++) {
      let circleX = random(width);
      let circleY = random(height);
      let circleSize = random(10, 40); // Size of the circles
      let circleOpacity = map(bass + treble, 0, 512, 100, 255); // Opacity change
​
      let circleColor = color(255, 105, 180, circleOpacity); // Pink color
      if (invert) {
        circleColor = color(255 - red(circleColor), 255 - green(circleColor), 255 - blue(circleColor)); // Inverted color
      }
      if (blink) {
        fill(circleColor);
        noStroke();
        ellipse(circleX, circleY, circleSize); // Small flashing circles
      }
    }
  }
}
​
// New red flashing circle class
class RedCircle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(15, 30); // Circle size
    this.alpha = 255;
    this.offset = random(20); // Offset for movement
  }
​
  // Blinking and movement effect
  update() {
    this.alpha = (sin(frameCount * 0.1 + this.offset) > 0) ? 255 : 0; // Blinking
    this.x += sin(frameCount * 0.01) * 2; // Slight movement on the X axis
    this.y += cos(frameCount * 0.01) * 2; // Slight movement on the Y axis
  }
​
  // Display the red circle
  display() {
    fill(255, 0, 0, this.alpha); // Red color
    noStroke();
    ellipse(this.x, this.y, this.size);
  }
}
​
// Track mouse movement
function mouseMoved() {
  lastMouseMoveTime = millis(); // Update time when the mouse moves
}
​