Project 11

//PLANET VARIABLES:
var numPlanets = 4;
var planet = {x: [], y: [], s: [], r: [], g: [], b: [], dx: []};
var d = [];

//STAR VARIABLES:
var numStars = 100;
var star = {x: [], y: [], s: [], dx: []};

//IMG VARIABLES:
var porthole;
var astroLinks = ["https://i.imgur.com/FrLKzou.png",
				  "https://i.imgur.com/vdhX4kE.png",
				  "https://i.imgur.com/01Kk3J7.png"];
var astroPics = [];
var astro = {x: [], y: [], s: [], dx: [], e: []};

function preload(){
	for(k = 0; k < 3; k++){
		astroPics[k] = loadImage(astroLinks[k]);
	}
	porthole = loadImage("https://i.imgur.com/YSSOdgW.png") //made this porthole graphic myself
}

function setup() {
    createCanvas(480, 480);
    background(0);
    planetInitialize();
    starInitialize();
    astroInitialize();
}

function draw() {
	background(0);
	starUpdate();
	planetUpdate();
	astroUpdate();
	image(porthole, 0, 0, width, height);
}

function drawPlanetA(x, y, s, i){ //option one for planet type (moon-y)
	strokeWeight(0);
	fill(planet.r[i], planet.g[i], planet.b[i]); //randomized color
	ellipse(x, y, s, s);
	fill(planet.r[i] + 20, planet.g[i] + 20, planet.b[i] + 20); //randomized color, but a little bit lighter
	ellipse(x - s/10, y + s/3, s/4);
	ellipse(x + s/5, y - s/10, s/3);
	ellipse(x - s/4, y - s/5, s/7);
}

function drawPlanetB(x, y, s, i){ //option two for planet type (saturn-y)
	fill(planet.r[i], planet.g[i], planet.b[i]);
	ellipse(x, y, s, s);
	strokeWeight(3);
	stroke(255-planet.r[i], 255-planet.g[i], 255-planet.b[i]);
	line(x - s*(2/3), y, x + s*(2/3), y);
	strokeWeight(0);
}

function starUpdate(){
	for(var j = 0; j < numStars; j++){
		strokeWeight(0)
		fill(250, 248, 235); //creamy white
		ellipse(star.x[j], star.y[j], star.s[j], star.s[j]);

		if(star.x[j] >= width + star.s[j]){ //if star has fully moved off screen, I reset the values
			star.s[j] = random(1, 10);
			star.x[j] = random(-20, 0-star.s[j]); //HOWEVER, I reset the values with the X position offscreen, so there appears to be a continuous scroll
			star.y[j] = random(0, height);
    	    star.dx[j] = star.s[j] / 200;
		}else{
			star.x[j] += star.dx[j]; //if star is not offscreen, it moves to the right
		}
	}
}

function planetUpdate(){
	for(var i = 0; i < numPlanets; i++){ 
		if(d[i] <= 1){ //selects planet type: if d is less than/equal to one, planet A is drawn, if d is greater than one, planet B is drawn
			drawPlanetA(planet.x[i], planet.y[i], planet.s[i], i);
		}else if(d[i] > 1){
			drawPlanetB(planet.x[i], planet.y[i], planet.s[i], i);
		}

		if(planet.x[i] >= width + planet.s[i] + (planet.s[i] * (2/3))){ //if planet has fully moved off screen, I reset the values
			planet.s[i] = random(10, 150);
			planet.x[i] = random(-200, 0-planet.s[i]); //HOWEVER, I reset the values with the X position offscreen, so there appears to be a continuous scroll
			planet.y[i] = random(0, height);
    	    planet.r[i] = random(20, 235);
    	    planet.g[i] = random(20, 235);
    	    planet.b[i] = random(20, 235);
    	    planet.dx[i] = planet.s[i] / 200;
		}else{
			planet.x[i] += planet.dx[i]; //if planet is not offscreen, it moves to the right
		}
	}
}

function astroUpdate(){
	for(var k = 0; k < 3; k++){
		image(astroPics[k], astro.x[k], astro.y[k], astro.s[k], astro.s[k]);
		if(astro.x[k] >= astro.e[k]){
			astro.x[k] = random(-2000, -150);
			astro.y[k] = random(0, height);
			astro.s[k] = random(30, 400);
			astro.dx[k] = astro.s[k] / 200;
			astro.e[k] = random(height+150, 2000);
		}else{
			astro.x[k] += astro.dx[k];
		}
	}
}

function planetInitialize(){
	for(var i = 0; i < numPlanets; i++){
    	planet.x[i] = random(0, width); //x position
    	planet.y[i] = random(0, height); //y position
    	planet.s[i] = random(10, 150); //size
    	planet.r[i] = random(20, 235); //r, g, and b are randomized. I seperated these instead of creating a color variable so I could use R, G, and B to edit the details
    	planet.g[i] = random(20, 235);
    	planet.b[i] = random(20, 235);
    	planet.dx[i] = planet.s[i] / 200; //dx is related to the size of the planet, if it's bigger it will appear to move quicker
    	d[i] = (random(0, 2)); //variable d selects whether or not planet type A or B is selected
    }
}

function starInitialize(){
	for(var j = 0; j < numStars; j++){
    	star.x[j] = random(0, width);
    	star.y[j] = random(0, height);
    	star.s[j] = random(1, 10);
    	star.dx[j] = star.s[j] / 200; //dx is related to the size of the star, if it's bigger it will appear to move quicker
    }
}

function astroInitialize(){
	for(var k = 0; k < 3; k++){
    	astro.x[k] = random(-2000, width)
    	astro.y[k] = random(0, height);
    	astro.s[k] = random(30, 150);
    	astro.dx[k] = astro.s[k] / 200; 
    	astro.e[k] = random(height+150, 2000); //astro end: beginning/end determines where image starts/ends it's journey before reset. I made the value larger so there would be greater diversity in when astronaunts appeared
    }
}