Category: Project-10-Landscape

Connor McGaffin – Project 10

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-10
*/

var poppies = [];

var terrainSpeed = 0.00001;
var d = 0.0004;
var d2 = 0.0006;

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

function draw() {
    background(180, 180, 0); 
    noStroke();
    
    sunset();
    //mtn
    displayRocks();

    emeraldCity();
    
    //adjust 
    translate(0, 30);
    displayGrass();

    //poppies behind road
    push();
    translate(0, -40);
    updateAndDisplaypoppies();
    pop();

    //yellow brick road
    ybr();

    //poppies in front of road
    updateAndDisplaypoppies();
    removepoppiesThatHaveSlippedOutOfView();
    addNewpoppiesWithSomeRandomProbability(); 
}

function sunset(){
    //orange 1
    push();
        fill(190, 150, 0);
        rect(0, 50, width, height);
    pop();
    //orange 2
    push();
        fill(200, 130, 0);
        rect(0, 120, width, height);
    pop();
}

function ybr(){
    fill(200,200,0);
    rect(0,180, width, 20);
}

//draw emerald city
function emeraldCity() {
    //halo adjustment
    var scaleFactor = 1.2;
    push();
        //adjustment
        translate(300, -25)
        //halo
        push();
            stroke('rgba(235, 255, 120, 0.4)');
            strokeWeight(3);
            noFill();
            ellipse(125, 100, 110 * scaleFactor);
            strokeWeight(1);
            ellipse(125, 100, 95 * scaleFactor);
            ellipse(125, 100, 50 * scaleFactor);
        pop();
        //city towers
        push();
            //shimmer type 1
            fill(20, random(160,170), 0);
            rect(100, 80, 15, height, 20);
            rect(115, 90, 15, height, 20);
            rect(125, 75, 15, height, 20);
            rect(145, 100, 15, height, 20);
            //shimmer type 2
            fill(20, random(170,180), 0);
            rect(90, 100 , 15, height, 20);
            rect(110, 120 , 15, height, 20);
            rect(130, 90, 15, height, 20);
            rect(150, 130, 15, height, 20);
            //shimmer type 3
            fill(20, random(180,190), 0);
            rect(80, 180, 15, height, 20);
            rect(100, 140, 15, height, 20);
            rect(125, 120 , 15, height, 20);
            rect(145, 150, 15, height, 20);
        pop();
    pop();
}

function updateAndDisplaypoppies(){
    // Update the poppy positions, and display them.
    for (var i = 0; i < poppies.length; i++){
        poppies[i].move();
        poppies[i].display();
    }
}

function removepoppiesThatHaveSlippedOutOfView(){
    // If a poppy has dropped off the left edge,
    // remove it from the array. 
    var poppiesToKeep = [];
    for (var i = 0; i < poppies.length; i++){
        if (poppies[i].x + poppies[i].breadth > 0) {
            poppiesToKeep.push(poppies[i]);
        }
    }
    poppies = poppiesToKeep; // remember surviving poppies
}
function addNewpoppiesWithSomeRandomProbability() {
    // probability of adding a new poppy to the end.
    var newTreeLikelihood = 0.3; 
    if (random(0,1) < newTreeLikelihood) {
        poppies.push(makeFlower(width));
    }
}

// poppy moves every frame
function poppyMove() {
    this.x += this.speed;
}
    
// draw the poppy
function poppyDisplay() {
    var leafDistance = 20;
    var bHeight = this.nGrowth * leafDistance; 
    push();
        translate(this.x, height - this.closeness);
        var distFactor = 4 / this.closeness;
        //stem
        push();
            strokeWeight(25 * distFactor * .6);
            stroke(30, 130, 0);
            line(0, -bHeight * .2, 0, 0);
        pop();
        //flower
        push();
            noStroke();
            fill(200,0,0);
            ellipse(0, -bHeight * .2, 90 * distFactor * .6);
            fill(0);
            ellipse(0, -bHeight * .2, 90 * distFactor * .2);
        pop();
    pop();
}


function makeFlower(birthLocationX) {
    var poppy = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nGrowth: round(random(2,8)),
                closeness: random(20,40),
                move: poppyMove,
                display: poppyDisplay}
    return poppy;
}


function displayGrass() {
//grass
    push();
    fill(0, 90, 0); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * d) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 145, 190);
        vertex(x, y - 20);
        vertex(0, height);
        vertex(width, height); 
    }
    endShape();
    pop();
}

//rocks behind emerald city
function displayRocks() {
    push();
    fill(90, 90, 60); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * d2) + (millis() * terrainSpeed);
        var y = map(noise(t * 3), 0, 1, 160, 190);
        vertex(x, y - 20);
        vertex(0, height);
        vertex(width, height); 
    }
    endShape();
    pop();
}

I started my exploration process by brainstorming which landscape I would like to create. I had a running theme of plants going on as the objects in my array. I started with what I was most familiar with, and sketched out an idea where flowers would be generated at the eye level of a squirrel. Expanding on this, I sketched a quick layout of scrolling plants that I am not familiar with, being in the context of a jungle canopy. And finally, I pushed into a setting that doesn’t even exist with the sketch of the poppies leading up to the Emerald City from The Wizard of Oz.

I ended up going with the Wizard of Oz theme, as it excited me most. In the story, surrounding the shimmering Emerald City, the four protagonists encounter a field of poppies, which push Dorothy into a slumber. I designed this code to provide a panning view of the setting where this plot event happened, as if it were cinematically setting the scene.

Shirley Chen-Project10-Lanscape

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Projecct 10 


var mushrooms = [];
var pigs = [];

//Load two images of the pig
function preload(){
  var filenames = [];
  filenames[0] = "https://i.imgur.com/DmGVjxo.png";
  filenames[1] = "https://i.imgur.com/WuMtlCY.png";
  for (var i = 0; i < filenames.length; i++) {
    pigs.push(loadImage(filenames[i]));
  }
}

function setup() {
  createCanvas(480, 480);
//Create the giant mushroom moving at the background
  for (var i = 0; i < 10; i++){
    var rx = random(width);
    mushrooms[i] = makeMushroom(rx);
  }
  frameRate(10);
}



function draw(){
  background(202, 220, 249);
  noStroke();
  fill(135, 196, 165);
  rect(0, 300, 480, 180);
  fill(255, 214, 119);
  ellipse(480, 0, 200, 200);
  updateAndDisplayMushrooms();
  removeMushroomsThatHaveSlippedOutOfView();
  addNewMushroomsWithSomeRandomProbability();
//Display the two images alternatively to create motion
  push();
//Flip the direction of the pig
  scale(-1, 1);
  image(pigs[frameCount % 2], -230, height / 2);
  pop();
}


function updateAndDisplayMushrooms(){
// Update and display the mushrooms
    for (var i = 0; i < mushrooms.length; i++){
        mushrooms[i].move();
        mushrooms[i].display();
    }
}

function removeMushroomsThatHaveSlippedOutOfView(){
    var mushroomsToKeep = [];
    for (var i = 0; i < mushrooms.length; i++){
        if (mushrooms[i].x + mushrooms[i].breadth > 0) {
            mushroomsToKeep.push(mushrooms[i]);
        }
    }
    mushrooms = mushroomsToKeep; 
}



function addNewMushroomsWithSomeRandomProbability() {
// With a very tiny probability, add a new mushroom to the end.
    var newmushroomLikelihood = 0.007; 
    if (random(0,1) < newmushroomLikelihood) {
        mushrooms.push(makeMushroom(width));
    }
}



// Update the position of building for every frame
function mushroomMove() {
    this.x += this.speed;
}
    

// Draw the mushrooms
function mushroomDisplay() {
    var mushroomHeight = this.nHeight * 20; 
    fill(255); 
    stroke(252, 190, 181);
    push();
    translate(this.x, height - 180);
    rect(0, -mushroomHeight, this.breadth, mushroomHeight, 15);
    pop();
    push();
    translate(this.x, height - 180);
    fill(252, 161, 148);
    arc((this.breadth / 2), -mushroomHeight+10, (this.breadth + 60), (mushroomHeight*0.8), PI, 0);
    stroke(200); 
    pop();
}

function makeMushroom(locationX) {
    var mushroom = {x: locationX,
                breadth: 40,
                speed: -1.0,
                nHeight: round(random(2,8)),
                move: mushroomMove,
                display: mushroomDisplay}
    return mushroom;
}

For this project, I created a series of giant mushrooms at the background. Learning from the base code provided from the assignment requirement, I used object command to generate rectangles and semicircle to represent a mushroom. Then, I used translate command to move them to the position I want them to be at. I also loaded two images of the pig and displayed them alternatively to create a flying motion. For this project I think it is a good practice for the previous projects relating to load images and also help me to practice my use of object command. It also helps me with previewing the scale command that flip the canvas to the opposite side.

Sketch :

Christine Chen-Project-10-Landscape

Christine Chen-Project-10-Landscape

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Assignment-10-a
*/

var sushi = [];
var count = 0;
var riceSize = 70;

function setup() {
    createCanvas(480, 180); 
    
    //initial collection of sushi
    for (var i = 0; i < 5; i += 20){
        sushi[i] = makeSushi(width);
    }

    frameRate(140);
}


function draw() {
    count += 1;
    background(247, 191, 201); //pink

    sushiText();
  
    sushiConveyorBelt();

    updateAndDisplaySushi();
    removeSushiThatHaveSlippedOutOfView();
    addNewSushiConstantly(); 
}

function sushiText(){
    //dark red banner
    fill(150, 0, 0);
    rect(33, 22, 155, 48)

    //bright red banner
    fill(239, 33, 33);
    rect(41, 28, 140, 35);

    //text
    fill(255); 
    textSize(18);
    text("おいしい寿司", 57, 52); 
}

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


function removeSushiThatHaveSlippedOutOfView(){
    var sushiToKeep = [];
    for (var i = 0; i < sushi.length; i++){
        if (sushi[i].x + sushi[i].breadth > -200) {
            sushiToKeep.push(sushi[i]);
        }
    }
    sushi = sushiToKeep; //remember surviving sushi
}

//keeps adding sushi to the end
function addNewSushiConstantly() {
    if (count > 270) {
        sushi.push(makeSushi(width));
        count = 0;
    }
}

//update sushi position every frame
function sushiMove() {
    this.x += this.speed;
}
    

// draw the sushi
function sushiDisplay() {
    var Height = 30; 
    fill(255); 
    noStroke();
    push();
    translate(this.x, height - 40);

    //plate for tofu sushi
    fill(255, 118, 96);
    ellipse(35, -Height/7, 110, 30)
    rect(5, 5, 60, 10);

    //tofu sushi
    fill(255, 118, 96); //plate for tofu sushi
    ellipse(35, -Height/7, 110, 30)
    rect(5, 5, 60, 10);

    fill(255); //white rice
    rect(0, -Height, riceSize, 30);

    fill(255, 244, 0); //yellow tofu
    rect(0, -Height - 20, riceSize, 20);

    fill(0); //black seaweed
    rect(25, -Height - 20, riceSize/4, 20);
    
    //sashimi sushi
    fill(111, 200, 221); //plate for sashimi sushi
    ellipse(175, -Height/7, 110, 30);
    rect(145, 5, 60, 10); 

    fill(255); //white rice
    rect(140, -Height, riceSize, 30);

    fill(255, 91, 0); //red meat
    rect(140, -Height - 20, riceSize, 20);

    fill(249, 221, 205); //meat texture
    var meatLineWidth = riceSize/12;
    rect(150, -Height - 20, meatLineWidth, 20);
    rect(170, -Height - 20, meatLineWidth, 20);
    rect(190, -Height - 20, meatLineWidth, 20);
    
    pop();
}

//sushi info
function makeSushi(birthLocationX) {
    var sushi = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                move: sushiMove,
                display: sushiDisplay}
    return sushi;
}

function sushiConveyorBelt(){
    stroke(221, 133, 152); //dark pink
    strokeWeight(30);
    line (0, height - 10, width, height - 10); 
}

I was inspired by the conveyor belts in Japanese restaurants that are used to serve sushis. Sushis are one of my favorite food in the world and so I was super excited to create the project. I made two sushis- salmon sashimi sushis and tamale sushis. I also created a sign that says in Japanese “yummy sushi” to give the image more of a Japanese sushi restaurant vibe. Even though I spent a lot of time adjusting the little details, seeing the sushis run on the page in the end makes me very, very, very  happy!

Sushi conveyor belt
Initial sketch

Lan Wei – Project 10 – Generative Landscape

my-sketch.js

//Lan Wei
//Section D
//lanw@andrew.cmu.edu
//Project 10 - Generative Landscape

//Cave people

var groundDetail = [0.004, 0.0001, 0.005, 0.002];
var groundSpeed = 0.0005;
var minY = [-10, 70, 110, 300]; //min values of terrain domains
var maxY = [150, 120, 300, 400]; //max values of terrain domains
var people = [];

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

    // initial people
    for (var i = 0; i < 7; i++){
        var rx = random(width);
        var ry = random(290, 313);
        people[i] = makePeople(rx, ry);
    }
}

var moonX = 450;

function draw() {
    //mountains & ground
    background(8, 46, 84);
    var colMountain = color(0);
    var colGround = color(176, 23, 31);
    var colHole = color(255, 222, 173);
    var col = [colMountain, colGround, colHole, colGround];
    noStroke();

    //moon
    moonX -= 1;
    fill(190);
    ellipse(moonX, 30, 70, 70);
    fill(255);
    ellipse(moonX, 30, 60, 60);

    for (var i = 0; i < 4; i ++){
        var yRange = [];
        fill(col[i]);
        beginShape();
        for (var x = 0; x < width; x++) {
            var t = (x * groundDetail[i]) + (millis() * groundSpeed);
            var y = map(noise(t), 0, 1, minY[i], maxY[i]);
            if (i === 0){ // reverse the direction of the mountains
                y = ((maxY[i] - minY[i]) - 1.5 * y);
            }
            vertex(x, y);
            yRange.push(y);
        }
        vertex(width, yRange[width - 1]);
        vertex(width, height);
        vertex(0, height);
        vertex(0, yRange[0]);
        endShape();

        if (i === 2){  ////the legs should be coverd by the bottom ground
            updateAndDisplayPeople();
            removePeopleThatHaveSlippedOutOfView();
            addNewPeopleWithSomeRandomProbability();
        }
    }
}

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

function removePeopleThatHaveSlippedOutOfView(){
    var peopleToKeep = [];
    for (var i = 0; i < people.length; i++){
        if (people[i].x + people[i].bellyWidth/2 > 0) {
            peopleToKeep.push(people[i]);
        }
    }
    people = peopleToKeep; // remember the surviving buildings
}

function addNewPeopleWithSomeRandomProbability() {
    var newPeopleLikelihood = 0.2;
    if (random(0,1) < newPeopleLikelihood) {
        people.push(makePeople(width, random(290, 303)));
    }
}

function makePeople(bellyX, bellyY){
    var ppl = {x: bellyX,/////////////////////////belly
               y: bellyY,
               speed: -10,
               bellyWidth: random(23, 47),
               bellyHeight: random(50, 59),
               bellyCol: random(70, 255),
               headD: 10,/////////////////////////head
               headCol: random(20, 90),
               legY: bellyY,//////////////////////legs
               move: pplMove,
               display: pplDisplay}
    return ppl;
}

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

function pplDisplay(){
    //head
    noStroke();
    fill(this.headCol);
    ellipse(this.x, this.y - this.bellyHeight/2 - 10, this.headD, this.headD);
    //legs
    noFill();
    stroke(0);
    strokeWeight(2);
    line(this.x - this.bellyWidth/4, this.legY, this.x - this.bellyWidth/4, height);
    line(this.x + this.bellyWidth/4, this.legY, this.x + this.bellyWidth/4, height);
    //belly
    noStroke();
    fill(this.bellyCol);
    ellipse(this.x, this.y, this.bellyWidth, this.bellyHeight);
}

This is my first time to practice using objects and it was tough but very fun.  I started with doing sketches and decided to make cave people at the end. Making mountains ground and the cave took me a while since I need to create several different noises with different qualities and I would like to do it with  loops. For the people part, I studied the building example and did modifications based on that, which is also challenging. To be honest, at the beginning I planned to achieve something more complicated but the process is more challenging than I’ve imagined so I simplified it a bit. But anyway, I feel that the  project helps me a lot to understand objects and the result makes me very happy.

Sketch

Dani Delgado – Project 10

sketch

var tS1 = 0.0002;
var tD1 = 0.009;
var tS2 = 0.0005;
var tD2 = 0.0008;
var tS3 = 0.0006;
var tD3 = 0.001;

var balloons = [];
var frame  = 1;

function setup() {
    createCanvas(480, 340);
    // draw the balloons
    for (var b = 0; b < 20; b++) {
        var bx = random(width);
        var by = random(0, height / 2 + 30);
        balloons[b] = makeBalloons(bx, by);
    }
    frameRate(10);
}
 
function draw() {
    background(255, 220, 200);
    drawSand();
    drawWater();
    water2(); 
    foam();

    
    updateBalloons();
    addNewBalloonsWithSomeRandomProbability();
    
}

function drawSand() {
    beginShape(); 
    stroke(235, 200, 180);
    for (var x = 0; x < width; x++) {
        var t = (x * tD1) + (millis() * tS1);
        var y = map(noise(t), 0, 1, height / 6, height / 3);
        line(x, y, x, width); 
    }
    endShape();
}

function drawWater() {
    beginShape();
    stroke(153, 221, 255, 99);
    for(var i = 0; i < width; i++) {
        var t = (i * tD2) + (millis() * tS2);
        var y = map(noise(t), 0, 1, 20, height);
        line(i, y, i, width); 
    }
    endShape();
}

function water2() {
    beginShape();
    stroke(90, 194, 255, 50);
    for(var j = 0; j < width; j++) {
        var t = (j * tD3) + (millis() * tS3);
        var y = map(noise(t), 0, 1, 40, height);
        line(j, y, j, width); 
    }
    endShape();
}

function makeBalloons(originX) {
    var balloon = {
             xP: originX,
             yP: random((height / 2 + 50), height),
             speedX: random(-1.5, 0.25),
             speedY: random(-0.5, 0.5),
             sizes: random(15, 30),
             draw: drawballoons,
             move: balloonsMove
        }
    return balloon;
}

function updateBalloons() {
    for (var o = 0; o < balloons.length; o++){
        balloons[o].draw();
        balloons[o].move();   
    }
}

function drawballoons(x, y){
    fill(255, 255, 255, 90);  
    noStroke();
    ellipse(this.xP, this.yP, this.sizes, this.sizes);
}

function balloonsMove() {
    this.xP += this.speedX;
    this.yP += this.speedY;
    if (this.xP < 0 || this.yP > height) {
        xPos = width;
        this.speedX = random(-2.5, -0.5);
        this.speedY = random(-0.25, 1.5);
    }
}


function addNewBalloonsWithSomeRandomProbability() {
    var newBalloonLikelihood = 0.01; 
    if (random(0,1) < newBalloonLikelihood) {
        balloons.push(makeBalloons(width));
    }
}

function foam() {
    beginShape();
    stroke(255, 255, 255, 90);
    for (var f = 0; f < width; f++) {
        var t = (f * tD3) + (millis() * tS3);
        var Y = map(noise(t), 0, 1, 40, height);
        vertex(f, Y - 5);
        vertex(f, Y + 5);
    }
    endShape();
}

This project was fun for me, but also proved to be challenging as I tried to make everything move the way I wanted to (this is primarily because I find it hard to “control” a fairly randomized generative piece).

After making a few quick sketches as to what I wanted the landscape to look like, I ultimately chose this layout. I wanted to make a landscape reminiscent of watching the waves crash on the beach but can be seen in two different ways: if you view it with the blue facing down, it looks like waves with wet sand in the back, but if you view it with the tan facing down, it looks like a mountain range and a sky.

Sketches of possible landscapes

I would like to revisit this idea of a generative landscape, as I didn’t quite get this piece where I wanted it to be and want to explore it more.

Yiran Xuan – Project 10 – Landscape

sketch

var mountains = [];
var grass = [];
var stars = [];


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

    stars.push(makeStar());

    for(var j = 0; j < 10; j++){
    mountains.push(makeMountainPoint(width + j*80));
    }

    grass.push(makeGrass());
}


function draw() {
    background(25, 25, 112);
    drawGround();

    updatePositions(); 
    updateArrays();

    newStar(); //one star per x position
    newMountainPoint(); //one mountain point per x position
    newGrass(); //one grass per x position

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

    mountainDisplay();

    for(var k = 0; k < grass.length; k++){
        grass[k].display();
    }

   // textSize(32);
    //text(mountains.length, 240, 240);

}

function drawGround(){
    noStroke();
    fill('green');
    rect(0, 320, 480, 160);
    noFill();
}

function updatePositions(){
    // Update positions of stars, mountains, and grass
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
    }

     for (var j = 0; j < mountains.length; j++){
        mountains[j].move();
    }

     for (var k = 0; k < grass.length; k++){
        grass[k].move();
    }
}

function updateArrays(){ //updating all arrays to delete objects that have gone offscreen
    var starsremaining = []; //temporary transfer array
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x > 0) { //if the star is still in frame, put in transfer array
            starsremaining.push(stars[i]); 
        }
    }
    stars = starsremaining; //update normal array, oldest stars now deleted

    var mountainsremaining = []; //temporary transfer array
    for (var j = 0; j < mountains.length; j++){
        if (mountains[j].x > -80) { //deletes the oldest mountain point only until the second oldest point is at the border
            mountainsremaining.push(mountains[j]); 
        }
    }
    mountains = mountainsremaining; //update normal array, oldest mountain point now deleted

    var grassremaining = []; //temporary transfer array
    for (var k = 0; k < grass.length; k++){
        if (grass[k].x > 0) { //deletes the oldest mountain point only until the second oldest point is at the border
            grassremaining.push(grass[k]); 
        }
    }
    grass = grassremaining; //update normal array, oldest mountain point now deleted

}

function newMountainPoint() {
    if (mountains[6].x < 480 & mountains.length < 10) { //generates new point only if last point has passed onto the screen 
        var onebefore = mountains[mountains.length-1].x;
        mountains.push(makeMountainPoint(onebefore + 80));
    }
}

function newStar(){
    if (random(0, 100) < 10){ //makes a star at x position 10% of the time
        stars.push(makeStar());
    }
}

function newGrass(){
    if (random(0,10) < 8){ //makes a grass stalk at x position 80% of the time
        grass.push(makeGrass());
    }
}


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

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

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

// draw the building and some windows
function starDisplay() {
    stroke('white');
    strokeWeight(this.starsize);
    point(this.x, this.y);
}

function mountainDisplay(){ //displays mountain range all at once, as each line segment uses two array elements
    strokeWeight(1);
    stroke('grey');
    for(var j = 0; j < mountains.length - 1; j++){
        line(mountains[j].x, mountains[j].y, mountains[j+1].x, mountains[j+1].y);
    }
}

function grassDisplay(){
    strokeWeight(3);
    stroke('green');
    line(this.x, 320, this.x, 320 - this.stalkheight);

    if(this.flower < 1){ //grows a flower 10% of the time
        strokeWeight(8);
        stroke('yellow');
        point(this.x, 320-this.stalkheight);
    }
}


function makeStar(){
    var star = {x: width, //stars spawn at the right edge
                pointdistance: 40,
                speed: 3,
                starsize: round(random(0, 4)),
                y: round(random(0,160)),
                move: starMove,
                display: starDisplay}
    return star;
}

function makeMountainPoint(spawnpoint) {
    var mountain = {x: spawnpoint, //mountain peaks spawn past the right edge
                pointdistance: 40,
                speed: 5,
                y: round(random(160,280)), //height of the point
                move: mountainMove}
    return mountain;
}

function makeGrass(){
    var stalk = {x: 480, //grass at the right edge
                pointdistance: 40,
                speed: 7,
                stalkheight: round(random(0,30)), //height of the grass stalk
                move: grassMove,
                flower: random(0,10), //determines whether stalk grows a flower or no
                display: grassDisplay}
    return stalk;
}

This project was inspired by Tiny Wings, specifically the peaceful nighttime scene in which a starry night sky slowly drifts by. I wanted to have a green lawn foreground for extra serenity.

The stars and grass were easy to implement, but I had trouble rendering and generating new instances of the mountain peaks. Because I wanted a continuous mountain ridge, the objects being generated were points, and so the display function was an external function that processed the entire mountains array. Difficulty was also had in timing when a new mountain point would be generated; while grass and stars were generated all the time and deleted whenever they went off-screen, mountain points could only be deleted when the second oldest point started to go offscreen in order to leave no gaps. In the same vein, new mountain points needed to be generated off-screen on the other side.

Justin Yook – Project 10

genland

// Justin Yook
// jyook@andrew.cmu.edu
// Section C
// Project 10

var milk = [];
var milkCol;

function setup() {
    createCanvas(480, 200);
    milkCol = [color(255, 0, 0), color(255, 255, 0), color(0, 0, 255), color(0, 255, 0)];

    for (var i = 0; i < 10; i++) {
        var rx = random(width); // random x location within width
        milk[i] = makeMilk(rx);
    }

    frameRate(60);
}

function draw() {
    background(200, 233, 243);

    displayFloor();

    updateAndDisplayMilk();
    removeMilk();
    addMilkRandom();
}

function displayFloor(){
    stroke(152, 196, 209);
    strokeWeight(3);
    line(0, height - 30, width, height - 30);
}

function makeMilk(spawnX) {
    var mlk = {x: spawnX,
               space: 50,
               speed: -1.0,
               move: milkMove,
               col: random(milkCol),
               display: milkDisplay}
    return mlk;
}

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

function milkDisplay() {
    fill(255);
    stroke(0);
    strokeWeight(1);
    rect(this.x, height - 90, 40, 70);

    fill(this.col);
    rect(this.x, height - 90, 40, 10);

    fill(this.col);
    rect(this.x, height - 30, 40, 10);

    fill(255);
    quad(this.x, height - 90, this.x + 5, height - 100, this.x + 35, height - 100, this.x + 40, height - 90);

    fill(255);
    rect(this.x + 5, height - 105, 30, 5);
}

function addMilkRandom() {
    var newMilkProb = .007;
    if (random(0, 1) < newMilkProb) {
        milk.push(makeMilk(width));
    }
}

function removeMilk() {
    var milkeep = [];
    for (var i = 0; i < milk.length; i++) {
        if (milk[i].x + milk[i].space > 0) {
            milkeep.push(milk[i]);
        }
    }
    milk = milkeep;
}

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

I chose to do a generative landscape of the inside of a refrigerator. The object I defined is the milk quart. Each milk quart has a color that is randomly picked from an array of pre-selected colors. I was inspired when I went to buy some groceries, and I saw that different types of milk had different colors on their packaging. If I were to add to this project, I would include different heights for each milk quart, and other food products (objects) such as eggs, and yogurt. The concept for this project was the hardest to think of by far,  because I could not find inspiration for a long time during the week.

Initial sketches

Sarah Yae – Project 10 – Section B

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 10 

var nails = [];

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

    //Creation of initial nail polish
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        nails[i] = makeNails(rx);
    }
    frameRate(30);
}

function draw() {
    background(color(255,231,218));

    displayText();
    updateAndDisplayNails();
    removeOldNails();
    addNewNails();

    //Tabletop 
    noStroke();
    fill(230);
    rect(0, 260, width, height);
}

function displayText() {
    textSize(25);
    textAlign(CENTER);
    textStyle(BOLD);
    fill("Salmon");
    text("Welcome to Sarah's Nail Salon!", width / 2, 50);
}

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

function removeOldNails() {
    var nailskeep = [];
    for (var i = 0; i < nails.length; i++) {
        if (nails[i].x + 50 > 0) {
            nailskeep.push(nails[i]);
        }
    }
    nails = nailskeep;
}

function addNewNails() {
    var chance = 0.01;
    if (random(0,1) < chance) {
        nails.push(makeNails(width));
    }

}

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

function nailsDisplay() {
    var nailbody = 90;
    var nailtip = 60;

    noStroke();

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

    //Body of Nail Polish
    fill(this.randomColor);
    rect(this.x, -nailbody, this.bodybreadth, nailbody); 

    //Tip of Nail Polish
    fill(80);
    rect(this.x + 7, -nailbody - nailtip, this.tipbreadth, nailtip); 

    pop(); 

}

function makeNails(birthlocationX) {
    var nails = {x: birthlocationX, 
        bodybreadth: 40,
        tipbreadth: 25,
        speed: -1.0,
        randomColor: color(random(255), random(255), random(255)),
        move: nailsMove,
        display: nailsDisplay}
    return nails;
}

This project was difficult to tackle; I did not have any idea on which animation I wanted to do, nor did I have too much technical knowledge on where to start. However, I got inspired from my friend’s nail kit. My friends and I would go to her room and do each other’s nails sometimes- and I thought it would be a cool idea to display different nail polishes that circulate. For the code, I referred to the template to get initial ideas on where to develop my code. Overall, this was an interesting project!

Sketch of ‘Nail Salon’
My friend’s nail polish kit

 

Sharon Yang Project 10 Landscape

Project

/*Sharon Yang
Section C
junginny
Project-10
*/

var snowman = [];


function setup() {
    createCanvas(640, 240); 
    
    // create initial snowmen
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        snowman[i] = makeSnowman(rx);
    }
    frameRate(10);
}


function draw() {
    background(105, 58, 29);
    
    displayGround();
    updateAndDisplaySnowman();
    removeSnowmanThatHaveSlippedOutOfView();
    addNewSnowmanWithSomeRandomProbability(); 
}


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


function removeSnowmanThatHaveSlippedOutOfView(){
    var snowmanToKeep = [];
    for (var i = 0; i < snowman.length; i++){
        if (snowman[i].x + 50> 0) {
            snowmanToKeep.push(snowman[i]);
        }
    }
    snowman = snowmanToKeep; // the snowmen that are out of the view are removed
}


function addNewSnowmanWithSomeRandomProbability() {
    // With the probability of 0.5%, add a new snowman to the end
    var newSnowmanLikelihood = 0.005; 
    if (random(0,1) < newSnowmanLikelihood) {
        snowman.push(makeSnowman(width));
    }
}


//Update position of snowman every frame
function snowMove() {
    this.x += this.speed;
}
    

// draw the snowmen
function snowDisplay() {
    var centerB = 25 * this.size;
    var centerU = 15 * this.size;
    var bhatW = 35 * this.size;
    var thatW = bhatW * 3 / 4;
    var eyeW = centerU / 2;
    var noseW = eyeW;
    noStroke();
    fill(255);
    push();
    translate(this.x, height - 40);
    ellipse(this.x, - centerB, centerB * 2, centerB * 2);
    ellipse(this.x, -(2 * centerB) - centerU, centerU * 2, centerU * 2);
    fill(0);
    ellipse(this.x - eyeW, -(2*centerB)-centerU-(3*this.size),5*this.size,5*this.size);
    ellipse(this.x + eyeW, -(2*centerB)-centerU-(3*this.size),5*this.size,5*this.size);
    fill(255,0,0);
    triangle(this.x,-(2*centerB)-centerU,this.x+noseW,-(2*centerB)-centerU+2*this.size,this.x,-(2*centerB)-centerU+5*this.size);
    fill(0);    
    rect(this.x - (thatW / 2),-(2*centerB) - 2*(5*centerU/6), thatW, - 20 * this.size);
    rect(this.x - (bhatW / 2),-(2*centerB) - 2*(5*centerU/6), bhatW, - 5 * this.size);
    pop();
}

//function for making snowman
function makeSnowman(birthLocationX) {
    var snowman = {x: birthLocationX,
                speed: -1.0,
                move: snowMove,
                display: snowDisplay,
                size: round(random(1,2))}
    return snowman;
}

//the ground is displayed
function displayGround(){
    fill(121, 186, 209);
    rect(0, 0, width, height - 50);
}

For this project, I started with the template code, which I changed to make different objects. I played around with making the snowmen. I really understood how arrays in functions are used for greater efficiency. The following is the sketch for the project.

Alice Fang – Project 10

sketch

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-10-Generative Lanscape
*/

var boats = [];
var clouds = [];
var terrainDetail = 0.001; // small waves
var terrainSpeed = 0.0005;


function setup() {
    createCanvas(400, 200);
    noStroke();
    
    for (var i = 0; i < 5; i++) {
      // populate arrays
      var boatX = random(width);
      var boatY = random(height / 2, height - 20);
      boats[i] = makeBoat(boatX, boatY);

      var cloudX = random(width);
      var cloudY = random(0, height / 3);
      clouds[i] = makeCloud(cloudX, cloudY);
    }
}

function draw() {
    background(210, 235, 250);

    // sun
    fill('Gold');
    ellipse(350, 20, 20, 20);

    // ocean
    fill(180, 215, 230);
    rect(0, height / 2, width, height);

    // top current
    stroke(170, 205, 220);
    beginShape();
    for (var w = 0; w < width; w++) {
        var t = (w * terrainDetail) + (millis() * terrainSpeed);
        var Y = map(noise(t), 0, 1, height / 2, height);
        vertex(w, Y);
    }
    endShape();
    // bottom current
    stroke(170, 205, 220);
    beginShape();
    for (var w = 0; w < width; w++) {
        var t = (w * terrainDetail) + (millis() * terrainSpeed);
        var Y = map(noise(t), 0, 1, height / 2 + 20, height);
        vertex(w, Y);
        vertex(w, Y+10);
    }
    endShape();

    // draw boats
    for (var j = 0; j < boats.length; j++) {
        boats[j].draw();
        boats[j].move();
    }

    // draw clouds
    for (var k = 0; k < clouds.length; k++) {
        clouds[k].draw();
        clouds[k].move();
    }

}

// boats
function drawBoat() {
    // mast
    var mastX = this.xPos + (this.rWidth * 2 / 3);
    stroke(10, 30, 20);
    strokeWeight(3);
    line(mastX, this.yPos - 3 * this.rHeight, mastX, this.yPos);

    // boat
    noStroke();
    fill('LightSalmon');
    quad(this.xPos, this.yPos, this.xPos + this.rWidth, this.yPos, 
        this.xPos + this.rWidth - this.xOff, this.yPos + this.rHeight, this.xPos + this.xOff, this.yPos + this.rHeight);

    // sail
    noStroke();
    fill(255, 245, 238);
    triangle(mastX, this.yPos - 5, mastX - this.rSail, this.yPos - 5, mastX, this.yPos - 4 * this.rHeight);
    triangle(mastX, this.yPos - 5, mastX + this.rSail / 2, this.yPos - 5, mastX, this.yPos - 4 * this.rHeight);

}

function moveBoat() {
    this.xPos += this.speed;
     //if boat reaches right side, restart at left; randomize speed, width, height, offset
    if (this.xPos > width) { 
        this.xPos = 0;
        this.xOff = random(5, 15); 
        this.rWidth = random(40, 60);
        this.rHeight = random(8, 12);
        this.speed = random(0.1, 0.5);
    }

}

function makeBoat(x, y) {
    var boat = { xPos: x,
                yPos: y,
                xOff: random(5, 10), // offset of trapezoid
                rSail: random (10, 20),
                rWidth: random(30, 50),
                rHeight: random(8, 12),
                speed: random(0.1, 0.5),
                draw: drawBoat,
                move: moveBoat}
    return boat;
}

// clouds
function drawCloud(x, y) {
    fill(240, 245, 250, 120);
    ellipse(this.xPos, this.yPos, this.rWidth, this.rWidth);
    ellipse(this.xPos + this.rWidth/2, this.yPos, this.rWidth * 2, this.rWidth * 2);
    ellipse(this.xPos + this.rWidth, this.yPos, this.rWidth, this.rWidth);

}

function moveCloud() {
    this.xPos += this.speed;
    //if cloud reaches right side, restart at left; randomize speed
    if (this.xPos > width) {
        this.xPos = 0;
        this.speed = random(0.1, 0.4);
    }
}

function makeCloud(x, y) {
    var cloud = { xPos: x,
                yPos: y,
                rWidth: random(10, 20),
                speed: random(0.05, 0.3),
                draw: drawCloud,
                move: moveCloud}
    return cloud;
}

Sketch of boats!

I wanted to create a calm, cute landscape that wasn’t exactly too urban, so when I asked my roommate and she offered the suggestion of beaches, I thought of an ocean populated by little boats. I struggled with implementing objects, because this was the first time I had to code it personally instead of just editing certain elements, but doing this really helped me understand objects better.