sketch//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
}
}
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/22/4b/224b6383-e42b-4f8c-99f9-acd3118cad6d/7-training-humans-24.jpg)
