Month: November 2019

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 🙂

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.

sketch

// Ankitha Vasudev
// Section B
// ankithav@andrew.cmu.edu
// Project-11

// global variables
var birds = []; // bird objects

var terrainSpeed1 = 0.0005; // back mountains speed
var terrainDetail1 = 0.015; // back mountains detail
var terrainSpeed2 = 0.001;  // front mountains speed
var terrainDetail2 = 0.008; // front mountains detail

function setup() {
	createCanvas(450, 400);

	// create an initial collection of birds
	for (var i = 0; i<10; i++) {
		var rx = random(width);
		birds[i] = makeBirds(rx);
	}

    frameRate(10);
}

function draw() {
    background(80);
    
    // window arc frame 
    fill(230);
    arc(width/2, 400, width*2, 750, PI, 0);

    // landscape elements
    sun();
    backMountains();
    carWindowandRoad();
    frontMountains();
    mountainreflection();

    // displaying birds 
    updateAndDisplayBirds();
    removeOldBirds();
    addNewBirds();

    // vertical window frame line
	stroke(0);
	strokeWeight(7);
	line(75, 50, 75, height);
}

function carWindowandRoad() {

    // window frame
	stroke(0);
	strokeWeight(7);
	noFill();
	arc(width/2, 400, width*2, 750, PI, 0);

	// water
	noStroke();
	fill(230);
	rect(0, 340, width, 100);

	// road
	stroke(255);
	strokeWeight(2);
	fill(100);
	rect(-10, 380, width+20, 70);

    // bottom window frame
    noStroke();
    fill(0);
	rect(0, 393, width, height);
}

function backMountains() {
	// large mountains in the back 
    stroke(215);
    beginShape();
	for(var x=0; x<=width; x++) {
		var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
		var y = map(noise(t), 0, 1, 100, 350);
		line(x, y, x, 380);
	}
	endShape();
}

function frontMountains() {
	// smaller mountains in the front
	stroke(150);
    beginShape();
	for(var x=0; x<=width; x++) {
		var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
		var y = map(noise(t), 0, 2, 300, 200);
		line(x, y, x, 340);
	}
	endShape();
}

function mountainreflection() {
	// reflection of small mountains in the water
    stroke(200);
    beginShape();
	for(var x=0; x<=width; x++) {
		var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
		var y = map(noise(t), 0, 5, 120, 250);
	    line(x, y+220, x, 340);
	}
	endShape();
}

function sun() {
	//sun 
	noStroke();
	fill(238);
	ellipse(370,100, 60);
	fill(247);
	ellipse(370, 100, 55);
	fill(255);
	ellipse(370, 100, 50);
}

function updateAndDisplayBirds() {
	// display and move birds
    for (var i=0; i<birds.length; i++) {
    	birds[i].move();
    	birds[i].display();
    }
}

function removeOldBirds() {
	// remove old birds off canvas
	var birdsToKeep = [];
	for (var i=0; i<birds.length; i++) {
		if (birds[i].x + birds[i].breadth > 0) {
			birdsToKeep.push(birds[i]);
		}
	}
	birds = birdsToKeep;
}

function addNewBirds() {
	// add new birds with a probability of 0.05
	var newBirds = 0.05;
	if (random(0,1) < newBirds) {
		birds.push(makeBirds(width));
	}
}

function moveBirds() {
	this.x += this.speed;
}

function displayBirds() {
	// code to draw each bird
	noFill();
	stroke(this.col);
	strokeWeight(0.8);
	arc(this.x, this.y, this.width, this.height, PI, TWO_PI);
	arc(this.x+this.width, this.y, this.width, this.height, PI, TWO_PI);
}

function makeBirds(birthLocationX) {
	// randomization of birds
	var birdy = {x: birthLocationX,
		y: random(140, 230),
		col: random(30,100),
		breadth: 50,
        speed: random(-3,-6),
        width: random(3,8),
        height: random(2,4),
        move: moveBirds,
		display: displayBirds
	}
    return birdy;
}

For this project I created a generative landscape of a view out a car window. I wanted to create a strong sense of foreground vs background and did this by including many elements: mountains in the back and front, water with the mountain reflections and a thin strip of the road. I used birds as my objects and randomized the width, height and color. I also used this project as an opportunity to play with a monotone color scheme (since all my previous project use a lot of color). Overall, it was fun and I’m much more confident about using objects.