Category: Section B

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project 10

var terrainspeed = 0.0005;
var terraincurve = 0.025;
var binocular;
var cactus = [];

//loads the images from imgur (binoculars and cactus)
function preload() {
    binocular = loadImage("https://i.imgur.com/bVzNOic.png");
    cactus1 = loadImage("https://i.imgur.com/E2dHw8Y.png")
}

function setup() {
    createCanvas(480, 480);

    //initially iterates cactus
    for (var i = 0; i < 5; i++){
        var location = random(width);
        cactus[i] = makeCactus(location);
    }

    frameRate(10);
}
 
function draw() {
    background(214,196,211,200);

    backgroundmountain();
    bottomsand();

    updateCactus();
    displayCactus();
    addCactus();
    makeCactus(); 
    moveCactus();

    // structure of sun
    fill(255,0,0,150);
    noStroke();
    ellipse(70,70,50,50);
    stroke(255,0,0,150);
    strokeWeight(3);
    line(70,30,70,45);
    line(70,95,70,110);
    line(30,70,45,70);
    line(95,70,110,70);

    //Binoculars
    image(binocular,mouseX-500,mouseY-500); 
}

//updating cactus location and movement
function updateCactus(){
    for (var i = 0; i < cactus.length; i++){
        cactus[i].move();
        cactus[i].display();
    }
}

// adding new cactus from the left side of the canvas
function addCactus() {
    var a = random(1);
    if (a < 0.03) {
        cactus.push(makeCactus(width));
    }
}

//moving the position of cactus 
function moveCactus() {
    this.x += this.speed;
}
    

//drawing and displaying cactus
function displayCactus() {
    push();
    translate(this.x, this.height);
    for(var i=0; i<this.number; i++) {
        image(cactus1,this.x*i, 100);
    }
    pop();
}

//making cactus + variables needed to make cactus
function makeCactus(birthx) {
    var cactus2 = {x: birthx,
                number: floor(random(1,2)),
                speed: -3,
                height: random(90,100),
                move: moveCactus,
                display: displayCactus}
    return cactus2;
}

//function that draws the mountains
function backgroundmountain() {  

    //back mountain
    noStroke();
    fill(9, 69, 32); 
    beginShape(); 
    //for loop makes back layer of mountain
    for (var x = 0; x < width; x++) {
        var t = (terraincurve * 2 * x) + (millis() * terrainspeed);
        var y = map(noise(t/2), 0, 1, 70, height);
        curveVertex(x, y); 
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE);  

    //front mountain
    noStroke();
    fill(89, 107, 89,200); 
    beginShape(); 
    //for loop makes front layer of mountain
    for (var x = 0; x < width; x++) {
        var t = (terraincurve * x) + (millis() * terrainspeed);
        var y = map(noise(t/2), 0, 1, 0, height);
        curveVertex(x, y); 
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE);

}

//function that draws the sand layer on the bottom
function bottomsand() { 

    //front mountain
    noStroke();
    fill(179,145,86); 
    beginShape(); 
    //for loop makes the sand layers on the bottom
    for (var x = 0; x < width; x++) {
        var t = (terraincurve * x) + (millis() * terrainspeed);
        var y = map(noise(t/2), 0, 1, 370, height);
        curveVertex(x, y); 
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE); 

}

For this project, I wanted to make a landscape that contained both a desert and a forest. On the bottom desert layer, I altered the original terrain function by reducing the amount of noise. This allowed me to make a smoother surface of sand. For the random cactuses, I made them into javascript objects and coded accordingly. The cactus image was photoshopped by me and embedded through imgur. I then utilized the provided terrain code to slightly alter and make the forest layers. I then gave a little twist by photoshopping a binocular image and putting it on top of the landscape function. It made it as if you are looking through the binoculars from a distance. Although the process was a bit rocky, I managed to understand and use the javascript object function. I was able to learn a lot through this project.

Halloween

//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