let stars = [];
let starGifs = [];
let canvas;

function preload() {
    for (let i = 0; i < 20; i++) {
        let starGif = loadImage('../assets/shiningstar.gif');
        starGifs.push(starGif);
    }
}

function setup() {
    canvas = createCanvas(windowWidth - 20, windowHeight - 20);
    canvas.position(0, 0)
    canvas.style("z-index", "-1")

    for (let gif of starGifs) {
        gif.setFrame(round(random(6)));
        gif.resize(30, 0);

        let x = random(width);
        let y = random(height);
        stars.push(new Star(gif, x, y));
    }
}

function draw() {
    background(0);
    for (let s of stars) {
        s.show();
        s.move();
    }
}

class Star {
    constructor(gif, x, y) {
        this.gif = gif;
        this.x = x;
        this.y = y;
    }

    move() {
        if (this.gif.getCurrentFrame() === 6) {
            this.x = random(width);
            this.y = random(height);
        }
    }

    show() {
        image(this.gif, this.x, this.y)
    }
}

function windowResized() {
    resizeCanvas(windowWidth - 20, windowHeight - 20);
}