Month: November 2017

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

enwandu-Project-10-Landscape

Landscape

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-10: Generative Landscape

var clouds = [];
var birds = [];
var frames = [];
var mS1 = 0.0003;
var mD1 = 0.03;
var mS2 = 0.0005;
var mD2 = 0.01;

function preload(){
    // Images for the bird flight cycle
    var filenames = [];
    filenames[0] = "https://i.imgur.com/RXatjYL.png";
    filenames[1] = "https://i.imgur.com/tUdWerm.png";
    filenames[2] = "https://i.imgur.com/4RK7a5B.png";
    filenames[3] = "https://i.imgur.com/tUdWerm.png";
    filenames[4] = "https://i.imgur.com/RXatjYL.png";
    filenames[5] = "https://i.imgur.com/yZgWcpm.png";
    filenames[6] = "https://i.imgur.com/wT9v4PU.png";
    filenames[7] = "https://i.imgur.com/0Ss2jc0.png";

    // Load images into frames array for birds
    for(i = 0; i < filenames.length; i++){
        frames[i] = loadImage(filenames[i]);
    }
}

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

function draw(){
    Sky(0, 0, width, height);
    makeMountain();
    makeBird();

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();

    updateAndDisplayBirds();
    addNewBirdsWithSomeRandomProbability();

    Airplane();
}

function Sky(x, y, w, h) {
    //Draws the gradient sky
    var c1, c2;

    c1 = color(251, 234, 192);
    c2 = color(118, 85, 45);
    for (var i = y; i <= y + h; i++) {
        var inter = map(i, y, y + h, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x + w, i);
    }
}
function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
    }
}

function updateAndDisplayBirds(){
    for (var i = 0; i < birds.length; i++){
    birds[i].move();
    birds[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;
}

function addNewCloudsWithSomeRandomProbability(){
    // Spawn a new cloud to the right edge of the canvas
    var newCloudLikelihood = 0.02; //clouds are spawned relatively often
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}

function addNewBirdsWithSomeRandomProbability(){
    // Spawn a new bird to the right edge of the canvas
    var newBirdLikelihood = 0.005; //birds spawn less frequently than the clouds
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width));
    }
}

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

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

function cloudDisplay() {
    var cHeight = this.altitude * 25;

    push();
    translate(this.x, height - 260);

    // Draws Clouds of various sizes
    fill(191, 175, 159);
    // Variables randomize the positioning and size of the clouds
    ellipse(0, -cHeight, this.breadth, cHeight-20);
    ellipse(-10, -cHeight+10, this.breadth*.8, cHeight-20);
    ellipse(25, -cHeight+5, this.breadth, cHeight-20);
    ellipse(15, -cHeight+15, this.breadth*1.2, cHeight-20);
    pop();
}

function birdDisplay(){
    push();
    translate(this.x, this.height);
    for (i = 0; i< this.size; i++){
      var frame = frameCount % 5; //cycles through bird images
      image(frames[frame + i],this.x-this.disX*i,0-this.disY*i);
  }
  pop();
}

function makeCloud(birthLocationX) {
    var clouds = {x: birthLocationX,
                breadth: 60,
                speed: -1.2,
                altitude: round(random(-1,2)),
                move: cloudMove,
                display: cloudDisplay}
    return clouds;
}

function makeBird(birthLocationX){
    var birds = {x: birthLocationX,
                disX: random(15, 40),
                disY: random(30),
                size:floor(random(1, 5)),
                speed: random(-5, -2),
                height: round(random(75, 100)),
                move: birdMove,
                display: birdDisplay}
    return birds;
}

function makeMountain(){
    // Generates the terrain
    // Larger background mountains
    noStroke();
    fill(98, 89, 79);
    beginShape();
    for(x1 = 0; x1 < width; x1++){
         var t1 = (x1 * mD1) + (millis() * mS1);
         var y1 = map(noise(t1), 0, 1, 0, height);
         vertex(x1, y1 - 10);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

    // Middlegorund mountains
    fill(63, 57, 53);
    beginShape();
    for(x2 = 0; x2 < width; x2++){
         var t2 = (x2 * mD2) + (millis() * mS2);
         var y2 = map(noise(t2), 0, 1, 0, height);
         vertex(x2, y2 + 80);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
}


function Airplane(){
    // Wing
    noStroke();
    fill(193, 173, 146);
    quad(401, 247, 176, 124, 208, 121, 454, 175);
    fill(67, 63, 52);
    quad(401, 247, 200, 146, 228, 143, 444, 232);
    fill(73, 58, 47);
    triangle(176, 124, 208, 121, 187, 129);
    fill(68, 39, 18);
    quad(176, 124, 208, 121, 158, 70, 147, 66);

    // Window Frame
    beginShape();
    noStroke();
    fill(23, 16, 16);
    vertex(0, 0);
    vertex(0, 320);
    vertex(480, 320);
    vertex(480, 0);
    vertex(450, 0);
    vertex(430, 158);
    vertex(426, 177);
    vertex(416, 203);
    vertex(400, 237);
    vertex(373, 270);
    vertex(350, 283);
    vertex(333, 290);
    vertex(295, 300);
    vertex(250, 307);
    vertex(211, 309);
    vertex(163, 302);
    vertex(121, 294);
    vertex(87, 275);
    vertex(56, 245);
    vertex(39, 203);
    vertex(20, 0);
    endShape();

    // Window Frame Highlight
    beginShape();
    noStroke();
    fill(86, 66, 59);
    vertex(0, 90);
    vertex(19, 214);
    vertex(31, 255);
    vertex(44, 277);
    vertex(59, 292);
    vertex(67, 299);
    vertex(86, 312);
    vertex(97, 320);
    vertex(81, 320),
    vertex(70, 312);
    vertex(51, 299);
    vertex(43, 292);
    vertex(28, 277);
    vertex(15, 255);
    vertex(0, 214);
    endShape();

    beginShape();
    vertex(480, 52);
    vertex(467, 109);
    vertex(456, 182);
    vertex(447, 226);
    vertex(428, 261);
    vertex(411, 279);
    vertex(378, 304);
    vertex(347, 320);
    vertex(363, 320);
    vertex(394, 304);
    vertex(427, 279);
    vertex(444, 261);
    vertex(463, 226);
    vertex(472, 182);
    vertex(480, 109);
    endShape();
}

I really wanted to show the view from a plane, because I love flying. I think there is something very calming about being in the air and I wanted my project to encapsulate this idea. Being in the air offers new perspectives, and I would love it if I could fly. Added some birds, clouds and mountains in the background.

elizabew- project – 10-landscape

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 10

var coralspeed = 0.0004;
var coralDetail = 0.005;
var largercoralspeed = 0.0001;
var largercoralDetail = 0.01;
var terrainSpeed = 0.0005;
var terrainDetail = 0.002;

var filearray = [];
var files = [
    "https://i.imgur.com/iWIzq30.png",//coral image
    "https://i.imgur.com/UaGovr7.png",//fish image
    "https://i.imgur.com/kzzaYE9.png"]//golden fish image
var corals = []; //5 every time
var fishes = []; //8 every time
var rarefishes = [];

function preload() {
  for (i = 0; i < files.length; i++){ //preload body
    filearray.push(loadImage(files[i]));
  }
}

function setup() {
	createCanvas(400, 400);
	frameRate(10);

  for(i = 0; i < 5; i++){
    corals.push(makeCoral()); //number of coral
  }
  for(i = 0; i < 8; i++){
    fishes.push(makeFish()); //number of fish
  }
  for(i = 0; i < 1; i++){
    rarefishes.push(makeRareFish()); //one gold fish
  }

}

function draw(){
	background(3,23,71);
	sandandcoral();

  for(i = 0; i < corals.length; i++){ //drawing and moving coral
    corals[i].draw();
    corals[i].move();
  }
  for(i = 0; i < fishes.length; i++){ //drawing and moving fish
    fishes[i].draw();
    fishes[i].move();
  }
  for(i = 0; i < rarefishes.length; i++){ //drawing and moving rarefish
  rarefishes[i].draw();
  rarefishes[i].move();
  }

  }


//rarefish

function makeRareFish(){
  var rarefish = { rimage: filearray[2],
            rxPos: random(0, width),//random initial x position
            ryPos: random(50, 200), //random y position
            rwidth: random(45, 80), //random width
            rheight: random(45, 70), //random height
            rSpeed: random(-2, -6), //random speed
          }
  rarefish.draw = drawRareFish; //calls to drawFish
  rarefish.move = moveRareFish; //calls to moveFish
  return rarefish;

}

function drawRareFish(){ //draws rare fish
  image(this.rimage, this.rxPos, this.ryPos, this.rwidth, this.rheight);

}

function moveRareFish(){ //moves rare fish
  this.rxPos += this.rSpeed;
  if (this.rxPos < 0){
    this.rxPos = width; //remakes fish once it hits the end
  }
}


//FISH

function makeFish(){
  var fish = { fimage: filearray[1],
            fxPos: random(0, width),//random initial x position
            fyPos: random(50, 250), //random y position
            fwidth: random(45, 80), //random width
            fheight: random(45, 70), //random height
            fSpeed: random(-2, -6) //random speed
          }
  fish.draw = drawFish; //calls to drawFish
  fish.move = moveFish; //calls to moveFish
  return fish;
}

function drawFish(){ //draws fish
  image(this.fimage, this.fxPos, this.fyPos, this.fwidth, this.fheight);

}

function moveFish(){ //moves fish
  this.fxPos += this.fSpeed;
  if (this.fxPos < 0){
    this.fxPos = width; //remakes fish once it hits the end
  }
}


//CORAL

 function makeCoral(){ //object coral
  var coral = { cimage: filearray[0],
            cxPos: random(0, width), //random initial x position
            cyPos: random(300, 350), //random y position
            cSize: random(35, 100), //random size
            cSpeed: random(-5, -10) //random speed
          }
  coral.draw = drawCoral; //calls to drawCoral function
  coral.move = moveCoral; //calls to moveCoal function
  return coral;
}


function drawCoral(){ //draw coral
  image(this.cimage, this.cxPos, this.cyPos, this.cSize, this.cSize);

}

function moveCoral(){ //moving coral
  this.cxPos += this.cSpeed;
  if (this.cxPos < 0){
    this.cxPos = width; //remakes coral once it hits the end
  }
}


//TERRAIN

function sandandcoral() {

  //larger coral background
  beginShape();
  noStroke();
  fill(2,13,39);
  for (var x = 0; x < width; x++) {
      var t = (x * largercoralDetail) + (millis() * largercoralspeed);
      var y = map(noise(t), 0,1, 300, height-400);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //coral background
  beginShape();
  noStroke();
  fill(37,62,103);
  for (var x = 0; x < width; x++) {
      var t = (x * coralDetail) + (millis() * coralspeed);
      var y = map(noise(t), 0,1, 400, height-250);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //sand
  beginShape();
  noStroke();
  fill(167,159,146);
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(t), 0,1, 300, height);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

}

 

I had a lot of difficulty with this project since I still wasn’t fully comfortable with making objects and I ran into a the issue of having too many ideas and not knowing how to implement all of them.

My initial idea was to randomize different colored fish with a shark appearing onlysometimes while pieces of coral moved by with the sand terrain.

My final idea only implements randomly sized fish, one randomly sized golden fish, and some coral that moves past with the changing terrain. However, I’m pretty happy with the final product. It doesn’t look the exact way I wanted it too, but happy accidents are okay too.

NatalieKS-Project10

sketch2

//Natalie Schmidt
//nkschmid@n=andrew.cmu.edu
//Section D
//Project-10-Generative Landscape

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
//x position of rock
var rx = 470;
//y position of rock
var ry = 280;
//array to store all the rainbow rocks
var clouds = [];

function setup() {
    createCanvas(480, 300);
    frameRate(10);
//load the clouds ito the array
//code came from example
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        clouds[i] = makeClouds(rx);
    }
    frameRate(10);
}

function draw() {
    background(32, 46, 71);
    noStroke();
    //draw clouds - came from example
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    //draw the moon
    fill(255, 255, 255, 220);
    ellipse(30, 30, 40);
    noFill();
    beginShape();
    //draw the terrains
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 10, height);
        //create 2 terrains so it looks dimensional
        vertex(x, y);
        vertex(x + 10, y);
        //fill the terrain with lines
        stroke(47, 73, 121, 80);
        line(x, y, x, height);
    }
    endShape();
//draw the "horizon"
    fill(32, 46, 71, 90);
    rect(0, 255, width, 45);
//draw the rocks
    rainbowRock1();
    rainbowRock2();
    rainbowRock3();
    rainbowRock4();
    rainbowRock5();
    rainbowRock6();
    rainbowRock7();

// if they disappear off screen, enter again
// from the right
    if (rx + 195 < 0) {
        rx = width;
    }
    else {
        rx -= 8;
    }

}

//draw the first stack of rocks
function rainbowRock1() {
    noStroke();
    fill(0);
    ellipse(rx, ry, 35, 30);
    fill(0, 0, 255);
    ellipse(rx, ry - 14, 35, 30);
    fill(236, 223, 21);
    ellipse(rx, ry - 28, 35, 30);
    fill(255);
    ellipse(rx, ry - 42, 35, 30);
    fill(255, 0, 0);
    ellipse(rx, ry - 56, 35, 30);
}

//draw the second stack
function rainbowRock2() {
    fill(21, 112, 49);
    ellipse(rx + 70, ry, 35, 30);
    fill(177, 157, 120);
    ellipse(rx + 70, ry - 14, 35, 30);
    fill(0);
    ellipse(rx + 70, ry - 28, 35, 30);
    fill(114, 113, 108);
    ellipse(rx + 70, ry - 42, 35, 30);
    fill(0, 0, 255);
    ellipse(rx + 70, ry - 56, 35, 30);
}

//draw third stack
function rainbowRock3() {
    fill(161, 52, 116);
    ellipse(rx + 110, ry, 35, 30);
    fill(255, 113, 151);
    ellipse(rx + 110, ry - 14, 35, 30);
    fill(255, 0, 0);
    ellipse(rx + 110, ry - 28, 35, 30);
    fill(255, 107, 59);
    ellipse(rx + 110, ry - 42, 35, 30);
    fill(216, 208, 28);
    ellipse(rx + 110, ry - 56, 35, 30);
    fill(14, 97, 36);
    ellipse(rx + 110, ry - 70, 35, 30);
}

//draw fourth stack
function rainbowRock4() {
    fill(213, 180, 30);
    ellipse(rx + 160, ry, 35, 30);
    fill(255, 107, 59);
    ellipse(rx + 160, ry - 14, 35, 30);
    fill(255, 0, 0);
    ellipse(rx + 160, ry - 28, 35, 30);
    fill(255, 97, 139);
    ellipse(rx + 160, ry - 42, 35, 30);
}

//draw fifth stack
function rainbowRock5() {
    fill(255, 97, 139);
    ellipse(rx + 220, ry, 35, 30);
    fill(209, 198, 174);
    ellipse(rx + 220, ry - 14, 35, 30);
    fill(0, 0, 255);
    ellipse(rx + 220, ry - 28, 35, 30);
    fill(213, 180, 30);
    ellipse(rx + 220, ry - 42, 35, 30);
}

//draw sixth stack
function rainbowRock6() {
    fill(157, 150, 130);
    ellipse(rx + 260, ry, 35, 30);
    fill(0);
    ellipse(rx + 260, ry - 14, 35, 30);
    fill(179, 31, 109);
    ellipse(rx + 260, ry - 28, 35, 30);
}

//draw seventh stack
function rainbowRock7() {
    fill(255, 0, 0);
    ellipse(rx + 310, ry, 35, 30);
    fill(179, 31, 109);
    ellipse(rx + 310, ry - 14, 35, 30);
    fill(0, 0, 255);
    ellipse(rx + 310, ry - 28, 35, 30);
    fill(14, 97, 36);
    ellipse(rx + 310, ry - 42, 35, 30);
    fill(217, 199, 33);
    ellipse(rx + 310, ry - 56, 35, 30);
    fill(255, 80, 49);
    ellipse(rx + 310, ry - 70, 35, 30);
}

//code below comes from example, modified to make clouds
//instead of buildings
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;
}

function addNewCloudsWithSomeRandomProbability() {
    var newCloudsLikelihood = 0.20;
    if (random(0, 1) < newCloudsLikelihood) {
        clouds.push(makeClouds(width));
    }
}

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

function cloudsDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;
    fill(66, 69, 85, 100);
    push();
    translate(this.x, height - 40);
    ellipse(0, -bHeight - 115, bHeight, this.breadth);
    pop();
}

function makeClouds(birthLocationX) {
    var cloud = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                nFloors: round(random(5, 12)),
                move: cloudsMove,
                display: cloudsDisplay}
     return cloud;
}

This project was really rough. I had a hard time using objects for this particular assignment, so I couldn’t really implement what I originally wanted. I’m okay with the final product, but it is a very simplified version of what I originally intended to make. I wish I had a better understanding of these functions, so I could better use them for my own purposes.

Here’s my original idea sketched out on paper:

Here’s also where my inspiration came from:

These are the “Seven Magic Mountains,” an installation in Nevada somewhere by the highway to Las Vegas. My family and I have driven from home (California) to Las Vegas several times, and we always pass by these enormous, brightly statues.

alchan-Project 10-Generative Landscape

sunken

var ruins = [];
var farRuins = [];
var fog = [];

var skyColor;


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

    for (var c = 0; c < 10; c++) {
      // populate arrays
      var ruinX = random(width);
      var farRuinX = random(width);
      ruins[c] = makeRuin(ruinX);
      farRuins[c] = makeFarRuin(farRuinX);
      for(var d = 0; d<2; d++){
        var fogX = random(width);
        fog[c] = makeFog(fogX);
      }
    }
    skyColor = color(220, 233, 239);

}

function draw() {
  background(skyColor);

  sunDraw();
  sunMove();

  fill(210, 223, 229);
  noStroke();
  rect(0, 180, width, 120);

  // draw the rest of the objects in the scene
  for(var i = 0; i < farRuins.length; i++) {
    farRuins[i].draw();
    farRuins[i].move();
  }

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

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

// FOG
function fogDraw() {
  push();
  translate(this.xPos, this.yOffset);
  stroke(255, 255, 255, 40);
  strokeWeight(this.fHeight);
  line(0, 0, this.fSize, 0);
  pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function fogMove() {
  this.xPos += this.speed;
  if(this.xPos < 0 - this.fSize - 30) {
    this.fHeight = random(10, 50);
    this.fSize = random(30, 150);
    this.xPos = width + this.fSize + random(-25, 25);
  }
}

function makeFog() {
  var fog = {xPos: random(width), //, width*4
                 speed: random(-0.4, -0.3),
                 fSize: random(30, 150),
                 fHeight: random(20, 60),
                 yOffset: random(50, height),
                 draw: fogDraw,
                 move: fogMove};
  return fog;
}
// END FOG

// SUN
var sun = {xPos: 20, size: 20, speed:.1};

function sunDraw() {
  var sunColor = color(234, 229, 228);
  noStroke();
  fill(252, 202, 191);
  ellipse(sun.xPos, 60, sun.size);

  // make a gradient, centered around the sun
  for (var s = 0; s <= width; s += 5) {
    var amt = map(s, 0, height, 0, 1);
    var gradient = lerpColor(sunColor, skyColor, amt);
    noFill();
    stroke(gradient);
    strokeWeight(5);
    ellipse(sun.xPos, 60, sun.size + s);
  }
}

function sunMove() {
  sun.xPos += sun.speed;
  if (sun.xPos > width + sun.size) {
    sun.xPos = 0 - sun.size;
  }
}
// END SUN

// RUINS
function ruinDraw(){
  push();
  translate(this.xPos - this.rWidth/2, height-40+this.yPosOffset);
  noStroke();
  fill(245, 245, 255);
  beginShape();
  vertex(0 + this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  // draw reflections
  scale(1, -1);
  fill(245, 245, 255, 60);
  beginShape();
  vertex(0 + this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function ruinMove(){
  this.xPos += this.speed;
  if (this.xPos < 0 - this.rWidth) {
    this.rHeight = random(15, 40);
    this.rWidth = random(10, 60);
    this.lean = random(0, 20);
    this.xPos = width + this.rWidth + this.lean + random(-5, 50);
  }
}

function makeRuin(x) {
  var ruin = {xPos: x,
              rHeight: random(15, 60),
              rWidth: random(10, 80),
              lean: random(0, 20),
              spike1: random(0, 10),
              valley1: random(0, 10),
              spike2: random(0, 10),
              valley2: random(0, 10),
              spike3: random(0, 10),
              valley3: random(0, 10),
              yOffset: random(-5, 5),
              yPosOffset: random(-15, 15),
              speed: random(-.4, -.5),
              draw: ruinDraw,
              move: ruinMove}
  return ruin;
}
// END RUINS

// FAR RUINS
function farRuinDraw(){
  push();
  translate(this.xPos - this.rWidth/2, height-90);
  noStroke();
  fill(233, 237, 244);
  beginShape();
  vertex(0 + this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  // draw reflections
  fill(233, 237, 244, 60);
  scale(1, -1);
  beginShape();
  vertex(0 + this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function farRuinMove(){
  this.xPos += this.speed;
  if (this.xPos < 0 - this.rWidth) {
    this.rHeight = random(50, 100);
    this.rWidth = random(40, 100);
    this.lean = random(0, 50);
    this.xPos = width + this.rWidth + this.lean + random(-5, 50);
  }
}

function makeFarRuin(x) {
  var farRuin = {xPos: x,
              rHeight: random(50, 100),
              rWidth: random(40, 100),
              lean: random(0, 50),
              spike1: random(0, 10),
              valley1: random(0, 10),
              spike2: random(0, 10),
              valley2: random(0, 10),
              spike3: random(0, 10),
              valley3: random(0, 10),
              yOffset: random(-15, 15),
              speed: random(-.4, -.2),
              draw: farRuinDraw,
              move: farRuinMove}
  return farRuin;
}
// END FAR RUINS

 I wanted to create a landscape that had something to do with water, and ended up going with icebergs or jagged ruins drifting through a pale sea. The size and shape of the icebergs are all randomly determined, as are the fog clouds. I had also wanted to extra “surprise” elements to the landscape (a sunken ship, and a glimpse of a sea serpent) but I ran out of time and wasn’t able to implement them the way I had planned.

hannajan-LookingOutwards-10

(Clip Above shows Kate Hollenbach’s User is Present)

For this week’s Looking Outward post, I reviewed Kate Hollenbach’s project named User is Present. I particularly liked this project because it is an art piece that examines the interaction between the human and the mobile phone. The experience is captured and presented in an artistic form. I admired how she skillfully combined the world of art and technology to convey a message about a merge between the two worlds. I feel like this was done well, as Hollenbach has an extensive background in studying both worlds of technology and design.

Kate Hollenbach is an artist, programmer, and educator based in Los Angeles, California. Kate has a MFA from UCLA Design Media Arts and a B.Sc. in Computer Science and Engineering from MIT. Her work includes developing and examining interactive systems and new technologies relating to body, gesture, and physical space.

hqq – LookingOutwards10 – sputniko!

Hi guys! This week, I’m profiling one of my favorite new media artists, Sputniko!. I met Sputniko! [sic] when I visited the MIT Media Lab where she is an instructor

a few years ago and learned a lot about her work as an artist working in a field dominated by men. Much of her work posits questions about these double standards. One of my favorite works of hers is a music video she created called Menstruation Machine.

^The music video project which combines computational story development with reproductive and trans-rights.

The music video tells the story of Takashi, a trans woman who, before undergoing transition, explores the idea of a post-transition lifestyle through understanding menstruation. She creates a “menstruation machine” to experience these. Though controversial, Sputniko! explored this issue while it was still uncomfortable for many to talk about while using people’s comments as an expose on how people react to such issues.

She uses computational effects throughout this video, and it succeeds in making a machinic flow throughout the video while creating a story that successfully does the same thing.

hqq – secE – project 10 – generative landscape

hamza

//hamza qureshi
//hqq@cmu.edu
//section e
//project 10: generative landscapes

var bird = []; //new index to draw image of bird
var frame = 0; //frames
var aspeed = 0.0005; //speeds for various cloud layers
var bspeed = 0.0007;
var cspeed = 0.0009;
var dspeed = 0.00099;
var change = 0.007;
var bchange = 0.009;
var cchange = 0.006;
var dchange = 0.005;

function preload(){
    var birdframes = []; //each frame of bird image
    birdframes[0] = "https://i.imgur.com/bQsrqmu.png"
    birdframes[1] = "https://i.imgur.com/K5dXjwK.png"
    birdframes[2] = "https://i.imgur.com/kK4kW4t.png"
    birdframes[3] = "https://i.imgur.com/K5dXjwK.png"

    for (var i = 0; i < birdframes.length; i++){
        bird.push(loadImage(birdframes[i])); //push bird frames into array
    }
}

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

function draw(){
    background(220,240,225);

    noStroke(); //shades of the sky
    fill(230, 240, 225);
    rect(0,width/5,width,height);
    fill(240,240, 200);
    rect(0, width/4, width, height);
    fill(250,241,185);
    rect(0,width/3,width,height);
    fill(255,208,121); //sun
    ellipse(width/2,height/2,200,200);

    backclouds(); //functions for the cloud layers
    backmiddle();
    frontmiddle();
    frontclouds();

//bird 1
    push();
    scale(0.4);
    image(bird[frameCount%4], 800, 100);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

//bird 2
    push();
    scale(0.1);
    image(bird[frameCount%4],1400, 1400);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

//bird 3
    push();
    scale(0.2);
    image(bird[frameCount%4], 1000, 1000);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

    //airplane wing
    push();
    noStroke();
    fill(255,150,150);
    triangle(360,200,420,240,370,160);
    fill(248);
    triangle(480,480,360,200,480,280);
    fill(254);
    triangle(360,200,480,280,480,210);

    //airplane window
    stroke(245);
    strokeWeight(70);
    noFill();
    rect(0,0,width,height,75,75);
    pop();

}

function backclouds(){ //back row of clouds
    push();
    noStroke();
    beginShape();
    fill(219,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*change) + (millis()*aspeed);
        var y = map(noise(k), 0,1, 190, height/2); //noise remaps change vs speed
        vertex(0, height); //to draw high and low-points in the shape
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function backmiddle(){ //repeated for middle
    push();
    noStroke();
    beginShape();
    fill(229,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*bchange) + (millis()*bspeed);
        var y = map(noise(k), 0,1, 260, height/2);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function frontmiddle(){
    push();
    noStroke();
    beginShape();
    fill(239,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*cchange) + (millis()*cspeed);
        var y = map(noise(k), 0,1, 320, height/2);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function frontclouds(){ //and repeated for end
    push();
    noStroke();
    beginShape();
    fill(249,246,249);
    for (var x = 0; x < width; x++){
        var k = (x*dchange) + (millis()*dspeed);
        var y = map(noise(k), 0,1, 500, height/3);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

For this project, I wanted to mimic a simulation of looking out of the window on an airplane. Thus, the “landscape” is actually a multi-layered blanket of clouds that move at varying speeds depending on its distance from the airplane. To get a bit more whimsical, I used image animations to show birds somehow flying alongside the plane – maybe they’re robots?

This was a fun method of creating a scene that was just interesting to watch over time, as the varying changes create different intensities of each of the layers.