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.
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)
}