Final_submission_208

​

var amplitude;

var lastTime = 0;

var particleArray = [];

var soundFile;

var fft;

var fftColor;

var useRectangles = true; // Variable to track whether to use rectangles or ellipses

var useTriangles = false; // Variable to track whether to use triangles

​

function preload() {

    soundFile = loadSound("Edward Maya & Vika Jigulina - Stereo Love (Officia.mp3");

}

​

function setup() {

    createCanvas(windowWidth, windowHeight);

    amplitude = new p5.Amplitude();

    amplitude.setInput(soundFile);

    amplitude.smooth(0.8);

    soundFile.loop();

    fft = new p5.FFT();

    fftColor = color(random(256), random(256), random(256), 15);

    background(255);

​

    // Create button to toggle between shapes

    var button = createButton('Toggle Shape');

    button.position(20, 20);

    button.mousePressed(toggleShape);

}

​

function draw() {

​

    // Amplitude and peak detection

    var level = map(amplitude.getLevel(), 0, 1, 1, 10);

    var scaling = map(amplitude.getLevel(), 0, 1, 1, 20); // Define scaling here

​

    // Background and stroke for peak detection

    if (level > 4.5 && level < 5.5) {

        strokeWeight(level);

    } else if (level > 5.5 && millis() - lastTime >= 1000) {

        lastTime = millis();

        background(255, 60);

        strokeWeight(level * 2);

        fftColor = color(random(256), random(256), random(256), 15);

    } else {

        background(1, 25);

        strokeWeight(1);

    }

​

    if (useRectangles) {

        // Central rectangle

        rect(width / 2, height / 2, level * 25, level * 25);

    } else if (useTriangles) {

        // Central triangle

        triangle(width / 2, height / 2 - level * 12.5, width / 2 - level * 12.5, height / 2 + level * 12.5, width / 2 + level * 12.5, height / 2 + level * 12.5);

    } else {

        // Central ellipse

        ellipse(width / 2, height / 2, level * 25, level * 25);

    }

    stroke(color(random(256), random(256), random(256)));

    noFill();

    rectMode(CENTER);

​

    // Particle generation

    if (level > 4.5) {

        particleArray.push(new Particle(random(width * 0.5 - level * 25, width * 0.5 + level * 25), random(height * 0.5 - level * 12.5, height * 0.5 + level * 12.5), random(-scaling, scaling), random(-scaling, scaling), level)); // Pass 'level' as a parameter

    }

​

    // Particle management

    for (var i = 0; i < particleArray.length; i = i + 1) {

        particleArray[i].move();

        if (particleArray[i].alive) {

            particleArray[i].display();

        } else {

            particleArray.splice(i, 1);

            i = i - 1;

        }

    }

}

​

// Particle object

var Particle = function (x, y, speedX, speedY, level) { // Add 'level' as a parameter

    this.x = x;

    this.y = y;

    this.speedX = speedX;

    this.speedY = speedY;

    this.color = color(random(256), random(256), random(256), random(75));

    this.alive = true;

    this.radius = random(10, 50);

    this.rotation = random(0, TWO_PI);

    this.rotationSpeed = random(0.01, 0.1);

    this.level = level; // Assign 'level' to the object property

​

    this.move = function () {

        this.x = this.x + this.speedX;

        this.y = this.y + this.speedY;

        this.rotation = this.rotation + this.rotationSpeed;

        if (this.x + this.radius < 0 || this.x - this.radius > width || this.y + this.radius < 0 || this.y - this.radius > height) {

            this.alive = false;

        }

    }

​

    this.display = function () {

        push();

        translate(this.x, this.y);

        noFill();

        stroke(this.color);

        if (useRectangles) {

            rectMode(CENTER);

            rotate(this.rotation);

            rect(0, 0, this.radius + this.level * 10, this.radius + this.level * 10); // Use 'this.level'

        } else if (useTriangles) {

            triangle(0, -this.level * 12.5, -this.level * 12.5, this.level * 12.5, this.level * 12.5, this.level * 12.5); // Use 'this.level'

        } else {

            ellipse(0, 0, this.radius + this.level * 10, this.radius + this.level * 10); // Use 'this.level'

        }

        pop();

    }

​

    // FFT analysis

    var spectrum = fft.analyze();

    push();

    translate(0, 0 - windowHeight / 1.5);

    rotate(HALF_PI);

    for (i = 0; i < spectrum.length; i++) {

        var amp = spectrum[i];

        var y = map(amp, 0, 1, height, 0);

        stroke(fftColor);

        line(i, height, i, y);

    }

    pop();

    push();

    translate(windowWidth, windowHeight + windowHeight / 1.5);

    rotate(-HALF_PI);

    for (i = 0; i < spectrum.length; i++) {

        var amp = spectrum[i];

        var y = map(amp, 0, 1, height, 0);

        stroke(fftColor);

        line(i, height, i, y);

    }

    pop();

​

}

​

function windowResized() {

    resizeCanvas(windowWidth, windowHeight);

}

​

// Function to toggle between shapes

function toggleShape() {

    if (useRectangles) {

        useRectangles = false;

        useTriangles = true;

    } else if (useTriangles) {

        useTriangles = false;

    } else {

        useRectangles = true;

    }

}

​

​