Month: November 2016

sketch

/*Emma Shi
eyshi@andrew.cmu.edu
Section B
Project 10
*/

var waveSpeed = 0.0002;
var waveDetail = 0.002;
var waves = 4;
var waveHeight = 0;
var deepColor;
var lightColor;
var clouds = [];

function setup() {
  createCanvas(500, 300);
  frameRate(20);

  for (var i=0; i<5; i++){ 
    var rx = random(width);
    var ry = random(height - 100);
    clouds[i] = new Clouds(rx, ry);
    }  
}
 
function draw() {
  
  drawBackground();
  drawSun();
  drawWaves();
  updateAndDisplayClouds();
  removeCloudsThatAreOutOfView();
  addNewCloudsWithSomeRandomProbability(); 

}

function drawBackground() {
  for (var i = 0; i < 50; i++) {
    noStroke();
    var rBackground = 167 + i;
    var gBackground = 209 + i;
    var bBackground = 241 + i
    fill(rBackground, gBackground, bBackground);
    rect(0, i, width, height);
  }//draws background/sky with some color gradient
}

function drawWaves() {
  var deepColor = color(22, 104, 180);
  var lightColor = color(15, 153, 189);

  for (j = 0; j < waves; j++) {
    noStroke(); 
    fill(lerpColor(deepColor, lightColor, j/(waves - 1)));
    beginShape(); 
    for (var x = 0; x < width; x++) {
      var t = (x * waveDetail) + (millis() * waveSpeed);
      var y = map(noise(t * j/waves, waveHeight), 0, 1, 70*j, height);
      vertex(x, y); 
    }
      waveHeight += 0.0008;
      vertex(width, height);
      vertex(0, height);
      endShape(CLOSE);
  }//draws four waves
}

function drawSun() {
  noStroke();
  fill(240, 170, 77);
  ellipse(width/2, height/2, 200, 200);
}//draws sun

function updateAndDisplayClouds() {
  for (var k = 0; k < clouds.length; k++) {
    clouds[k].move();
    clouds[k].display();
    }//updates and displays cloud positions
}

function removeCloudsThatAreOutOfView() {
  for (var l = 0; l < clouds.length; l++) {
    if (clouds[l].x < 0-clouds[l].breadth) {
        clouds.splice(l, 1); 
    }
  }
}//removes clouds that disappear from the view

function addNewCloudsWithSomeRandomProbability() {
  var newCloudLikelihood = 0.003; 
  if (random(0, 1) < newCloudLikelihood) {
    clouds.push(new Clouds (width, random(height - 200)));
  }
}//adds a new cloud to the end with a small probability

function Clouds (birthLocationX, birthLocationY){
  this.x = birthLocationX;
  this.y = birthLocationY;//birth location of clouds

  this.speed = -0.7;//speed of clouds
  
  this.move = function() {
  this.x += this.speed;
  }//clouds change position
    
  this.display = function() { 

  push();
  translate(this.x, this.y);
  fill(255); 
  stroke(255); 
  ellipse(10, 10, 40, 10);
  fill(240);
  stroke(240);
  ellipse(3, 6, 30, 7);
  pop();
  }//draws clouds
}

I originally thought about doing a landscape of the city, but amidst the stress from schoolwork and other activities, I thought doing an calming ocean landscape might be more relaxing. I started out by sketching the very basic landscape and listing out some ideas I had on what it could look like (i.e. using birds or clouds as the JavaScript object, or depicting a sunrise/sunset). I also wanted to originally use the mousePressed function to allow the user to click the mouse and change the background from sunrise to sunset, but unfortunately I couldn’t get it to cooperate.

This project was a lot of fun. I had trouble at first, but it got easier as I worked on it. I was inspired by pac man and video games in general, and so I tried to reflect retro video game pixels in the background and put pac man and the ghosts that follow him as my objects. As you can see, they become a random size each time they cycle through.

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Generative landscape

//initialize variables for background pixels
var m = 1;
var s = 20;
var y = 100;

//create variable for pacman to be an object
//move = x location, b = y location, r = ellipse size
var pacman = {move: 10, b: 200, r: 100}; 

//create variable for ghost to be an object
//go = x location, chase = y location, r = ellipse size
var ghost = {go: 1, chase: 200, r: 100};

//initialize distance variables
var dist1;
var dist2;
var dist3;

  

function setup() {
    createCanvas(600, 400);
    //make pixels move quickly across screen
    frameRate(50);
}

function draw() {
    background(0);

    //repeats pixelate to have multiple pixels in background
    for (var r = 0; r < 20; r++) {
        pixelate();    
    }
    
    //create pacman and ghosts
    createPacman();  
    createGhostOne();
    createGhostTwo();
    createGhostThree(); 
    
    //restablish fill for background pixels
    fill(random(1,255), random(1, 255), random(1, 255));   

}

function pixelate() {
    //reassign pixel vairables so m moves by 10
    //and reassign y so that it is randomized
    m = m + 10;
    y = random(1,400);
    //draw rectangle(pixel)
    rect(m, y, s, s);
    //create contidional to randomize pixel fill, size, and reset location to 0
    if (m > width) {
    	m = 0;
        fill(random(1,255), random(1, 255), random(1, 255));
        s = random(10,50);
    }
}

function createPacman() {
    //create variable for pacman to be an object
    //move = x location, b = y location, r = ellipse size, c = fill color
       
    fill(255, 255, 0);
    arc(pacman.move, pacman.b, pacman.r, pacman.r, HALF_PI, TWO_PI);
    
    //make pacman move
    pacman.move = pacman.move + 1;
    
    //make pacman move back to start
    if (pacman.move > width + 500) {
    	pacman.move = -50;
    	pacman.r = random(10, 100);
    }    
}

function createGhostOne(){
    //create arc (ghost)
    fill(255, 0, 0);
    arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);
    
    //set variable for distance between pac man and ghost
    dist1 = 200;
    ghost.go = pacman.move - dist1;
    ghost.r = pacman.r;   
}

function createGhostTwo() {
    //create arc (ghost)
    fill(0, 255, 0);
    arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);
    
    //set variable for distance between pac man and ghost
    dist2 = 300;
    ghost.go = pacman.move - dist2;
    ghost.r = pacman.r;    
}

function createGhostThree() {
    //create arc (ghost)
    fill(0, 0, 255);
    arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);
    
    //set variable for distance between pac man and ghost
    dist3 = 400;
    ghost.go = pacman.move - dist3;
    ghost.r = pacman.r;        
}

Below is my rough sketch for this project.

sketch

/*
Jihoon Park
Section A
jihoonp@andrew.cmu.edu
inClass 10.25
*/
var clouds = [];
var balloons = [];
var stork = [];


function setup() {
    createCanvas(400,600);
    
    for (var i=0; i<15; i++) {                      //initial placement of clouds
        var cloudsX = random(width);
        var cloudsY = random(height);
        clouds[i] = makeClouds(cloudsX, cloudsY);
    }

    for (var i=0; i<5; i++) {                        //initial placement of storks
        var storkX = random(width);
        var storkY = random(100, 500);
        stork[i] = makeStork(storkX, storkY);
    }

      for (var i=0; i<3; i++) {                      //initial placement of balloons
        var balloonX = random(width);
        var balloonY = random(height);
        balloons[i] = makeBalloons(balloonX, balloonY);
    }
    frameRate(10);

}

function draw() {
    background(132, 181, 204);          //sky blue background


    showClouds();
    deleteClouds();
    makeNewClouds();

    showBalloons();
    deleteBalloons();
    makeNewBalloons();

    showStork();
    deleteStork();
    makeNewStork();

    myBalloon();

}

//---------------------------FUNCTIONS THAT MAKE CLOUDS--------------------------------------------------
function showClouds() {                                      //this makes the clouds move down
    for(var i=0; i<clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

function deleteClouds() {                                    //deletes clouds that disappear from sight
    var cloudsToKeep = [];
    for (var i=0; i< clouds.length; i++) {
        if(clouds[i].y >600) {
            cloudsToKeep.push(clouds[i]);
        }
    }
}

function makeNewClouds() {                                   //creates more clouds coming down
    var newCloudLiklihood =0.05
    if (random(0,1) < newCloudLiklihood) {
        clouds.push(makeClouds(random(width), 0));
    }
}

function cloudMove() {                                      //sets the move property of clouds
    this.y += this.speed;
}

function cloudDisplay() {                                   //what clouds look like
    var cloudSize=this.cloudSize;
    fill(223, 255, 233);
    noStroke();
    push();                                                         //moves the center point to center of cloud
    translate(this.x, this.y);
    ellipse(0, 0, cloudSize, cloudSize);                            //graphic elements of clouds
    ellipse(0, cloudSize, 3*cloudSize, cloudSize);
    ellipse(-cloudSize/2, cloudSize/2, cloudSize, cloudSize);
    ellipse(cloudSize/2, cloudSize/2, cloudSize, cloudSize);
    pop();
}
    
function makeClouds(birthLocationX, birthLocationY) {       //function that makes the clouds
    var clouds = {x : birthLocationX,                                  //clouds are born in random places
                y : birthLocationY, 
                speed : random(1, 5),                                //sets random speed of clouds
                cloudSize : random(10, 25),                          //sets random size of clouds
                move : cloudMove,  
                display : cloudDisplay}
    return clouds;
}
//-------------------------------------------------------------------------------------------------------

//---------------------------FUNCTIONS THAT MAKE STORK---------------------------------------------------
function showStork() {                                      //this makes the stork move left
    for(var i=0; i<stork.length; i++) {
        stork[i].fly();
        stork[i].display();
    }
}

function deleteStork() {                                    //deletes stork that disappear from sight
    var storkToKeep = [];
    for (var i=0; i< stork.length; i++) {
        if(stork[i].x <0) {
            storkToKeep.push(stork[i]);
        }
    }
}

function makeNewStork() {                                   //creates more stork coming from left
    var newStorkLiklihood =0.03
    if (random(0,1) < newStorkLiklihood) {
        stork.push(makeStork(650, random(100, 500)));
    }
}
function storkFly() {
    this.x += this.speed;
}

function storkDisplay() {                       //makes graphic elements of the Stork
    
    push();
    translate(this.x, this.y);
    stroke(140);
    strokeWeight(1);
    fill(255, 220, 98);
    triangle(-50, 1, -4, -3, -4, 3);     //makes beak
    line(-50, 0, -4,0);

    strokeWeight(2);                    //makes legs
    line(70, 7, 110, 15);
    line(110, 15, 117, 10);
    line(110, 15, 120, 15);
    line(110, 15, 117, 20);

    noStroke();
    fill(243, 239, 244);
    ellipse(0, 0, 20, 20);              //makes head

    ellipse(50, 0, 50, 20);             //makes body

    beginShape();                       //makes wings
    curveVertex(40, 0);
    curveVertex(40, 0);
    curveVertex(60, -40);
    curveVertex(80, -40);
    curveVertex(60, 0);
    curveVertex(60, 0);
    endShape();

    strokeWeight(6);
    stroke(243, 239, 244);
    line(5,0, 25, 0);                   //makes neck

    fill(0);
    noStroke();
    stroke(0);
    ellipse(0, -2, .2, .2);           //makes eyes
    pop();
}

function makeStork(birthLocationX, birthLocationY) {
    var stork = {x : birthLocationX,
                y : birthLocationY,
                speed : -random(2, 6),
                fly : storkFly,
                display : storkDisplay}
    return stork;
}
//-------------------------------------------------------------------------------------------------------

function showBalloons() {                                      //this makes the balloons move up
    for(var i=0; i<balloons.length; i++) {
        balloons[i].move();
        balloons[i].display();
    }
}

function deleteBalloons() {                                    //deletes Balloons that disappear from sight
    var BalloonsToKeep = [];
    for (var i=0; i< balloons.length; i++) {
        if(balloons[i].y >600) {
            balloonsToKeep.push(balloons[i]);
        }
    }
}

function makeNewBalloons() {                                   //creates more Balloons coming down
    var newBalloonLiklihood =0.05
    if (random(0,1) < newBalloonLiklihood) {
        balloons.push(makeBalloons(random(width), 600));
    }
}

function balloonMove() {                                      //sets the move property of Ballons
    this.y += this.speed;
}

function balloonDisplay() {
    push();
    translate(this.x, this.y);
    fill(173, 140, 82);
    stroke(105, 84, 49);
    strokeWeight(3);

    beginShape();           //basket
    vertex(-7, -7);
    vertex(7, -7);
    vertex(5, 5);
    vertex(-5, 5);
    endShape(CLOSE);

    stroke(30, 40, 20);
    strokeWeight(2);
    line(-7, -7, -10, -20);
    line(7, -7, 10, -20);

    strokeWeight(.5);
    fill(255, 97, 118);
    ellipse(0, -30, 30, 30);
    pop();


}

function makeBalloons(birthLocationX, birthLocationY) {
    var balloon = {x : birthLocationX,
                   y : birthLocationY,
                   speed : -random(1, 6),
                   move : balloonMove,
                   display : balloonDisplay}
    return balloon;
}

//---------------------------FUNCTION THAT MAKES MY BALLOON----------------------------------------------
function myBalloon() {                                 //function makes the balloon im in in perspective
                                        //basket
    fill(105, 84, 49);
    strokeWeight(10);
    stroke(173, 140, 82);
    beginShape();
    vertex(0, 610);
    vertex(50, 520);
    vertex(350, 520);
    vertex(400,610);
    endShape(CLOSE);
                                        //rope
    stroke(30, 39, 20);
    strokeWeight(5);
    line(50,515, 20,70);
    line(350,515, 380, 70);
                                        //balloon
    fill(255, 224, 151);
    strokeWeight(1);
    stroke(140);
    beginShape();
    curveVertex(200,-100);
    curveVertex(50, -50);
    curveVertex(-30, 100);
    curveVertex(200, 50);
    curveVertex(430, 100);
    curveVertex(350, -50);
    curveVertex(200, -100);
    endShape(CLOSE);

    fill(255, 161, 193);
    beginShape();
    curveVertex(-30, 100)
    curveVertex(0, 100);
    curveVertex(20,70);
    curveVertex(50, -50);
    curveVertex(-30, 0);
    endShape(CLOSE);

    fill(204, 125, 178);
    beginShape();
    curveVertex(430, 100)
    curveVertex(400, 100);
    curveVertex(380, 70);
    curveVertex(350, -50);
    curveVertex(430, 0);
    endShape(CLOSE);
}

I created a perspective view from a hot balloon going up into the air. clouds’s downward movement makes an illusion that the viewer is going up while size variation gives the sky a sense of depth. To add more fun, a flock of storks appear as well as other balloons.

I’ve always thought that looking outside the widow on an airplane flight was a special moment of peace and aww. I wanted to capture this feeling with the use of soft plum colors, circular clouds and a starry night.  My process consisted of planning out the star nights to look as realistic as possible by picking really small points and adding a natural looking gradient to the back.

sketch

//Grace Cha
//Section C
//heajinc
//Project 10

var stars = [];
var clouds = [];

function setup() {
    createCanvas(600,400); 
    for (var s = 0; s < 3000; s++) {
        stars.push(new Star());
    }

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

    }
    frameRate(45);
}


function draw() {

    Sky(0, 0, width, height);
    DrawStar();

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

    airplaneInterior();
    
    
}


function Sky(x, y, w, h) {
    //Draws the gradient sky
    var c1, c2;
    
    c1 = color("#7B75C3");
    c2 = color("#F8B09A");
    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 Star() {
    //Draws the randomized stars

    this.x = random(width);
    this.y = random(height);
    this.diameter = 0.005;
    this.di = 0.005;
    this.speed = 0.05;//virtually very small speed
    this.border = random(0, 0.5);
    this.vol = 0;
    
    this.move = function() {
    this.x += random(-this.speed, this.speed + this.vol);
    this.di = this.di +this.vol;

    var prob = random(0, 1);
    if (this.di <= 0.16) {
      this.vol = 0.001;
    }else if(this.di>=0.16){
    this.vol=0;
}


  }

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

  }
}


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

function airplaneInterior(){

    beginShape();
    noStroke();
    fill("#5F4B92");
    vertex(257,133);
    vertex(283,110);
    vertex(318,133);
    endShape();

    beginShape();
    noStroke();
    fill("#5F4B92");
    vertex(158,171);
    vertex(200,137);
    vertex(252,166);
    endShape();

    //wing
    beginShape();
    noStroke();
    fill("#715E92");
    vertex(-30,276);
    vertex(0,162);
    vertex(335,92);
    vertex(377,38);
    vertex(362, 93);
    vertex(126,183);
    endShape();

    //Red Airplane sign
    beginShape();
    fill("#A2567D");
    vertex(345, 89);
    vertex(373,54);
    vertex(363,89);
    endShape();
  
    //Window
    push();
    strokeWeight(10);
    fill("#303053");
    stroke("#9E8DB3")
    beginShape();
    curveVertex(-5,146);
    curveVertex(-5,146);
    curveVertex(150,339);
    curveVertex(369,392);
    curveVertex(544,297);
    curveVertex(600,200);
    curveVertex(607,183);
    curveVertex(600,400);
    curveVertex(0,600);
    curveVertex(0,600);
    endShape();
    pop();
    push();
    
    //inside Window panel
    beginShape();
    fill("#6B659C");
    curveVertex(0,218);
    curveVertex(0,218);
    curveVertex(101,338);
    curveVertex(316,460);
    curveVertex(66,425);
    curveVertex(0,365);
    curveVertex(0,365);
    endShape();
    pop();
 
}

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


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


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



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


function buildingDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight; 
    
    fill(255,90); 
    noStroke(); 
    push();
    translate(this.x, height - 40);
    ellipse(120, -bHeight + 30, this.breadth, bHeight/2);
    pop();

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


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