Category: Project-10-Landscape

rkondrup-project-10-Landscape

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// project-10



var trains = [];

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

    frameRate(30);
}


function draw() {
    background(177, 214, 144); //light green
    drawTracks();

    updateAndDisplayTrains();
    removeTrainsThatHaveSlippedOutOfView();
    addNewTrainsWithSomeRandomProbability();
    textMessage();

}


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


function removeTrainsThatHaveSlippedOutOfView(){
    // If a train has dropped off the left edge,
    // remove it from the array.
    //     Our solution is to just copy all the trains
    // we want to keep into a new array.
    var trainsToKeep = [];
    for (var i = 0; i < trains.length; i++){
        if (trains[i].x + trains[i].carWidth > 0) {
            trainsToKeep.push(trains[i]);
        }
    }
    trains = trainsToKeep; // remember the surviving trains
}


function addNewTrainsWithSomeRandomProbability() {
    // With a very tiny probability, add a new train to the end.
    var newtrainLikelihood = 0.005;
    if (random(0,1) < newtrainLikelihood) {
        trains.push(maketrain(width));
    }
}


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


// draw the train and some windows
function trainDisplay() {
    var floorHeight = 100;
    var bHeight = this.nFloors * floorHeight;
    stroke(0);
    push();
    noStroke();

    //to draw each of the 8 trains and assign different speeds

    translate(this.x, 0);
    push();
    fill(214, 128, 131);//red
    rect(0, 0 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(214+30, 128+30, 131+30);
    rect(0, 0 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*1.5, 0);
    push();
    fill(81, 176, 185);//turquoise
    rect(0, 60 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(81+30, 176+30, 185+30);
    rect(0, 60 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x, 0);
    push();
    fill(146, 95, 182);//purple
    rect(0, 60*2 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(146+30, 95+30, 182+30);
    rect(0, 60*2 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x*1.5, 0);
    push();
    fill(145, 205, 129);//green
    rect(0, 60*3 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(145+30, 205+30, 129+30);
    rect(0, 60*3 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*1.2, 0);
    push();
    fill(216, 174, 107);//yellow
    rect(0, 60*4 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(216+30, 174+30, 107+30);
    rect(0, 60*4 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x, 0);
    push();
    fill(92, 129, 213);//blue
    rect(0, 60*5 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(92+30, 129+30, 213+30);
    rect(0, 60*5 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x, 0);
    push();
    fill(222, 157, 104);//orange
    rect(0, 60*6 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(222+30, 157+30, 104+30);
    rect(0, 60*6 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*2, 0);
    push();
    fill(222, 104, 179);
    rect(0, 60*7 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(222+30, 104+30, 179+30);
    rect(0, 60*7 + 13, this.carWidth, 30)//top lighter shade rect
    pop();



    stroke(200);
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight*10), this.carWidth - 10, 10);
    }
    pop();
}


function maketrain(birthLocationX) {
    var trn = {x: birthLocationX,
                carWidth: 100,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: trainMove,
                display: trainDisplay}
    return trn;
}

function drawTracks() {
    fill(235, 230, 235);//long track color
    noStroke();
    for(i = 0; i < 20; i++) {
        for (j = 0; j < 200; j++) { //railroad ties
            push();
            fill(194, 175, 166); //tie color
            rect(5 + 15*j, + 5 + i*60, 5, 46);
            pop();
        }
        rect(0, 30*i + 10, width, 6);
    }
}
// to make text appear once each minute
function textMessage() {
    var s = second();
    textSize(14)
    fill(255);
    noStroke();
    if (s == 0) {
        text("ALL ABOARD !", width/2-30, height/2-28);
    }
    else if (s == 20) {
        text("CHOOCHOO !", width/2-30, height/2-28);
    }
    else if (s == 40) {
      text("ZOOM !", width/2-30, height/2-28);
    }

}

With this project, i very much wanted to avoid the elevation view that seemed to be trending among early submissions. I also wanted to create something somewhat whimsical, and so i eventually decided that rainbow trains were a childish sort of drawing that could spice up my ideate experience. I aimed for a very simple, clean aesthetic for this drawing, trying to show as little as was necessary in order to identify the moving objects. Many trains are the same base length, while others are elongated to add some variation. The trains also seem to converge at the left end of the page, which confused me but I also saw it like a visual point of interest, as if the trains are racing to be the first one across the page.

dnoh-sectionD-project10-landscape

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project 10

var planes;
var clouds = [];

function preload() {
	//loading plane image
	var planeImage = "https://i.imgur.com/bQ0w1cU.png"
	planes = loadImage(planeImage);
}

function setup(){
  createCanvas(360,480);
  //create clouds inital
  for (var i = 0; i < 45; i++){
    var rd = random(width);
    clouds[i] = makeClouds(rd);
  }
  frameRate(30);
}

function draw(){
  var a = color(53,47,73);
  var b = color(113, 85, 52);
  backGradient(0, width, a, b);

  makeSun();
  updateCloud();
  removeCloud();
  addCloud();

  image(planes, 0, 0);
}

//creates a gradient color
function backGradient (y, x, a, b) {
    for (var i = y; i <= height; i++) {
      var mid = map(i, y, y+x, 0, 1);
      var c = lerpColor(a, b, mid);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+x, i);
	}
}

//creates a blinking sun
function makeSun() {
  for (var i = 0; i < 10; i++) {
    var number = random(7,10); //makes the opacity vary
    var transparency = 60 - number*i;
    fill (220, 200, 120, transparency);
    ellipse(width/2, height/2+60, 150+20*i, 150+20*i);
  }
	//the actual sun center circle
  noStroke();
  fill(220, 200, 120);
  ellipse(width/2, height/2+60,150,150);
}

//updates the clouds so they move and show
function updateCloud(){
  for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

//gets rid of clouds that pass the screen
function removeCloud(){
  var cloudsKeep = [];
  for (var i = 0; i < clouds.length; i++){
    if (clouds[i].x + clouds[i].breadth > 0){
      cloudsKeep.push(clouds[i]);
    }
  }
  clouds = cloudsKeep;
}

//adds clouds at a random interval, replacing the ones that are removed
function addCloud(){
  var newCloudPercent = 0.2;
  if (random(0,1) < newCloudPercent){
    var cloudX = width;
    var cloudY = random(height/1.2);
    clouds.push(makeClouds(width));
  }
}

//adds velocity to the clouds, making them move
function cloudMove(){
  this.x += this.speed;
}

//this is the things that make the cloud
function displayCloud(){
  var cloudHeight = 5;
  var cHeight = this.nCloud*cloudHeight;

  noStroke();
  fill(255, this.opaque);
  push();
  translate(this.x, height/1.15);
  ellipse(0, -cHeight, this.breadth, cHeight/1.5);
  pop();
  push();
  translate(this.x, height/1.15+40);
  ellipse(30, -cHeight, this.breadth, cHeight);
  pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
	var cloud = {x: cloudX,
				y: cloudY,
				breadth: random(50, 100),
				speed: -random(1, 3),
				nCloud: round(random(10,23)),
				opaque: random(80, 90),
				move: cloudMove,
				display: displayCloud}
	return cloud;
}

I started with a simple idea that an airplane was passing through in the skies. At first I imagined birds passing by, but quickly realized that birds don’t really exist that high up in the air. Therefore, I stuck with simple clouds that changed opacity and a sun that blinked in the sky. I created this sketch:

on illustrator and used that as the overlay that would envelope the moving clouds and blinking sun.

svitoora – 10 Hallow-Eve

Supawat’s Portrait

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Hallow-Eve: Recusively generate a forest of Sakura.
// Using a Lindenmayer system, each plant grows towards the sun.

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;


var w = 480;
var h = 480;
var x_create = w + 50;

// Global Variable
var PLANT;
var PLANTS = [];
var segment_l = h * .1;
var r = h * .05 * .5;
var common_ratio = .618033 //Golden Ratio
var food;

// Recursively generates a plant model
var max_i = 5; // Max iteration depth
var cur_i = 0;
var DRAW_i = 0; // DRAW's iteration depth

///// MODEL /////
// Creates the sun for plants to grow towards
function food_create(x = w / 2, y = -h * 2) {
	this.x = x;
	this.y = y;
}

// Creates plants node. Nodes that have .child are branches,
// and nodes without .child are leaves.
function create_plant_node(x, y) {
	this.x = x;
	this.y = y;
	this.x0 = this.x;
	this.y0 = this.y;
	this.child = [];
	this.x1 = null;
	this.y1 = null;
}

// Grows plant by making plant seek sunlight
function grow(plant, cur_i) {
	// Using the golden ratio, plant's branch size is a geometric sequence
	l = segment_l * (common_ratio ** (cur_i))
		// Randomly generate the next node via reducing
		// distance from plant ro sun
	do {
		angleMode(DEGREES);
		if (cur_i == 0) {
			angle = 5;
			theta = random(-90 - angle, -90 + angle);
		} else {
			theta = random(0, 360);
		}
		plant.x1 = plant.x0 + (l * cos(theta));
		plant.y1 = plant.y0 + (l * sin(theta));
		d_new = dist(plant.x1, plant.y1, food.x, food.y)
		d_old = dist(plant.x0, plant.y0, food.x, food.y)
	}
	// Keep generating until the new distance is less than the current one
	while (d_new > d_old)
	plant.child = [];
	// Randomly decide how many children(branches) a node should have
	for (var x = 0; x < random(1, 4); x++) {
		plant.child.push(new create_plant_node(plant.x1, plant.y1));
	}
}

// Recursively generates plant
function generate_plant(PLANT, cur_i, max_i) {
	// Break Base
	if (cur_i == max_i) {
		return
		// Continue case
	} else {
		grow(PLANT, cur_i);
		cur_i++;
		for (i in PLANT.child) {
			generate_plant(PLANT.child[i], cur_i, max_i)
		}
	}
}

///// DRAW /////
// Recursively draws plant
function draw_PLANT(plant, DRAW_i) {
	DRAW_i++; // Increases DRAW's Depth counter
	stroke(255 * .3)
	strokeCap(SQUARE);
	strokeWeight((h * .0125) * (common_ratio ** DRAW_i))
		// Break case: Flowers
		// If node has no children; draw leaf.


	// print(plant);
	if (plant.child == []) {
		fill(255, 255, 255);
		ellipse(plant.x, plant.y, (2 / 600) * w, (2 / 600) * w);
		return
	} // If node has chldren; draw branches
	else {
		r = r ** common_ratio;
		if (plant.child.length != 0) {
			for (i in plant.child) {
				line(plant.x, plant.y,
					plant.child[i].x, plant.child[i].y)
				draw_PLANT(plant.child[i], DRAW_i);
			}
		}
	}
}

///// SETUP /////
function setup() {
	createCanvas(w, h);
	background("#ff9900");
	food = new food_create();

	// Row Cols Controller
	num_tree = 3;
	num_row = 4;
	y_pos = 0;

	// Translates Row and Col of Trees
	// Rows
	y_pos = w * .75;

	PLANT = new create_plant_node(x_create, y_pos);
	generate_plant(PLANT, cur_i, max_i);
	PLANTS.push(PLANT);
}

// Recursively move each node of tree
function tree_move(tree) {
	D = -1;
	tree.x += D;
	tree.x0 += D;
	tree.x1 += D;

	// Break
	if (tree.child == []) {
		return
	} else {
		// Recurse
		for (i in tree.child) {
			tree_move(tree.child[i]);
		}
	}
}

// To reduce system overload
function kill_plant() {
	if (PLANTS.length > 5) {
		PLANTS.shift();
	}
}


var time = 1;
function draw() {
	time += 1
	background("#ff9900");
	kill_plant();

	// Represent and move trees
	for (index in PLANTS) {
		tree_move(PLANTS[index])
		draw_PLANT(PLANTS[index], DRAW_i);
	}
	
	// Create new tree every modulo time
	if (time % 160 == 0) {
		PLANT = new create_plant_node(x_create, y_pos);
		generate_plant(PLANT, cur_i, max_i);
		PLANT.time = time;
		PLANTS.push(PLANT);
	}
	// Draw Floor
	fill(255 * .3);
	rect(0, h * .75, w, h);
}

The most difficult part of this project was to get each node of the tree to move. Recursively creating the tree was easy because I had already done it before, but doing a DOF search for each node and moving it along was a challenge because it was hard to keep track of variables. I also didn’t expect recursive trees to be so computationally expensive to make, therefore I can only limit it to a few moving ones.

selinal-Project-10

sketch

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


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


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


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


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


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


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

My process for this project was based on a previous drawing I have done with cacti. To me, these are significant structures because they exist in some isolation from each other by their spread and spacing in the desert, away from clusters of other living organisms, so their visual existence is very extraordinary. To create the cacti in p5, I started with creating a curve shape as the base of the cactus. Then, I randomized the number of arms present on the cactus’s body, where I had to play around with trial and error in creating a curve shape which looked like a cactus arm, but also that was attached to the cactus’s main body. I then, played with creating other objects like the smaller, darker cactus and its visual randomization and its positioning on the second horizon line lower than the first, larger, lighter cactus which was on the first horizon line.

danakim-Project-10

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-10

var moons = [];
var Terrain = [];
var terrainSpeed = 0.0003;
var terrainDetail = 0.001;

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

  //initial moons
  for(var i = 0; i < 5; i++){
    var rx = random(width);
    moons[i] = new Moons (rx);
  }
  frameRate(10);
}

function draw() {
  background(243, 178, 156);

  updateAndDisplayMoons();
  removeMoons();
  newMoons();
  citySkyLine();
  Smog();
}

function updateAndDisplayMoons(){
  for(var i = 0; i < moons.length; i++){
    moons[i].move();
    moons[i].display();
  }
}

function removeMoons(){
  for(var i = 0; i < moons.length; i++){
    if(moons[i].x < 0-moons[i].breadth){
      moons.splice(i, 1);
    }
  }
}

function newMoons(){
  var newMoonLikelihood = 0.007;
  colorList = [255, 150, 180];
  colorNum = int(random(0.5, 2.5));
  if(random(0,1) < newMoonLikelihood){
    moons.push(new Moons ( width, colorList[colorNum]));
  }
}

function Moons(birthLocationX, color){
  this.x = birthLocationX;
  this.y = random(50, 250);
  this.breadth = 50;
  this.speed = -1.0;
  this.move = function(){
    this.x += this.speed;
  }
  this.display = function(){
    push();
    fill(random(69, 126), 0, random(115, 213));
    ellipse(this.x, this.y, this.breadth, this.breadth);
    pop();
  }
}

function citySkyLine(){
  fill(189, 142, 138);
  beginShape();
  for( var x = 0; x < width; x++){
    var t = (x * 0.001) + (millis() / 0.0001);
    var y = map(noise(t), 0, 1, 0, height);
    vertex(x,y+100);
  }
  endShape();

}

function Smog(){
  fill(149, 121, 117);
  beginShape();
  for( var x = 0; x < width; x++){
    var t = (x * 0.0005) + (millis() * terrainSpeed);
    var y = map(noise(t), 0, 1, 0, height);
    vertex(x,y);
  }
  endShape();

}

This is an abstracted version of what I had intended on making initially. I was fooling around with the code and I happened to like what I got from that and stuck with it. It still conveys my initial idea of a city skyline with smog and multiple “moons.”

Bettina-Project10-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 10

var buildings = []; //the big icebergs
var sparkles = []; //yellow sparkles on bottom

function setup() {
    createCanvas(309, 480);
    frameRate(10);
    
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    
    for (var h = 0; h < 5; h ++) {
        var rz = random(width);
        sparkles[h] = makeSparkle(rz);
    }
}   
 


function draw() {
    background("#364442");
    noStroke();
    fill("#5e7d6f");
    rect(0,135,width,346);

    drawBoat();
   
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    
    updateAndDisplaySparkles();
    removeSparklesThatHaveSlippedOutOfView();
    addNewSparklesWithSomeRandomProbability();
    
}

//draw and update position of boat
var boatX = 125;
var boatY = 137;
var boatSpeed = 3

function drawBoat() {
    fill("#141916")
    stroke(2);
    beginShape(); //boat body
    vertex(boatX,boatY);
    vertex(boatX+9,boatY-11);
    vertex(boatX-16,boatY-11);
    vertex(boatX-16,boatY-58);
    vertex(boatX-18,boatY-58);
    vertex(boatX-18,boatY-11);
    vertex(boatX-42,boatY-11);
    vertex(boatX-34,boatY);
    endShape();
    fill("#d5d9b8");
    noStroke();
    beginShape(); //right boat sails
    vertex(boatX-14,boatY-17);
    vertex(boatX-14,boatY-59);
    vertex(boatX+14,boatY-17);
    endShape();
    beginShape(); //left boat sails
    vertex(boatX-20,boatY-17);
    vertex(boatX-37,boatY-17);
    vertex(boatX-20,boatY-47);
    endShape();
    boatX += boatSpeed; //makes boat move left and right across canvas
    if (boatX >=width) {
        boatSpeed *= -1;
    }
    else if (boatX <= 0) {
        boatSpeed *= -1;
    }
}


//Below: set of functions that create the big icebergs
function updateAndDisplayBuildings(){
    // Update the iceberg's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = []; //says building because using code template
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth +30 > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving icebergs
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.009; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of an iceberg every frame
function buildingMove() {
    this.x -= this.speed;
}
    

// draw the icebergs
function buildingDisplay() {
    fill("#a4bcad"); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    beginShape(); //draws iceberg shape using vetices
    vertex(this.x,this.y);
    vertex(this.x-69,this.y+93);
    vertex(this.x-143,this.y+105);
    vertex(this.x-193,this.y+31);
    vertex(this.x-179,this.y-114);
    vertex(this.x-139,this.y-229);
    vertex(this.x-120,this.y-213);
    vertex(this.x-93,this.y-120);
    endShape();
    pop();
}


function makeBuilding(birthLocationX) { //creates iceberg objects to store in array
    var bldg = {x: birthLocationX,
                y: 150,
                breadth: random(60,90),
                speed: 1,
                sparklespeed: random(0.5,1),
                nFloors: round(random(1,1.5)),
                move: buildingMove,
                display: buildingDisplay
               }
    return bldg;
}





//Below: set of functions that generate the yellow sparkles
function updateAndDisplaySparkles(){
    for (var i = 0; i < sparkles.length; i++){
        sparkles[i].move();
        sparkles[i].display();
    }
}


function removeSparklesThatHaveSlippedOutOfView(){
    var sparklesToKeep = [];
    for (var i = 0; i < sparkles.length; i++){
        if (sparkles[i].x + sparkles[i].breadth +30 > 0) {
            sparklesToKeep.push(sparkles[i]);
        }
    }
    sparkles = sparklesToKeep;
}


function addNewSparklesWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSparkleLikelihood = 0.1; 
    if (random(0,1) < newSparkleLikelihood) {
        sparkles.push(makeSparkle(width));
    }
}



function sparkleMove() {
    this.x -= this.speed;
}
    


function sparkleDisplay() { 
    push();
    fill("#ffce71");
    translate(this.x+100, random(30) + this.y);
    ellipse(0, 0, 10);
    pop();
}


function makeSparkle(birthLocationX) {
    var sparkle = {x: birthLocationX,
                y: random(400,420),
                breadth: random(60,90),
                speed: random(2,3),
                transparency: random(100,200),
                move: sparkleMove,
                display: sparkleDisplay
               }
    return sparkle;
}

This project was challenging for me to understand because I’ve never worked with this many helper functions before. It took a while for me to unpack the template code and understand what does what, so I’m happy I finally understand.

First, in setup we fill the array with objects. We make the objects in a separate function; that is the make[name] function. The function that draws the images is the [name]display function. At the same time, the move function is running and since the array with the objects is a global variable, we don’t need to pass the objects between the move and display functions. Finally we have the remove and add functions, which constantly scan the “x” methods of each object in the arrays to remove items that have fallen off the screen and push new objects into the array.

Above: Sketch I drew in Adobe Illustrator prior to implementing in p5

mecha-project10-landscape

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-10

var clouds = [];
var birdStrings = [];
var birdImgs = [];
var birds = [];
var birdTalk = ["hello", "hey", "hi", "howdy", "help me", "i love bread", "thank you", "good bye", "hm"];

//preloads all illustrator bird files locally
function preload() {
    birdStrings[0] = "https://i.imgur.com/LMwUiTl.png";
    birdStrings[1] = "https://i.imgur.com/2DClEHo.png";
    birdStrings[2] = "https://i.imgur.com/LoaUSI2.png";
    birdStrings[3] = "https://i.imgur.com/yMJKBYw.png";
    birdStrings[4] = "https://i.imgur.com/jF6usAy.png";
    birdStrings[5] = "https://i.imgur.com/GPZ41QC.png";
    birdStrings[6] = "https://i.imgur.com/15jvGyQ.png";
    birdStrings[7] = "https://i.imgur.com/XcxgSGA.png";

    for (var b = 0; b < 8; b++) {
        birdImgs[b] = loadImage(birdStrings[b]);
    }
}

//creates canvas initialized with birds, clouds
function setup() {
    createCanvas(480, 360);

    //initializes three birds at set x location
    birds[0] = birdPicture(50);
    birds[1] = birdPicture(200);
    birds[2] = birdPicture(400);
    
    clouds[0] = cloudPicture(60);
    clouds[1] = cloudPicture(290);
}

function draw() {
    //sets background to be dark blue of bird
    background(81,81,122);

    //calls function that draws mountains
    mountains();
  
    //draws clouds behind first mountain    
    updateClouds();
    addNewClouds();
    
    mountains2();
    
    //draws horizon line
    noStroke();
    fill(250, 240, 240);
    rect(0, 290, width, height);
    
    //draws birds
    updateBirds();
    addNewBirds();
}

function updateClouds(){
    //change the x location of each cloud
    for(var i = 0; i < clouds.length; i++){
        clouds[i].cmove();
        clouds[i].cdraw();
    }
}

function addNewClouds(){
    //adds new clouds with same probability of a number drawn between 0 and 1.2 being less than 0.003
    var probability = 0.003;
    if(random(0,1.2) < probability) {
        clouds.push(cloudPicture(width));
    }
}

function cloudPicture(cloudX){
    var cloudPicture = {
        cx: cloudX,
        cy: random(40,140),
        velo: 0.4,
        cmove: cloudMove,
        cdraw: drawCloud,
        cwidth: random(60,130),
        cheight: random(20,30)
    }
    return cloudPicture;
}

function cloudMove() {
    this.cx -= this.velo;
}

function drawCloud(){
    noStroke();
    fill(255);
    rect(this.cx, this.cy, this.cwidth, this.cheight,30);
    rect(this.cx + this.cwidth-(this.cwidth/1.2), this.cy-this.cheight+(this.cheight/2), this.cwidth/2, this.cheight,30);
}

function updateBirds() {
    //change the x location of each of the birds
    for (var i = 0; i < birds.length; i++) {
        birds[i].bmove();
        birds[i].bdraw();
    }
}

function addNewBirds() {
    //adds new birds with same probability of a number drawn between 0 and 1.2 being less than 0.004
    var probability = 0.004;
    if (random(0, 1.2) < probability) {
        birds.push(birdPicture(width));
    }
}

function birdPicture(startX) {
    var birdPicture = {
        x: startX,
        vel: 1,
        type: floor(random(0, 7)),
        bmove: birdMove,
        bdraw: drawBird,
        speak: bTalk(),
        talkProbability: tP()
    }
    return birdPicture;
}

//coin toss equivalent
function tP() {
    var talkProb = false;
    if (random(0, 1) > 0.8) {
        return true;
    }
    return talkProb;
}

//adds velocity to x to make birds scroll horizontally
function birdMove() {
    this.x -= this.vel;
}

function drawBird() {
    //if bird is shorter, draw lower on page
    if (this.type == 0 || this.type == 1 || this.type == 4 || this.type == 5) {
        image(birdImgs[this.type], this.x, 213);

        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x + 20, 193)
        }


    }
    
    //if bird is taller, draw higher on page
    else {
        image(birdImgs[this.type], this.x - 30, 180);
        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x, 160);

        }

    }

}

//returns strings in birdTalk array
function bTalk() {
    return birdTalk[int(random(birdTalk.length))];
}

function mountains() {
    var terrainSpeed = 0.0002;
    var terrainDetail = 0.005;
    push();
    beginShape();
    noStroke();
    fill(190, 160, 180);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y - 90);

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

}

function mountains2() {
    var terrainSpeed = 0.0004;
    var terrainDetail = 0.003;
    push();
    beginShape();
    noStroke();
    fill(140,120,150);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y-40);

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

}

For this project, I decided to do a landscape with birds, as I had done a lot of projects with birds previously.

Rather than create the birds through coding, I decided to use illustrator in order to create vectors that I could implement in the code. In order to do this, I ran a preload function that populated an array with my images uploaded to imgur.

I created two objects–birds and clouds–and populated arrays with them in order to have them appear in my environment.

 

mjeong1-Project-10-SectionA

sketch



var terrainSpeed = 0.001;
var terrainDetail = 0.009;
var terrainDetail2 = 0.003;
var stars = [];
var clouds=[];

function setup() {
    createCanvas(500,500);
    frameRate(10);
    for (var s = 0; s < 3000; s++) {
        stars.push(new Star());
    }
    //array for stars
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }
    //array for clouds
}


function draw() {
    stroke(255);
    strokeWeight(3);    

    var bgColor2 = color(164,174,224);
    var bgColor1 = color(66, 38, 89);
    gradient(0,0,width,height,bgColor1,bgColor2);
    //draw background gradient
    DrawStar();
    drawmountains();
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    train();
}

function Star() {
    //randomized stars

    this.x = random(width);
    this.y = random(height);
    this.di = random(0,1);
    this.speed = 0.5;
    this.border = random(0, 0.3);
    this.vol = 0; 
    this.move = function() {
    this.x += random(-this.speed, this.speed + this.vol);
    this.di = this.di +this.vol;
    var prob = random(0, 1);
    if (this.di <= 0.16) {
      this.vol = 0.001;
    }else if(this.di>=0.16){
    this.vol=0;}

  }

  this.display = function() {
    strokeWeight(this.border);
    stroke(255);
    fill(255);
    ellipse(this.x, this.y,  this.di,  this.di);

  }
}

function DrawStar() {
  for (var i = 0; i < stars.length; i++) {
    stars[i].move();
    stars[i].display();
  }
}


function gradient(x,y,wid,y2,c1,c2){
    noFill();
    for (var i = y; i < y+y2; i++){
        var inter = map(i,y,y+y2,0,1);
        var col = lerpColor(c1,c2,inter);
        stroke(col);
        line(x,i,x+wid,i);
    }

}
function drawmountains() {
    noStroke();
    fill(232,183,239,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.6);
        vertex(x, y+100); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(163,123,186,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.7);
        vertex(x, y+200); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(153,71,117,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.1);
        vertex(x, y+400); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
}

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


function removeCloudsThatHaveSlippedOutOfView(){
    
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds
}


function addNewCloudsWithSomeRandomProbability() {
    
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        clouds.push(makeCloud(width));
    }
}

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


function buildingDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight; 
    
    fill(255,90); 

    push();
    fill(255,20)
    translate(this.x, height - 40);
    ellipse(30, - bHeight -200, this.breadth, bHeight);
    pop();
}


function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: random(100, 300),
                speed: -random(1,3),
                nFloors: round(random(2,10)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function train() {
    fill(106,67,132);
    for (var i = 0; i < 3; i++){
        rect(i * 105,400,100,50);
        push();
        fill(255,206,173);
        rect(i * 105 +10,405,80,20);
        pop();
        beginShape();
        vertex(305,400);
        vertex(305,400);
        curveVertex(325,410);
        curveVertex(345,430);
        curveVertex(350,450);
        vertex(305,450);
        vertex(305,450);
        endShape();
    }
    for(var i = 0; i  < 315; i+= 30){
        ellipse(i+5,450,10,10);
    }
    rect(295,380,15,20);
    fill(255,150);
    ellipse(270,370,50,20);
    ellipse(210,350,70,30);
    ellipse(130,330,90,40);

}
//creating train and smoke

For this assignment I created a 2D animation. I wanted the train remain unmoving and the back ground terrain so that the combination of two can create an illusion. The randomized size and speed of the stars made shiny effect for the stars. Also I lowered the opacity of terrains and clouds to highlight the movement of the train.

 

Sheenu-Project 10-Generative Landscape

sketch

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu
//Project-10
var tspeed=0.0001
var td=.0005
var signs = [];
function preload(){
	var carcar ="https://i.imgur.com/2n8J78A.png";
	car=loadImage(carcar)

}
function setup() {
    createCanvas(480, 480);
    background(248,177,149);
    for (var i = 0; i < 10; i++){
    signs[i]=makesigns();
	}
}
function draw() {
	 background(248,177,149);
    fill(246,114,128); 
    noStroke();
    beginShape(); 
    //Terrain
    for (var x = 0; x < width; x++) {
        var t = (x * td) + (millis() * tspeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
        vertex(0,250)
        vertex(480,250)
    }
    endShape();
    rectMode(CORNERS)
    //Ground
    fill(246,114,128); 
    rect(0,250,480,480)
    fill(192,108,132)
    rect(0,270,480,480)
    //Draw Sticks
    updatesigns();
    removesigns();
    addsigns();
    //Draw Ground again
    fill(108,91,123)
    rect(0,290,480,480)
    fill(53,92,125)
    rect(0,320,480,480)
    //Car
    image(car,130,247,210,75)
}
//Sticks
//Make signs move or grow
function updatesigns(){
	for (var i=0;i<signs.length;i++){
		signs[i].move();
		signs[i].display();
	}
}
//Remove signs when they come to the end
function removesigns(){
var signstokeep =[];
	for (var i=0;i<signs.length;i++){
		if(signs[i].x+signs[i].breadth>0){
			signstokeep.push(signs[i]);
		}
	}
	signs=signstokeep;
}
//Generate the signs
function addsigns(){
	var newsignchance=.1;
	if(random(0,1)<newsignchance){
		signs.push(makesigns(width));
	}
}
//Make signs move
function signsmove(){
	this.x-=15
}
//Draw one sign
function signdisplay(){
	var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    push();
    translate(this.x, height - 40);
    fill(108,91,123)
    rect(0, -bHeight-200, 7, bHeight);
    stroke(200); 
    pop();
}
//Generate signs at a certain location
function makesigns(birthLocationX) {
    var sgn={x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: signsmove,
                display: signdisplay}
    return sgn;
}

I sometimes think about the times when me and my family go on vacation for a road trip and take a drive on the road. I would always be the one looking through the side window; observing all the cars, the signs, the billboards, and the nature around us. I always found the background around us fascinating and ephemeral moments that zoom past my sight of vision within seconds. This is why I chose to make this a car driving by mountains and sticks on a road. I used a color palette to distinguish depth in the background and also color objects such as mountains, sticks, walls, and the car itself. I used the building generation template and the mountain generation template as a reference.

Preliminary drawing made on MS Paint

Ziningy1 – Section C – Project 10 Generative Landscape

The concept behind this project is the rotating sushi bar I used to love when i was a child living in china. The sushi chef will prepare the sushi in dishes and place them on top of the transporting track. Customers will just wait and select the different sushi and sea food dishes they want. So I drawn this graphic sushi bar from the customer standing perspective. The dishes will change randomly between two types: Sushi roll, Sushi and fish head that I illustrated. It will also generate randomly size and color of the dishes.

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-10 
var speed= -4;
var linex=-100;
var disk = [];
var sushilink = 
["https://i.imgur.com/b6hRo0j.png",
"https://i.imgur.com/QaOb647.png",
"https://i.imgur.com/099E6kA.png"] 

var roll;
var sushi;
var fish;

function preload(){ //load sushi image 
    roll= loadImage(sushilink[0]);
    fish= loadImage(sushilink[1]);
    sushi=loadImage(sushilink[2]);



}

function setup() {
    createCanvas(480, 480); 
    var rx = 0;
    // create an initial collection of disks 
    for (var i = 0; i < 30; i++){
        disk[i] = makeDisk(rx);
        rx+=250;
    }
    frameRate(10);
}


function draw(){
    background(80);
    translate(0,-20); //frame shift upward 

    sushiBar(); //calling sushi bar function 
    displayLine();
    updatedisplayDisk(); //call disk draw funciton 
    displayChopstick(); //calling chopstick draw function 
    displayChopstick1(); //calling second chopstick function 

   

}

function sushiBar(){ // drawing of the sushi bar 
    noStroke();

    //drawing the transporting trail 
    fill(120,120,90);
    rect(0,0,width,120);
    fill(220,180,130);
    stroke(0);
    strokeWeight(3);
    rect(0,height/2-140,width,20);
    fill(170,140,100);
    strokeWeight(1);
    rect(0,height/2-130,width,20);
    fill(180);
    strokeWeight(3);
    rect(0,height/2-120,width,150);
    //drawing the sushi counter
    fill(220,180,130)
    rect(0,height/2+30,width,10);
    strokeWeight(1);
    fill(170,140,100)
    rect(0,height/2+39,width,10);
    strokeWeight(1.5);
    fill(190,170,130)
    rect(0,height/2+49,width,80);
    fill(230,220,190)
    rect(0,height/2+129,width,140);
}

function updatedisplayDisk(){ //keep the sushi and disk display

    for(var i=0;i<disk.length;i++){
        disk[i].move();
        disk[i].display();
    }
}


function diskMove(){ //moving the disk by updating the speed 
    this.x += this.speed; 

}

function displayDisk(){ //drawing the disk 
    push();
    fill(this.color);
    //line(30,height/2-120,30,height/2+30)
    strokeWeight(2); //the ellipse of the plate 
    ellipse(this.x,this.disky,this.diskw,this.diskh);
    fill(120);
    noStroke();
    ellipse(this.x+5,this.disky+10,80,30); //shadow of the food 


    //deciding which food will be on the plate  
    if(this.food == roll){

        image(roll,this.x-230,50,roll.width*0.7,roll.height*0.8);  
        rectMode(CENTER);
        fill(250);

    }else if(this.food == fish){
        fill(0);
        image(fish,this.x-70,120,fish.width*0.8,fish.height*0.8);  
    } else{

        image(sushi,this.x-190,70,roll.width*0.6,roll.height*0.7);  

    }
    
    pop();


}
function displayLine(){

    push();
   
    //drawing the sushi trail 
    stroke(0);
    strokeWeight(2);
    for(var i=0; i<300;i++){
    var space = i*30
    line(linex+space,height/2-120,linex+space,height/2+30);
    }
    linex += speed
    pop();


}

function displayChopstick(){ //drawing of the chopstick 

    translate(-120,0);
    var chopx=190
    var chopy1= height/2+180
    var chopy2= height/2+192
    fill(90,80,70);
    noStroke();
    rect(chopx+17,chopy1-10,7,38);
    fill(120,120,70);
    rect(chopx+17,chopy1-10,7,33);
    strokeCap(ROUND);
    stroke(220,70,60);
    strokeWeight(6)
    line(chopx,chopy1,chopx+120,chopy1)
    line(chopx,chopy2,chopx+120,chopy2)
    stroke(20);
    line(chopx+90,chopy1,chopx+120,chopy1)
    line(chopx+90,chopy2,chopx+120,chopy2)
    stroke(190,190,20);
    strokeCap(SQUARE);
    line(chopx+85,chopy1,chopx+90,chopy1)
    line(chopx+85,chopy2,chopx+90,chopy2)
}

function displayChopstick1(){ //same chopstick drawing copyed to a different position 

    translate(220,0);
    var chopx=190
    var chopy1= height/2+180
    var chopy2= height/2+192
    fill(90,80,70);
    noStroke();
    rect(chopx+17,chopy1-10,7,38);
    fill(120,120,70);
    rect(chopx+17,chopy1-10,7,33);
    strokeCap(ROUND);
    stroke(220,70,60);
    strokeWeight(6)
    line(chopx,chopy1,chopx+120,chopy1)
    line(chopx,chopy2,chopx+120,chopy2)
    stroke(20);
    line(chopx+90,chopy1,chopx+120,chopy1)
    line(chopx+90,chopy2,chopx+120,chopy2)
    stroke(190,190,20);
    strokeCap(SQUARE);
    line(chopx+85,chopy1,chopx+90,chopy1)
    line(chopx+85,chopy2,chopx+90,chopy2)
}


function makeDisk(diskx){ //object of the disk 

    var disk = {x: diskx, 
                disky: 200,
                diskw: random(100,200),
                diskh: random(70,130),
                speed: -4.0,
                move: diskMove, 
                display:displayDisk,
                color: random(190,230),
                food: random([roll,fish,sushi])
    }

     return disk; 
}