![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
This is the concept sketch of my generative landscape. I wanted to create a road with hills in the background and cars driving across the road. If I had more time with the project, I would’ve added more randomized details to the hills like stripes or grass texture patterns.
My process was pretty simple. I created objects for the different elements that I would be randomizing. For example, I made an array of objects for the hills, the roads, and the cars. I would repeat the process of creating the different functions for the various elements—with minor adjustments to the movement and randomness of each element.
sketch
//Anthony Pan
//Section C
//objects to create:
//hills
//cars
//road
//hold hills
var hillshowing = [];
//object for hills
var hills;
//hold road1
var road1showing = [];
//object for road1
var road1;
var road2;
var road2showing = [];
//car object
var car;
//array holding car object
var carShowing = [];
//car2 object
var car2;
//array holding car2 objects
var car2Showing = [];
//frame counter
var counter = 0;
function setup() {
createCanvas(480, 300);
//create hills
for(var i = 0; i < 20; i++) {
hills = makeHills(i*30, 245);
hillshowing.push(hills);
}
//create road1
for(var j = 0; j<10; j++) {
road1 = makeRoad1(j*10, 280);
road1showing.push(road1);
}
//create road2
for(var k = 0; k<10; k++) {
road2 = makeRoad2(k*10, 250);
road2showing.push(road2);
}
//create cars on road1
for(var h = 0; h < 5; h++) {
car = makeCar(0, round(random(270, 290)), random(2,4));
carShowing.push(car);
}
//create cars on road2
for(var c = 0; c < 5; c++) {
car2 = makeCar2(width, round(random(240, 255)), random(-4,-2));
car2Showing.push(car2);
}
}
function draw() {
//sky
background(135, 221, 255);
//sun
drawSun();
//hills
updateandDrawhills();
removeHillsOffScreen();
addNewHill();
//roads2 / upper roads
fill(156, 117, 95);
rect(0, 245, width, 40);
updateandDrawRoad2();
removeRoad2offScreen();
addNewRoad2();
//roads lower/ road1
fill(0);
rect(0, 270, width, 40);
updateandDrawRoad1();
removeRoad1offScreen();
addNewRoad1();
//draw cars on road2
updateandDrawCar2();
removeCars2OffScreen();
addCar2();
//draw cars
updateandDrawCar();
removeCarsOffScreen();
addNewCar();
}
//draw sun
function drawSun() {
fill("lightyellow");
noStroke();
circle(90,80, 40);
}
////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE Car2 Functions
//car 2 constructor
function makeCar2(cx, cy, zoom) {
var car2 = {x: cx, y:cy,
speed:zoom,
r: random(255),
g: random(255),
b: random(255),
move: car2Move,
draw: drawCar2 }
return car2;
}
//draw car2 object
function drawCar2() {
fill(this.r, this.g, this.b);
rect(this.x, this.y, 20, 10);
fill(0);
ellipse(3+this.x, 10+this.y, 4, 4);
ellipse(this.x + 17, this.y +10, 4, 4);
}
//update and draw car2
function updateandDrawCar2() {
for(var i = 0; i < car2Showing.length; i++) {
car2Showing[i].move();
car2Showing[i].draw();
}
}
//move car2
function car2Move() {
this.x += this.speed;
}
//remove car2s that are off screen
function removeCars2OffScreen() {
var cars2ToKeep = [];
for (var i = 0; i < car2Showing.length; i++){
if (car2Showing[i].x > 0) {
cars2ToKeep.push(car2Showing[i]);
}
}
car2Showing = cars2ToKeep; // remember the showing cars
}
//make new car2 based on probability
function addCar2() {
var newcarlikelihood = 0.03;
if(random(0,1) < newcarlikelihood) {
car2Showing.push(makeCar2(width, round(random(240, 255)), random(-4,-2)));
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE Car Functions
//car constructor
function makeCar(cx, cy, zoom) {
var car = {x: cx, y:cy,
speed:zoom,
r: random(255),
g: random(255),
b: random(255),
move: carMove,
draw: drawCar }
return car;
}
//draw car object
function drawCar() {
fill(this.r, this.g, this.b);
rect(this.x, this.y, 20, 10);
fill(0);
ellipse(3+this.x, 10+this.y, 4, 4);
ellipse(this.x + 17, this.y +10, 4, 4);
}
//update car position and draw car
function updateandDrawCar() {
for(var i = 0; i < carShowing.length; i++) {
carShowing[i].move();
carShowing[i].draw();
}
}
//move car
function carMove() {
this.x += this.speed;
}
//remove cars that are off screen
function removeCarsOffScreen() {
var carsToKeep = [];
for (var i = 0; i < carShowing.length; i++){
if (carShowing[i].x < width) {
carsToKeep.push(carShowing[i]);
}
}
carShowing = carsToKeep; // remember the showing cars
}
//make new car every 100 frames
function addNewCar() {
counter +=1;
if (counter % 100== 0){
carShowing.push(makeCar(0, round(random(270, 290)), random(2,4)));
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE ROAD2 Functions
//constructor for road2
function makeRoad2(rx, ry) {
var road2 = {x:rx, y:ry,
speed: -0.7,
move: road2Move,
draw: drawRoad2 }
return road2;
}
//draw road2
function drawRoad2() {
fill(120);
rect(this.x, this.y, width, 40);
for(var i = 0; i < 50; i++) {
var dx = i * 10;
fill("yellow");
rect(this.x + dx, this.y + 10, 6, 2);
}
}
//update road2 position and draw
function updateandDrawRoad2() {
for(var i = 0; i < road2showing.length; i++) {
road2showing[i].move();
road2showing[i].draw();
}
}
function road2Move() {
this.x += this.speed;
}
//remove roads off the screen
function removeRoad2offScreen() {
var road2ToKeep = [];
for (var i = 0; i < road2showing.length; i++){
if (road2showing[i].x + width > 0) {
road2ToKeep.push(road2showing[i]);
}
}
road2showing = road2ToKeep; // remember the showing roads
}
function addNewRoad2() {
counter +=1;
if (counter % 17 == 0){
road2showing.push(makeRoad2(width,250));
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE ROAD1 FUNCTIONS
//constructor for road1
function makeRoad1(rx, ry) {
var road1 = {x:rx, y:ry,
speed: -0.5,
move: road1Move,
draw: drawRoad1 }
return road1;
}
//draw road
function drawRoad1() {
fill(120);
rect(this.x, this.y, width, 40);
for(var i = 0; i < 50; i++) {
var dx = i * 10;
fill("yellow");
rect(this.x + dx, this.y + 10, 6, 2);
}
}
//update road1 position and draw
function updateandDrawRoad1() {
for(var i = 0; i < road1showing.length; i++) {
road1showing[i].move();
road1showing[i].draw();
}
}
function road1Move() {
this.x += this.speed;
}
//remove roads off the screen
function removeRoad1offScreen() {
var road1ToKeep = [];
for (var i = 0; i < road1showing.length; i++){
if (road1showing[i].x + width > 0) {
road1ToKeep.push(road1showing[i]);
}
}
road1showing = road1ToKeep; // remember the showing roads
}
function addNewRoad1() {
counter +=1;
if (counter % 25 == 0){
road1showing.push(makeRoad1(width,280));
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE HILLS FUNCTIONS
//update hill position and draw hill
function updateandDrawhills() {
for(var i =0; i < hillshowing.length; i++){
hillshowing[i].move();
hillshowing[i].draw();
}
}
//remove hills that have left the screen
function removeHillsOffScreen(){
var hillsToKeep = [];
for (var i = 0; i < hillshowing.length; i++){
if (hillshowing[i].x +20 > 0) {
hillsToKeep.push(hillshowing[i]);
}
}
hillshowing = hillsToKeep; // remember the showing hills
}
//make new hill from right side of canvas
function addNewHill() {
counter +=1;
if (counter % 25 == 0){
hillshowing.push(makeHills(width+20,245));
}
}
//hill constructor
function makeHills(hx, hy) {
var hills = {x:hx, y:hy,
width:random(40, 70),
height:random(100, 300),
r:0, g:random(115,200), b: random(15, 35),
speed: -1.0,
move: hillsMove,
draw: drawHills }
return hills;
}
//draw hills
function drawHills() {
fill(this.r, this.g, this.b);
ellipse(this.x, this.y, this.width, this.height);
}
//move hill to left
function hillsMove() {
this.x += this.speed;
}
