//Jae Son, section C
var bike;
var clouds = [];
var buildings1 = [];
var buildings2 = [];
var lines = [];
function preload(){
bike = loadImage("https://i.imgur.com/NCg0ju7.png");
}
function setup() {
createCanvas(400, 300);
background(11,92,146);
var cloudn = 0;
var building1n = 0;
var building2n = 0;
var linesn = 0;
for (var i = 0; i < 500; i++) {
clouds[i] = createCloud(cloudn);
cloudn += 180;
buildings1[i] = createBuilding1(building1n);
building1n += 140;
buildings2[i] = createBuilding2(building2n);
building2n += 110;
lines[i] = createlines(linesn);
linesn += 400;
}
frameRate(15);
}
function draw() {
imageMode(CENTER);
background(153,225,254);
noStroke();
//cloud displayed
displayCloud();
//back layer buildings displayed
displayBuilding1();
//front layer buildings displayed
displayBuilding2();
//green ground
fill(98,142,62);
rect(0,209,width,91);
//dark gray road
fill(31,42,45);
rect(0,238,width,62);
//white line on the road displayed
displaylines();
//person on the bike
image(bike,200,228,125,83);
}
//cloud
function displayCloud(){
for (var i = 0; i < clouds.length; i++){
clouds[i].move();
clouds[i].display();
}
}
function moveCloud() {
this.x += this.speed;
}
function createCloud(cloudx){
var cloud = {x: cloudx,
cloudy: random(20,70), //so the y coordinate of the clouds vary
cloudw: random(28,42), //so the size of the clouds vary
speed: -3.0,
move: moveCloud,
display: drawCloud
}
return cloud;
}
function drawCloud(){
noStroke();
push();
fill(255);
ellipse(this.x-20,this.cloudy,this.cloudw,this.cloudw);
ellipse(this.x,this.cloudy,this.cloudw,this.cloudw);
ellipse(this.x+20,this.cloudy,this.cloudw,this.cloudw);
pop();
}
//back layer buildings
function displayBuilding1(){
for (var i = 0; i < buildings1.length; i++){
buildings1[i].move();
buildings1[i].display();
}
}
function moveBuilding1() {
this.x += this.speed;
}
function createBuilding1(buildingx){
var building1 = {x: buildingx,
building1ay: 106,
building1aw: 40,
building1ah: 133,
building1by: 91,
building1bw: 54,
building1bh: 126,
building1cy: 117,
building1cw: 48,
building1ch: 140,
speed: -8.5,
move: moveBuilding1,
display: drawBuilding1
}
return building1;
}
function drawBuilding1(){
noStroke();
push();
fill(119,181,183);
rect(this.x,this.building1ay,this.building1aw,this.building1ah);
rect(this.x+40,this.building1by,this.building1bw,this.building1bh);
rect(this.x+92,this.building1cy,this.building1cw,this.building1ch);
pop();
}
//front layer buildings
function displayBuilding2(){
for (var i = 0; i < buildings2.length; i++){
buildings2[i].move();
buildings2[i].display();
}
}
function moveBuilding2() {
this.x += this.speed;
}
function createBuilding2(building2x){
var building2 = {x: building2x,
building2y: random(100,140),
building2w: random(30,50),
building2h: random(100,145),
speed: -6.5,
move: moveBuilding2,
display: drawBuilding2
}
return building2;
}
function drawBuilding2(){
noStroke();
push();
//building structure
fill(156,218,191);
rect(this.x,this.building2y,this.building2w,this.building2h);
//windows (strips) on the building
fill(130,182,187);
rect(this.x+this.building2w/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
rect(this.x+this.building2w*3/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
rect(this.x+this.building2w*5/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
pop();
}
//white lines on the road
function displaylines(){
for (var i = 0; i < lines.length; i++){
lines[i].move();
lines[i].display();
}
}
function movelines() {
this.x += this.speed;
}
function createlines(linesx){
var lines = {x: linesx,
linesy: 273,
linesw: 73,
linesh: 5,
speed: -7.0,
move: movelines,
display: drawlines
}
return lines;
}
function drawlines(){
noStroke();
push();
fill(255);
for (i = 0; i < 3; i++) {
fill(255);
rect(this.x+135*i,this.linesy,this.linesw,this.linesh);
}
pop();
}
Project 11 Landscape
sketch