let button;

let shuffleCount = 0;

let shuffling = false;

let shuffleFrames = 30; 

let currentFrame = 0;

​

function preload() {

    images[0] = loadImage('screenshot1.png');

    images[1] = loadImage('screenshot2.png');

    images[2] = loadImage('screenshot3.png');

    images[3] = loadImage('screenshot4.png');

    images[4] = loadImage('screenshot5.png');

}

​

function setup() {

    createCanvas(800, 600);

    button = createButton('Baby let the games begin');

    button.position(10, 10);

    button.mousePressed(startShuffling);

}

​

function draw() {

    if (shuffling) {

        background(200); 

        let imgHeight = height / 3; 

        let yOffset = (height - imgHeight) / 2; 

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

            let randomIndex = floor(random(images.length));

            image(images[randomIndex], i * (width / 5), yOffset, width / 5, imgHeight);

        }

        currentFrame++;

        if (currentFrame >= shuffleFrames) {

            shuffling = false;

            drawFinalPhotos();

        }

    }

}

​

function startShuffling() {

    shuffling = true;

    currentFrame = 0;

}

​

function drawFinalPhotos() {

    background(200); 

    let imgHeight = height / 3;

    let yOffset = (height - imgHeight) / 2;

    shuffleCount++;

    let applyTint = shuffleCount % 3 === 0; 

    let goldenIndex = floor(random(5));

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

        let randomIndex = floor(random(images.length));

        if (applyTint && i === goldenIndex) {

            tint(255, 223, 0); 

        } else {

            noTint();

        }

        image(images[randomIndex], i * (width / 5), yOffset, width / 5, imgHeight);

    }

    noTint();

}