Project-10-Landscape – Page 3 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

enwandu-Project-10-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.

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.

creyes1-Project-10-Landscape

creyes1 Project-10 (Generative Landscape)

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-10 (Generative Landscape)

//Colors
var green1 = [152, 186, 157];
var green2 = [169, 200, 172];
var green3 = [122, 153, 126];

//Shape Arrays
var orbs = [];
var cords = [];
var clouds = [];
var landlines = [];

var inc = 0; //Value for noise command

function setup() {

    createCanvas(480, 480);
    background(green1);
    noStroke();
    angleMode(DEGREES);

    //Generates random land form
    for (var x = 0; x < width; x++) {
        landlines.push(makeLandscape(x, 1));
    }

    //Draws initial set of orbs
    for (var i = 0; i < 5; i++) {
        var rx = random(width);
        var ry = random(height);
        orbs[i] = makeOrb(rx, ry);
    }

    //Adds cord properties to array
    for (var i = 0; i < 10; i++) {
        cords.push(makeCord());
    }


}



function draw() {

    background(green1);

    //Lighter background shapes
    fill(green2);
    noStroke();
    ellipse(width/2, height/2, 100, 300);
    ellipse(width/2 + 120, height/2, 75, 200);
    ellipse(width/2 - 120, height/2, 75, 200);

    //Renders and moves landscape
    for (var x = 0; x < landlines.length; x++) {
        landlines[x].display();
        landlines[x].move();
    }

    //Removes first in the array, or the line that goes off-canvas
    landlines.shift();

    //Increases increment by 1, pushes a new land line onto array
    inc += 1;
    landlines.push(makeLandscape(width-1, inc));

    //Layers lines and orbs for depth
    for (var i = 0; i < 7; i++) {
        cords[i].display();
    }

    updatePositions();

    for (var i = 7; i < 10; i++) {
        cords[i].display();
    }

    addOrb();
    addCloud();
}



//GENERAL FUNCTIONS-------------------------------------------------------------

function updatePositions() {

    //Update orb position and display
    for (var i = 0; i < orbs.length; i++) {
        orbs[i].move();
        orbs[i].display();
    }

    //Update cloud position and display
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }

}


//Removes orbs and clouds after passing edge of canvas
function removeFalloff() {

    var orbsToKeep = [];

    for (var i = 0; i < orbs.length; i++) {
        if (orbs[i].x + orb[i].breadth > 0) {
            orbsToKeep.push(orbs[i]);
        }
    }

    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x) {
            cloudsToKeep.push(clouds[i]);
        }
    }

}

//ORB FUNCTIONS-----------------------------------------------------------------

//Orb & orb properties
function makeOrb(spawnPositionX, spawnPositionY) {

    var orb = {x: spawnPositionX,
               y: spawnPositionY,
               breadth: 216 * this.scale,
               scale: random(.25, 1),
               speed: random(-.75, -.15),
               angle: random(0, 360),
               move: orbMove,
               display: displayOrb}

    return orb;
}

//Base orb drawing, capabable of scaling and rotation
function displayOrb() {

    var orbSize = 216 * this.scale;
    var px = this.x-(orbSize/2);
    var py = this.y-(orbSize/2);

    //center position 108, 108
    //Inside pink shell rim
    fill(216, 154, 196);
    push();
    translate(px, py);
    rotate(this.angle);
    beginShape();
    vertex((53.8 * this.scale), (15.2 * this.scale));
    bezierVertex((1.781 * this.scale), (45.703 * this.scale),
                 -(15.078 * this.scale), (112.01 * this.scale),
                 (15.42 * this.scale), (163.31 * this.scale));
    bezierVertex((45.919 * this.scale), (214.601 * this.scale),
                 (112.226 * this.scale), (231.46 * this.scale),
                 (163.52 * this.scale), (200.96 * this.scale));
    bezierVertex((214.817 * this.scale), (170.462 * this.scale),
                 (231.676 * this.scale), (104.155 * this.scale),
                 (201.18 * this.scale), (52.86 * this.scale));
    bezierVertex((170.679 * this.scale), (1.564 * this.scale),
                 (104.372 * this.scale), -(15.295 * this.scale),
                 (53.8 * this.scale), (15.2 * this.scale));
    endShape();

    //Inside purple
    fill(158, 90, 146);
    beginShape();
    vertex(134.1 * this.scale, 40.76 * this.scale);
    bezierVertex(97.698 * this.scale, 46.405 * this.scale,
                 62.946 * this.scale, 83.298 * this.scale,
                 56.3  * this.scale, 126.13 * this.scale);
    bezierVertex(49.074 * this.scale, 172.708 * this.scale,
                 77.436 * this.scale, 207.524 * this.scale,
                 119.85 * this.scale, 200.15 * this.scale);
    bezierVertex(161.836 * this.scale, 192.853 * this.scale,
                 196.48 * this.scale, 147.78 * this.scale,
                 197.52 * this.scale, 103.01 * this.scale);
    bezierVertex(198.488 * this.scale, 61.779 * this.scale,
                 170.188 * this.scale, 35.198 * this.scale,
                 134.1 * this.scale, 40.76 * this.scale);
    endShape();

    //Inside purple shadow
    rectMode(CENTER);
    fill(116, 55, 107);
    push();
    translate((83.78 * this.scale), (93.85 * this.scale));
    rotate(30);
    rect(0, 0, 35 * this.scale, 175 * this.scale);
    pop();

    push();
    translate((108.09 * this.scale), (108.64 * this.scale));
    rotate(30);
    rect(0, 0, 6.5 * this.scale, 175 * this.scale);
    pop();

    //Large pink shell, counter-clockwise winding
    fill(194, 112, 173);
    beginShape();
        vertex((53.8 * this.scale), (15.2 * this.scale));
        bezierVertex((1.781 * this.scale), (45.703 * this.scale),
                     -(15.078 * this.scale), (112.01 * this.scale),
                     (15.42 * this.scale), (163.31 * this.scale));
        bezierVertex((45.919 * this.scale), (214.601 * this.scale),
                     (112.226 * this.scale), (231.46 * this.scale),
                     (163.52 * this.scale), (200.96 * this.scale));
        bezierVertex((214.817 * this.scale), (170.462 * this.scale),
                     (231.676 * this.scale), (104.155 * this.scale),
                     (201.18 * this.scale), (52.86 * this.scale));
        bezierVertex((170.679 * this.scale), (1.564 * this.scale),
                     (104.372 * this.scale), -(15.295 * this.scale),
                     (53.8 * this.scale), (15.2 * this.scale));

    //Ellipsoid cutout, clockwise winding
        beginContour();
            vertex((175.65 * this.scale), (50.62 * this.scale));
            bezierVertex((209.531 * this.scale), (65.455 * this.scale),
                         (222.219 * this.scale), (111.235 * this.scale),
                         (203.99 * this.scale), (152.87 * this.scale));
            bezierVertex((185.753 * this.scale), (194.502 * this.scale),
                         (143.504 * this.scale), (216.223 * this.scale),
                         (109.62 * this.scale), (201.38 * this.scale));
            bezierVertex((75.736 * this.scale), (186.544 * this.scale),
                         (63.049 * this.scale), (140.764 * this.scale),
                         (81.28 * this.scale), (99.13 * this.scale));
            bezierVertex((99.515 * this.scale), (57.497 * this.scale),
                         (141.764 * this.scale), (35.776 * this.scale),
                         (175.65 * this.scale), (50.62 * this.scale));
        endContour();

    endShape(CLOSE);

    //Shine
    fill(218, 179, 212);

    push();
    translate(  + (174.49 * this.scale),   + (117.35 * this.scale));
    rotate(25);
    ellipse(0, 0, 7 * this.scale, 30 * this.scale);
    pop();

    push();
    translate(  + (172.35 * this.scale),   + (140.86 * this.scale));
    rotate(25);
    ellipse(0, 0, 4 * this.scale, 17 * this.scale);
    pop();
    pop();
}

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

//Occasionally adds an additional orb to the array
function addOrb() {
    var spawnChance = 0.005;
    if (random(0, 1) < spawnChance) {
        orbs.push(makeOrb(width*1.5, random(height)));
    }
}

//CORD FUNCTIONS----------------------------------------------------------------

//Line properties
function makeCord() {
    var cord = {x1: 0,
               x2: width,
               y1: randomGaussian(height*(2/3), 40),
               y2: randomGaussian(height*(2/3), 40),
               col: [218, 179, 212],
               weight: 2,
               display: drawCord}
    return cord;
}

//Draws line
function drawCord() {
    stroke(this.col);
    strokeWeight(this.weight);
    line(this.x1, this.y1, this.x2, this.y2);
    noStroke();
}

//CLOUD FUNCTIONS---------------------------------------------------------------

//Cloud properties
function makeCloud() {
    var cloud = {
        x: width*1.5,
        y: random(height),
        h: random(3*4, 12*4),
        w: random(40*4, 85*4),
        move: cloudMove,
        speed: random(-.5, -.1),
        col: [255, 255, 255, 100],
        display: drawCloud}
    return cloud;
}

//Draws cloud
function drawCloud() {
    noStroke();
    fill(this.col);
    ellipse(this.x, this.y, this.w, this.h);

    //ellipse(this.x + this.w*1.3, this.y - this.h*.25, this.w*.33, this.h*.33);
}

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

//Occasionally adds cloud to array
function addCloud() {
    var spawnChance = 0.004;
    if (random(0, 1) < spawnChance) {
        clouds.push(makeCloud());
    }
}

//LAND FUNCTIONS----------------------------------------------------------------

//Landscape properties
function makeLandscape(x, i) {
    var noiseScale = 0.002;
    var noiseVal = noise((x+i)*noiseScale);
    var landline = {x: x,
                    y1: height - 50 - noiseVal*100,
                    y2: height,
                    col: green3,
                    weight: 1,
                    speed: -1,
                    move: panLand,
                    display: drawLandscape}
    return landline;
}

//Draws individual lines for landscape
function drawLandscape() {

        stroke(this.col);
        strokeWeight(this.weight);
        line(this.x, this.y1, this.x, this.y2);

}

//Moves landmass
function panLand() {
    this.x += this.speed;
}

I wound up running into more difficulty than usual with this assignment, although it was definitely an interesting process when it came to problem-solving. I kept the main components of the program fairly simple – objects with random properties moving across the page. However, I really wanted to try to figure out how the landscape in the Flags assignment work, and after a lot of trial and error made a variation of it using moving vertical lines to piece together that far-off hillside. While the main objects weren’t so difficult to implement, the landscape took up a sizable chunk of my time, but I’m still happy with the result, plus it forced me to really understand the order in which functions were performed, as well as the little nuances of arrays and objects.

Analog & Digital Sketches:

Project 10, odh

odhP10

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 10

var buildings = [];
//Declares the X location of the Moon
var moonX = 430;

function setup() {
    createCanvas(480, 240);
    for (var i = 0; i < 8; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }

    frameRate(10);
}
 
function draw() {
    background(10, 10, 80);
    
    //Moves the moon across the sky 
    //and resets when it exits the frame
    moonX = moonX - 1;
    if (moonX < -100) {
        moonX = 530;
        moonX = moonX - 1;
    };

    //Creates the moon
    noStroke();
    fill(250);
    ellipse(moonX, 60, 100, 100);
    fill(10, 10, 80)
    ellipse(moonX+20, 50, 80, 80);
    translate(0, 40);
    noFill(); 

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

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


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


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


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

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

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

I chose to have a nighttime view of a city skyline. I have the moon behind the buildings moving across the sky until it resets and reappears on the on the opposite side of the canvas. Overall, I am not pleased with the product along with my lack of understanding to create a more interesting and developed product.

BrandonHyun-Project-10

sketch

//Brandon Hyun
//bhyun1@andrew.cmu.edu
//15104 Section B
//Project 10


var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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

}

function draw() {
  moon();
  drawMountains1();
  drawMountains2();
  drawMountains3();
  drawMountains4();

}


function drawMountains1(){
  //noStroke();
  fill(118,54,38,20);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
      var y = map(noise(t), 0,1, 0, height);
      vertex(x, y-15);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function drawMountains2(){

  fill(225,54,38,30);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
      var y = map(noise(t), 0,1, 0, height*1.2);
      vertex(x, y-15);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function drawMountains3(){

  fill(245,54,38,30);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
      var y = map(noise(t), 0,1, 0, height*1.35);
      vertex(x, y-15);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function drawMountains4(){

  fill(255,54,38,30);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
      var y = map(noise(t), 0,1, 0, height*1.6);
      vertex(x, y-15);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function moon(){
  fill(105,105,105);
  ellipse(width/2,height/3,200,200);
}

I wanted to create an abstract landscape that creates continuous landscape and the contour lines create this 3-dimensional space. In order to create this feel, I increased the opaqueness of each mountain ranges and It has a surreal feel to it.

rmanagad-project10

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-10


var mountain = [];
var mountainLinks = [
	"https://i.imgur.com/U4n2NMc.png",
	"https://i.imgur.com/OwkMkiT.png"]
var mountainAssets = [];

var tree = [];
var treeLinks = [
	"https://i.imgur.com/4b5pxqM.png",
	"https://i.imgur.com/1YjM5m7.png",
	"https://i.imgur.com/7sXiAyN.png"]
var treeAssets = [];

function preload() { //made assets in Adobe Illustrator to transfer over.

	//mountainloop
	for (var i = 0; i < mountainLinks.length; i++) {
		mountainAssets[i] = loadImage(mountainLinks[i]);
	}
	for (var i = 0; i < treeLinks.length; i++) {
		treeAssets[i] = loadImage(treeLinks[i]);
	}
} 

function setup() {
    createCanvas(480, 240); 
    frameRate(60);
    mountain[0] = mountainComponents(200);

    tree[0] = treeComponents(150);

}


function draw() {
    background(255); 

    //actual background
    stroke(0);
    fill(51, 46, 42);
    rect(0,0, width, height);

    //draw mountains
   	newMountains();
   	randomizeMountains();


   	//draws hills in the background
   	drawHills();

   	//drawing the ground
   	noStroke();
   	fill(238);
   	rect(0, 170, width, 70);

   	//setting mountains in an initial location.
    
    //draws bushes
   	newTrees();
   	randomizeTrees();


}

/////////////////////////////////

function drawHills(){ //midground hills for introduction of color.
	var terrainSpeed = 0.0006;
    var terrainDetail = 0.005;

    push();
    beginShape();
    noStroke();
    fill(186, 219, 217);
    vertex(0, 300);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height)
        vertex(x, y - 10);

    }
    vertex(width, height);
    endShape();
    pop();
}



///////////////////// TREES

function newTrees() {
	//keeps the trees moving along the x-axis
	for (var i = 0; i < tree.length; i++) {
		tree[i].tMove();
		tree[i].tPlace();
	}
}

function treePlace() { //draws the trees
	image(treeAssets[this.nFloor], this.x, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	image(treeAssets[this.nFloor], this.x+300, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	fill(255);
}

function treeMove() {
	this.x -= this.speed
}

function randomizeTrees() {
	var chance = 0.002 //places in more trees into the array.
	if (random(0, 1) < chance) {
		tree.push(treeComponents(width));
	}
}

function treeComponents(originX) {
	var treeComponents = {
		x: originX,
		y: random(135, 140),
		cwidth: random(30, 50),
		cheight: random(30, 50),
		speed: 1,
		nFloor: floor(random(0,3)),
		tMove: treeMove,
		tPlace: treePlace
	}
	return treeComponents;
}

///////////// MOUNTAINS 

function newMountains() {
	//keeps the mountains moving along the x-axis
	for (var i = 0; i < mountain.length; i++) {
		mountain[i].mMove();
		mountain[i].mPlace();
	}
}

function mountainPlace() { //draws the mountains
	image(mountainAssets[this.nFloors], this.xx -100, this.yy-130, mountainAssets[this.nFloors].width/10, mountainAssets[this.nFloors].height/10);
	fill(255);
}

function mountainMove() {
	this.xx -= this.speedy
}

function randomizeMountains() {
	var chance = 0.002 //places in more mountains into the array.
	if (random(0, 1) < chance) {
		mountain.push(mountainComponents(width));
	}
}

function mountainComponents(originXX) {
	var mountainComponents = {
		xx: originXX,
		yy: random(130, 140),
		speedy: 0.5,
		nFloors: floor(random(0,1)),
		mMove: mountainMove,
		mPlace: mountainPlace
	}
	return mountainComponents;
}

I took inspiration for this landscape by a project I was working on in Illustrator. With that being said, many of the assets were created first in Illustrator and loaded into my program. I had the most challenge with debugging this code and scaling images correctly — minor issues kept me from moving forward with actually drawing the program out.

jiaxinw-project 10-Landscape

sketch

//var smoke = {x:120, y:365, w:35, h:20, d:0.5, a:150}
var dishes=[];
var smokes=[];
var eyelx=220;
var eyerx=260;
var sushiLinks = [
    "https://i.imgur.com/dMoEprH.png",
    "https://i.imgur.com/69T53Rk.png",
    "https://i.imgur.com/LQ3xxUA.png",
    "https://i.imgur.com/x19Rvvq.png",
    "https://i.imgur.com/d7psp9U.png"]
var sushi = [];

function preload(){
    for (var i = 0; i < sushiLinks.length; i++) {
        sushi[i]=loadImage(sushiLinks[i]);
    }
}



function setup() {
    createCanvas(480,480);
    for (var i = 0; i < 4; i++) {
        dishes[i]=makeDish(-90+i*130);
    }

    for(var j = 0; j<3; j++){
        smokes[j]= makeSmoke(120);
    }
}
    

function draw() {
    background(165,199,199);
    
    drawCurtain();
    
    drawChef();
    
    drawEye();

    drawBody();

    drawBelt()
    
    drawTable();

    drawPlate();

    drawDishPile();

    drawCup();

    //smoke
    updateAndDisplaySmokes();
    removeSmoke();
    addNewSmoke();

    
    //dishes on the belt
    updateAndDisplayDishes();
    removeDish();
    addNewDish();

}

function drawCurtain(){
    noStroke();
    fill(82,106,121)
    rect(0,0,width/2-5,90);
    rect(width/2+5,0,width/2-5,90)
    stroke(106,137,156);
    strokeWeight(5);
    rect(-15,-15,width/2-5,90);
    rect(width/2+20,-15,width/2-5,90)
}

function drawChef(){
    push();
    noStroke();
    rectMode(CENTER);
    //hat
    fill(129,153,160)
    rect(width/2,120,100,30)
    //face and neck
    fill(235,216,190);
    rect(width/2,170,100,70);
    rect(width/2,210,50,20);
}

function drawEye(){
    push();
    fill(37)
    ellipseMode(CENTER);
    ellipse(eyelx,165,12,7)
    ellipse(eyerx,165,12,7)
    eyelx += 0.2;
    eyerx += 0.2;
    if(eyelx>=width/2-5){
        eyelx = 205;
        eyerx = 245;
    }
    pop();
}

function drawBody(){
    //body
    fill(152,178,186);
    rect(width/2,300,130,160);
    //collar
    fill(129,151,158);
    triangle(width/2-45,220,width/2+45,220,width/2,280);
    fill(212,232,238);
    triangle(width/2-30,220,width/2+30,220,width/2,260);
    //arms
    fill(129,153,160);
    quad(width/2-65,220,width/2-90,250,width/2-90,310,width/2-65,310);
    quad(width/2+65,220,width/2+90,250,width/2+90,310,width/2+65,310);
    fill(235,216,190);
    rect(width/2-77,345,24,70)
    rect(width/2+77,345,24,70)
    pop();
}

function drawBelt(){
    noStroke();
    fill(152,151,151)
    rect(0,350,width,height/3)
    fill(133);
    rect(0,360,width,5);
    fill(183);
    rect(0,330,width,30)
}

function drawTable(){
    fill(101,92,85);
    rect(0,440,width,40);
}

function drawPlate(){
    push();
    rectMode(CENTER);
    fill(222,207,175);
    rect(width/2,420,130,15);
    rect(width/2-30,428,20,23);
    rect(width/2+30,428,20,23);
    pop();
}

function drawDishPile(){
    fill(240);
    rect(width/2+110,389,90,7)
    rect(width/2+110,406,90,7)
    rect(width/2+110,423,90,7)
    fill(218);
    rect(width/2+125,396,60,10)
    rect(width/2+125,413,60,10)
    rect(width/2+125,430,60,10)
}

function drawCup(){
    push();
    fill(105,108,91);
    rect(width/2-155,380,45,60,5)
    pop();
}

function drawSmoke(){
    fill(255,this.a)
    ellipse(this.x,this.y,this.w,this.h);
}

function moveSmoke(){
    this.x += this.d;
    this.y -= this.d;
}

function scaleSmoke(){
    this.w -= 0.2;
    this.h -= 0.2;
}

function alphaSmoke(){
    this.a -= 2;
}

function makeSmoke(birthLocationX) {
    var smoke = {x:birthLocationX, 
                 y:365, 
                 w:35, 
                 h:20, 
                 d:0.3, 
                 a:150,
                 move:moveSmoke,
                 scale:scaleSmoke,
                 alpha:alphaSmoke,
                 drawS:drawSmoke}
    return smoke;
}

function updateAndDisplaySmokes(){
    // Update the smoke position, scale, alpha 
    for (var i = 0; i < smokes.length; i++){
        smokes[i].move();
        smokes[i].scale();
        smokes[i].alpha();
        smokes[i].drawS();
    }
}

function removeSmoke(){
    var smokesToKeep = [];
    for (var i = 0; i < smokes.length; i++){
        if (smokes[i].a > 0) {
            smokesToKeep.push(smokes[i]);
        }
    }
    smokes = smokesToKeep; 
}

function addNewSmoke(){
    if(frameCount%45==0){
    smokes.push(makeSmoke(120))
    };
}

function makeDish(dishX) {
    var dish = {x:dishX,
                speed:1,
                move:moveDish,
                display:displayDish,
                type:1}
    return dish;
}

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

function removeDish(){
    var dishesToKeep = [];
    for (var i = 0; i < dishes.length; i++){
        if (dishes[i].x < 480) {
            dishesToKeep.push(dishes[i]);
        }
    }
    dishes = dishesToKeep; 
}

function addNewDish(){
    if(frameCount%120==0){
    var newDish = makeDish(-90);
    newDish.type = random([0,1,2,3,4]);
    dishes.push(newDish)
    }
}

//create dish and sushi
function displayDish(x,type){
    push();
    translate(this.x,314);
    fill(240);
    rect(0,0,90,7)
    fill(218);
    rect(15,7,60,10);
    pop();
    drawSushi(x + 45, type);
}

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

function drawSushi(x, type){
    imageMode(CENTER)
    image(sushi[type], x, 302);

}

This project, I thought about making a sushi conveyable belt. I thought about making different dishes of sushi moving on the screen and the different sushi need to appear randomly. Therefore, at first, I drew out the scene of a sushi restaurant, where we could see a plate, a cup of tea and some empty dishes on the table. Above the table, there was the conveyable belt with sushi. Behind the belt, there was a sushi chef who kept looking at the sushi. The final result is fun! I liked how I could translate my sketch into a moving webpage 🙂