Category: Section C

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-10-Landscape
*/

var trees = []; //array for bigger trees (in the back)
var bushes = []; //array for smaller trees 
                 //I just called them bushes to make things easier
var speed = 0.00001; //leftward shift rate of mountains

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

  // create initial trees; make 5 big and 5 small trees
  for (var t = 0; t < 5; t++){
    var tx = random(width);
    trees[t] = makeTree(tx);
    var bx = random(width);
    bushes[t] = makeBush(bx);
  }
  frameRate(10); //set tree and bush frameRate to 10
}

//make tree at x
function makeTree(tx) {
  var trees = {x: tx,
              draw: treeDraw}
  return trees;
}

//make bush at x
function makeBush(bx) {
  var bushes = {x: bx,
              draw: bushDraw}
  return bushes;
}

//draw tree
function treeDraw() {
  noStroke();
  //leaves
  fill(14, 90, 117);
  triangle(this.x - 20, 398, this.x + 20, 398, this.x, 320);
  //trunk
  stroke(13, 77, 94);
  line(this.x, 330, this.x, 400);
  //movement
  this.x -= 1;

  //make new trees
  var newTree = 0.0025; //probability for new tree "birth"
  if (random(0, 1) < newTree) {
      trees.push(makeTree(width + 20)); //push new tree into trees array
  }
}

//draw bush
function bushDraw() {
  noStroke();
  //leaves
  fill(28, 65, 72);
  triangle(this.x - 15, 403, this.x + 15, 403, this.x, 330);
  //trunk
  stroke(13, 77, 94);
  line(this.x, 340, this.x, 405);
  //movement
  this.x -= 1.2;

  //make new bushes
  var newBush = 0.0025; //probability for new bush "birth"
  if (random(0, 1) < newBush) {
      bushes.push(makeBush(width + 15)); //push new bush into bushes array
  }
}

function draw() {
  background(228, 239, 242);
  noStroke();

  //orange gradient layer
  for (var y = 100; y < 400; y++) { //for this specific y interval,
    var a = map(y, 100, 400, 0, 255); //map y interval to alpha
    stroke(240, 178, 158, a); 
    line(0, y, width, y); //draw lines with mapped alphas
  }

  //sun
  fill(240, 178, 158);
  ellipse(240, 200, 25);

  //mountain layer 1
  beginShape(); 
  stroke(149, 189, 207);
  var variance1 = 0.001;
  for (i = 0; i < width; i++) {
    var t = (i * variance1) + (millis() * speed);
    var y = map(noise(t), 0, 1, 100, height);
    line(i, y, i, height); 
    }
  endShape();

  //fog layer 1
  for (var y = 200; y < 400; y++) {
    var b = map(y, 200, 400, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //mountain layer 2
  beginShape(); 
  stroke(85, 170, 200);
  var variance2 = 0.0015;
  for (j = 0; j < width; j++) {
    var t = (j * variance2) + (millis() * speed);
    var y = map(noise(t), 0, 1, 150, height);
    line(j, y, j, height); 
    }
  endShape();

  //fog layer 2
  for (var y = 200; y < 480; y++) {
    var b = map(y, 200, 480, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //draw trees using the treeDraw function
  for (var u = 0; u < trees.length; u++) {
    trees[u].draw();
  }

  //fog layer 3
  for (var y = 350; y < 480; y++) {
    var b = map(y, 350, 480, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //ground layers
  noStroke();
  fill(117, 144, 139);
  rect(-1, 400, width + 1, 10);
  fill(63, 84, 77);
  rect(-1, 405, width + 1, 80);

  //draw bushes using the bushDraw function
  for (var v = 0; v < bushes.length; v++) {
    bushes[v].draw();
  }

  //removes trees when they go off the left edge of the screen;
  //stores the trees still on screen in a new array
  var treesToKeep = [];
  for (var i = 0; i < trees.length; i++){
    if (trees[i].x + 20 > 0) {
      treesToKeep.push(trees[i]);
    }
  }
  trees = treesToKeep;

  //removes bushes when they go off the left edge of the screen;
  //stores the bushes still on screen in a new array
  var bushesToKeep = [];
  for (var v = 0; v < bushes.length; v++){
    if (bushes[v].x + 20 > 0) {
      bushesToKeep.push(bushes[v]);
    }
  }
  bushes = bushesToKeep;

}

I enjoyed this project, even though I initially struggled a lot with what kind of landscape I wanted to do. I wanted to make a landscape that looked believable, and since we basically all only had one terrain generation template, it was hard for me to pick a landscape I felt like I could create and be satisfied with. I ended up looking through landscape photos and using one for inspiration and reference. It was really helpful to be able to pull colors from the photo, as well as realistic landscape qualities.

I’m pretty proud with how my landscape turned out, especially with the fog (which I learned how to code alpha gradients for). I really want to try using this kind of concept to generate backgrounds that could be used for games or for open-world environments. I might explore some of that in the future (maybe for my final project?).

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-09-Portrait

var fish = []; 

function setup() {
  createCanvas(480, 480);
  frameRate(7);
  for(var l = 0; l < 10; l++) {
    var fx = random(width);
    fish[l] = makeFish(fx);
  }
  frameRate(6);
}
 
function draw() {
  background(212, 211, 234);
  sun(); //sun in the sky 
  mountainBackground(); //mountain 
  hillInFrontofMountain(); //small hill in front of mountain
  waterRiver(); //river at the bottom 
  updateFish();
  removeFish();
  randomFish();
  fishDisplay(); 
    //randomizes fish in the "river"
}

// displays fish
function updateFish(){
    for (var i = 0; i < fish.length; i++){
        fish[i].move();
        fish[i].display();
    }
}
// fish disappear when hitting the edge
function removeFish(){
    var fishKeep = [];
    for (var q = 0; q < fish.length; q++){
        if (fish[q].x + fish[q].breadth > 0) {
            fishKeep.push(fish[q]);
        }
    }
    fish = fishKeep;
}
// randomized fish to be added to the end 
function randomFish() {
    var updatedNewFish = 0.009;
    if (random(0, 1) < updatedNewFish) {
        fish.push(makeFish(width));
    }
}

// update position of fish 
function fishMove() {
    this.x += this.speed;
}

// drawing the fish
function fishDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight;

    push();
    noStroke();
    translate(this.x, height - 140);
    //fish body
    fill(255, 161, 210);
    ellipse(3, bHeight+20, 35, 25);
    //fish tail
    fill(255, 161, 210);
    triangle(10, bHeight+20, 30, bHeight, 30, bHeight+40);
    pop();

}

function makeFish(birthLocationX) {
    var fhm = {x: birthLocationX,
             breadth: 5,
             speed: -3.0,
             nFloors: round(random(2,4)),
             move: fishMove,
             display: fishDisplay}
    return fhm;
}

function waterRiver() {
//makes the "river" appear 
  fill(8, 42, 102);
  rect(-1, 350, 480, 130);
}

function hillInFrontofMountain() {
//makes the hill in front of the mountain move 
  var terrainSpeed3 = 0.0001;
  var terrainDetail3 = 0.002;

  beginShape(); 
  stroke(44, 87, 181);
  for (var x3 = 0; x3 < width; x3++) {
        var p = (x3 * terrainDetail3) + (millis() * terrainSpeed3);
        var z = map(noise(p), 0, 1, 300, 200);
        line(x3, z, x3, height); 
    }
    endShape();
}

function mountainBackground() {
//makes mountains in the back
  var terrainSpeed2 = 0.0005;
  var terrainDetail2 = 0.01;
  
  stroke(99, 129, 214);
  beginShape(); 
  for (var x2 = 0; x2 < width; x2++) {
    var t = (x2 * terrainDetail2) + (millis() * terrainSpeed2);
    var y2 = map(noise(t), 0, 1, 200, 10);
    line(x2, y2, x2, height); 
    }
  endShape();
}

function sun() {
  fill(234, 119, 101); 
  noStroke(); 
  ellipse(417, 60, 80, 80);

  fill(255, 146, 128); 
  noStroke(); 
  ellipse(420, 60, 75, 75);
} 

As it gets colder in Pittsburgh, I started to miss the warm weather and my trip to Taiwan. For my landscape, I definitely wanted to make a view of mountains. This photo came to mind.

Among all the projects, this project was the hardest. I had a really hard time with making the fishes and making them move. I had a really hard time making the mountains long and keeping them consistent. Overall, I don’t really like the outcome of the final project. If I had to make changes, I would definitely add more details to the mountain.

generativelandscape

var jellyfish = [];

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of jellyfish
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(height);
        jellyfish[i] = makeJellyfish(rx, ry);
    }

    frameRate(30);
}

function draw() {
    background("lightblue"); 
    
    updateJellyfish();
    removeJellyfish();
    addNewJellyfish(); 
}

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

function removeJellyfish(){
    var jellyfishToKeep = [];
    for (var i = 0; i < jellyfish.length; i++){
        if (jellyfish[i].y + jellyfish[i].size > 0) {
            jellyfishToKeep.push(jellyfish[i]);
        }
    }
    jellyfish = jellyfishToKeep; // surviving jellyfish
}

// HOW TO ADD SMOOTHLY!!!
function addNewJellyfish() {
    var newJellyfishLikelihood = 0.015; 
    if (random(0, 1) < newJellyfishLikelihood) {
        jellyfish.push(makeJellyfish(random(width), height));
    }
}

// update position of jellyfish every frame
function jellyfishMove() {
    this.y += this.speed;
}

// draw jellyfish
function jellyfishDisplay() {
    fill(this.rr, this.rg, this.rb); 
    noStroke();
    arc(this.x, this.y, this.size, this.size, PI, 2 * PI, CHORD);
    push();
    translate(this.x, this.y);
    noFill();
    stroke(255);
    strokeWeight(2);
    bezier(0, 0, -20, 40, 20, 30, 0, 70);
    bezier(-10, 0, -30, 40, 10, 30, -10, 70);
    bezier(-20, 0, -40, 40, 0, 30, -20, 70);
    bezier(10, 0, -10, 40, 30, 30, 10, 70);
    bezier(20, 0, 0, 40, 40, 30, 20, 70);
    pop();
}

function makeJellyfish(startingX, startingY) {
    var jf = {x: startingX,
    			y: startingY,
    			rr: random(0, 200),
    			rg: random(0, 100),
    			rb: random(0, 255),
                size: random(50, 100),
                speed: -1.0,
                move: jellyfishMove,
                display: jellyfishDisplay}
    return jf;
}

When I read about this project, the first “landscape” I thought of was sea animals passing by in a submarine or in an aquarium. As a result, I wanted to create something to imitate the perspective of someone traveling under water, like being in a submarine. I chose to draw jellyfish and to view them from a bird’s eye view (imagine being in a submarine with glass on the floor/bottom). In addition, I chose to randomize the size and colors of the jellyfish. Here are a few sketches of how I decided on perspective/shape.

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.