Fresh Kills

layers.js

let reveal, park, trash, trashParticle, parkParticle;
let description, closeButton;
let open = true;

function preload() {
    park = loadImage('assets/fresh-kills.jpg');
    trash = loadImage('assets/landfill.jpg');
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    pixelDensity(1);
    noStroke();
    
    reveal = select('#freshkills');
    
    if (reveal) {
        image(park, 0, 0);
        trash.resize(windowWidth, 0);
        trashParticle = new TrashParticle(mouseX, mouseY);
        parkParticle = new ParkParticle(mouseX, mouseY);
    }
    
    description = select('.content-description');
    closeButton = select('.min');
    closeButton.mousePressed(closeWindow);    
}

function closeWindow() {
    
    if (open === true){
        description.hide();
        closeButton.html('+');
        open = !open;
    } else  {
        description.show();
        closeButton.html('-');
        open = !open;
    }
    
}

function draw() {
    if (reveal) {
        park.loadPixels();
        parkParticle.update();
        parkParticle.show();

        trash.loadPixels();
        trashParticle.update();
        trashParticle.show();
    }
    
}

///// REVEAL PAGE CODE //////

function TrashParticle(x, y) {
    this.x = x;
    this.y = y;
    
    this.update = function() {
        this.x = mouseX+random(-10, 10);
        this.y = mouseY+random(-10, 10);
    }
    
    this.show = function() {
        noStroke();
        let col = trash.get(this.x, this.y);
        fill(col[0], col[1], col[2], 255);
        rect(this.x, this.y, 10, 10);
    }
}

function ParkParticle(x, y) {
    this.x = x;
    this.y = y;
    
    this.update = function() {
        this.x = mouseX+random(-20, 20);
        this.y = mouseY+random(-20, 20);
    }
    
    this.show = function() {
        noStroke();
        let col = get(this.x, this.y);
        fill(col[0], col[1], col[2]);
        rect(this.x, this.y, 10, 10);
    }
}