Category: Project-10-Landscape

hschung-Project-10

When I thought about the term “generative landscape,” I was immediately taken back to a trip I took with my family to Las Vegas, and the vast, beautiful landscapes we’d seen as we drove through the desert. The mountains were large and far away, and the clouds were passing through the mountains. I thought I might do something like that for this project. I also wanted to have trees in the landscape. I also wanted to have sparkling stars, and that transformed into snowflakes. As I played with the trees, I ended up having them “shiver” in the cold, and also jump as if they were dancing. I got very playful as I thought it would be fun to have a more fantasy-like winter landscape. I think it’s funny that I depicted trees, dancing and alive, in a season where they are the least lively- and that dancing makes them seem as if they are enjoying the snow like humans do.

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project 10
var trees = [];
var Y_AXIS = 1;
var X_AXIS = 2;
var b1, b2, c1, c2;

function setup() {
  createCanvas(400, 400);
  //create an initial collection of clouds
  for (var i = 0; i < 6; i++) {
    var randomTreeX = random(width);
    trees[i] = makeTree(randomTreeX);
  }
  frameRate(10);
}

function draw() {
  background(52, 71, 106); //220, 160, 150 light peachy pink

  noStroke();
  mountains();
  displayHorizon();

  updateAndDisplayTrees();
  removeTreesThatHaveSlippedOutOfView();
  addNewTreesWithSomeRandomProbability();
  //makeSparkles(); //calling sparkle-making function //i called makeSparkles()
  //again in displayTrees() because that made more snowflakes appear..
  //i'm not sure why they don't appear as frequently when called from setup().
}

function mountains() {
  fill(120, 205, 205); //aqua mountain
  ellipse(240, 280, 500, 370);

  fill(0, 255, 255, 90);//leftmost mountain
  ellipse(-50, 380, 500, 500);

  fill(150, 180, 230); //lavender blue mountain
  ellipse(400, 380, 450, 250);
}

function updateAndDisplayTrees() {
  //update the tree's positions and display them
  for (var i = 0; i < trees.length; i++) {
    trees[i].move();
    trees[i].display();
  }
}

function removeTreesThatHaveSlippedOutOfView() {
  var treesToKeep = []; //copying the clouds i want to keep into a new array
  for (var i = 0; i < trees.length; i++) {
      if (trees[i].x + trees[i].breadth > 0) {
          treesToKeep.push(trees[i]);
    }
  }
  trees = treesToKeep; //keeping track of remaining clouds
}

function addNewTreesWithSomeRandomProbability() {
  var newTreeLikelihood = 0.005;
  if (random(0,1) < newTreeLikelihood) {
    trees.push(makeTree(width));
  }
}

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

function treeDisplay() {
  var treeHeight = 30*round(random(2, 8));
  var treeTopWidth = random(55, 80);

  fill(255, 90);
  stroke(0);
push();
  translate(this.x, height - 40);
  noStroke();
  ellipse(20, -treeHeight, treeTopWidth, treeHeight); //treetops
  stroke(151, 152, 157);
  strokeWeight(7);
  line(20, -treeHeight, 20, treeHeight + 20); //tree trunks
pop();

makeSparkles(); //calling it here because it makes snowflakes more frequent, than when setup() calls it
}

function makeSparkles() {
  var sparkleX = random(5, width); //sparkles
  var sparkleY = random(5, height-40);
  var sparkleWidth = random(5, 20);

  noStroke();
  fill(255, 90); //transparent snowflakes
  ellipse(sparkleX, sparkleY, sparkleWidth, sparkleWidth);
  fill(255); //opaque snowflakes with different randomness
  ellipse(random(5, width), random(5, height-40), sparkleWidth-3, sparkleWidth-3);
}

function makeTree(birthLocationX) {
  var shiveringTree = {x: birthLocationX,
            breadth: 50,
            speed: -1.0,
            //nFloors: round(random(2, 8)),
            move: treeMove,
            display: treeDisplay}
  return shiveringTree;
}

function displayHorizon() {
  stroke(0);
  //line(0, height - 40, width, height - 40);
  noStroke();
  // fill(255, 90); //100, 160, 160
  // rect(0, height-40, 500, height-40); //ground
  fill(255); //100, 160, 160
  rect(0, height-80, 500, height-40);
}

mountain and clouds sketch
As I was trying to decide if I should change from a pinkish color scheme to a bluish one, I used this image as inspiration.
A screenshot of the winter scene.

haewanp – Project 10 – Landscape

Generative Landscape

var angle = 0; //initial angle
var trees = [];
var bwTrees = 0;
var hillSpeed;

function setup() {
    createCanvas(480, 320);
    frameRate(10);
    hillSpeed = random(0.0001, 0.0005); 
    
    for (var i = 0; i < 10; i++){ //display 10 trees at the beginning
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
}

function draw() {
    background(202, 244, 235);
    drawHill(); 
    drawTree();
    addTree();
}


function drawHill() {
    beginShape();
    stroke(252, 242, 40);
    for (var x = 0; x < width; x++) {
        
        var y = 90 + sin(angle) * 30; //used sin graph shape
        line(width - x, y, width - x, height);
        angle = angle + PI/121; //increment of angle
    }
    endShape();
    
    stroke(255, 210, 200);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = x * 0.003 + (millis() * hillSpeed);
        var y = map(noise(t), 0, 0.8, 0, height);
        line(x, y, x, height);
    }
    endShape();
    
    beginShape();
    stroke(24, 44, 160);
    for (var x = 0; x < width; x++) {
        var y = 240 + sin(angle) * 30; //used sin graph shape
        line(width - x, y, width - x, height);
        angle = angle + PI/240; //increment of angle
    }
    endShape();
}

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

function makeTree(x) {
    var tree = {
        birth: x,
        size: random(20, 60),
        speed: -2.0,
        move: TreeMove,
        display: TreeDisplay,
        height: random(30, 60),
        color: [255, 62, 54]
    }
    
    return tree;
}

function TreeMove() {
    this.birth += this.speed;
}

function TreeDisplay() {
    var treeHeight = 50; 
    fill(this.color); 
    noStroke();
    push();
    translate(this.birth, height - this.height);
    ellipse(0, 0, this.size, this.size);
    stroke(255);
    strokeWeight(2);
    line(0, 0, 0, this.height);
    line(0, this.size/5, this.size/6, this.size/20);
    if (this.size > 30) {
        line(0, this.size/3, -this.size/6, this.size/6);
    }
    pop();
}

function addTree() {
    var newTree = 0.85; //percentage
    if (random(0,1) > newTree) {
        bwTrees = bwTrees + 1;
        if (bwTrees == 4) { // it controls distance between. Two trees are not too close to each other
            trees.push(makeTree(width)); //add a tree
            bwTrees = 0; //reset
        }
    }

}

This landscape consists of 3 layers of hills and trees. For 3 layers of hills, Perlin noise and sin graph were utilized as disciplines to depict the shape of hills. Trees are executed with a javascript object and have random sizes and heights. I added more branch based on the size of the tree. It is really fun to keep watching how it continuously changes and create different landscape be each second. Here is one of the nice screenshots below. Also, for color combination, I try not to use typical green colors of hill and tree. I rather explore more experimental colors for this landscape. I think people can clearly see that they are hill/mountain and trees even if it is not with the typical green colors.

rgroves – Landscape – Section B

sketch

//Rebecca Groves
//Section B
//rgroves@andrew.cmu.edu
//Landscape

var middlecacti = [];
var foregroundcacti = [];
var shrubs = [];
var buttes = [];

var MiddlegroundSpeed = .0003;
var MiddlegroundDetail = .004;
var ForegroundSpeed = .0005;
var ForegroundDetail = .005;

var middleTerrain = [];
var foregroundTerrain = [];

function setup() {
    createCanvas(480, 250);
    //pregenerated vegetation
    for (var i = 0; i < 4; i++) {
		buttes[i] = makeButte(random(width));
	}
	for (var i = 0; i < 5; i++) {
		middlecacti[i] = makeCactus(floor(random(width))); 
	}
	for (var i = 0; i < 3; i++) {
		foregroundcacti[i] = makeCactus(floor(random(width))); 
	}
	for (var i = 0; i < 100; i++) {
		shrubs[i] = makeShrub(random(width));
	}

}

//LANDSCAPES

function drawForeground() {
	noStroke();
	fill(223, 194, 140);
	beginShape();
	for (var x = 0; x <= width; x++) {
		var t = (x * ForegroundDetail) + (millis() * ForegroundSpeed);
		var y = map(noise(t), 0, 1, 2 * height/3, height);
		vertex(x,y);
		foregroundTerrain[x] = y;

	} 
	vertex(width, height);
	vertex(0, height);
	endShape();
	if (random(0, 1) < .003) {
		foregroundcacti.push(makeCactus(width))
	}
	for (var i = 0; i < foregroundcacti.length; i++) {
		foregroundcacti[i].move();
		foregroundcacti[i].foregrounddraw();
	}
}

function drawMiddleground() {
	noStroke();
	fill(210, 170, 100);
	beginShape();
	for (var x = 0; x <= width; x++) {
		var t = (x * MiddlegroundDetail) + (millis() * MiddlegroundSpeed);
		var y = map(noise(t), 0, 1, height/2, height);
		vertex(x,y);
		middleTerrain[x] = y;
	} 
	vertex(width, height);
	vertex(0, height);
	endShape();
	if (random(0, 1) < .005) {
		middlecacti.push(makeCactus(width))
	}
	for (var i = 0; i < middlecacti.length; i++) {
		middlecacti[i].move();
		middlecacti[i].middledraw();
	}
}

function drawBackground() {
	fill(230, 190, 90);
	noStroke();
	rect(0, 2 * height/3, width, height/3);

	if (random(0, 1) < .01) {
		buttes.push(makeButte(width))
	}
	for (var i = 0; i < buttes.length; i++) {
		buttes[i].move();
		buttes[i].draw();
	}
	if (random(0, 1) < .5) {
		shrubs.push(makeShrub(width))
	}
	for (var i = 0; i < shrubs.length; i++) {
		shrubs[i].move();
		shrubs[i].draw();
	}
}

//REMOVE UNUSED OBJECTS

function removeButtes() {
	var buttesToKeep = [];
	for (var i = 0; i < buttes.length; i++) {
		if (buttes[i].x + buttes[i].breadth > 0)
			buttesToKeep.push(buildings[i]);

	}
	buttes = buttesToKeep;
}

function removemiddleCacti() {
	var middlecactiToKeep = [];
	for (var i = 0; i < middlecacti.length; i++) {
		if (middlecacti[i].x > 0)
			middlecactiToKeep.push(middlecacti[i]);

	}
	middlecacti = middlecactiToKeep;
}

function removeforegroundCacti() {
	var foregroundcactiToKeep = [];
	for (var i = 0; i < foregroundcacti.length; i++) {
		if (foregroundcacti[i].x > 0)
			foregroundcactiToKeep.push(foregroundcacti[i]);

	}
	foregroundcacti = foregroundcactiToKeep;

}

//BUTTES

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

function drawButte() {
	beginShape();
	vertex(this.x + this.breadth, 2 * height/3);
	vertex(this.x + this.breadth, 2 * height/3);
	vertex(this.x + this.breadth - 10, (2 * height/3) - this.tall);
	vertex(this.x + 10, (2 * height/3) - this.tall);
	vertex(this.x, 2 * height/3);
	endShape();
	
}

function makeButte(birthlocationX) {
	var butte = {x: birthlocationX,
				breadth: random(40, 150),
				tall: random(10, 30),
				speed: -1,
				move: butteMove,
				draw: drawButte}
	return butte;
}

//VEGETATION

function cactusMove() {
	this.x -= 1;
}

function drawmiddleCactus() {
	strokeWeight(10);
	stroke('green');
	line(this.x, middleTerrain[this.x], this.x, middleTerrain[this.x] - this.height);
	for (i = 0; i < this.limbs; i++) {
		if (i%2 == 0) {	
			line(this.x - 10, middleTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, middleTerrain[this.x] - this.height/(1.25 * i));
		} else {
			line(this.x + 10, middleTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, middleTerrain[this.x] - this.height/(1.25 * i));

		}
	}
	noStroke();
	if (this.flowercolor < .3) {
		fill(236, 96, 160);
	} else if (this.flowercolor > .3 & this.flowercolor < .6) {
		fill(255, 255, 0);
	} else {
		noFill();
	}
	push();
	translate(this.x, middleTerrain[this.x] - this.height);
	rotate(-90);
	for (i = 0; i < 3; i++) {
		angleMode(DEGREES);
		var angle = 45;
		rotate(angle);
		angle += 45 * i;
		ellipse(0, -5, -7, 15);
	}
	pop();
	

}

function drawforegroundCactus() {
	strokeWeight(10);
	stroke('green');
	line(this.x, foregroundTerrain[this.x], this.x, foregroundTerrain[this.x] - this.height);
	for (i = 0; i < this.limbs; i++) {
		if (i%2 == 0) {	
			line(this.x - 10, foregroundTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, foregroundTerrain[this.x] - this.height/(1.25 * i));
		} else {
			line(this.x + 10, foregroundTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, foregroundTerrain[this.x] - this.height/(1.25 * i));
		}
	}
	noStroke();
	if (this.flowercolor < .3) {
		fill(236, 96, 160);
	} else if (this.flowercolor > .3 & this.flowercolor < .6) {
		fill(255, 255, 0);
	} else {
		noFill();
	}
	push();
	translate(this.x, foregroundTerrain[this.x] - this.height);
	rotate(-90);
	for (i = 0; i < 3; i++) {
		angleMode(DEGREES);
		var angle = 45;
		rotate(angle);
		angle += 45 * i;
		ellipse(0, -5, -7, 15);
	}
	pop();
}

function makeCactus(locationX) {
	var cactus = {x: locationX,
				height: random(20, 70),
				limbs: floor(random(1, 4)),
				middledraw: drawmiddleCactus,
				foregrounddraw: drawforegroundCactus,
				move: cactusMove,
				flowercolor: random(0, 1)}
	return cactus;
}

function shrubMove() {
	this.x += this.speed
}

function drawShrub() {
	fill(50, 100, 100);
	ellipse(this.x, this.y, 3, 3);
}

function makeShrub(locationX) {
	var shrub = {x: locationX, y: random(2 * height/3, height),
				speed: -1,
				draw: drawShrub,
				move: shrubMove}
	return shrub;
}

function draw() {
    background("skyblue");
    drawBackground();
    drawMiddleground();
	drawForeground();

}

For my landscape I was inspired by driving through New Mexico this summer. Unfortunately I could not figure out how make the cacti move at the same speed as the landscape. I borrowed the code for the landscape from the class website and I think maybe if I understood how that worked a little better I might have been able to make the speeds match. I will keep thinking about it. Other than that, I thought this project went pretty well. I’m glad I was finally able to figure out objects, even at a pretty basic level. I still find them confusing but I can use them!

jknip-Project-10-Landscape

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-10
*/

var buildings = [];
var bgroundpic = ["http://i.imgur.com/CSDbcLh.jpg"];
var peopleLinks = [
    "https://i.imgur.com/skan1Dj.png",
    "https://i.imgur.com/0U2pZMm.png",
    "https://i.imgur.com/ImJcxpz.png",
    "https://i.imgur.com/Rn3TxL7.png",
    "https://i.imgur.com/Ei7SzTG.png",
    "https://i.imgur.com/GTNpulP.png",
    "https://i.imgur.com/nn3qkQ7.png",
    "https://i.imgur.com/ue5JB8v.png",
    "https://i.imgur.com/mCbm0jb.png",
    "https://i.imgur.com/ZumluD7.png",
    "https://i.imgur.com/LuoUZNc.png",
    "https://i.imgur.com/Jv4Nw6g.png"];

var peoplepics = [];

//--------------------------------

function preload() {
    bground = loadImage(bgroundpic[0]);
    //preload photos from links
    for (i=0; i<peopleLinks.length; i++) {
        peoplepics.push(loadImage(peopleLinks[i]));
    }
}

//--------------------------------

function setup() {
    createCanvas(400, 400); 
    //randomize people order
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}

//--------------------------------

function draw() {
    background(0); 

    image(bground,0, 0, width,height-height/7);

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

    //draw escalator platform
    fill(color(243,245,241));
    noStroke();
    rect(50,370,300,10);

    //draw railings
    strokeWeight(6);
    stroke(color(112,168,166));
    noFill();
    rect(30, 326, 340, 55, 40, 365, 30, 355);
    noStroke();

}

//--------------------------------

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

//--------------------------------

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

//--------------------------------

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

//--------------------------------

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

//--------------------------------

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    image(peoplepics[this.type],0, -bHeight+24, this.breadth,bHeight);
    pop();
}

//--------------------------------

//define type as random to randomize people in flow
function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 90,
                speed: -3.0,
                nFloors: 8,
                type: floor(random(12)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

For this project, I wanted to recreate the scene of a moving sidewalk and passengers at an airport — through the use of a simple background, a silhouette of the sidewalk and found images of people. This was one of the first inspirations I had from seeing the reference material of the slow-paced horizontal movement. I went with a simple color palette with cooler hues to create consistency between the black, shades of blue in contrast with the color variety of people. I thought the most difficult part of implementation was shuffling the images randomly and getting them to display correctly in sync with motion.

atraylor – Project 10 – Section B

sketch

//atraylor
//Project 10, Section B

var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't','u', 'v', 'w', 'x', 'y', 'z', 'A', 'B',
'C', 'D', 'E', 'F','G', 'H', 'I', 'J', 'K','L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S','T','U','V', 'W', 'X', 'Y', 'Z'];
var symbols = ['!', '@', '#', '$', '%', '^', '&', '*', ')','(', '_', '-', '=',
'+', '~', '`', '[', ']', '{', '}', '|', '.', ',', '<', '>', '/', '?'];
var characters = [];
var grawlix = [];

function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(height);
        characters[i] = makeChar(rx, ry); //populate screen
    }
    for(var i = 0; i < 10; i ++){
        var ry = random(width);
        var rx = random(height);
        grawlix[i] = makeGrawlix(rx, ry);
    }
}

function draw() {
    background(0);
    updateAndDisplayChar();
    characterDeath();
    addRanProbChar();

    updateAndDisplayGraw();
    grawlixDeath();
    addRanProbGraw();
}
function updateAndDisplayChar(){
    for(var i = 0; i < characters.length; i++){ //draw and update characters
        characters[i].move();
        characters[i].draw();
    }
}
function characterDeath(){ //kill characters that go off screen
    var liveCharacters = [];
    for(var i = 0; i < characters.length; i++){
        if(characters[i].x + 50 > 0) {
            liveCharacters.push(characters[i]);
        }
    }
    characters = liveCharacters; //remember live
}

function addRanProbChar(){ //make more of the characters appear
    var prob = 0.1;
    if (random(0,1) < prob){
        characters.push(makeChar(width, random(height)));
    }
}

function charMove(){ //moving across screen
    this.x += this.speed;
}
function charDraw(){
    noStroke();
    textSize(this.csize);
    fill(this.charCol, 0, 0);
    text(this.symbol, this.x, this.y);

}

function makeChar(birthlocationx, birthlocationy){
    var char = {'x': birthlocationx,
        'y': birthlocationy,
        'charCol': pickColor(),
        'speed': pickSpeed(),
        'symbol': pickCharacter(),
        'csize':(-1 * pickSpeed() * 10),
        'move': charMove,
        'draw': charDraw}
    // char.move = charMove;
    // char.draw = charDraw;
    return char;
}
function pickCharacter(){
    return letters[int(random(letters.length))];
}
function pickColor(){
    return int(random(100, 255));
}

function pickSpeed(){
    return random(-1, -5);
}

////////

function updateAndDisplayGraw(){
    for(var i = 0; i < grawlix.length; i++){
        grawlix[i].move();
        grawlix[i].draw();
    }
}
function grawlixDeath(){
    var liveGrawlix = [];
    for(var i = 0; i < grawlix.length; i++){
        if(grawlix[i].gx + 50 > 0) {
            liveGrawlix.push(grawlix[i]);
        }
    }
    grawlix = liveGrawlix; //remember live
}
function addRanProbGraw(){
    var prob = 0.07;
    if (random(0,1) < prob){
        grawlix.push(makeGrawlix(width, random(height)));
    }
}

function grawMove(){
    this.gx += this.gspeed;
}

function grawDraw(){
    var frame = frameCount % 27; // go through all the symbols
    textSize(this.gsize);
    noStroke();
    fill(this.grawCol, 0, 0);
    text(symbols[frame],this.gx, this.gy);
}

function makeGrawlix(birthlocationx, birthlocationy){
    var graw = {'gx':birthlocationx,
        'gy':birthlocationy,
        'grawCol': pickGrawColor(),
        'gspeed': pickGrawSpeed(),
        'gsize': (-1 * pickGrawSpeed() * 10),
        'move': grawMove,
        'draw':grawDraw
    }
    return graw;
}

function pickGrawColor(){
    return random(100, 255);
}

function pickGrawSpeed(){
    return random(-1, -5);
}

 

For this project, I wanted to do something that would feel dimensional. I ended up making flying letters. I think I would have liked to add more material flying by, but I settled for the amount present for simplicity.

abradbur- Project 10 – Landscape

sketch

var buildings = [];

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

function setup(){
    createCanvas(480, 240);
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(20);
}

function draw(){
    background(98, 45, 107);
    noStroke();
    //moon + moonshine
    fill(216, 214, 243);
    ellipse(340,50,50);
    fill(216, 214, 243, 51);
    ellipse(340, 50, 60);
    //stars
    fill(255);
    for (var i = 0; i < 1000; i++) {
        ellipse(random(width), random(height), 1);
    }
    //mountains
    push();
    beginShape(); 
    fill(40, 17, 53);
    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); 
    }
    vertex(width, height);
    endShape();
    pop();

    //cabins
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 



}   

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


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


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


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(0); 
    stroke(0); 
    push();
    translate(this.x, height);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(254, 242, 103);
        rect(5, -15 - (i * floorHeight), this.breadth - 40, 10);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(0,2)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

I had a pretty difficult time parsing out the example code for this project, so I didn’t make it as extravagant as I had first hoped. As you can (kind of) see from my original sketch, I’d wanted to include trees and little creatures that popped out every once in a while. I wanted to make something that reminded me of the landscape back home, which is basically just mountains over mountains with tiny little lights blinking out from the homes of rich people. I have a lot of fond memories of driving through mountain neighborhoods at night. I actually made myself a little homesick with this project.

Original concept

hdw – Project 10 – Landscape

sketch

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}


function draw(){
  background(0, 29, 76);

//draw sun
  sun();

//draw landscape
    noStroke()
    fill(44, 0, 206);
    beginShape();
    for (var x = 0; x < width; x++) {
      var u = x * terrainDetail + millis() * terrainSpeed;
      //restrict map to bounded range
      var y = map(noise(u), 0,1, 110, height/2);
      //bring waves up
      vertex(x,y+100);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

//draw the lines in the front of the landscape
    for (var k = 0; k < 30; k++){
    stroke(255);
    beginShape();
    for (var x = 0; x <width*5; x++) {
      var u = x * terrainDetail + millis() * terrainSpeed;
      var y = map(noise(u), 0,1, 110, height/2);
      //make lines start left of each other, y modified to start beyond canvas
      vertex(x-5*k,y+100+5*k);
    }
    vertex(width*5,height);
    vertex(0,height);
    endShape();
}
}

//draw sun
function sun() {
  fill(255, 59, 0);
  ellipse(240,290,400,400);
  //white circle outlines
  for (var j = 0; j < 36; j++){
  noFill();
  stroke(255);
  strokeWeight(1);
  ellipse(240,290,400 + 10*j,400 + 10*j);
  }
}

This was kinda hard so I kept it simple. I have an object sun in the back, and layered the foreground to create a sense of depth, instead of doing so with different colors.

jamieh-project-10-landscape

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 10
*/

var clouds = [];
var skies = [];
var sunPos = 0;
var colour = 0;

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

    //to make and store clouds in array
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        clouds[i] = makeClouds(rx);
    }
    frameRate(10);
}

function draw() {
	noStroke();

	//environment outside of plane
	sky();
	theSun(sunPos);
	if(sunPos < width){		//condition statement for position of sun
		sunPos += 3;		//to move sun
		colour += 2;		//to change colour
	} else {				//go back to 0
		sunPos = 0;
		colour = 0;
	}

	updateAndDisplayClouds();
	addNewCloudsChances();

	//plane interiors
	windows(0);
	windows(width*0.7);
	planeInterior();
	seat(0);
	seat(width*0.7);
}

function windows(pos){
	fill(200, 200, 200, 50);
	rect(pos+width/6, height/4, pos+width/2, height);
	ellipseMode(CORNER);
	arc(pos+width/6, 0, width/2, width/2, PI, 0);
}

function seat(pos){
	noStroke();
	fill(150);
	rect(pos, height/3, width/8, height, 50);			//back rest
	fill(200);
	rect(pos, height*0.85, width/2, height, 25);		//seat
	fill(125);
	rect(pos+25, height*0.75, width/2.5, 25, 50);		//arm rest
	ellipseMode(CORNER);
	fill(100);										
	ellipse(pos+25, height*0.75, 25, 25)				//arm rest joint
	ellipseMode(CENTER);
	fill(200);
	ellipse(pos+width/8, height/2.5, 18, height/5);		//head rest
}

function planeInterior(){
	fill(80);
	rect(0, height*0.7, width, height);
}

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

function addNewCloudsChances() {
    // With a very tiny probability, add a new building to the end.
    var newCloudChances = 0.01; 
    if (random(0,1) < newCloudChances) {
        clouds.push(makeClouds(width));
    }
}

function removeBuildingsThatHaveSlippedOutOfView(){
    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 buildings
}

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

function cloudsDisplay(){
	var gs = random(240, 255);		//greyscale
	fill(gs, gs, gs, 50);
	ellipse(this.x, this.y, this.sizeX, this.sizeY);		//big clouds
	ellipse(this.x+5, this.y-100, this.sizeX*0.45, this.sizeY*0.25);	//small clouds
}

function makeClouds(birthLocationX){
	var clouds = {x: birthLocationX,					//where it starts
				  y: random(height*0.35, height*0.7),	//vertical position
				  speed: random(-0.5, -1),				//speed of each cloud
				  breadth: 35,							//distance between clouds
				  sizeX: random(120, 200),				//size of ellipse
				  sizeY: random(60, 100),
				  move: cloudsMove,						//to animate clouds
				  show: cloudsDisplay};					//to create clouds
	return clouds;
} 

function sky(){
	var factor = 0.5;								//factor to decrease rbg values by
	for(var i = 0; i<width; i++){
		var f = i*factor;							//rbg decreases incrementally based on i
		fill(230-f, 247-f, 255-f);					
		skies.push(rect(i, 0, i+1, height*0.7));	//creating sky rectangles
	}
}


function theSun(x){
	var sSize = 100;
	ellipseMode(CORNER);
	fill(255+colour, 204+colour, 0+colour, 255-colour/2);
	ellipse(x, height/16, sSize, sSize);
}

The hardest part of this project is still understanding objects and keeping track of where those parameters go within all the different functions that are then called in draw. I started the project with drawing what was still, then putting in what moved. However, I think I should have done what moved first as it was in the background and it requires more time to figure out. I wanted to show more to the moving landscape based on the changing time of day during a long flight, but I couldn’t figure out how to do a moving gradient sky and just kept it as a gradient.

Sketch of what’s still and what’s moving

eeryan-project-10-Landscape

sketch

var lamps = [];
var stars = [];


function setup() {
    createCanvas(480, 280); 
    
    // create an initial collection of objects
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        lamps[i] = makeLamp(rx);
        stars[i] = makeStar(rx);
    }
    frameRate(10);
}


function draw() {
    background(37, 33, 90); 
    noStroke();
    fill(209, 215, 41);
    rect(0,height - 100,width,100);//ground
    fill(195,206,60);
    rect(0,height - 70, width, 70);
    fill(181,200,52);
    rect(0,height - 40, width, 40);

    updateAndDisplayLamps();
    removeLampsThatHaveSlippedOutOfView();
    addNewLampsWithSomeRandomProbability();
    
    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability(); 
    for(var i = 190; i < height; i+=10){//draws lines in the foreground
      stroke(181,200,52);
      strokeWeight(1.5);
      line(0, i, width, i);
    }
}


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

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

function removeLampsThatHaveSlippedOutOfView(){
    // takes away lamps once they leave the frame
    var lampsToKeep = [];
    for (var i = 0; i < lamps.length; i++){
        if (lamps[i].x + lamps[i].breadth > 0) {
            lampsToKeep.push(lamps[i]);
        }
    }
    lamps = lampsToKeep; // remember the surviving buildings
}

function removeStarsThatHaveSlippedOutOfView(){
//removes stars from array stars and puts them in new array
//once they've moved off the edge of frame
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep; // remember the surviving stars
}

function addNewLampsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newLampLikelihood = 0.013; 
    if (random(0,1) < newLampLikelihood) {
        lamps.push(makeLamp(width));
    }
}

function addNewStarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newStarLikelihood = 0.02; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}

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

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

// draws lamps
function lampDisplay() {
    fill(255,255,0,45);
    noStroke()
;    ellipse(this.x, height -100 - this.h,this.r,this.r); //halo of light from lamp
    fill(102,166,218);
    rect(this.x-1.5, height - 100 - this.h, this.breadth, this.h); //lamp post
    fill(255);
    ellipse(this.x, height - 100 - this.h, this.r2, this.r2); //lightbulb
    stroke(255);
    strokeWeight(0.5);
    noFill();
    quad(this.x - 1.5, height - 97 - this.h,
        this.x - 5, height - 110 - this.h,
        this.x + 5, height - 110 - this.h, 
        this.x + this.breadth - 1.5, height - 97 - this.h); //draws the lamp box
}

function starDisplay(){
  //halo of light around star
  noStroke();
  fill(255, 255, 0, 30);
  ellipse(this.x + this.breadth/2, this.h, this.breadth * 5, this.breadth * 5);
  stroke(255,255,0);
  strokeWeight(0.5);
  noFill();
  //draws diamonds that make up star
  quad(this.x, this.h,
       this.x + this.breadth / 2,this.h - this.tall / 2,
       this.x + this.breadth, this.h,
       this.x + this.breadth / 2,this.h + this.tall / 2);
  //quad(this.x - this.breadth / 2, this.h,
       //this.x + this.breadth, this.h + this.tall / 2,
       //this.x + this.breadth / 2, this.h,
       //this.x + this.breadth / 2, this.h - this.tall/2);
}


function makeLamp(posX) {
    var lamp = {x: posX,
                breadth: 3,
                speed: -1.5,
                h: random(40,60),
                r: random(20,35),
                r2: 4,
                move: lampMove,
                display: lampDisplay}
    return lamp;
}

function makeStar(posX) {
    var star = {x: posX,
                breadth: 3,
                speed: -0.5,
                tall: random(5,10),
                h: random(20, 100),
                move: starMove,
                display: starDisplay}
    return star;
}

this was my original mock up in illustrator, but I struggled to get the building code to do what I wanted it to, so I decided to add other elements to supplement my lamps, so I added star objects, and made the foreground more detailed.

ssharada-project10-landscape

project10.js

//shariwa sharada
//ssharada@andrew.cmu.edu
//section a
//project 10 

//initiallising all my speed and position variables
var option = 1

var centerX = 125
var centerX2 = 125  
var centerX3 = 125
var centerX4 = 0
var centerX5 = 0
var centerX6 = 0
var centerX7 = 0
var centerX8 = 0
var centerX9 = 0
var centerX10 = 125
var centerX11 = 125

var moveX = 1
var moveX2 = 1.5
var moveX3 = 0.5
var moveX4 = 1
var moveX5 = 1.5
var moveX6 = 0.5
var moveX7 = 1
var moveX8 = 1.5
var moveX9 = 0.5

function setup(){
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw(){ 
//calling the object functions 
//using conditionals to change the face type with a click   
    if (option == 1){
        background(155, 13, 33);
        eyeType1();
        noseType1();
        lipType1(); 
    }
    
    else if (option == 2){
        background(255);
        eyeType2();
        noseType2();
        lipType2();
    }
    
    else if (option == 3){
        background(2);
        eyeType3();
        noseType3();
        lipType3(); 
    }
}

//creating teh yellow eyes 
function eyeType1(){

    push();
    centerY = 85
    //causing the objects to rebound when they hit the edges
    centerX += moveX
    if(centerX > 300){
        moveX = random(-4.5, -1)
    }
    if (centerX <-300) {
        moveX = random(0.5, 2)
    }

    //translating and scaling the same object to create the whole image
        stroke(254, 194, 15);
        noFill();
        push();
        translate(centerX +40,centerY-2.5);
        strokeWeight(3.25)
        eye1LinesTop();
        pop();

        push();
        translate(centerX +40,centerY-2.5);
        rotate(180)
        strokeWeight(3.25)
        eye1LinesTop();
        pop();

        push();
        translate(40, 0);
        eye1Center();
        pop();

        push();
        translate(200,20);
        scale(0.75,0.75);
        rotate(5);
            push();
            translate(centerX + 40,centerY-2.5);
            strokeWeight(3.25)
            eye1LinesTop();
            pop();

            push();
            translate(centerX +40,centerY-2.5);
            rotate(180)
            strokeWeight(3.25)
            eye1LinesTop();
            pop();

            push();
            translate(40, 0);
            eye1Center();
            pop();
        pop();
    pop();   
}
//creating the yellow arcs
    function eye1LinesTop(){
            arc(0,0,160,90, 180, 0);
            strokeWeight(3)
            arc(0,0,150,80, 180, 0);
            strokeWeight(2.75);
            arc(0,0,140,70, 180, 0);
            strokeWeight(2.5);
            arc(0,0,130,60, 180, 0);
            strokeWeight(2.25);
            arc(0,0,120,50, 180, 0);
            strokeWeight(2);
            arc(0,0,110,40, 180, 0);
    }
//creating the centre circles
    function eye1Center(){
            strokeWeight(0.5);
            ellipse(centerX,centerY-5, 5,1);
            strokeWeight(0.75);
            ellipse(centerX,centerY-5, 10,6);
            strokeWeight(1.0);
            ellipse(centerX,centerY-5, 15,11);
            strokeWeight(1.25);
            ellipse(centerX,centerY-5, 20,16);
            strokeWeight(1.5);
            ellipse(centerX,centerY-5, 25,21);
            strokeWeight(1.75);
            ellipse(centerX,centerY-5, 30,26);
    }

function noseType1(){
    push();
    centerX2 -= moveX2
    if(centerX2 > 500){
        moveX2 = random(0.5, 2)
    }
    if (centerX2 <-300) {
        moveX2 = random(-4.5, -2.5)
    }
        strokeWeight(3.5);
        stroke(254, 194, 15);
        beginShape();
        noseLinesType1();
        endShape();

        strokeWeight(3.25);
        push();
        scale(0.85);
        translate(42, 48)
        beginShape();
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(3.0);
        push();
        scale(0.75);
        translate(78, 89)
        beginShape();
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(2.75);
        push();
        scale(0.65);
        translate(128, 145)
        beginShape();
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(2.5);
        push();
        scale(0.55);
        translate(193, 220)
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(2.25);
        push();
        scale(0.45);
        translate(290, 330)
        noseLinesType1();
        endShape();
        pop();
    pop();
}
    function noseLinesType1(){
        noFill();
        beginShape();
        curveVertex(centerX2+112, 181);
        curveVertex(centerX2+112, 181);
        curveVertex(centerX2+117, 195);
        curveVertex(centerX2+120, 202);
        curveVertex(centerX2+127, 218);
        curveVertex(centerX2+134, 231);
        curveVertex(centerX2+139, 241);
        curveVertex(centerX2+147, 255);
        curveVertex(centerX2+154, 268);
        curveVertex(centerX2+159, 279);
        curveVertex(centerX2+161, 284);
        curveVertex(centerX2+160, 290);
        curveVertex(centerX2+158, 292);
        curveVertex(centerX2+153, 296);
        curveVertex(centerX2+147, 299);
        curveVertex(centerX2+128, 300);
        curveVertex(centerX2+108, 295);
        curveVertex(centerX2+108, 295);
        endShape();
    }

function lipType1(){
    centerX3 += moveX3
    if(centerX3 > 300){
        moveX3 = random(-4.5, -1)
    }
    if (centerX3 <-300) {
        moveX3 = random(1, 4)
    }

    push();
    translate(20, -20);
    arrayLip1Lines();
    pop();

    push();
    translate(20, 805)
    scale(1,-1)
    arrayLip1Lines();
    pop();


    noFill();
    stroke(254, 194, 15);
    strokeWeight(2);
    push();
    translate(35, -23);
    rotate(2)
    beginShape();
    curveVertex(centerX3-27, 413);
    curveVertex(centerX3-27, 413);
    curveVertex(centerX3+4, 411);
    curveVertex(centerX3+30, 407);
    curveVertex(centerX3+44, 410);
    curveVertex(centerX3+58, 413);
    curveVertex(centerX3+102, 400);
    curveVertex(centerX3+132, 409);
    curveVertex(centerX3+161, 413);
    curveVertex(centerX3+192, 404);
    curveVertex(centerX3+192, 404);
    endShape();
    pop();
}
    function lip1Lines(){
        beginShape();
        curveVertex(centerX3-27, 412);
        curveVertex(centerX3-27, 412);
        curveVertex(centerX3+20, 386);
        curveVertex(centerX3+55, 369);
        curveVertex(centerX3+61, 366);
        curveVertex(centerX3+71, 365);
        curveVertex(centerX3+85, 370);
        curveVertex(centerX3+92, 374);
        curveVertex(centerX3+100, 375);
        curveVertex(centerX3+105, 370);
        curveVertex(centerX3+115, 365);
        curveVertex(centerX3+124, 367);
        curveVertex(centerX3+140, 376);
        curveVertex(centerX3+158, 388);
        curveVertex(centerX3+193, 412);
        curveVertex(centerX3+193, 412);
        endShape();
    }
    function arrayLip1Lines(){
        noFill();
        stroke(254, 194, 15);
        strokeWeight(3.5)
        lip1Lines();

        push();
        translate(22, 60);
        scale(0.9, 0.85)
        lip1Lines();
        pop();

        push();
        translate(45, 120);
        scale(0.8, 0.7)
        lip1Lines();
        pop();


        push();
        translate(66, 160);
        scale(0.7, 0.6)
        lip1Lines();
        pop();

        push();
        translate(87, 200);
        scale(0.6, 0.5)
        lip1Lines();
        pop();

        push();
        translate(110, 240);
        scale(0.5, 0.4)
        lip1Lines();
        pop();
    }

function eyeType2(){
    push();
    centerX4 += moveX4
    if(centerX4 > 200){
        moveX4 = random(-4.5, -1)
    }
    if (centerX4 <-200) {
        moveX4 = random(1, 4)
    }
        push();
        translate(centerX4, 0);

            noFill();
            strokeWeight(7);
            stroke(0);
            strokeCap(ROUND);
            arc(140, 95,120,50, 5, 175);
            arc(320, 95,120,50, 5, 175);
            arc(320, 95,120,50, 175, 5);
            
            ellipse(320, 95,25,25);

            line(80, 119, 90, 109);
            line(97, 131, 105, 115);
            line(120, 137, 124, 122);
            line(147, 138, 145, 123);
            line(175, 133, 169, 121);
            line(197, 123, 189, 113);


            push();
            translate(467,178)
            rotate(175);
            line(80, 119, 90, 109);
            line(97, 131, 105, 115);
            line(120, 137, 124, 122);
            line(147, 138, 145, 123);
            line(175, 133, 169, 121);
            line(197, 123, 189, 113);
            pop();
        pop();
    pop();
}

function noseType2(){
    push();
        centerX5 -= moveX5
        if(centerX5 > 400){
            moveX5 = random(1, 4)
        }
        if (centerX5 <0) {
            moveX5 = random(-4.5, -1)
        }
        push();
        translate(centerX5, 0);
            stroke(0);
            strokeWeight(5);
            noFill();
            beginShape();
            curveVertex(49, 161);
            curveVertex(49, 161);
            curveVertex(52, 190);
            curveVertex(63, 273);
            curveVertex(73, 321);
            curveVertex(73, 321);
            endShape();
        pop();
    pop();
}

function lipType2(){
    push();
    centerX6 += moveX6
    if(centerX6 > 300){
        moveX6 = random(-4.5, -1)
    }
    if (centerX6 <-300) {
        moveX6 = random(0.5, 2)
    }
        push();
        translate(centerX6, 0);
            stroke(0);
            push();
            scale(0.5,0.5);
            translate(250, 400);
                strokeWeight(15);
                push();
                translate(-20, -20);
                lip2Lines();
                pop();

                push();
                translate(400, 805)
                scale(-1,-1)
                lip2Lines();
                pop();

                noFill();
                push();
                translate(-5, -23);
                rotate(2)
                beginShape();
                curveVertex(98, 413);
                curveVertex(98, 413);
                curveVertex(129, 411);
                curveVertex(155, 407);
                curveVertex(169, 410);
                curveVertex(183, 413);
                curveVertex(227, 400);
                curveVertex(257, 409);
                curveVertex(286, 413);
                curveVertex(317, 404);
                curveVertex(317, 404);
                endShape();
                pop();
            pop();
        pop();
    pop();
}

    function lip2Lines(){
        beginShape();
        curveVertex(centerX11-27, 412);
        curveVertex(centerX11-27, 412);
        curveVertex(centerX11+20, 386);
        curveVertex(centerX11+55, 369);
        curveVertex(centerX11+61, 366);
        curveVertex(centerX11+71, 365);
        curveVertex(centerX11+85, 370);
        curveVertex(centerX11+92, 374);
        curveVertex(centerX11+100, 375);
        curveVertex(centerX11+105, 370);
        curveVertex(centerX11+115, 365);
        curveVertex(centerX11+124, 367);
        curveVertex(centerX11+140, 376);
        curveVertex(centerX11+158, 388);
        curveVertex(centerX11+193, 412);
        curveVertex(centerX11+193, 412);
        endShape();
    }

function eyeType3(){
    centerX7 += moveX7
    if(centerX7 > 200){
        moveX7 = random(-4.5, -1)
    }
    if (centerX7 <-200) {
        moveX7 = random(1, 4)
    }
    push();
    translate(centerX7, 0)
        push();
        scale(1.15, 1.15);
        translate(-25, -20);
            noFill(25);
            stroke(185, 82, 159);
            strokeWeight(2);
            line(83, 118, 154, 91);
            line(154, 91, 213, 98);
            line(213, 98, 212, 105);
            line(212, 105, 154, 97);
            line(154, 97, 83, 118);

            line(263, 106, 262, 100);
            line(262, 100, 321, 91);
            line(321, 91, 393, 118);
            line(393, 118, 322, 98);
            line(322, 98, 263, 106);

            push();
            rotate(4);
            translate(15, -10)
            strokeWeight(1);
            strokeCap(SQUARE)
            line(150, 135, 200, 135);
            strokeWeight(3);
            line(140, 125, 200, 125);
            pop();

            push();
            rotate(-4);
            translate(-20, 20)
            strokeWeight(1);
            strokeCap(SQUARE)
            line(275, 135, 330, 135);
            strokeWeight(3);
            line(275, 125, 335, 125);
            pop();
        pop();
    pop();
}

function noseType3(){
    centerX8 -= moveX8
    if(centerX8 > 200){
        moveX8 = random(1, 4)
    }
    if (centerX8 <-200) {
        moveX8 = random(-4.5, -1)
    }
    push();
    translate(centerX8, 0)
        push();
        scale(0.95);
        translate(20, 10);
            noFill(25);
            stroke(111, 204, 221);
            strokeWeight(3);
            beginShape();
            curveVertex(241, 173);
            curveVertex(241, 173);
            curveVertex(248, 229);
            curveVertex(268, 301);
            curveVertex(270, 310);
            curveVertex(268, 311);
            curveVertex(245, 308);
            curveVertex(225, 314);
            curveVertex(225, 314);
            endShape();

            strokeWeight(1);
            beginShape();
            curveVertex(235, 302);
            curveVertex(235, 302);
            curveVertex(245, 299);
            curveVertex(257, 301);
            curveVertex(257, 301);
            endShape();
        pop();
    pop();
}

function lipType3(){
    centerX9 += moveX9
    if(centerX9 > 200){
        moveX9 = random(-4.5, -1)
    }
    if (centerX9 <-200) {
        moveX9 = random(1, 4)
    }
    push();
    translate(centerX9, 0);
        push();
        scale(0.6, 0.5);
        translate(175, 350);
        noFill();
        stroke(246, 236, 19);
            strokeWeight(3);
            push();
            translate(20, -20);
            lip3Lines();
            pop();

            push();
            translate(437, 805)
            scale(-1,-1)
            lip3Lines();
            pop();


            noFill();
            strokeWeight(2);
            push();
            translate(35, -23);
            rotate(2)
            beginShape();
            curveVertex(98, 413);
            curveVertex(98, 413);
            curveVertex(129, 411);
            curveVertex(155, 407);
            curveVertex(169, 410);
            curveVertex(183, 413);
            curveVertex(227, 400);
            curveVertex(257, 409);
            curveVertex(286, 413);
            curveVertex(317, 404);
            curveVertex(317, 404);
            endShape();
            pop();
        pop();
    pop();
}
    function lip3Lines(){
        beginShape();
        curveVertex(centerX10-27, 412);
        curveVertex(centerX10-27, 412);
        curveVertex(centerX10+20, 386);
        curveVertex(centerX10+55, 369);
        curveVertex(centerX10+61, 366);
        curveVertex(centerX10+71, 365);
        curveVertex(centerX10+85, 370);
        curveVertex(centerX10+92, 374);
        curveVertex(centerX10+100, 375);
        curveVertex(centerX10+105, 370);
        curveVertex(centerX10+115, 365);
        curveVertex(centerX10+124, 367);
        curveVertex(centerX10+140, 376);
        curveVertex(centerX10+158, 388);
        curveVertex(centerX10+193, 412);
        curveVertex(centerX10+193, 412);
        endShape();
    }
//changing the options to respond to the image press
function mousePressed(){
    option++;
    if (option > 3) {
        option=1
    }
}

For this project I chose to use the ‘landscape’ of a face and using different portraits that moved around differently according to different given dimensions. With each mouse click you can change the type of portrait drawing that appears. Each portrait uses a different artistic quality to be drawn and in a way depicts the changing nature of the portrait like landscape.

For this project I wanted to play around with creating objects and figuring out ways to call them in the draw function and found this to be a project that really helped me understand methods of doing that. I used different object call systems for the eyes, noses, and lips on each of the portraits.


^initially I wanted the objects to appear like a film strip rather than having to be clicked through