I created a scene of a spaceship travelling in space. The stars and the planets are randomized moving away from the spaceship. The planets are getting smaller(as they should be) as they move toward the edge of the screen. In the control room there is a flashing red button and a screen “monitoring” the condition of the spaceship.
sketch
//create objects
var planets = [];
var stars = [];
var redStar = [];
function setup() {
createCanvas(600, 400);
frameRate(8);
// initial planet and stars
var initialX = random(width);
planets[0] = makePlanets(initialX);
redStar[0] = makeRedPlanets(initialX);
redStar[1] = makeRedPlanets(initialX);
for (var i = 0; i < 100; i++) {
stars[i] = makeStars(initialX);
}
}
function draw() {
background(0);
PlanetsinMotion();
addPlanets();
StarsinMotion();
addStars();
redStarinMotion();
addRed();
spaceship();
//flashing button
if (second() & 2 > 0) {
fill("red");
} else fill(0);
noStroke();
ellipse(170, 260, 5, 5);
//make screen and moving red line
fill(226, 223, 222);
stroke(65, 73, 86);
strokeWeight(2);
rect(420, 170, 60, 50);//screen
beginShape();
noFill();
stroke("red");
strokeWeight(1);
for (var x = 0; x < width-540; x++) { //moving red line
var t = (x * 0.009) + (millis() * 0.0003);
var y = map(noise(t), 0, 0.13, 40, 45);
vertex(x+420, y+140);
}
endShape();
}
// all about the planets
function PlanetsinMotion() {
for (var i = 0; i < planets.length; i++) {
planets[i].move();
planets[i].display();
}
}
function addPlanets() {
var maybeAdd = 0.004;
if (random(0,1) < maybeAdd) {
planets.push(makePlanets(width));
}
}
function moveplanets() {
this.x += this.speedX;
this.y += this.speedY;
}
function displayplanets() {
fill(187, 210, 247);
noStroke();
ellipse(this.x, this.y, this.randomsize, this.randomsize);//blue planets
this.randomsize += -0.01;
}
function makePlanets(planetX) {
var plt = { x: planetX,
y: height/2,
speedX: -1.0,
speedY: -0.5,
randomsize: random (10, 100),
move: moveplanets,
display: displayplanets,
}
return plt;
}
//all about the red stars
function redStarinMotion() {
for (var i = 0; i < redStar.length; i++) {
redStar[i].move();
redStar[i].display();
}
}
function moveRed() {
this.x += this.speedX;
this.y += this.speedY;
}
function displayRed() {
fill(122, 43, 19);
noStroke();
ellipse(this.x, this.y, this.randomsize, this.randomsize);
this.randomsize += 0.005;
}
function addRed() {
var maybeAdd = 0.003;
if (random(0,1) < maybeAdd) {
redStar.push(makeRedPlanets(width));
}
}
function makeRedPlanets(redX) {
var red = {x: random(200,400),
y: random(height-50, height-100),
speedX: -0.5,
speedY: -0.7,
randomsize: random(5, 8),
move: moveRed,
display: displayRed
}
return red;
}
//all about the stars
function StarsinMotion() {
for (var i = 0; i < stars.length; i++){
stars[i].move();
stars[i].display();
}
}
function displayStars() {
stroke("yellow");
point(this.x, this.y);
}
function addStars() {
var maybeAdd = 0.6;
if (random(0,1) < maybeAdd) {
stars.push(makeStars(random(width-50, width)));
}
}
function moveStars() {
this.x += this.speedX;
this.y += this.speedY;
}
function makeStars(StarX) {
var str = {x: random(width),
y: random(height),
speedX: -1.0,
speedY: -0.5,
move: moveStars,
display: displayStars,
}
return str;
}
//creating the interior of spaceship
function spaceship() {
noStroke();
fill(53, 58, 66);
rect(0, 315, width, height-315);//floor
fill(95, 105, 122);//light color
quad(287, 0, 357, 0, 419, 26, 397, 53);//3rd wall 1
quad(311, 255, 173, 249, 184, 269, 311, 271);//2nd wall 1
quad(27, 213, 0, 223, 0, 269, 30, 269);//1st wall 3
quad(30, 269, 25, 381, 0, 361, 0, 269);//1st wall 4
fill(81, 90, 104);// medium light
quad(419, 26, 397, 53, 409, 126, 497, 110);//3rd wall 2
quad(311, 255, 311, 271, 476, 276, 497, 250);//3rd wall 4
quad(311, 330, 311, 271, 184, 269, 186, 339);//2nd wall 2
triangle(495, 0, 357, 0, 419, 26);//1st wall 1-3
fill(73, 81, 94);//slightly dark
quad(409, 126, 497, 110, 497, 250, 311, 255);//3rd wall 3
quad(476, 351, 476, 276, 311, 271, 311, 330);//3rd wall 6
quad(600, 87, 497, 110, 419, 26, 495, 0);//4th wall 1
triangle(495, 0, 600, 87, 600, 0);//4th wall 1-2
fill(62, 68, 78);//dark
quad(476, 276, 497, 250, 497, 334, 476, 349);//3rd wall 5
fill(144, 156, 175);//lightest
quad(187, 271, 162, 229, 27, 213, 30, 269);//1st wall 1
fill(122, 133, 153);//still very light
quad(30, 269, 187, 271, 186, 357, 25, 381);//1st wall 2
fill(65, 73, 86);//darkest
quad(497, 110, 600, 87, 600, 130, 497, 150);//4th wall 2-1
quad(497, 150, 536, 142, 536, 345, 497, 334);//4th wall 2-2
quad(536, 345, 536, 262, 600, 268, 600, 360); //4th wall 2-3
}