Project 11: Landscape

peachsketch
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.”

Leave a Reply