Category: Section E

sketch

//Yoon Young Kim
//Section E
//yoonyouk@andrew.cmu.edu
//Project10


// Simple demonstration of the noise() function. 
// Change these for different effects:
var terrainSpeed = 0.0005;
var terrainDetail = 0.003;

var cacti = [];


function setup() {
    createCanvas(480, 300);
    background(255);

    for(var i = 0; i <5; i++){
        var rx = random(width);
        cacti[i] = makeCacti(rx);
    }
    frameRate(10);

}
 


function draw() {
    background(255, 192, 141);
    
    stroke(255, 231, 101, 80);
    strokeWeight(20);
    fill(250, 212, 87);
    ellipse(width/2, height/2 - 30, 200, 200);




    fill(196, 100, 76);
    noStroke();
    beginShape(); 
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainDetail/2) + (millis() * terrainSpeed/3);
        var y1 = map(noise(t1), 0,1, 75, height/2+100);
        vertex(x1, y1); 
    }

    vertex(x1, height);
    vertex(0, height);
    vertex(0, y1);
    endShape();



    fill(102, 36, 39);
    noStroke();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail*1.5) + (millis() * terrainSpeed*1.5);
        var y = map(noise(t), 0,1, 170, 3*height/4);
        vertex(x, y); 


    }
        vertex(x, height);
        vertex(0, height);
        vertex(0, y);
        endShape();



    fill(25, 7, 5);
    noStroke();
    beginShape(); 
    for (var x2 = 0; x2 < width; x2++) {
        var t2 = (x2 * terrainDetail*2) + (millis() * terrainSpeed*3);
        var y2 = map(noise(t2), 0,1, height/2 + 50, height);
        vertex(x2, y2); 

    }
    vertex(x2, height);
    vertex(0, height);
    vertex(0, y2);


    endShape();


    updateAndDisplayCacti();
    addCacti();

}




function updateAndDisplayCacti(){
    // Update the building's positions, and display them.
    for (var i = 0; i < cacti.length; i++){
        cacti[i].move();
        cacti[i].display();
    }
}




function addCacti() {
    // With a very tiny probability, add a new building to the end.
    var newCactiLikelihood = 0.007; 
    if (random(0,1) < newCactiLikelihood) {
        cacti.push(makeCacti(width));
    }
}


// method to update position of building every frame
function cactiMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function cactiDisplay() {
    fill(25, 7, 5);
    push();
    translate(0, 120);
    rect(width/2+this.x, height/2 -60, 20, 70, 200, 200, 0 ,0);
    rect(width/2+15+ this.x, height/2 - 20, 20, 10);
    rect(width/2+25+ this.x, height/2-30, 10, 20, 200, 200, 0, 0);
    rect(width/2 - 15+ this.x, height/2 - 35, 15, 10);
    rect(width/2-15+ this.x, height/2-50, 10, 20, 200, 200, 0, 0);
    pop();
}


function makeCacti(birthLocationX, birthLocationY) {
    var plant = {x: birthLocationX,
                speed: -1.0,
                r: random(0, 50),
                move: cactiMove,
                display: cactiDisplay,
                }
    return plant;
}

For this week’s landscape project, I decided to do a desert scene. I used the noise part in order to create different layers of the landscape essentially creating a foreground, midground, and a background. The front most layer, or the foreground, displays the most detailed landscape and with cacti silhouettes. I found it a bit challenging to create the randomly generated cacti that would move across the screen. I have yet to figure out how to actually place the cacti on top of the terrain.

katieche-10

/*
katie chen
katieche@andrew.cmu.edu
project 10
section e
*/

var terrainSpeed = 0.0002;
var terrainDetail = 0.002;
var backdetail = 0.003;
var clouds = [];
var cacti = [];
var camelfr = [];
var cam = [];

function preload() {
	var camelfile = [];
		camelfile[0] = "https://i.imgur.com/bDUcYTm.png";
		camelfile[1] = "https://i.imgur.com/6dVVrob.png";
		camelfile[2] = "https://i.imgur.com/hbSKaEk.png";
		camelfile[3] = "https://i.imgur.com/7mLCzwN.png";
		camelfile[4] = "https://i.imgur.com/ajswkv9.png";
		camelfile[5] = "https://i.imgur.com/5PYiIL8.png";
		camelfile[6] = "https://i.imgur.com/izwJZyn.png";
		camelfile[7] = "https://i.imgur.com/bHlNbyH.png";

		for(var i =0; i < 8; i++){
			camelfr[i] = loadImage(camelfile[i]);
		}
}


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

    // making initial collection of objects
    for (var i = 0; i < 10; i++){
    	var rx = random(width);
        clouds[i] = makeCloud(rx);
        cacti[i] = makeCactus(rx);
        cam[i] = makeCam(rx);
    }

  	frameRate(10);
}
 
function draw() {
    background(185, 174, 176);
    push();
    noStroke();
    fill(188, 177, 178);
	rect (0, 140, width, height-140);
	fill(195, 180, 176);
    rect (0, 170, width, height-170);
   	fill(200, 185, 176);
    rect (0, 230, width, height-230);
    fill(207, 187, 172);
    rect (0, 260, width, height-260);
    pop();
    
    ground();

	updateAndDisplayCacti();
	cactusAdd();

	updateAndDisplayCam();
    camAdd();
    camDisplay();

    updateAndDisplayClouds();
	cloudAdd();
    
}

function ground() {
	// background
    push();
    beginShape(); 
    noStroke();
	fill(200, 164, 140); 
    for (var x = 0; x < width; x++) {
        var t = (x * backdetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 200, height-50);
        vertex(0,480);
        vertex(480,480);
        vertex(x, y); 
    }
    endShape();
    pop();

    // foreground
	push();
    beginShape(); 
    noStroke();
	fill(181, 121, 78); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 270, height);
        vertex(0,480);
        vertex(480,480);
        vertex(x, y); 
    }
    endShape();
    pop();
}

function updateAndDisplayClouds(){
    // Update the clouds' positions, and display them.
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


function cloudAdd() {
    // With a very tiny probability, add a new cloud to the end.
    var newcloudLikelihood = 0.02; 
    if (random(0,1) < newcloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}

// moving the clouds
function cloudMove() {
    this.x += this.speed;

}
    
// drawing the clouds
function cloudDisplay() {
	push();
	translate(this.x, 50);
	noStroke();
	if (this.z < 30) {
		fill(225, 210, 192);
	}

	if (this.z > 30 & this.z < 50) {
		fill(222, 202, 182);
	}
	if (this.z > 50) {
		fill(218, 194, 174);
	}
	
	rect(23+this.x, 50+this.z, 100+this.l, 25+this.h, 200, 200, 200, 200);
	rect(60+this.x, 25+this.z, 50, 50, 200, 200, 200, 200);
	rect(50+this.x, 35+this.z, 30, 30, 200, 200, 200, 200);
	pop();

}

// making the clouds
function makeCloud(cx) {
    var cloud = {x: cx,
    			z: random(0, 150),
    			l: random(0,20),
    			h: random(0,20),
 				speed: -1.0,
                move: cloudMove,
                display: cloudDisplay
            }
    return cloud;
}

// CACTUS
function updateAndDisplayCacti(){
    // Update the cacti positions, and display them.
    for (var i = 0; i < cacti.length; i++){
        cacti[i].tmove();
        cacti[i].tdisplay();
    }
}

function cactusAdd() {
    // With a very tiny probability, add a new cactus to the end.
    var newcactusLikelihood = 0.02; 
    if (random(0,0.5) < newcactusLikelihood) {
        cacti.push(makeCactus(width));
    }
}

// moving the cactus
function cactusMove() {
    this.mx += this.mspeed;

}

// draw the cactus
function cactusDisplay() {
    push();
    noStroke();
    translate(this.mx, 200);
    fill(131-this.cr, 170, 124-this.cr);
    rect(50+this.mx,50+this.cacter,25+this.wid, 90+this.hei, 200, 200, 0,0);
    rect(50+this.mx+this.wid,80+this.cacter,40,10,200,200,200,200);
    rect(80+this.mx+this.wid,60+this.cacter,10,30,200,200,200,200);
    rect(30+this.mx,90+this.cacter,40,10,200,200,200,200);
    rect(30+this.mx,70+this.cacter,10,30,200,200,200,200);
    pop();
}

// making the cacti
function makeCactus(tx) {
    var cactus = {mx: tx,
 				mspeed: -2.5,
 				hei: random(-10,20), // tallness of main cactus body
 				wid: random(0,5), // fatness of main cactus body
 				cr: random(0,50), // color 
 				cacter: random(70, 180), // y value
                tmove: cactusMove,
                tdisplay: cactusDisplay
            }
    return cactus;
}

// CAMEL
function updateAndDisplayCam(){
    // Update the camel positions, and display them.
    for (var i = 0; i < cam.length; i++){
        cam[i].cmove();
        cam[i].cdisplay();
    }
}

function camAdd() {
    // With a very tiny probability, add a new camel to the end.
    var newcamLikelihood = 0.02; 
    if (random(0,1) < newcamLikelihood) {
        cam.push(makeCam(width));
    }
}

// moving the camel
function camMove() {
    this.camx += this.cspeed;

}

function camDisplay() {
    push();
    noStroke();
    scale(0.3);
    for (var i = 0; i < 10; i++) {
    var num = frameCount % 8;
        image(camelfr[num],600, 900);
    }
    pop();
}

// making the camel
function makeCam(ax) {
    var camel = {camx: ax,
 				cspeed: -1.0,
                cmove: cactusMove,
                cdisplay: cactusDisplay
            }
    return camel;
}

I had a lot of fun working on this project. I wanted to create a desert landscape, so I selected colors from an image of the grand canyon. I made the background sort of have a gradient to give more of a “never ending stretch of land” horizon line feeling. The cactuses were a fun addition that I created in p5.js before realizing that I could’ve made them in illustrator and uploaded them as image files. Upon realization, I decided to add the moving camel. The original gif is from here, but I took each frame and edited it in illustrator to make it look more uniform in my code.