I wanted to create a landscape from the perspective of a car driving. You can see the cars on the other side of the road travelling in the opposite direction and the scrolling background. I wanted to have cars pass each other so they have random speeds.
sketchDownload
var trees = [];
var cars = [];
var hillHeight = []; //Stores the y values of the hills
var noiseParam = 5;
var noiseStep = 0.02; //Varies the smoothness of the hills
var x = [];
function setup() {
createCanvas(480, 480);
background(220);
//creates a canvas that starts with trees
for (var i = 0; i < 10; i++){
var rx = random(width);
trees[i] = makeTree(rx);
}
//for loop creates the values for the mountains in the background
for(var i = 0; i<=width/5; i++){
var n = noise(noiseParam);
//Adjust size to fit the canvas
var value = map(n, 0, 1, 0, .5*height);
hillHeight.push(value);
noiseParam += noiseStep;
}
frameRate(10);
}
function draw() {
//sky
background(0, 230, 255);
//continually makes the mountains in the background scroll
if(hillHeight.length>width/5){
hillHeight.shift();
for(var i = 0; i <= width / 5; i++){
var n = noise(noiseParam);
var value = map(n, 0, 1, 0, .5*height);
hillHeight.push(value);
noiseParam += noiseStep;
}
}
//color of the hills
fill(130, 130, 130);
//creates the shape of hills to be able to fill under the line
beginShape();
vertex(0, height);
for(var i = 0; i <= width/5; i++){
vertex(i*5, hillHeight[i])
}
vertex(width, height);
endShape();
//foreground grass
fill(0, 255, 0);
noStroke();
rect(0, 360, width, 120);
//road
fill(35);
stroke(0);
rect(0, 260, width, 100);
//background grass
fill(0, 225, 0);
noStroke();
rect(0, 200, width, 60);
//creates the trees on the canvas and conditions for new/old
updateAndDisplayTrees();
removeTreesThatHaveSlippedOutOfView();
addNewTreesWithSomeRandomProbability();
//creates the cars on the canvas and conditions for new/old
updateAndDisplayCars();
removeCarsThatHaveSlippedOutOfView();
addNewCarsWithSomeRandomProbability();
}
function updateAndDisplayTrees(){
// Update the trees' positions, and display them.
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function removeTreesThatHaveSlippedOutOfView(){
//defines trees that have gone off canvas and recreates the array
//without those trees
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}
function addNewTreesWithSomeRandomProbability() {
//add a tree at the end based upon a probability
var newTreeLikelihood = 0.02;
if (random(0,1) < newTreeLikelihood) {
trees.push(makeTree(width));
}
}
// method to update position of tree every frame
function treeMove() {
this.x += this.speed;
}
function treeDisplay() {
fill(255);
stroke(0);
push();
translate(this.x, 240);
fill(133, 87, 35);
//tree trunk
rect(0, -this.tHeight, this.breadth, this.tHeight);
noStroke();
//tree branches
fill(78, 105, 26);
circle(this.breadth/6, -this.tHeight, this.breadth*2);
circle(this.breadth*(5/6), -this.tHeight, this.breadth*2);
circle(this.breadth/2, -this.tHeight-this.breadth/2, this.breadth*2);
pop();
}
function makeTree(birthLocationX) {
var tr = {x: birthLocationX,
//width of the trees
breadth: random(10, 40),
speed: -3.0,
//tree height
tHeight: random(50, 130),
move: treeMove,
display: treeDisplay}
return tr;
}
function updateAndDisplayCars(){
// Update the cars' positions, and display them.
for (var i = 0; i < cars.length; i++){
cars[i].move();
cars[i].display();
}
}
function removeCarsThatHaveSlippedOutOfView(){
//defines if a car is off the canvas, recreates the array to keep
//cars still on canvas and remove ones that have moved off
var carsToKeep = [];
for (var i = 0; i < cars.length; i++){
if (cars[i].x + cars[i].breadth > 0) {
carsToKeep.push(cars[i]);
}
}
cars = carsToKeep;
}
function addNewCarsWithSomeRandomProbability() {
// Adds a car based upon a probability
var newCarLikelihood = 0.02;
if (random(0,1) < newCarLikelihood) {
cars.push(makeCar(width));
}
}
// method to update position of tree every frame
function carMove() {
this.x += this.speed;
}
function carDisplay() {
//colors the car randomly
fill(this.clr);
push();
translate(this.x, 290);
//body of the car
rect(0, 0, this.breadth, 30);
//windows as roof of the car
fill(255, 255, 255, 50);
quad(15, 0, this.breadth*.25, -20, this.breadth*.75,
-20, this.breadth-5, 0);
//wheels
fill(0);
circle(20, 25, 25);
circle(80, 25, 25);
pop();
}
function makeCar(startLocationX){
var car = {x: startLocationX,
breadth: 100, // length of car
//random color of each car
clr: color(random(255), random(255), random(255)),
//random speeds of cars
speed: random(-5, -10),
move: carMove,
display: carDisplay}
return car;
}