![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 10
var trees = []; //tree array
var houset = []; //house array
function setup() {
createCanvas(480, 480); //canvas size
strokeJoin(MITER); //set lines to be rectangular
strokeCap(PROJECT) //set lines to be rectangular
angleMode(DEGREES); //set angle to degrees
// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width); // random value of rx
trees[i] = makeTree(rx); //create tree at random rx
houset[i] = makeHouse(rx); //create house at random rx
}
}
function draw() {
var run = map(mouseX,0,width,20,60); //remap the x value to 20- 60
frameRate(run);//set frame rate based on mouse position
noStroke(); //no stroke
background(30); //background to 30
fill(299,149,41,30) //create brown ground plance
rect(0,280,width,height,80); //ground plane
noFill(); //remove fill
fill(0) //black fill
rect(0,0,width,300); //black sky background
noFill();
displaybackground(); //display background elements
updateAndDisplayobjects(); //display objects
removeobjects(); //remove when at end
addNewobjects(); //add new based on probaility
}
function updateAndDisplayobjects(){
// Update the building's positions, and display them.
for (var h = 0; h < houset.length; h ++){ // for length of the array, update house move value and display it
houset[h].hmove();
houset[h].hdisplay();
}
for (var i = 0; i < trees.length; i++){//for length of the array, update htree move value and display it
trees[i].tmove();
trees[i].tdisplay();
}
}
function removeobjects(){
var treesKeep = []; // tree keeping array
var housekeep = []; //house keeping array
for (var h =0; h < houset.length; h++){
if(houset[h].hx + 50 >0){ //if the x value of the house +50 is larger than 0 then keep
housekeep.push(houset[h]);
}
}
houset = housekeep;
for (var i = 0; i < trees.length; i++){ //if the x value of the tree is larger than 0, keep
if (trees[i].x>0){
treesKeep.push(trees[i]);
}
}
trees = treesKeep;
// remember the surviving buildings
}
function addNewobjects() {
var newobjprob = 0.4; //probability of 40 % for tree
var houseprob =0.02; //probability of 2% for witch housing
if (random(0,1) < houseprob){ //when number is within probability create
houset.push(makeHouse(width))
}
if (random(0,1) < newobjprob) { //when number is within probability create
trees.push(makeTree(width))
}
}
function treeDisplay(){ //tree display method
var treeheight = 20;
var tHeight = this.nHeight*treeheight;
var bcount = 0;
var branchlen = 60;
fill(10);
stroke(50,19,41);
push();
strokeWeight(1.5);
translate(this.x, height-60);
line(0,0,0,-tHeight);
translate(0,-tHeight);
stroke(120,59,41);
while(bcount < this.branch){
push();
translate(0,branchlen)
bcount+=1;
branchlen *= 0.67
if (branchlen > 4){
push();
rotate(45);
line(0,0,0,-branchlen);
pop();
push();
rotate(-70)
line(0,0,0,-branchlen)
pop();
}
pop();
}
pop();
}
function houseDisplay(){ //house display method
var houseHeight = 40;
var hwid = this.hwidth;
var hHeight = this.hfloor*houseHeight;
push();
translate(this.hx,height-60);
stroke(127,152,182,180);
strokeWeight(3);
line(0,0,-10*this.flip,-hHeight/2);
line(0,0,30*this.flip,-hHeight/2);
push();
translate(-10*this.flip,-hHeight/3);
line(0,0,15,-height/5)
line(0,0,35,-height/5)
pop();
push();
noStroke();
fill(37,23,3);
translate(-10,-height/5);
beginShape();
vertex(0,0);
vertex(hwid*4,0);
vertex(hwid*3,-hHeight);
vertex(-hwid,-height/6)
endShape();
for( var i =0; i <this.hfloor; i += this.hdiv){
fill(187,121,18,200);
ellipse(20,-20 - (i*houseHeight/2),this.hwidth*2,this.hwinh);
}
pop();
pop();
}
function treeMove(){
this.x += this.speed;
}
function houseMove(){
this.hx += this.hspeed;
}
function makeTree(tx){ //tree object
var tree = {x: tx,
speed: random(-7.0,-20),
nHeight: floor(random(4,8)),
branch: random(20,30),
tmove: treeMove,
tdisplay: treeDisplay
}
return tree;
}
function makeHouse(hhx){ //house object
var house = {hx: hhx,
hspeed: -2.0,
flip: random(-1,1),
hdiv: random(1,3),
hwinh: random(10,20),
hfloor: round(random(2,5)),
hwidth: random(10,20),
hmove: houseMove,
hdisplay: houseDisplay
}
return house;
}
function displaybackground(){ //background element
noStroke();
fill(color(255,235,5,190));
ellipse(width-80,110,180,180);
noFill();
noStroke();
fill(255,255,255,20);
ellipse(width-30,70,30,30);
fill(0,0,0,30);
ellipse(width-160,130,10,30);
fill(0,0,0,20);
ellipse(width-20,160,35,25);
noStroke();
stroke(70,130,170,150);
beginShape();
for( var x = 0; x < width; x++){ //using noise in p5.js to create river edge
var t = (x * 0.005)+(millis()*0.0005);
var y = map(noise(t),0,1,20,75);
vertex(x,height-y);
vertex(0,height+70);
vertex(width,height+70) ;
}endShape();
noStroke();
fill(239,234,188) //moon reflection
ellipse(100,height-20,130+random(-1,1),5+random(-1,1));
noFill();
fill(239,239,188);//secondary reflection
ellipse(80,height-15,80+random(-1,1),4+random(-1,1));
noFill();
}Since it was Halloween, I wanted to create a landscape that is staged at night with tree landscapes and witch houses on river’s edge. I wanted to give depth to the landscape formation. I have decided to create the river’s edge using the noise function in the p5js. When I tried to convey the sense of the 3D, I realized that giving a different in speed of object passage is very effective. I generated trees that differ in speed and height to convey the depth. Almost giving the sense of when someone walks in forest, they pass in different relative speed. I have created abstracted witch houses behind the trees. I created large moon and its reflection on the river to convey another layer of depth. Frame rate interact with the mouse X position giving a feel of running through the landscape vs. walking