Project-11-Landscape – Page 6 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Jai Sawkar – Project 11: Generative Landscape

//Jai Sawkar
//jsawkar@andrew.cmu.edu
//Section C
//Project 11: Generative Landscape

var objectSpeed = 0.00005; //speed of objects
var mountainDetail = 0.007; //threshold of variance in mountains

var waterDetail = 0.002 //threshold of variance in water

var xMove = 520 //initial point

var spec = []; //snow 


function setup() {
    createCanvas(480, 480); 
    for (var i = 0; i < 100; i++){ //setting up for loop that determines bounds of snow
    	var specX = random(0, width); //determines x 
        var specY = random(0, height/2); //determines y
        spec[i] = makeSpec(specX, specY); //uses i from for loop
    }
    print(spec);
}


function draw() {
    background(249, 233, 161); 

    drawMountains(); //calls mountain object
 
	displaySpec(); //calls the snow

    fill(228, 118, 47);
    noStroke();
	ellipse(width/2, height/2, 95);

	// calls water object
	drawWater();

	


	//calls text
	drawText();
	xMove -= .1 //moves text

	if (xMove < -90) { //makes it so that when text goes off screen, it reappears
		xMove = 480
	}
}

function drawText() {
	//makes text of album
	fill(0)
	textFont('Courier');
	textSize(24);
	textAlign(CENTER); 
	text('K A U A I', xMove, 30)
	textSize(8);
	text('WITH JADEN SMITH AS', xMove, 40)
	text('"THE BOY"', xMove, 50)
	textSize(24);
	text('G A M B I N O', xMove, 70)
}

function drawMountains() { //makes generative mountain
	push();
    beginShape(); 
    fill(90, 57, 27);
    vertex(0,height/2 + 50); //makes height of vertex of mountain
    for (var x = 0; x < width; x++) {
        var t = (x * mountainDetail) + (millis() * objectSpeed); //allows object to be generative based on time
        var y = map(noise(t), 0, 1, 0, height); //remaps values to fit in desired area
        vertex(x, y-15); //final vertex
    }

    vertex(width, height/2 + 50); //final vertex out of for loop
    endShape();
    pop();
}

function makeSpec(specX, specY){ //makes object for snow
    var makeSpec = {x: specX,
                y: specY, //calls y coordinate
                draw: drawSpec} //allows it to be called to draw
    return makeSpec;
}

function drawSpec(){
	fill('WHITE')
	ellipse(this.x, this.y, 3) //makes circles
}

function displaySpec(){
    for(i = 0; i < spec.length; i++){ 
        spec[i].draw(); //allows spec to be displayed
    }
}


function drawWater(){  //makes water
fill(51,107,135,255);
	
push()

  beginShape();
  noStroke();
  fill(170, 210, 241);
  for (var x = 0; x < width; x++) { //makes height of vertex of mountain
      var t = (x * waterDetail) + (millis() * objectSpeed); //allows object to be generative based on time
      var y = map(noise(t), 0,1, height/2 - 20, height/2 + 50); //remaps values to fit in desired area
      vertex(0, 900); //inital vertex
      vertex(1000,900); //final vertex
      vertex(x, y);
  }
  endShape();

pop()

}

This week, I used the Generative Landscape project to create an album cover of one of my favorite artists, Childish Gambino. I began with the initial cover, which is a Hawaiian sunset abstracted into three objects, the sky, the water, and a semi-circle. I first created the water to be generated randomly, followed by adding mountains in the back to create depth. Moreover, I used a javaScript Object to create snow! It was used to juxtapose the calm nature of Kauai with Gambino’s other, more rowdy album, Because the Internet. Lastly, I made the title for the album slide in & out of the landscape.

Cover of Album, Kauai, by Childish Gambino

Xiaoyu Kang – Project 11 – Generative Landscape

sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-11

var star = [];
var tree = [];
var terrainSpeed = 0.0008;
var terrainDetail1 = 0.014;
var terrainDetail2 = 0.01;

function setup() {
    createCanvas(480, 400);
    frameRate(10);
    for (var i = 0; i < 15; i++){
        var starX = random(width);
        var starY = random(0, height/2);
        star[i] = makeStar(starX, starY);
    }

    for (var i = 0; i < 7; i++){
        var treeX = random(width);
        var treeY = 330;
        tree[i] = makeTree(treeX, treeY);
    }
}

function draw() {
    background(0);
    displayStars();
    drawMountain1();
    drawMountain2();
    drawGround();
    drawMoon();
    displayTree();
}

function drawMountain1(){
	//draw background mountain
    noStroke();
    fill(21, 53, 82); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail1) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 1.8, 60, 350);
      vertex(x, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawMountain2(){
	//draw background mountain 2
    noStroke();
    fill(63, 94, 116); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail2) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 1, 120, 250);
      vertex(x, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawGround(){
	//draw the ground plane
    noStroke();
    fill(200); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail2) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 2, 350, 300);
      vertex(x, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawStar(){
	//draw the shape of the star
    noStroke();
    fill(210, 193, 120);
    push();
    translate(this.x, this.y);
    ellipse(20, 20, 3, 3);
    pop();
}

function makeStar(starX, starY){
    var makeStar = {x: starX,
                y: starY,
                speed: -2,
                move: moveStar,
                draw: drawStar}
    return makeStar;
}

function moveStar(){
	//give the star speed
    this.x += this.speed;
    if(this.x <= -10){
        this.x += width;
    }
}

function displayStars(){
    for(i = 0; i < star.length; i++){
        star[i].move();
        star[i].draw();
    }
}

function drawTree(){
	//draw the tree
    noStroke();
    fill(50);
    push();
    translate(this.x2, this.y2);
    rect(-10, -20, this.treeWidth, this.treeHeight);
    rect(0, 0, 5, 25);
    pop();

}

function moveTree(){
	//give the tree speed
    this.x2 += this.speed2;
    if(this.x2 <= -10) {
        this.x2 += width
    }
}

function makeTree(locationX, locationY){
    var makeT = {x2: locationX,
                y2: locationY,
                treeWidth: 25,
                treeHeight: random(20, 40),
                speed2: -6,
                move: moveTree,
                draw: drawTree}
    return makeT;
} 

function displayTree(){
    for (var l = 0; l < tree.length; l++){
        tree[l].move();
        tree[l].draw();
    }
}
function drawMoon() {
    fill(210, 193, 120);
    ellipse(370, 50, 60, 60);
    fill(230, 213, 140);
    ellipse(370, 50, 55, 55);
    fill(240, 223, 150);
    ellipse(370, 50, 50, 50);
}

For this project, I planed to create a landscape of snowy mountains at night. So I created some stars and a moon in the background, and I created two mountains with different color darkness to show the depth. In the front, I create a white snow covered ground plane and some trees growing on top. The position of the stars and trees are randomly generated, and I made the speed of the stars slower than other elements since that is what naturally happens in real life.

Joseph Zhang – Project 11 – Generative Landscape

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmue.edu
// Project-11: Generative Wallpaper

var snowballs = [];
var moons = [];
function setup() {
    createCanvas(480,300);
    // display initial Snowballs
    for( i = 0; i < 3; i++){
        var snowBallsInitialX = random(width);
        snowballs[i] = drawSnowballs(snowBallsInitialX);
    }

    var moonInitialX = random(0, width / 3);
    moons[0] = drawMoon(moonInitialX);
}

function draw() {
    background(28,28,45);

    //moon
    updateAndDisplayMoon();
    addMoon();

    //makeTerrain
    makeTerrain();

    updateAndDisplaySnowballs();
    addSnowballs();
}

// all the details of the moon
function addMoon() {
    var prob = .07;
    if(moons[moons.length-1].xPosMoon < -30){
        moons.push(drawMoon(width));
    }
}

//render moon on screen
function updateAndDisplayMoon() {
    for( i = 0; i < moons.length; i++){
        moons[i].displayMoon();
        moons[i].moveMoon();
    }
}

function drawMoon(xPosM) {
    var moon = {
        xPosMoon: xPosM,
        yPosMoon: random(30, 60),
        moonSize: random(30, 50),
        moonSpeed: -.2,
        //color
        r: 255,
        g: random(180, 255),
        b: random(100, 255),
        //moveMoon
        moveMoon: function(){
            this.xPosMoon += this.moonSpeed;
        },
        //displayMoon
        displayMoon: function() {
            noStroke();
            fill(this.r, this.g, this.b);
            ellipse(this.xPosMoon, this.yPosMoon, this.moonSize, this.moonSize);
            fill(28,28,45);
            ellipse(this.xPosMoon - 20, this.yPosMoon, this.moonSize, this.moonSize);     
        },
    }
    return moon;
}

// draw terrain
var terrainSpeed = 0.00019;
var terrainDetail = 0.008;
function makeTerrain() {
    // noFill();
    fill(30, 40, 50);
    beginShape();
    for( x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0 , 1, 0, height);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

// add snowBalls
function addSnowballs() {
    var prob = .07;
    if( random(1) < prob) {
        snowballs.push(drawSnowballs(width));
    }
}

// RENDER onto canvas
function updateAndDisplaySnowballs() {
    for ( i = 0; i < snowballs.length; i++) {
        snowballs[i].displaySnowBalls(); //displayCircle();
        snowballs[i].moveSnowBalls(); //moveCircle();
    }
}

// create the actual Snowballs
function drawSnowballs(xPosB) {
    var sb = {
        xPosSnowBalls: xPosB,
        yPosSnowBalls: random(height), // randomize yPossnowBalls of snowBallss
        radius: random(5,15),
        snowBallsSpeed: random(.5,1),
        // move snowBalls
        moveSnowBalls: function() {
            this.xPosSnowBalls -= this.snowBallsSpeed;
            this.yPosSnowBalls += this.snowBallsSpeed * random(.2, .4);
            },
        // display SnowBalls
        displaySnowBalls: function() {
            fill('white');
            ellipse(this.xPosSnowBalls,this.yPosSnowBalls, this.radius, this.radius);
        },

    }
    return sb;
}

As winter approaches, I wanted to create a landscape that reflected the brisk temperature. In this code, there are two arrays, on that randomly generates snowballs and one that generates a new moon form every time it runs across the screen. Objects were created for both the moon and for the snowballs, where parameters such as color, size, and position were dynamically varied.

Below are sketches of my idea, I wanted to create a sense of time of day, sense of direction, and sense of environment. Much of this was done through the use of color which is made of entirely of cool tones and white.

Caroline Song – Project 11 – Landscape

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 11: Landscape

var tree = [];
var star = [];
var speedTerrain = 0.001;
var slopeTerrain = 0.008;
var yPoint = 380; //where mountains meet ground
//2, 19, 46

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of stars
    for (var i = 0; i < 25; i++){
        var starX = random(width);
        var starY = random(0, height/2);
        star[i] = makeStar(starX, starY);
    }

    //create an initial collection of trees
    for (var i = 0; i < 10; i++){
        var treeX = random(width);
        var treeY = random(360, 380);
        tree[i] = makeTree(treeX, treeY);
    }
    frameRate(10);
}


function draw() {
    background(0, 19, 48); 
    fill(43, 75, 128)
    //draw ground
    rect(0, yPoint, width, 150);

    displayStars();
    drawTallerMountains();
    drawMountains();
    displayTree();
}

function displayTree(){
    //call move and show trees
    for (var l = 0; l < tree.length; l++){
        tree[l].move();
        tree[l].draw();
    }
}

function moveTree(){
    //set speed of trees and repeat them as they leave the screen 
    this.x2 += this.speed2;
    if(this.x2 <= -10) {
        this.x2 += width
    }
}

function drawTree(){
    //draw trees
    noStroke();
    fill(54, 100, 156);
    push();
    translate(this.x2, this.y2);
    triangle(3, -this.treeHeight, -this.treeWidth/2, 3, this.treeWidth/2 + 5, 3)
    rect(0, 0, 7, 20);
    pop();

}

function makeTree(locationX, locationY){
    var makeT = {x2: locationX,
                y2: locationY,
                treeWidth: random(20, 30),
                treeHeight: random(15, 40),
                speed2: -5,
                move: moveTree,
                draw: drawTree}
    return makeT;
} 

function drawStar(){
    var starWidth = random(1, 3); //make stars sparkle!
    //draw stars
    noStroke();
    fill(252, 232, 3);
    push();
    translate(this.x, this.y);
    ellipse(20, 20, starWidth, starWidth);
    pop();
}

function makeStar(locationX, locationY){
    var makeS = {x: locationX,
                y: locationY,
                speed: -5,
                move: moveStar,
                draw: drawStar}
    return makeS;
}

function moveStar(){
    //speed of star and repeat on canvas
    this.x += this.speed;
    if(this.x <= -10){
        this.x += width;
    }
}

function displayStars(){
    //display stars
    for(i = 0; i < star.length; i++){
        star[i].move();
        star[i].draw();
    }
}

function drawMountains(){
    //draw front mountains
    stroke(5, 40, 97);
    beginShape();
    for (var i = 0; i < width; i++){
        var t = (i * slopeTerrain) + (millis() * speedTerrain);
        var y = map(noise(t), 0, 1, 100, 400);
        line(i, y, i, yPoint);
    }
    endShape();
}

function drawTallerMountains(){
    //draw back mountains
    stroke(1, 27, 66)
    beginShape();
    for(var i2 = 0; i2 < width; i2++){
        var t2 = (i2 * slopeTerrain * 2) + (millis() * speedTerrain);
        var y2 = map(noise(t2), 0, 1, 100, 200);
        line(i2, y2, i2, yPoint);
    }
    endShape();
}

I took my inspiration from the times when I was little and went camping with my family. Some of my favorite memories were in the car on our way there or back home and looking out the car window. I would see the mountain landscape/all the stars and my parents would be telling us stories about the different constellations in the sky. I wanted to create contrast between the foreground and the background with value contrast in the blue tones.

Ian Kaneko Project 11: Landscape

ikaneko Generative Landscape

var star = []; // stores the star objects
var ufo = []; // stores UFO's
var moonY = 400; // where the moon surface is


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

    // Pushes background stars on to array
    for(i = 0; i < 20; i ++) {
        star.push(makeStar());
    }

}

function draw() {
    
    noStroke();
    background(0);

    // Populates the background with stars of random location, size, and color
    for(i = 0; i < star.length; i ++) {
        var s = star[i];
        s.draw();
    }

    // Draws sun in the top right
    fill(255, 220, 70);
    circle(410, 50, 60);

    // Draws UFOs offscreen and has them travel left until they vanish
    for(u = 0; u < ufo.length; u ++) {
        var p = ufo[u];
        p.draw();
        p.move();
    }

    removeUFO(); // Removes UFOs when they get offscreen
    addUFO(); // Keeps the remaining UFOs


    // Draws the moon surface at the bottom of the canvas
    fill(220);
    rect(0, moonY, width, height - moonY);
    fill(180);
    ellipse(30, 460, 180, 40);
    ellipse(300, 420, 220, 25);
    

 }

// Returns the star object that gets pushed into the array
function makeStar() {
    return {x: random(0, 410), y: random(moonY) - 20, size: random(10),
        draw: drawStar, color: color(250, 200, random(255)) };
}

// Draws stars of random color, location, and size
function drawStar() {
    fill(this.color);
    circle(this.x, this.y, this.size);
}

// Returns the UFO object that gets pushed into the array
function makeUFO() {
    return {x: width + 100, y: random(moonY), width: random(60, 130),
        draw: drawUFO, color: color(random(255), random(255), random(255)),
        speed: random(-2, -0.5), move: moveUFO};
}

// Draws UFOs of random color, width, location, and speed
function drawUFO() {
    fill(this.color);
    ellipse(this.x, this.y - 10, this.width / 2, 30);
    fill(240);
    ellipse(this.x, this.y, this.width, 20);
}

// This makes sure that the screen isnt flooded with 60 UFOs a second
function addUFO() {
    // Small chance of adding a UFO
    var newUFOChance = 0.007;
    if (random(0, 1) < newUFOChance) {
        ufo.push(makeUFO());
    }
}

// Takes UFOs off the array when they go offscreen
function removeUFO() {
    var ufoToKeep = [];
    for(i = 0; i < ufo.length; i ++) {
        if (ufo[i].x > 0 - ufo[i].width) {
            ufoToKeep.push(ufo[i]);
        }
    }
    ufo = ufoToKeep;
}

// Moves each UFO from left to right
function moveUFO() {
    this.x = this.x + this.speed;
}

Initial sketch of my idea for a landscape

Although for this project I didn’t really create the illusion that the viewer is moving. I went by this project’s other name of “stuff passing by”. I wanted this project to feel like you were standing on the moon watching UFOs fly across space. UFOs of random color, size, and speed should fly across the screen from right to left. Also the stars in the background will be different each time you refresh the page. The hardest part about this project for me was keeping track of all the function that I had to make in order to fulfill the requirements of the project. Overall I’m pretty proud of how true to my original idea i was able to stay. While the sketch above is pretty simple, I think it translated very well to an animated project.

Monica Chang – Project 11 – Generative Landscape

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 11 - Generative Landscapes

//LANDSCAPE DESCRIPTION:
// SURPRISE! THERE IS HIDDEN LAVA BEHIND THE FIRST TERRAIN!

var tethered = [];
var terrainSpeed = 0.0008;// speed of orange terrain and middle terrain
var terrainSpeedThree = 0.0007; // speed of very back mountain
var terrainDetail = 0.008;
var terrainDetailTwo = 0.001;
var terrainDetailThree = 0.02; //smoothness of the terrains

function setup() {
    createCanvas(480, 480);
    frameRate(20);
    //initial lava
    for (i = 0; i < 30; i++) {
        var tx = random(width);
        var ty = random(300, height);
        tethered[i] = makeTethered(tx, ty);
    }
}

function draw() {
    //lavendar background
    background(236, 225, 250);

    //arranging the landscape elements(three terrains, lava spots)
    renderTerrainTwo(); // middle, low-opacity mountain
    renderTerrainThree(); // third mountain in the very back
 
    updateAndDisplayTethered(); //hidden lava behind the front terrain

    renderTerrainOne(); // first terrain int he very front

}



function displayTethered() {
    //drawing the "tethered" lava
    noStroke(); //no outline
    fill(255, 11, 5); //red tethered coat color
    push();
    translate(this.x0, this.y0); //locate lava body at x0, y0
    ellipse(5, 5, 10, 5); //tethered lava body
    pop();
}

function makeTethered(birthLocationX, birthLocationY) {
    var theTethered = {x0: birthLocationX, 
                y0: birthLocationY, 
                tx: random(0, width), 
                ty: random(300, height),
                speed: -3.0,
                move: moveTethered,
                display: displayTethered}
    return theTethered;
}

function moveTethered() {
    this.x0 += this.speed; //speed of lava moving
    if (this.x0 <= -10) { //new lava appears at the right as they disappear to the left
        this.x0 += width + 10;
    }
}

function updateAndDisplayTethered() {
    for(i = 0; i < tethered.length; i++) {
        tethered[i].move();
        tethered[i].display();
    }
}


function renderTerrainThree(){
    // drawing the terrain in the back
    noStroke();
    fill(51, 16, 84); 
    beginShape(); 
    for (i = 0; i < width; i++) {
        var t = (i * terrainDetailThree) + (millis() * terrainSpeedThree);
        //terrains y coordinate
        var y = map(noise(t), 0, 1.5, height / 8, height);
        //keep drawing terrain
        vertex(i, y);
    }
    //terrain constraints
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function renderTerrainTwo() {
    // drawing terrain number two(in the middle)
    noStroke();
    fill(71, 11, 6, 200); //low-opacity color of maroon
    beginShape();
    for(var a = 0; a < width; a++){
        var b = (a * terrainDetail) + (millis() * terrainSpeed);
        var c = map(noise(b), 0, 1, 0, height / 4);
        vertex(a, c);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);

}


function renderTerrainOne() {
    //drawing the terrain in the very front
    noStroke();
    fill(235, 64, 52);
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetailTwo) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0.55, height + 100);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
  
}

I was originally inspired by the horror film, ‘Us’, which was released this year and wanted to illustrate the “Tethered”. However, they ended up looking more like lava due to the color so I ended up creating a landscape with holes of lava. This project was really fun and helpful in making me understand objects better.

Mihika Bansal – Project 11 – Landscape

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 9

var bubbles; 
var move = 5; 
var cx = 100; //starting location of clouds
var cy = 100; 
var clouds = []; 
var ripples = []; 
var terrainSpeed = 0.0005; 
var terrainDetail = 0.005; 

function setup() {

    createCanvas(480, 480); 
    frameRate(4); //slowed down for ripples 

    //initial display of clouds  
    for(var i = 0; i < 3; i++){
    	var cX = random(width); 
    	var cY = random(75, 150); 
    	clouds[i] = makeClouds(cX, cY); 

    }

}
   
function draw() {
	background("#F05353");

	//draw sun
	noStroke(); 
	fill("#F7915B");
	ellipse(width / 2, height / 3, 125, 125);  

	var mountain1 = mountains("#E2BE9A", height * 0.20, height * 0.65, 4); //backmost mountain
	var mountain2 = mountains("#EFAD6C", height * 0.37, height * 0.65, 2); // middle ground mountains 
	var mountain3 = mountains("#EF8F30", height * 0.50, height * 0.65, 3); //foreground mountains 


	//draw ocean 
	noStroke(); 
	fill("#006160"); 
	rect(0, height * 0.65, width, height * 0.35); 

	//draw sun reflection 
	noStroke(); 
	fill(250, 103, 71, 100); 
	arc(width / 2, height * 0.65, 125, 125, 0, PI, OPEN);

	//draw ripples that are changing like waves
	noStroke(); 
	fill(171,209,197, 100); 
	for(var i = 0; i < 6; i ++){
		var xR = random(-205, 205); 
		var yR = random(10, 125); 
		var w = random(50, 100); 
		var h = random(5, 10); 

		ellipse(width / 2 + xR, height * 0.65 + yR, w, h);
	}


	update(); 
	removeClouds(); 
	addCloud();   
    
}

function update(){ //update all the clouds 
	for(var i = 0; i < clouds.length; i++){
		clouds[i].move(); 
		clouds[i].display(); 
	}
}

function removeClouds(){ //checks to see where clouds are and changes positions accordingly
	var cloudKeep = []; 
	for(var i = 0; i < clouds.length; i++){
		if(clouds[i].x + 25 > 0){ // cloud is 50 wide, so 25 is point from center
			cloudKeep.push(clouds[i]); 
		}
	}
	clouds = cloudKeep; //keep only clouds still on screen
}

function addCloud(){ //randomly adds clouds at intervals 
	var newCloud = 0.03; 
	if(random(0,1) < newCloud){
		var cloudY = random(75, 150); 
		clouds.push(makeClouds(480, cloudY)); 
	}
}

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

function cloudDisplay(){ //draw the clouds 
	fill("#FFD79E"); 
	noStroke(); 
	ellipse(this.x, this.y, 90, 15); 
	ellipse(this.x - 25, this.y - 10, 35, 30);
	ellipse(this.x, this.y - 20, 40, 40);
	ellipse(this.x + 20, this.y - 15, 35, 30);  

}

function makeClouds(cloudLocX, cloudLocY){ //cloud object definition 
	var cloud = { x: cloudLocX,
				y: cloudLocY,
				speed: -5, 
				move: cloudMove, 
				display: cloudDisplay}

	return cloud; 
} 
function mountains(color, min, max, noiseS) {

	noStroke(); 
	fill(color); 
	noiseSeed(noiseS); 

	beginShape(); 
	for(var x = 0; x < width; x++){
		var t = (x * terrainDetail + (millis() * terrainSpeed)); 
		var y = map(noise(t), 0, 1, min, max); 
		vertex(x, y); 
	}
	vertex(width, height); 
	vertex(0, height); 
	endShape(); 


}

This project was very fun to do. I was inspired by the mountain terrain that was shown in the deliverable section. I immediately thought to the serene sunset nights that a person could see when they are on a cruise ship. So I worked with this color palette and recreated an ocean scene with ripples in the ocean, a setting sun, and mountain ranges.

Min Ji Kim Kim – Project 11 – Landscape

sketch

I think this week’s project was the one that I had the most fun making but also the most challenging. Coming up with the idea was easy. I love to travel and I like staring at the baggage claim conveyor belt because if I stare long enough, it makes me feel like I’m moving. I quickly drew a sketch of what I wanted my landscape to look like.

I then moved on to the starter code template and tried to understand what each part of the code was doing and how it was changing the image. This part was a little hard just because there were so many moving parts but I ultimately figured it out and then I tailored it one function at a time to match my sketch and create the final product. The colors and sizes of the bags are generated randomly.

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-11
*/

var luggage = [];

function setup() {
    createCanvas(480,450);
    frameRate(50);

    // create an initial collection of luggage
    for (var i = 0; i < 3; i++) {
        var rx = random(width);
        luggage[i] = makeLuggage(rx);
    }
}

function draw() {
    background(225, 225, 218);

    baggageClaim(); //background details

    updateLuggage(); //update luggage
    removeLuggage(); //remove luggage
    addLuggage(); //add luggage
}

function updateLuggage() {
    // update the luggage's position and display them
    for (var i = 0; i < luggage.length; i++) {
        luggage[i].move();
        luggage[i].display();
    }
}

function removeLuggage() {
    //remove luggage from array if it's out of sight
    var luggageToKeep = [];
    for (var i = 0; i < luggage.length; i++) {
        if (luggage[i].x + luggage[i].breadth > 0) {
            luggageToKeep.push(luggage[i]);
        }
    }
    luggage = luggageToKeep; //remember the surviving luggage
}

function addLuggage() {
    //with a very small probability, add a new luggage to the end
    var newLuggageProb = 0.008; 
    if (random(0,1) < newLuggageProb) {
        luggage.push(makeLuggage(width));
    }
}

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

// draw the luggage
function luggageDisplay() {
    //bag
    noStroke();
    fill(this.r, this.g, this.b);
    rect(this.x, 360, this.breadth, this.h);

    //bag handle
    fill("#654321");
    var top = 350 + this.h; //top of bag
    rect(this.x + 20, top, this.breadth - 45, 5);
    rect(this.x + 20, top, 5, 10);
    rect(this.x + this.breadth - 25, top, 5, 10);

    //bag tag
    fill(245);
    stroke(this.r, 50, 150);
    strokeWeight(3);
    rect(this.x + 30, top + 20, 15, 27);
    line(this.x + 35, top, this.x + 35, top + 20);
}

// make a luggage bag object
function makeLuggage(beginX) {
    var lgg = {x: beginX,
                breadth: random(80, 120),
                speed: -1.0,
                h: -random(50, 100), //luggage height
                //set color
                r: random(10, 250),
                g: random(10, 250),
                b: random(10, 250),
                move: luggageMove,
                display: luggageDisplay}
    return lgg;
}

function baggageClaim() { //create background details
    noStroke();

    //floor
    fill(238, 239, 235);
    rect(0, 200, width, height);

    //windows
    fill(236, 236, 230);
    rect(0, 50, width, 120);
    for(i = 0; i < 6; i++) {
        stroke(255);
        strokeWeight(4);
        strokeCap(SQUARE);
        line(i * 85 + 25, 50, i * 85 + 25, 170);
    }
    line(0, 110, width, 110);
    line(0, 140, width, 140);

    chair();

    //carousel sign
    fill(90);
    rect(150, 45, 250, 60);
    rect(200, 10, 3, 35);
    rect(350, 10, 3, 35);
    noStroke();
    fill(29, 40, 80);
    rect(155, 65, 70, 35);
    fill(0);
    rect(235, 65, 160, 35);
    textSize(8);
    fill(255);
    text("Baggage Claim", 155, 60);
    text("Arrival Time", 235, 60);
    textSize(15);
    text("Delta    2:50", 270, 88);
    textSize(35);
    text("K", 180, 95);

    //conveyor belt
    fill(135, 147, 141);
    rect(0, 400, width, 20);
    fill(67, 67, 67);
    rect(0, 420, width, 5);
    fill(168, 184, 179);
    rect(0, 395, width, 5);
    rect(0,305, width, 5);
    fill(30);
    rect(0, 310, width, 85);
    for(j = 0; j < width; j++) { //belt lines
        stroke(15);
        strokeWeight(3);
        line(j * 30, 310, j * 30, 395);
    }
}

function chair() { //create a chair
    for(x = 0; x < 4; x++) {
        noStroke();
        fill(196, 197, 190);
        rect(80 + x * 22, 155, 20, 12);
        rect(80 + x * 22, 168, 20, 2);
        stroke(196, 197, 190);
        strokeWeight(2);
        strokeCap(SQUARE);
        line(x * 22 + 90, 167, x * 22 + 90, 172);
        line(x * 25 + 85, 172, x * 25 + 85, 180);
        strokeWeight(1);
        line(84, 172, 161, 172);
    }
}

Emma NM-Project-11(Landscape)

generativeLandscape

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-11
Generative Landscape
*/

var waterSpeed = 0.0002;
var waterDetail = 0.002;
var c2, c5; // gradient colors

var yPos = []; // water y position
var tubers = [];

var r1 = 50;

function setup() {
    createCanvas(450, 300);
    frameRate(10);

    // colors for water gradient
    c2 = color("#8cbaba");
    c5 = color("#005364");
}
 
function draw() {
    setGradient(c2, c5);
    // draw water
    water();

    // the sun
    noStroke();
    fill("#FFE484");
    ellipse(width - r1, r1, r1+10, r1+10);
    fill("#FFCC33");
    ellipse(width - r1, r1, r1, r1);

    updateAndDisplayTuber();
    removeTubers();
    addTuber();

}

function water() {
    noFill(); 
    beginShape();
    stroke("skyblue");

    // draw the water that varies in height
    for (var x = 0; x < width; x++) {
        var t = (x * waterDetail) + (millis() * waterSpeed);
        var y = map(noise(t), 0,1, height/2, 3/4*height);
        line(x, y, x, -300); // illusion that the bottom water is changing height
        
        // only keep y positions that are on the screen
        if (yPos.length > width) {
            yPos.shift();
        }
        yPos.push(y);
    }
    endShape();
}

function addTuber() {
    var probability = 0.08;
    // randomly make a new tuber as long as there are no more than
    // 5 tubers on screen at once
    if ((random(0,1) < probability) & (tubers.length < 5)){
        var yT = yPos[width];
        var t = makeTuber(width, yT - 15);
        // set the color of the tube
        var r = random(255);
        var g = random(255);
        var b = random(255);
        var c = color(r, g, b);
        t.setColor(c);
        tubers.push(t); // add tuber into list
    }
}

function removeTubers() {
    for (var j = 0; j < tubers.length; j++) {
        // if the tuber goes off the screen, remove from list
        if (tubers[j].x + 50 < 0) {
            tubers.splice(j, 1);
        }
    }
}

function makeTuber(x1, y1) {
    var tuber = {x: x1, y: y1, hSize: 17, bWidth: 10, bH: 25, 
                 color: color(128), move: moveTuber,
                 drawT: drawTuber, setColor: setTubeColor
                }
    return tuber;
}

// draw and update position of tuber
function updateAndDisplayTuber() {
    for (var i = 0; i < tubers.length; i++) {
        tubers[i].drawT();
        tubers[i].move();
    }
}

function moveTuber() {
    this.x -= 12.0;
}

function drawTuber() {
    noStroke();
    fill(0);

    // head
    ellipse(this.x, this.y, this.hSize, this.hSize);
    
    // torso
    push();
    translate(this.x + this.bWidth, this.y + this.bWidth);
    rotate(radians(30));
    ellipse(0, 1, this.bH + 5, this.bWidth);
    pop();

    // thighs (legs)
    push();
    translate(this.x + 3 * this.bWidth, this.y + this.bWidth);
    rotate(radians(-20));
    ellipse(0, 5, this.bH, this.bWidth);
    pop();

    // calves (legs)
    push();
    translate(this.x + 2 * this.bH, this.y + 2 * this.bWidth);
    rotate(radians(40));
    ellipse(0, 0, this.bH, this.bWidth);
    pop();

    // tube
    fill(this.color);
    ellipse(this.x + 20, this.y + 20, this.bH * 2, 1.5 * this.bWidth);
}

function setTubeColor(c) {
    this.color = c;
}

// color gradient for the water
function setGradient(c1, c2) {
  noFill();
  for (var z = height/2; z < height; z++) {
    var inter = map(z, height/2, height, 0, 1);

    var c = lerpColor(c1, c2, inter);

    stroke(c);
    line(0, z, width, z);
  }
}

I struggled a lot to get my object of Tubers to work and move with my water. There were a lot of “moving” parts to figure out and I had trouble when I tried to add lots of different elements at once. So once I slowed down and tried to get small parts, one at a time, I began to make more progress. I really like how my water looks. It was fun to experiment with gradients this project. Enjoy tubing 🙂

Nadia Susanto – Project 11 – Generative Landscape

sketch

// Nadia Susanto
// nsusanto@andrew.cmu.edu
// Section B
// Project-11-Generative Landscape


var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var boats = [];
var clouds = [];

function setup() {
    createCanvas(480, 480);
    //initalizing boats
    for (var i = 0; i < 3; i++){
        var bx = random(width);
        boats[i] = makeBoats(bx);
    }
    //initalizing clouds
    for (var x = 0; x < 5; x++) {
        var cx = random(width);
        clouds[x] = makeClouds(cx);
    }

    frameRate(20);
}

function draw() {
    //pinkish sky
    background(254, 165, 159);
    //show mountains and waves
    makeMountains();
    makeWaves();
    //show boats
    addNewBoats();
    updateAndDisplayBoats();
    removeBoatsOutofView();
    //show clouds
    addNewClouds();
    updateAndDisplayClouds();
    removeCloudsOutofView();

}

function updateAndDisplayClouds() {
    //constantly calling the clouds
    for (var x = 0; x < clouds.length; x++){
        clouds[x].move();
        clouds[x].draw();
    }
}

function removeCloudsOutofView() {
    var cloudsKeep = [];
    for (var x = 0; x < clouds.length; x++) {
        if (clouds[x].x > 0) {
            cloudsKeep.push(clouds[x]);
        }
    }
    clouds = cloudsKeep; //remember the clouds
}

function addNewClouds() {
    var cloudProb = 0.01;
    //if random number less than probability then a new cloud is shown
    if (random(0, 1) < cloudProb) {
        clouds.push(makeClouds(width));
    }
}

function cloudsMove() {
    //move the clouds from right to left
    this.x -= this.speed;
}

function drawClouds() {
    //draw the white clouds
    fill("white");
    ellipse(this.x, this.y, this.width, 10);
}

function makeClouds(cloudX) {
  //creating object for cloud
  var cloud = {x: cloudX,
              y: random(10, 100),
              width: random(50, 100),
              speed: 0.50,
              move: cloudsMove,
              draw: drawClouds}
  return cloud;
}



function updateAndDisplayBoats() {
    //constantly calling the boats
    for (var i = 0; i < boats.length; i++){
        boats[i].move();
        boats[i].draw();
    }
}

function removeBoatsOutofView() {
    var boatsKeep = [];
    for (var i = 0; i < boats.length; i++) {
        if (boats[i].x > 0) {
            boatsKeep.push(boats[i]);
        }
    }
    boats = boatsKeep; //remember the boats
}

function addNewBoats() {
    //if random number less than probability then a new boat is shown
    var boatProb = 0.005;
    if (random(0, 1) < boatProb) {
        boats.push(makeBoats(width));
    }
}

function boatsMove() {
    //move the boats from right to left
    this.x -= this.speed;
}

function drawBoats() {
    //random color for boats
    fill(this.colorR, this.colorG, this.colorB);
    //base of boat
    arc(this.x, 350, 75, 50, 0, PI, CHORD);
    //pole holding the sail
    ellipse(this.x, 330, 10, 80);
    //sail of boat
    triangle(this.x, 290, this.x, 330, this.x + 15, 310);
}

function makeBoats(boatX) {
    //creating object for boat
    var boat = {x: boatX,
                colorR: random(0, 255),
                colorG: random(0, 100),
                colorB: random(0, 200),
                speed: 1,
                move: boatsMove,
                draw: drawBoats}
    return boat;
}

//adopted the terrain starter code to make mountains in background
function makeMountains() {
    noStroke();
    fill(35, 144, 79);
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail*3) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height/4, height/2);
        vertex(x, y);
      }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

//adopted the terrain starter code to make ocean waves
function makeWaves() {
    noStroke();
    fill(1, 108, 194);
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/3) + (millis() * terrainSpeed/2);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y);
      }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

For this project I went back to a time when I was in Banff, Canada. I would canoe or ride in a boat on the lake with the mountains behind me. I created moving mountains and moving ocean waves with boats of random colors popping in and out. It was tough at first to figure out how to code the objects, but it was a fun project and I am happy with the final product.