57 lines
1.1 KiB
JavaScript
57 lines
1.1 KiB
JavaScript
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);
|
|
}
|