const MIN_SPEED = 0.001;

const MAX_SPEED = 0.1;

const NUM_COLUMNS = 10;

const LINE_THRESHOLD = 50;

const INTERACTION_THRESHOLD = 80;

const DISPERSION_FORCE = 1;

const SQUARE_SIZE = 60; // Increased size of each square

const SQUARE_SPACING = SQUARE_SIZE * 3; // Spacing between squares

const SQUARE_ROUNDING = 10; // Radius for rounded corners

let scrollSpeed = 0; // Initial scroll speed

const SQUARE_OPACITY = 130; // Less opacity for squares

const SCROLL_ACCELERATION = 0.1; // Acceleration rate when arrow key is held

const MAX_SCROLL_SPEED = 10; // Maximum scroll speed limit

​

let columns = [];

let squaresTop = [];

let squaresBottom = [];

let flashOpacity = 0;

let flashActive = false;

let moveDirection = 0; // 0 for static, 1 for right, -1 for left

​

function setup() {

    createCanvas(800, 400);

​

    // Initialize columns

    for (let i = 0; i < NUM_COLUMNS; i++) {

        let columnSpeed = random(MIN_SPEED, MAX_SPEED);

        columns[i] = {

            x: i * width / NUM_COLUMNS,

            particles: [],

            speed: columnSpeed

        };

        for (let j = 0; j < MAX_PARTICLES_PER_COLUMN; j++) {

            let y = random(height);

            columns[i].particles.push(new Particle(columns[i].x, y));

        }

    }

​

    // Initialize the positions of squares in the top and bottom rows

    for (let x = 0; x < width; x += SQUARE_SPACING) {

        squaresTop.push(x);

        squaresBottom.push(x);

    }

}

​

function draw() {

    background(0);

​

    // Update scroll speed based on direction

    if (moveDirection !== 0) {

        scrollSpeed = min(scrollSpeed + SCROLL_ACCELERATION, MAX_SCROLL_SPEED);

    } else {

        scrollSpeed = 0;

    }

​

    // Draw and update squares

    drawAndUpdateSquares();

​

    // Column interactions

    for (let i = 0; i < columns.length - 1; i++) {

        interactColumns(columns[i].particles, columns[i + 1].particles);

    }

​

    // Update and display particles

    for (let col of columns) {

        for (let particle of col.particles) {

            particle.update(col.speed * moveDirection * scrollSpeed);

            particle.display();

            particle.edges();

            applyGlitch(particle);

        }

    }

​

   handleFlash();

}

​

function keyPressed() {

    if (keyCode === RIGHT_ARROW) {

        moveDirection = 1;

    } else if (keyCode === LEFT_ARROW) {

        moveDirection = -1;

    }

}

​

function keyReleased() {

    if (keyCode === RIGHT_ARROW || keyCode === LEFT_ARROW) {

        moveDirection = 0;

    }

}

​

function drawAndUpdateSquares() {

    noStroke();

    fill(255, SQUARE_OPACITY);

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

        rect(squaresTop[i], 0, SQUARE_SIZE, SQUARE_SIZE, SQUARE_ROUNDING);

        squaresTop[i] -= scrollSpeed * moveDirection;

​

        if (squaresTop[i] < -SQUARE_SPACING) {

            squaresTop[i] = width;

        } else if (squaresTop[i] > width) {

            squaresTop[i] = -SQUARE_SPACING;

        }

    }

​

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

        rect(squaresBottom[i], height - SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE, SQUARE_ROUNDING);

        squaresBottom[i] -= scrollSpeed * moveDirection;

​

        if (squaresBottom[i] < -SQUARE_SPACING) {

            squaresBottom[i] = width;

        } else if (squaresBottom[i] > width) {

            squaresBottom[i] = -SQUARE_SPACING;

        }

    }

}

​

​

class Particle {

    constructor(x, y) {

        this.pos = createVector(x, y);

        this.vel = createVector(0, 0);

        this.originalX = x;

        this.opacity = random(100, 255);

    }

​

    update(speed) {

        this.vel.x = speed;

        this.pos.add(this.vel);

        this.vel.mult(0.95);

        this.pos.y += random(-1, 1);

    }

​

    edges() {

        if (this.pos.x - this.originalX > width / NUM_COLUMNS) {

            this.pos.x = this.originalX;

            this.pos.y = random(height);

        }

    }

​

    display() {

        fill(255, this.opacity);

        noStroke();

        rect(this.pos.x, this.pos.y, 1, 10);

    }

​

    applyForce(force) {

        this.vel.add(force);

    }

}

​

function applyGlitch(particle) {

    if (random(1) < 0.05) {

        particle.pos.y += random(-10, 10);

        particle.opacity = random(50, 255);

    }

}

​

function handleFlash() {

    if (random(1) < 0.01 && !flashActive) {

        flashOpacity = 150;

        flashActive = true;

    }

​

    if (flashActive) {

        if (flashOpacity > 0) {

            flashOpacity -= random(5, 15);

        } else {

            flashActive = false;

        }

​

        fill(255, flashOpacity);

        rect(0, 0, width, height);

    }

}

​

function interactColumns(particles1, particles2) {

    for (let p1 of particles1) {

        for (let p2 of particles2) {

            let d = dist(p1.pos.x, p1.pos.y, p2.pos.x, p2.pos.y);

            if (d < INTERACTION_THRESHOLD) {

                let force = p5.Vector.sub(p1.pos, p2.pos);

                force.setMag(DISPERSION_FORCE);

                p1.applyForce(force);

                p2.applyForce(force.mult(-1));

            }

        }

    }

}