var Stars = [];
var Planets = [];
var asteroids = [];
var terrain = [];
var noiseParam = 0;
var noiseStep = 0.007;
function setup() {
createCanvas(480, 300);
// create an initial collection of stars, planets, and asteroids
for (var i = 0; i < 100; i++){
var rx = random(width);
var ry = random(height);
Stars[i] = makeStar(rx, ry);
}
for (var i = 0; i < 5; i++){
var rx = random(width);
var ry = random(height);
Planets[i] = makePlanet(rx, ry);
}
for (var i = 0; i < 2; i++){
var rx = random(width);
var ry = random(height);
asteroids[i] = makePlanet(rx, ry);
}
//set up noise function to create scrolling planet terrain
for (i = 0; i<=width/5; i++){
var n = noise(noiseParam);
var value = map(n, 0,1,height/2, height)
terrain.push(value)
noiseParam+= noiseStep
}
frameRate(20);
}
function draw() {
background(0);
updateStars();
removeStars();
addNewStars();
updatePlanets();
removePlanets();
addNewPlanets();
updateasteroids();
removeasteroids();
addNewasteroids();
mars();
insideSpaceship();
astronaut();
}
function updateStars(){
// Update the Star's positions, and display them.
for (var i = 0; i < Stars.length; i++){
Stars[i].move();
Stars[i].display();
}
}
function removeStars(){
var StarsToKeep = [];
for (var i = 0; i < Stars.length; i++){
if (Stars[i].x + Stars[i].breadth > 0) {
StarsToKeep.push(Stars[i]);
}
}
Stars = StarsToKeep;
}
function addNewStars() {
var newStarLikelihood = 0.2;
if (random(0,1) < newStarLikelihood) {
Stars.push(makeStar(width, random(height)));
}
}
// method to update position of Star every frame
function StarMove() {
this.x += this.speed;
}
// draw Stars
function StarDisplay() {
fill(255);
push();
translate(this.x, this.y);
ellipse(0, this.breadth, this.nsize)
pop();
}
function makeStar(birthLocationX, birthLocationY) {
var star = {x: birthLocationX,
breadth: 50,
y:birthLocationY,
speed: -2.0,
nsize: round(random(1,8)),
move: StarMove,
display: StarDisplay}
return star;
}
//view scrolling landscape from inside spaceship
function insideSpaceship(){
noStroke()
fill(151, 163, 194)
rect(0, height/9*7, width, height);
rect(0,0, width, height/9);
rect(0,0, width/9, height)
rect(width/9*8, 0, width, height);
noFill();
strokeWeight(10);
stroke(61, 81, 133)
beginShape();
vertex(width/9, height/9);
vertex(width/9*8, height/9);
vertex(width/9*8, height/9*7);
vertex(width/9, height/9*7);
vertex(width/9, height/9);
endShape();
strokeWeight(2);
var lx = 80;
var ly = 10;
var pt = 15
for (i=0; i<4; i++){
line(lx, 0, lx, height/9)
line(lx, height/9*7, lx, height)
lx+=110
line(0, ly, width, ly)
ly += 250
}
line(0, 120, width/9, 120)
line(width/9*8, 120, width, 120)
strokeWeight(7)
point(width/9 + 10, height/9 +10)
point(width/9 + 10, height/9*7 - 10)
point(width/9*8-10, height/9 +10)
point(width/9*8-10, height/9*7 - 10)
noStroke();
}
//draw astronaut looking out spaceship window
function astronaut(){
fill(255)
ellipse(70, 230, 100);
rect(30, 240, 80,100)
fill(143, 150, 168)
ellipse(85,225, 60)
stroke(143, 150, 168)
strokeWeight(4);
line(85, 270, 85, height)
noFill()
stroke(181, 199, 247)
ellipse(85,225, 60)
noStroke();
}
function updatePlanets(){
for (var i = 0; i < Planets.length; i++){
Planets[i].move();
Planets[i].display();
}
}
function removePlanets(){
var PlanetsToKeep = [];
for (var i = 0; i < Planets.length; i++){
if (Planets[i].x + Planets[i].breadth > 0) {
PlanetsToKeep.push(Planets[i]);
}
}
Planets = PlanetsToKeep;
}
function addNewPlanets() {
var newPlanetLikelihood = 0.01;
if (random(0,1) < newPlanetLikelihood) {
Planets.push(makePlanet(width, random(height)));
}
}
function PlanetMove() {
this.x += this.speed;
}
function PlanetDisplay() {
fill(this.clr);
push();
translate(this.x, this.y);
ellipse(0, this.breadth, this.nsize)
pop();
}
function makePlanet(birthLocationX, birthLocationY) {
var Planet = {x: birthLocationX,
breadth: 50,
y:birthLocationY,
clr: color(random(1, 255), random(1, 255), random(1, 255)),
speed: -1.0,
nsize: round(random(10,50)),
move: PlanetMove,
display: PlanetDisplay}
return Planet;
}
function updateasteroids(){
for (var i = 0; i < asteroids.length; i++){
asteroids[i].move();
asteroids[i].display();
}
}
function removeasteroids(){
var asteroidsToKeep = [];
for (var i = 0; i < asteroids.length; i++){
if (asteroids[i].x + asteroids[i].breadth > 0) {
asteroidsToKeep.push(asteroids[i]);
}
}
asteroids = asteroidsToKeep;
}
//asteroids appear the least frequently - "surprise element"
function addNewasteroids() {
var newasteroidLikelihood = 0.005;
if (random(0,1) < newasteroidLikelihood) {
asteroids.push(makeasteroid(width, random(height)));
}
}
//make the asteroid move in both x direction and y direction
function asteroidMove() {
this.x += this.speed;
this.y += this.speedy;
}
// draw asteroids
function asteroidDisplay() {
fill(random(255), random(255), random(255));
push();
translate(this.x, this.y);
ellipse(0, 5, this.nsize)
beginShape();
vertex(5,5);
vertex(15,5);
vertex(9,7);
vertex(15,10);
vertex(9,13);
vertex(10,15);
vertex(5,15);
endShape();
pop();
}
function makeasteroid(birthLocationX, birthLocationY) {
var asteroid = {x: birthLocationX,
breadth: 50,
y:birthLocationY,
speed: -5.0,
speedy: -1.0,
nsize: 10,
move: asteroidMove,
display: asteroidDisplay}
return asteroid;
}
//generate landscape of planet in foreground, placed low on screen so low frequency of apearance
function mars (){
var n = noise(noiseParam);
var value = map(n, 0,1,height/5*3, height)
terrain.push(value)
terrain.shift();
noiseParam+= noiseStep
for (i = 0; i<=width/5; i++){
noStroke();
fill(222, 106, 11)
beginShape();
vertex(0, height)
vertex(width, height)
vertex(i*5, terrain[i])
endShape();
if (terrain[i] < terrain[i+1] & terrain[i] < terrain[i-1]){
drawAlien(i)
}
}
}
function drawAlien(i){
fill(0,255,0)
ellipse(i*5, terrain[i]-10, 10);
stroke(0,255,0)
strokeWeight(2);
line(i*5,terrain[i]-20, i*5, terrain[i]-10)
strokeWeight(10)
ellipse(i*5, terrain[i]-5, 5)
noStroke()
fill(255)
ellipse(i*5, terrain[i]-5, 8)
fill(0)
ellipse(i*5, terrain[i]-5, 5)
}
For this assignment, I had a lot of fun deciding what I wanted my landscape to be. However, I found that there were a lot of components that I wanted to introduce, but wasn’t able to efficiently generate them in a concise amount of code. I ended up utilizing methods from different classes to generate different aspects of my landscape – for example, objects in the background similar to what was provided in the sample code, as well as usage of the noise function for objects in the foreground. I was partially inspired by the game Among Us as well as a music video called “Where the Sea Sleeps.”