spaceloop1/js/viewer/sets/asteroid-field.js

var asteroidField = [];

sets.push({
	id: "asteroid-field",
	setup: () => {
		if(!setsLoaded['asteroid-field']) {
			buildAsteroidField();
			setsLoaded['asteroid-field'] = true;
		}
	},
	update: (delta) => {
		updateAsteroidField(delta);
	},
	draw: (context, delta) => {
		drawAsteroidField(context, delta);
	},
});

function buildAsteroidField() {
    var asteroidSprites = [
        `meteorBrown_big1.png`,
        `meteorBrown_big2.png`,
        `meteorBrown_big3.png`,
        `meteorBrown_big4.png`,
        `meteorBrown_med1.png`,
        `meteorBrown_med3.png`,
        `meteorBrown_small1.png`,
        `meteorBrown_small2.png`,
        `meteorBrown_tiny1.png`,
        `meteorBrown_tiny2.png`,
        `meteorGrey_big1.png`,
        `meteorGrey_big2.png`,
        `meteorGrey_big3.png`,
        `meteorGrey_big4.png`,
        `meteorGrey_med1.png`,
        `meteorGrey_med2.png`,
        `meteorGrey_small1.png`,
        `meteorGrey_small2.png`,
        `meteorGrey_tiny1.png`,
        `meteorGrey_tiny2.png`,
    ];
    asteroidField = [];
    for (let i = 0; i < 100; i++) {
        let asteroid = {};

        let spriteIndex = Math.floor(asteroidSprites.length * Math.random());
        asteroid.sprite = asteroidSprites[spriteIndex];
        asteroid.x = Math.floor(starfield.width * Math.random()) - starfield.width / 2;
        asteroid.y = Math.floor(starfield.height * Math.random()) - starfield.height / 2;
        asteroid.angle = Math.floor(360 * Math.random());
        asteroid.rotationSpeed = (2 * Math.random()) - 1;
        asteroid.velocity = {};
        asteroid.velocity.x = 2 * Math.random() - 1;
        asteroid.velocity.y = 2 * Math.random() - 1;

        asteroidField.push(asteroid);
    }
}

function updateAsteroidField(delta) {
    for (let i = 0; i < asteroidField.length; i++) {
        let asteroid = asteroidField[i];
        asteroid.x += asteroid.velocity.x;
        asteroid.y += asteroid.velocity.y;
        asteroid.angle += asteroid.rotationSpeed;

        if (asteroid.x > starfield.width / 2) {
            asteroid.x -= starfield.width;
        }
        if (asteroid.y > starfield.height / 2) {
            asteroid.y -= starfield.height;
        }

        if (asteroid.x < -(starfield.width / 2)) {
            asteroid.x += starfield.width;
        }
        if (asteroid.y < -(starfield.height / 2)) {
            asteroid.y += starfield.height;
        }

        if (asteroid.angle > 360) {
            asteroid.angle -= 360;
        }
        if (asteroid.angle < 0) {
            asteroid.angle += 360;
        }
    }
}

function drawAsteroidField(context, delta) {
    for (let i = 0; i < asteroidField.length; i++) {
        let asteroid = asteroidField[i];
        context.save();
        context.translate(asteroid.x, asteroid.y);
        context.rotate(asteroid.angle * Math.PI / 180);
        atlas.drawCentered(context, asteroid.sprite, { x: 0, y: 0 });
        context.restore();
    }
}