body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: #ddd;
}

.control {
    margin-top: 40px;
}

let x = 0;
let y = 0;
let speedMeter;
let frameRateSlider;
let pictureX;
let pictureY;
let pictureWidth;
let pictureHeight;


function setup() {
    let w = constrain(windowWidth - 300, 300, 600);
    let h = min(w * 9 / 16, windowHeight);
    createCanvas(w, h);
    pictureWidth = min(120, w);
    pictureHeight = min(90, h);
    frameRateSlider = createSlider(1, 10000, 5000, 0.5);
    let div = createDiv();
    div.class('control')
    speedMeter = createDiv(`${frameRateSlider.value()}/frame`);
    div.child(speedMeter);
    div.child(frameRateSlider);
    div.child(createDiv('Control E-Beam Speed'));
    pictureX = round(width / 2 - pictureWidth / 2);
    pictureY = round(height / 2 - pictureHeight / 2);
    frameRateSlider.elt.addEventListener('change', sliderChanged)
}

function sliderChanged() {
    speedMeter.html(`${frameRateSlider.value()}/frame`)
}



function draw() {
    background(0);
    for (let i = 0; i < frameRateSlider.value(); i++) {
        if (x > pictureX && x < pictureX + pictureWidth && y > pictureY && y < pictureY + pictureHeight) {
            fill(255, 0, 0);
        } else {
            fill(255);
        }
        noStroke();
        rect(x, y, 8, 8);
        x += 8;

        if (x > width) {
            x = 0;
            y += 8;
        }
        if (y > height) {
            y = 0;
        }   
    }
}