Project 10: Dynamic Landscape
var cloudShape = {x: 30, y: 110, w:40, h: 20};
var cloud2Shape = {x: 500, y:50, w: 50, h:30};
var cloud3Shape = {x: 300, y: 70, w:25, h: 15};
var car = {x: 500, y: 340};
var car2 = {x: 200, y: 340};
var car3 = {x: 35, y:390};
var airplane = {x: 30, y: 30, w: 40, h: 10};
var airplane2 = {x: 590, y: 70, w: 40, h: 10};
var cloudColor = 150;
var cloudTransparency = 80;
var cloud2Color = 150;
var cloud2Transparency = 80;
var cloud3Color = 180;
var cloud3Transparency = 70;
var carR = 100;
var carG = 100;
var carB = 135;
var car2R = 100;
var car2G = 30;
var car2B = 80;
var car3R = 60;
var car3G = 180;
var car3B = 30;
var image1Location = 0;var image2Location = 1200;
function preload() {
image1 = loadImage("http://i.imgur.com/kw0nRXj.png"); image2 = loadImage("http://i.imgur.com/kw0nRXj.png");}
function setup() {
createCanvas(600,400);
}
function draw() {
noStroke();
image(image1, image1Location,0, width*2,height); image1Location = image1Location - 1; image(image2, image2Location,0, width*2,height); image2Location = image2Location - 1; if (image1Location == -width) { image2Location = width; } else if (image2Location == -width) { image1Location = width; }
drawStars();
drawPlane();
drawPlane2();
drawCloud();
drawCloud2();
drawCloud3();
drawCar1();
drawCar2();
drawCar3();
}
function drawStars() {
fill(255,255,0,70); var starX = 60;
var starY = 5;
ellipse(starX,60,starY,5);
ellipse(starX+310,starY*6,8,8);
ellipse(starX+325,starY*7,4,4);
ellipse(starX+410,starY*9,6,6);
ellipse(starX+100,starY*2,5,5);
ellipse(starX+525,starY*4,4,4);
}
function drawPlane() {
fill(0);
ellipse(airplane.x, airplane.y, airplane.w, airplane.h); triangle(airplane.x-24,airplane.y-10, airplane.x-20,airplane.y, airplane.x-5,airplane.y); ellipse(airplane.x+8,airplane.y+1,airplane.w-10,7); triangle(airplane.x-3,airplane.y+10, airplane.x-6,airplane.y+5, airplane.x+5,airplane.y+5); fill("yellow");
ellipse(airplane.x+15,airplane.y-2,airplane.w/8,airplane.h-7); airplane.x +=1.5; if (airplane.x >= 650) { airplane.x = -130;
airplane.y = random(10, 60);
}
}
function drawPlane2() {
fill(0);
ellipse(airplane2.x, airplane2.y, airplane2.w, airplane2.h); triangle(airplane2.x+24,airplane2.y-10, airplane2.x+20,airplane2.y, airplane2.x+5,airplane2.y); ellipse(airplane2.x-8,airplane2.y+1,airplane2.w-10,7); triangle(airplane2.x-3,airplane2.y+10, airplane2.x-6,airplane2.y+5, airplane2.x+5,airplane2.y+5); fill("yellow");
ellipse(airplane2.x-15,airplane2.y-2,airplane2.w/8,airplane2.h-7); airplane2.x -=1.5; if (airplane2.x <= -230) { airplane2.x = width+130;
airplane2.y = random(10, 60);
}
}
function drawCloud() {
fill(cloudColor, cloudTransparency);
ellipse(cloudShape.x-15, cloudShape.y, cloudShape.w+10,cloudShape.h);
ellipse(cloudShape.x, cloudShape.y-10, cloudShape.w-10,cloudShape.h);
ellipse(cloudShape.x+25, cloudShape.y-3, cloudShape.w,cloudShape.h);
ellipse(cloudShape.x+35, cloudShape.y+5, cloudShape.w-10,cloudShape.h);
ellipse(cloudShape.x+45, cloudShape.y, cloudShape.w,cloudShape.h);
ellipse(cloudShape.x, cloudShape.y, cloudShape.w,cloudShape.h);
cloudShape.x = cloudShape.x - .7; if(cloudShape.x <= -100) { cloudShape.x = width+80;
cloudShape.y = random(30,110);
cloudColor = random(150,255);
cloudTransparency = random(60,80);
cloudShape.h = random(30,25);
}
}
function drawCloud2() {
fill(cloud2Color, cloud2Transparency);
ellipse(cloud2Shape.x-15, cloud2Shape.y, cloud2Shape.w+10,cloud2Shape.h);
ellipse(cloud2Shape.x, cloud2Shape.y-10, cloud2Shape.w-10,cloud2Shape.h);
ellipse(cloud2Shape.x+25, cloud2Shape.y-3, cloud2Shape.w,cloud2Shape.h+5);
ellipse(cloud2Shape.x+35, cloud2Shape.y+5, cloud2Shape.w-10,cloud2Shape.h);
ellipse(cloud2Shape.x+45, cloud2Shape.y, cloud2Shape.w,cloud2Shape.h);
ellipse(cloud2Shape.x, cloud2Shape.y, cloud2Shape.w,cloud2Shape.h);
cloud2Shape.x = cloud2Shape.x - .6; if(cloud2Shape.x <= -100) { cloud2Shape.x = width+100;
cloud2Shape.y = random(30,110);
cloud2Color = random(150,255);
cloud2Transparency = random(60,80);
cloud2Shape.h = random(40,35);
}
}
function drawCloud3() {
fill(cloud3Color, cloud3Transparency);
ellipse(cloud3Shape.x-5, cloud3Shape.y, cloud3Shape.w+10,cloud3Shape.h);
ellipse(cloud3Shape.x, cloud3Shape.y-7, cloud3Shape.w-10,cloud3Shape.h);
ellipse(cloud3Shape.x+10, cloud3Shape.y-3, cloud3Shape.w,cloud3Shape.h+5);
ellipse(cloud3Shape.x+15, cloud3Shape.y+3, cloud3Shape.w-10,cloud3Shape.h);
ellipse(cloud3Shape.x+20, cloud3Shape.y, cloud3Shape.w,cloud3Shape.h);
ellipse(cloud3Shape.x, cloud3Shape.y, cloud3Shape.w,cloud3Shape.h);
cloud3Shape.x = cloud3Shape.x - .3; if(cloud3Shape.x <= -100) { cloud3Shape.x = width+100;
cloud3Shape.y = random(30,110);
cloud3Color = random(150,255);
cloud3Transparency = random(60,80);
cloud3Shape.h = random(5,25);
}
}
function drawCar1() {
var wheelSize = 15;
fill(0);
ellipse(car.x+2,car.y+25,wheelSize,wheelSize); ellipse(car.x+45,car.y+25,wheelSize,wheelSize); fill(carR, carG, carB);
rect(car.x,car.y-5, 50,30,15,15,10,10); rect(car.x-18,car.y+10, 80,15,10); fill("lightBlue");
rect(car.x+6,car.y,10,10,5,2,2,2); rect(car.x+20,car.y,10,10,2,2,2,2); rect(car.x+34,car.y,10,10,2,5,2,2); fill(255,255,0); rect(car.x-20,car.y+13,5,7,5,1,1,5); fill(255,255,0,75); triangle(car.x-40,car.y+10, car.x-20,car.y+17, car.x-40,car.y+26);
car.x -=3; if (car.x <= -200) { car.x = 800;
carR = random(200);
carG = random(200);
carB = random(200);
}
}
function drawCar2() {
var wheelSize = 15;
fill(0);
ellipse(car2.x+2,car2.y+25,wheelSize,wheelSize); ellipse(car2.x+45,car2.y+25,wheelSize,wheelSize); fill(car2R, car2G, car2B);
rect(car2.x,car2.y-5, 50,30,15,15,10,10); rect(car2.x-18,car2.y+10, 80,15,10); fill("lightBlue");
rect(car2.x+6,car2.y,10,10,5,2,2,2); rect(car2.x+20,car2.y,10,10,2,2,2,2); rect(car2.x+34,car2.y,10,10,2,5,2,2); fill(255,255,0); rect(car2.x-20,car2.y+13,5,7,5,1,1,5); fill(255,255,0,75); triangle(car2.x-40,car2.y+10, car2.x-20,car2.y+17, car2.x-40,car2.y+26);
car2.x -=3.8; if (car2.x <= -200) { car2.x = 800;
car2R = random(150);
car2G = random(150);
car2B = random(150);
}
}
function drawCar3() {
var wheelSize = 17;
fill(0);
ellipse(car3.x,car3.y, wheelSize, wheelSize); ellipse(car3.x+50,car3.y, wheelSize, wheelSize); fill(car3R, car3G, car3B);
rect(car3.x-7,car3.y-34, 57,30,15,15,10,10); rect(car3.x-15,car3.y-17, 85,17,10); fill("lightBlue");
rect(car3.x,car3.y-30,11,12,5,2,2,2); rect(car3.x+16,car3.y-30,11,12,2,2,2,2); rect(car3.x+32,car3.y-30,11,12,2,5,2,2); fill(255,255,0);
rect(car3.x+65,car3.y-13,6,8,1,5,5,1); fill(255,255,0,75);
triangle(car3.x+95,car3.y-20, car3.x+65,car3.y-10, car3.x+95,car3.y); car3.x +=3;
if (car3.x >= width + 100) { car3.x = -150;
car3R = random(100);
car3G = random(100);
car3B = random(100);
}
}
For my project this week, I knew that I wanted to have a dynamic city landscape. I love the look of city skylines, and so I decided to use that as my main focus. First, I made a background image in Photoshop and Illustrator to make a flat background that incorporated a gradient sunset, and the buildings. For my randomized, dynamic objects, I incorporated in cars, clouds, and planes. Each of these dynamic objects moves across the screen, and has some property about itself be randomized each time it goes off of the screen. For example, the clouds randomize their color, transparency, and size every time they have made it off of the screen. Below is my initial sketch for what I wanted the final project to look like:
