Project 11: Landscape

This landscape wasn’t the most challenging but the UFO really wasn’t the easiest to get working. I had to experiment a lot with the order of my elements in the draw function to get it looking like it should and it took some testing to get it to move around on the campus and get back on when it flew away.

sketch

var chasm = []
var alien = []
var roadLines = []



function makeLines(lineY, lineLength){  ///creates the yellow lines on the road
  l = {y: lineY, length: lineLength, drawFunction: drawLines, stepFunction: moveLines}
  return l
}

function drawLines(){
  push()
  translate(190, this.y)
  stroke(255, 255, 0)
  line(0, 0, 0, this.length)
  pop()
  push()
  translate(210, this.y)
  stroke(255, 255, 0)
  line(0, 0, 0, this.length)
  pop()
}

function moveLines(){ ////advances the lines so it appears the viewer is moving over the road
  this.y += 10
  if (this.y >= 420){
    roadLines.shift()
    roadLines.push(makeLines(-100, random(0, 200)))
  }

}

function makeUFO(ufoX, ufoY, ufoDX, ufoDY){ ////draws the hovering ufo
  ufo = {x: ufoX, y: ufoY, dx: ufoDX, dy: ufoDY, drawFunction: drawUFO, stepFunction: ufoFly}
  return ufo
}

function drawUFO(){ 
  push()
  translate(this.x, this.y)
  fill(100)
  ellipse(0, 0, 125, 125)
  fill(227, 252, 252)
  ellipse(0, 0, 70, 70)

  for (var t = 0; t <= 10; t++){
    fill(random(0, 255), random(0, 255), random(0, 255))
    ellipse(0, -48, 10, 20)
    rotate(12)
}
pop()
}

function ufoFly(){ ////keeps the ufo flying around the scene if it hits an edge
  this.x += this.dx
  this.y += this.dy
if (this.x >= 400 || this.y >= 400){
  this.dx = random(-5, 5)
  this.dy = random(-5, 5)
  this.dx *= -1
  this.dy *= -1
}
if (this.x <= 0 || this.y <= 0){
  this.dx = random(-5, 5)
  this.dy = random(-5, 5)
  this.dx *= -1
  this.dy *= -1
}



}
function makeChasm(cx, cy){ ///makes the creatures and features on the road
  c = {x: cx, y: cy, type: round(random(0, 3)), drawFunction: chasmDraw, move: chasmAdvance}

return c
}

function chasmDraw(){
  stroke(255)
  translate(this.x, this.y)
  switch (this.type){
  case 0: ////spider alien
  stroke(50) 
  for (u = 0; u <= 8; u++){
  line(0, 0, random(-20, 20), random(-20, 20))
  } 
    break;
   case 1: ////lava pit
   stroke(252, 90, 3)
   line(0, 0, 20, 20)
   line(20, 20, 0, 30)
   line(0, 30, 0, 40) 
   line(0, 40, 20, 60)
   line(20, 60, 0, 80)
   break;
   case 2: ////green alien
   stroke(86, 237, 40)
   line(0, 0, 60, 60)
   line(0, 0, -60, -60)
   line(0, 0, 60, 120)
   line(0, 0, -60, 120)
   stroke(0)
   fill(86, 237, 40)
   ellipse(0, 0, 20, 80)
   break;
   case 3: ////portal thing????
    strokeWeight(3)
    stroke(189, 36, 209)
  fill(0)
   beginShape()
   vertex(0,-40)
   vertex(20, 20)
   vertex(30, 30)
  vertex(20, 40)
  vertex(10, 50)
  vertex(0, 60)
  vertex(-10, 50)
  vertex(-20, 40)
  vertex(-30, 30)
  vertex(-20, 20)
  vertex(0, -40)
   endShape()   
   break;
  }
  

}



function chasmAdvance(){ ////moves the features and makes a new one when one disappears
     translate(0, this.y += 2)
     if (this.y >= width){
      chasm.shift()
      chasm.push(makeChasm(random(0, 400), -200)) 
     }
}



function setup() { ////creates and pushes all of the parts to arrays to be drawn
    createCanvas(400, 400); 
    for (var o = 0; o <= 4; o++){
      var c = makeChasm(random(0, 400), -200)
      chasm.push(c)
    }
    var ufo = makeUFO(200, 200, random(-10, 10), random(-10, 10))
    alien.push(ufo)
    for (var k = 0; k <= 4; k++){
      var l = makeLines(0, random(0, 200))
      roadLines.push(l)
    }

}


function draw() { ////draws each feature and calls their functions
  background(168, 125, 50)
  road()
  for (var k = 0; k <= 4; k++){
    var l = roadLines[k]
    l.stepFunction()
    l.drawFunction()   
  }
  var ufo = alien[0]
  noStroke()
  ufo.stepFunction()    
  ufo.drawFunction()
    for (var o = 0; o <= 4; o++){
      var c = chasm[o]
      c.move() 
      c.drawFunction()
}  
}


function road(){ ///creates the road for the features to be built on
  fill(162, 168, 163)
  rect(100, 0, 200, 400)
  strokeWeight(6)
  stroke(255, 255, 255)
  line(100, 0, 100, 400)
  line(300, 0, 300, 400)
}