Sophia Kim – Project 10 Landscape – Sec C

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.

sketch of my idea
this one natural wonder in Taiwan (inspiration from this photo)

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.

Victoria Reiter – Project 10 – Landscape

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project 10 - Generative Landscape
*/

// array that holds flower objects
var flowers = [];
var terrainSpeed = 0.0005;
var terrainSpeed2 = 0.00015;
var terrainDetail = 0.005;
var image0;
var image1;
var image2;


function preload() {
    image0 = loadImage("https://i.imgur.com/qqE2J0x.png?1");
    image1 = loadImage("https://i.imgur.com/4xXEj18.png");
    image2 = loadImage("https://i.imgur.com/j45lLa7.png");
}

function setup() {
    createCanvas(480, 480); 
    // creates an initial collection of flowers
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        flowers[i] = makeFlowers(rx);
    }
    frameRate(10);
}


function draw() {
    // loads image as background
    image(image2, 0, 0, width * 2, height * 2);
    // start mountains
    push();
    noStroke();
    //purpl-ish color
    fill(51, 0, 51); 
    beginShape(); 
    for (var mx = 0; mx < width; mx++) {
        var t = (mx * terrainDetail) + (millis() * terrainSpeed2);
        var my = map(noise(t), 0,1, height / 10, height - 90);
        vertex(mx, my); 
    }
    // includes bottom corners of canvas to fill in the color of the shape
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop();
    //end mountains

    // begin grass
    push();
    noStroke();
    fill("green"); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height - height / 4, height - 80);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop()
    //end grass


    // drawing flowers
    updateAndDisplayflowers();
    removeflowersThatHaveSlippedOutOfView();
    addNewflowersWithSomeRandomProbability(); 

    // V flying on a turtle (eh why not?)
    flyingV(mouseX, mouseY);
}

// draws me flying on a turtle hehehe
function flyingV(x, y) {
    imageMode(CENTER);
    image(image1, x, y, 100, 80);
    image(image0, x - 15, y - 20, 200, 250);
}

// makes flowers appear on the grassy area
function updateAndDisplayflowers() {
    for (var i = 0; i < flowers.length; i++){
        flowers[i].move();
        flowers[i].display();
    }
}

    // If the flowers drop off the left edge, remove them from the array
function removeflowersThatHaveSlippedOutOfView(){
    var flowersToKeep = [];
    for (var i = 0; i < flowers.length; i++){
        if (flowers[i].x + flowers[i].breadth > 0) {
            flowersToKeep.push(flowers[i]);
        }
    }
    flowers = flowersToKeep; // remember the surviving flowers
}

function addNewflowersWithSomeRandomProbability() {
    // with a small probability add a new flower to the end.
    var newFlowersLikelihood = 0.8; 
    if (random(0, 1) < newFlowersLikelihood) {
        flowers.push(makeFlowers(width));
    }
}

// method to update position of flowers every frame
function flowersMove() {
    this.x += this.speed;
}
    
// draw the flowers baseed on my design from the wallpaper project!
function flowersDisplay() {
    push();
    translate(this.x, this.y);
    scale(.25);
    flowerStem(0, 0);
    flowerPetals(0, 0);
    stem(0, 0);
    leaves(15, -15);
    pop();
}

function makeFlowers(birthLocationX) {
    var flwr = {x: birthLocationX,
                y: random(height - 80, height),
                breadth: 50,
                speed: -8.0,
                nFloors: round(random(2,8)),
                move: flowersMove,
                display: flowersDisplay}
    return flwr;
}

// function to draw the stem
function stem(x, y) {
   strokeWeight(7);
    stroke(0, 155, 0);
    line(x, y, x + 85, y - 35);
}

// function to draw the leaves
function leaves(x, y) {
    noStroke();
    // leaf color
    fill(0, 190, 0);
    // actual leaves
    ellipse(x, y - 1, 24, 10);
    ellipse(x + 25, y + 9, 24, 10);
    ellipse(x + 21, y - 10, 24, 10);
    strokeWeight(2);
    // leaf vein color
    stroke(100, 230, 100);
    // each leaf also has a little line to represent its veins
    line(x - 12, y - 1, x + 12, y - 1);
    line(x + 13, y + 9, x + 37, y + 9);
    line(x + 9, y - 10, x + 33, y - 10);
}

// function to draw the stems branching to the petals
function flowerStem(x, y) {
    strokeWeight(4);
    stroke(0, 190, 0);
    // actual stem
    line(x + 56, y - 27, x + 46, y - 43);
    // each stem also has a little bulb
    ellipse(x + 46, y - 43, 7, 7);
    line(x + 55, y - 18, x + 72, y + 2);
    ellipse(x + 72, y + 2, 8);
    line(x + 70, y - 33, x + 78, y - 60);
    ellipse(x + 78, y - 60, 8);
    line(x + 79, y - 28, x + 100, y - 3);
    ellipse(x + 100, y - 3, 10);
    line(x + 85, y - 35, x + 105, y - 57);
    ellipse(x + 105, y - 57, 11);
}

// function to draw flower petals
function flowerPetals(x, y) {
    noStroke();
    // main petal color
    fill(255, 125, 165);
    // petal 1
    ellipse(x + 43, y - 55, 23);
    //petal 2
    ellipse(x + 75, y + 12, 25);
    //petal 3
    ellipse(x + 74, y - 70, 20);
    // petal 4
    ellipse(x + 104, y + 10, 21);
    // petal 5
    ellipse(x + 108, y - 70, 27);
    fill(255, 65, 105);
    // sub-petal 1
    ellipse(x + 39, y - 45, 13);
    ellipse(x + 52, y - 55, 11);
    // sub-petal 2
    ellipse(x + 67, y + 6, 13);
    ellipse(x + 81, y + 4, 10);
    ellipse(x + 64, y + 15, 11);
    // sub-petal 3
    ellipse(x + 70, y - 61, 16);
    // sub-petal 4
    ellipse(x + 100, y + 5, 12);
    ellipse(x + 112, y + 8, 9);
    // sub-petal 5
    ellipse(x + 97, y - 63, 14);
    ellipse(x + 109, y - 58, 10);
    ellipse(x + 119, y - 64, 13);
    // detail color in petals
    fill(185, 0, 25);
    // sub-sub-petal 1
    ellipse(x + 32, y - 50, 9);
    ellipse(x + 48, y - 50, 8);
    // sub-sub-petal 2
    ellipse(x + 64, y + 2, 8);
    ellipse(x + 74, y + 4, 10);
    ellipse(x + 60, y + 9, 8);
    //sub-sub-petal 3
    ellipse(x + 78, y - 65, 13);
    ellipse(x + 62, y - 67, 8);
    // sub-sub-petal 4
    ellipse(x + 92, y + 9, 8);
    ellipse(x + 108, y + 5, 9);
    // sub-sub-petal 5
    ellipse(x + 102, y - 60, 9);
    ellipse(x + 90, y - 65, 10);
    // other detail color in petals
    fill(255, 205, 205);
    // many sub petals 1
    ellipse(x + 40, y - 67, 11);
    ellipse(x + 52, y - 60, 8);
    // many sub petals 2
    ellipse(x + 64, y + 16, 8);
    ellipse(x + 77, y + 9, 10);
    ellipse(x + 67, y + 23, 7);
    // many sub petals 3
    ellipse(x + 78, y - 79, 10);
    ellipse(x + 66, y - 71, 8);
    // many sub-petals 4
    ellipse(x + 94, y + 18, 12);
    ellipse(x + 114, y + 14, 9);
    // many sub-petals 5
    ellipse(x + 103, y - 69, 9);
    ellipse(x + 90, y - 64, 8);
    ellipse(x + 121, y - 74, 10);
}

In this project I decided to represent a sort of dream-sequence. I am riding on a turtle’s back…..for whatever reason, flying through a trippy dream-scape. I incorporated my flower design from the wallpaper project because I really like it, it represents some sentimental value, and for these reasons seems quite fitting in a personal dream-world. I love the mountains so flying through the mountains would be a dream of mine.

Generative landscape sketch

I had a lot of other plans for things I wanted to include in this project, and I spent a bunch of hours trying to figure it all out and work things out, but I just hit obstacle after obstacle when I couldn’t find where I was committing errors, and had to abandon some of my plans.

Full -ish sketch plan

Ultimately, I like the concept of the project. The implementation itself I just found really difficult and still don’t really understand how all the mechanics work for creating a generative landscape.
I made me riding on a turtle though. So that’s pretty rad.

Project 10: Pat

pat


var terrainSpeed = 0.0005;
var terrainDetail = 0.002;
var terrainDetail1 = 0.00125;
var terrainDetail2 = 0.001;
var terrainDetail3 = 0.0005;
var yaxis = 1;
var c;
var c1;
var c2;
var xStart = 0, pat, patY;
var swimmer = 'https://vignette.wikia.nocookie.net/spongebob-polska/images/d/d5/Patryk.gif/revision/latest?cb=20180830203043&path-prefix=pl';

function preload(){
    pat = loadImage(swimmer);
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    c2 = color(179, 77, 37);
    c1 = color(200, 200, 200);
    c = color(247, 222, 85);
 patY = height/2;
		

}



function waveback() {
	beginShape();
	stroke(250, 250, 255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 5, 0, height / 4);
        line(x, y + (height / 10), x, height); 
    }
    endShape();
}

function wavemidback() {
	beginShape();
	stroke(224, 224, 224);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 4, 0, height / 2);
        line(x, y + 15 + (height / 10), x, height); 
    }
    endShape();
}

function wavemidfront() {
	beginShape();
	stroke(192, 192, 192);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3.5, 0, height);
        line(x, y + 25 + (height / 10), x, height); 
    }
    endShape();
}

function wavefront() {
	beginShape();
	stroke(160, 160, 160);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3, 0, height);
        line(x, y + 50 + (height / 1.9), x, height); 
    }
    endShape();
	
	imageMode(CENTER);
    image(pat, width/1.5, (15*noise((width/5+xStart)))+height/2);
	xStart+=10;

}

 
function draw() {
    background("white");
    setGradient(0, 0, width, height / 3, c1, c2, yaxis);
    setGradient(0, height / 3, width, 2 * (height / 3), c2, c, yaxis);

    fill(247, 222, 125);
    //ellipse(width / 2, 25 + (height / 2), 50, 50);

    push();
    waveback();
    wavemidback();
    wavemidfront();
    wavefront();
    noFill();
    rect(0, 0, width, height);
    pop();
}



function setGradient(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yaxis) {  // Top to bottom gradient
	    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);
		}
	}

}

 

I came about this thinking that I wanted to do something just very very weird. I found this gif on giphy, but could not effectively call it in my code, I ended up resolving the issue by just moving the static image

Carley Johnson Project 10

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 9
*/

 
var stripes = [];
var offset = 0;
 
function newStripe(px, py, ph) {
    color: setColor();
    return {x: px, y: py, h: ph};
}

function setColor(){
    return color(random(1, 255), random(1, 255), 70);
}
 
 
function setup() {
    createCanvas(480, 300);
      stripes.push(newStripe(600, 200, 200));
}

function stripeRight(p) {
    return p.x + p.h;
}

function stripeLast() {
    return stripes[stripes.length - 1];
}
 
function draw() {
    background("lightblue");
    
    stroke(0);
    for (var i = 0; i < stripes.length; i++) {
        var p = stripes[i];
        fill((random(0, 255)),(random(0, 255)), (random(0, 255)));
        rect(p.x - offset, 0, 50, p.h + 100);
    }
 

    if (stripes.length > 0 & stripeRight(stripes[0]) < offset) {
        stripes.shift();
    }
 
    if (stripeRight(stripeLast()) - offset < width) {
        var p = newStripe(stripeRight(stripeLast()),
                            random(50, 225), 
                            200); 
        stripes.push(p); 
    }
 
    offset += 1;
}
 

Lol seizure warning honestly.

The idea was to have moving stripes in a pattern, creating a sort of ever-changing wallpaper. I got the moving landscape working alright, but missed how to assign one color to one stipe, so now it’s a psychadellic wallpaper I guess

cmhoward-project10-landscape

cassie-week10

var colorFill;
var pictures = []; //empty picture array 
var next = 0;
var maxX;

function setup() {
    createCanvas(480, 480);
    frameRate(100);
    //background fill
    colorFill = random(150, 255);

    //implement pictures in empty array, also check to make sure they are not within the boundary of another picture
    for (var i = 0; i < 10; i++) {
        var done = false;
        var px = next + random(10, 50);
        var b = random(50, 150);
        next = px + b
        maxX = next 
        pictures[i] = makePicture(px, b)
    }
}

function draw() {
    background(colorFill);
    updateAndDisplayPictures();
    removePictures();
    addNewPictures();
    makeBorder();
}

function updateAndDisplayPictures() {
    //detect border of pictures
    maxX = 0
    for (var i = 0; i < pictures.length; i++) {
        pictures[i].move();
        pictures[i].display();
    }
}

function removePictures() {
    var picturesToKeep = [];
    for (var i = 0; i < pictures.length; i++) {
        if (pictures[i].x + pictures[i].breadth > 0) {
            picturesToKeep.push(pictures[i]);
        }
    }
    pictures = picturesToKeep;
}

function addNewPictures() {
    var newPicturesProb = 0.01;
    //set breadth of image, detect border of picture
    var b = random(50, 150);
    if (random(0, 1) < newPicturesProb) {
        if (maxX < width) {
            pictures.push(makePicture(width, b));
        }   
    }
}

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

function pictureDisplay() {
    stroke(153, 76, 0);
    push();
    //random frame size 
    strokeWeight(this.frame);
    //random picture background
    fill(this.fill);
    //move frames across canvas
    translate(this.x, height - 150);
    //create frames 
    rect(0, -this.place, this.breadth, this.height);
    //give object in picture color
    if (this.typeColor < 1) {
        fill('red');
    }
    if (this.typeColor > 1 & this.typeColor < 2) {
        fill('blue');
    }
    if (this.typeColor > 2 & this.typeColor < 3) {
        fill('yellow');
    }
    //select object shape
    if (this.type == 0) {
        noStroke();
        ellipse(this.breadth/2, -this.place + this.height/2, this.breadth/4, this.height/4)
    }
    if (this.type == 1) {
        noStroke();
        rectMode(CENTER);
        rect(this.breadth/2, -this.place + this.height/2, this.breadth/4, this.height/4)
    }
    if (this.type == 2) {
        noStroke();
        triangle(this.breadth/2, -this.place + this.height/2, this.breadth/2 + this.breadth/4, -this.place + this.height/2 + this.height/4, this.breadth/2 - this.breadth/4, -this.place + this.height/2 + this.height/4)
    }
    pop();

    //check to make sure picture is not overlapping with another 
    if (this.x + this.breadth > maxX) {
        maxX = this.x + this.breadth 
    }
}

//create picture object 
function makePicture(px, b) {
    var pictures = {x: px, move: pictureMove, display: pictureDisplay, speed: -1, breadth: b, height: random(50, 150), place: random(50, 250), frame: random(3, 10), fill: random(50, 255), type: int(random(0, 3)), typeColor: random(0, 3)}
    return pictures; 
}

//create borders at top and bottom of screen to imitate baseboards 
function makeBorder() {
    noStroke();
    fill(255 - colorFill);
    rect(0, 0, width, 20);
    rect(0, height - 20, width, 20);
}

For this project, I was inspired by a museum gallery wall where you walk through a room of framed paintings, photographs, etc. and it creates a landscape of art.

I used this sketch to begin my project. I wanted to randomize the size of the art, the size of the frame, and the colors of the wall, border, and painting. Adding in the small abstract shapes to the paintings increases the randomness of the landscape. Because all of these are in flux, it creates a compelling composition of objects in space.

Trying to define the boundaries of these objects so that they wouldn’t overlap was quite challenging, but I learned a lot more about objects and conditions through this process.

Anthony Ra – Project 10 – Landscape

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-10 */

var boats = [];
var c1, c2;

function setup() {
  createCanvas(480, 200);
  frameRate(20);

  c1 = color(255, 70, 0);
  c2 = color(204, 143, 0);

  for (var i = 0; i < 5; i++) {
    var rx = random(width);
    boats[i] = makeBoats(rx);
  }

}

function draw() {

  /* background gradient */
  for (var i = 0; i < height - 70; i++) {
    var inter = map(i, 70, 110, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, i, width, i);
  }

  drawOcean();
  drawSun();

  updateAndDisplayBoats();
  addNewBoatsWithSomeRandomProbability();
}

/* draws ocean at bottom of canvas */
function drawOcean() {
  noStroke();
  fill(66, 31, 0);
  rect(0, height - 70, width, 70);
}
/* draws sun */
function drawSun() {
  noStroke();
  fill(255);
  ellipse(width/2 + 30, 68, 80, 80);
  fill(255, 235, 0);
  ellipse(width/2 + 30, 70, 80, 80);
  fill(115, 76, 0);
  rect(width/2 + 20, 140, 20, 5, 2.5);
  rect(width/2 + 10, 150, 40, 5, 2.5);
  rect(width/2, 160, 60, 5, 2.5);
  rect(width/2 - 10, 170, 80, 5, 2.5);
}


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

function addNewBoatsWithSomeRandomProbability() {
  var newBoatLikelihood = 0.007;
  if (random(0, 1) < newBoatLikelihood) {
    boats.push(makeBoats(width));
  }
}

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

function displayBoats() {
  noStroke();
  push();
  translate(0, 35);

  fill(0);
  quad(width/2 + this.x - 20, height/2 - 10,
    width/2 + this.x + 20, height/2 - 10,
    width/2 + this.x + 10, height/2,
    width/2 + this.x - 10, height/2);
  quad(width/2 + this.x - 5, height/2 - 15,
    width/2 + this.x + 5, height/2 - 15,
    width/2 + this.x + 10, height/2 - 10,
    width/2 + this.x - 10, height/2 - 10);
  fill(255);
  rect(width/2 + this.x - 3, height/2 - 13, 2, 2);
  pop();
}

function makeBoats(birthLocationX) {
  var bt = {x: birthLocationX,
  breadth: 50,
  speed: -1.6,
  r: random(0.1, 0.5),
  move: moveBoats,
  display: displayBoats,
  }
  return bt;
}

One of my favorite places to relax when I am home is Laguna Beach during the sunset. With its warm weather, the tranquility and warming color palette of the sky and ocean reflection makes it a prime destination to stop everything and enjoy the view. Because the setting is so calm, there is very minimal movement overall, barring any unconditional weather or wind. The only thing that moves in this script are the boats faraway, and even the boats seem to be moving at a peaceful movement.

rough sketch and mathematical estimates of placement of boats

landscape

sketch.js

var terrainSpeed = 0.001;
var terrainDetail = 0.005;


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

    
  

}
 
function draw() {
    background(0,50,400);
  
    for (var x = 0; x < width; x++){

        var t =((millis()*terrainSpeed));
        var y = map(noise(t), 0,1, 0, height);
          vertex(x, y); 
    }
    
    
    noFill(); 
    noStroke();
    beginShape(); 
    fill(50,112,255);
    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); 
    }
    endShape();


    noFill(); 
    noStroke();
    beginShape(); 
    fill(0,112,255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed*2);
        var y = map(noise(t), 0,1, 10, height);
        vertex(x, y); 
    }
    endShape();
    
     beginShape(); 
     fill(0,200,255)
    for (var x = 0; x < width; x++) {
        var t = (y * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,10, 5, height*2);
        vertex(x, y); 
    }
    endShape();

      beginShape(); 
     fill(0,100,255)
    for (var x = 0; x < width; x++) {
        var t = (y * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,3, 5, height*3);
        vertex(x, y); 
    }
    endShape();



    noFill();
    
//yellow
    stroke(255,255,0)
    strokeWeight(150)
    ellipse(240, 150, width/2 +180, height+130);

//gray 
    stroke(100)
    strokeWeight(30)
    ellipse(240, 150, width /2  +60, height-20);

//outline
    stroke(0);
    strokeWeight(4)
    ellipse(240, 150, width /2 +30, height - 50);
//nails

//nail 1(upper middle)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(240, 10, 15, 15);
fill(225)
noStroke(0);
ellipse(238, 9, 5, 5);
//nail 2 (down middle)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(240, 290, 15, 15);
fill(225)
noStroke(0);
ellipse(238, 289, 5, 5);
//nail 3 (left)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(90, 150, 15, 15);
fill(225)
noStroke(0);
ellipse(88, 149, 5, 5);
//nail 4 (right)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(390, 150, 15, 15);
fill(225)
noStroke(0);
ellipse(387, 149, 5, 5);

//nail 5
fill(100)
stroke(40)
strokeWeight(2)
ellipse(130, 55, 15, 15);
fill(225)
noStroke(0);
ellipse(128, 54, 5, 5);

//nail 6

fill(100)
stroke(40)
strokeWeight(2)
ellipse(350, 55, 15, 15);
fill(225)
noStroke(0);
ellipse(348, 54, 5, 5);

//nail 7
fill(100)
stroke(40)
strokeWeight(2)
ellipse(350, 245, 15, 15);
fill(225)
noStroke(0);
ellipse(348, 244, 5, 5);

//nail 5
fill(100)
stroke(40)
strokeWeight(2)
ellipse(130, 245, 15, 15);
fill(225)
noStroke(0);
ellipse(128, 243, 5, 5);



}

For this project I decided to do an underwater scape and portray the ripples, waves and movement of the water when you see it beneath the surface . I made a submarine window and made the interior of the submarine yellow inspired by the classic Beatles song “ Yellow Submarine”. For the window I added the typical bolts that you see inside of a submarine circular window. I played with the terrain example code, to create the movement in the underwater waves portraying the different colors and shapes that the underwater ripples have. The underwater scenery inspires me as it contrasts but also is similar to the shapes in the ground terrain of landscapes.

Project 10 Landscape rrandell

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 10 */

var ab = []; //stands for abstract
var backcolor; //for a mouse changes color backdrop
var beanFill;

function setup() {
    createCanvas(400, 400); 
   
    for (var i = 0; i < 15; i++){
        var rx = random(width);
        ab[i] = makeAbs(rx);
    }
    frameRate(2);
}


function draw() {
	var R = mouseX
	var G = mouseY
	var B = mouseY
	backcolor = color(R, G, B);
    background(backcolor); 
    

    updateAbs();
    removeAbs();
    addNewAbs(); 
}

function updateAbs(){
    // update abstract position
    for (var i = 0; i < ab.length; i++){
        ab[i].move();
        ab[i].display();
    }
}

function removeAbs(){

    var Keep = [];
    for (var i = 0; i < ab.length; i++){
        if (ab[i].x + ab[i].breadth > 0) {
            Keep.push(ab[i]);
        }
    }
    beans = Keep;
}


function addNewAbs() {
    var Likelihood = 5; 
    if (random(0,4) < Likelihood) {
        beans.push(makeAbs(width));
    }
}

function abMove() {
    this.x += this.speed;
}
    
function absDisplay() {
    var AHeight = random(10, 30);
    var bHeight = this.nheight * AHeight; 

    var RR = mouseY
    var GG = mouseY
    var BB = mouseX
    beanFill = color(RR, GG, BB)
    fill(beanFill); 

    noStroke(0); 
    push();
    translate(this.x, height - 20);
    ellipse(0, -bHeight, this.breadth, bHeight); 
    pop();

    push();
    translate(0, 0);
    strokeWeight(7);
    stroke(beanFill);
    line(0,400, random(100,350), 0);
    pop();

    push();
    translate(0,0);
    strokeWeight(7);
    stroke(beanFill);
    line(400, 400, random(0,400), 0);
    pop();
}


function makeAbs(birthLocationX) {
    var abst = {x: birthLocationX,
                breadth: 40,
                speed: .4,
                nheight: round(random(2,6)),
                move: abMove,
                display: absDisplay }
    return abst;
}


***Move the mouse around image to work***

For this project I wasn’t interested in a stereotypical landscape, so I created a sort of abstract landscape with ‘jumping beans’, spotlights, and an RGB spectrum that changes based on mouse movement. I am really interested in how certain colors interact with one another and I used this project to explore that by watching the intersection of the moving beans and background color. Below is an early process sketch:

 

Xiaoying Meng Project 10 Landscape

sketch

//Xiaoying Meng
//B
//xiaoyinm@andrew.cmu.edu
//Project 10
var ghosts = [];
var frames = [];

//loading background pictures
function preload(){

    var filenames = [];
    filenames[0] = "https://i.imgur.com/UFAJ1Wu.png";
    filenames[1] = "https://i.imgur.com/snYvk3n.png";
    filenames[2] = "https://i.imgur.com/WhWuQcd.png";
    filenames[3] = "https://i.imgur.com/u4YZIhW.png";
    filenames[4] = "https://i.imgur.com/WhWuQcd.png";
    filenames[5] = "https://i.imgur.com/snYvk3n.png";

    for ( var a = 0; a < filenames.length; a++){
        frames.push(loadImage(filenames[a]));
    }
}
function setup() {
    createCanvas(480, 480); 
    frameRate(10);
    // initial collection of ghosts
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        ghosts[i] = makeghost(rx);
    }
}


function draw() {
//display pictures to create motion
    push();
    scale(0.5);
    image(frames[frameCount % 6], -200,10);
    pop();

    updateAndDisplayghosts();
    removeghostsThatHaveSlippedOutOfView();
    addNewghostsWithSomeRandomProbability(); 


}


function updateAndDisplayghosts(){
    // Update ghost positions
    for (var i = 0; i < ghosts.length; i++){
        ghosts[i].move();
        ghosts[i].display();
    }
}


function removeghostsThatHaveSlippedOutOfView(){

    var ghostsToKeep = [];
    for (var i = 0; i < ghosts.length; i++){
        if (ghosts[i].x + ghosts[i].gWidth > 0) {
            ghostsToKeep.push(ghosts[i]);
        }
    }
    ghosts = ghostsToKeep;
}


function addNewghostsWithSomeRandomProbability() {
    // With a very tiny probability, add a new ghost to the end.
    var newghostLikelihood = 0.005; 
    if (random(0,1) < newghostLikelihood) {
        ghosts.push(makeghost(width));
    }
}


// move ghosts
function ghostMove() {
    this.x += this.speed;
}
    

// Draw ghosts
function ghostDisplay() {
    var ghostHeight = this.gHeight * 70; 

    push();
    fill(255,255,255,170); 
    noStroke(0);
    translate(this.x, height -400);
    //enlarge ghosts
    scale(1.5);

    //create ghost body
    beginShape();
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/5-10,ghostHeight/5+30);
    curveVertex(this.gWidth/5+5,ghostHeight/5+20);
    curveVertex(this.gWidth/5+25,ghostHeight/5+40);
    curveVertex(this.gWidth/5+50,ghostHeight/5);
    curveVertex(this.gWidth/5+100,ghostHeight/5);
    curveVertex(this.gWidth/5+80,ghostHeight/5-70);
    curveVertex(this.gWidth/5+50,ghostHeight/5-100);
    curveVertex(this.gWidth/5+25,ghostHeight/5-100);
    curveVertex(this.gWidth/5+5,ghostHeight/5-70);
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/8,ghostHeight/5);
    endShape();

    //creat ghost eyes and mouth
    fill(0,0,0,170);
    ellipse(this.gWidth/5+50,ghostHeight/5-70,this.gWidth/5+5,this.gWidth/5+5);
    ellipse(this.gWidth/5+30,ghostHeight/5-70,this.gWidth/5+5,this.gWidth/5+5);
    ellipse(this.gWidth/5+40,ghostHeight/5-20,this.gWidth/5+5,this.gWidth/5+20);


    pop();
}


function makeghost(birthLocationX) {
    var ghost = {x: birthLocationX,
                gWidth:random(70,80),
                speed: -1.0,
                gHeight:random(2,10),
                move: ghostMove,
                display: ghostDisplay}
    return ghost;
}

Since Halloween just passed, I thought I’d do something spooky. So I thought about ghosts. I found a gif of Simpson “can’t fall asleep” and I thought it was perfect for it.

Project-10-Landscape-Veronica

sketch

// Veronica Wang
// Section B 
// yiruiw@andrew.cmu.edu
// Project-10

var sushi1 = [];
var sushi2 = [];
var sushi3 = [];

function setup() {
    createCanvas(480, 300); 
    frameRate(100);
}


function draw() {
    background("wheat"); 
    
    displayRoom();

    displayPlates();
    removePlates(sushi1);
    removePlates(sushi2);
    removePlates(sushi3);
    newPlate(); 

}


function displayPlates(){
    for (var i = 0; i < sushi1.length; i++){
        sushi1[i].move();
        sushi1[i].display1();
    }
    for (var i = 0; i < sushi2.length; i++){
        sushi2[i].move();
        sushi2[i].display2();
    }
    for (var i = 0; i < sushi3.length; i++){
        sushi3[i].move();
        sushi3[i].display3();
    }
}


function removePlates(plates){

    var platesToKeep = [];
    for (var i = 0; i < plates.length; i++){
        if (plates[i].x + plates[i].breadth > 0) {
            platesToKeep.push(plates[i]);
        }
    }
    plates = platesToKeep; // remember the surviving buildings
}


function newPlate() {
    // With a very tiny probability, add a new sushi to the end.   
    var prob = 0.008;
    //sandomly select which type of sushi to serve
    if (random(0, 1) < prob) {
        var sunum = random(0,3);
        if (sunum < 1){
            sushi1.push(makePlate(width));
        } else if (sunum < 2){
            sushi2.push(makePlate(width));
        } else {
            sushi3.push(makePlate(width));
        }
        
    }  
}


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

// draw the building and some windows
function sushi1Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi1
    fill("black");
    noStroke();
    ellipse(12.5, 10, 25, 10);
    rect(0, 0, 25, 10);
    fill("white");
    ellipse(12.5, 0, 25, 10);
    fill("red");
    ellipse(10, 0, 5, 5);
    ellipse(11, 2, 5, 5);
    ellipse(12, -1, 5, 5);
    ellipse(14, -3, 5, 5);
    ellipse(10, 2, 5, 5);
    ellipse(11, -4, 5, 5);
    ellipse(15, -2, 5, 5);
    ellipse(16, -3, 5, 5);

    pop();
}

function sushi2Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi2
    fill("black");
    noStroke();
    ellipse(10, 10, 20, 10);
    rect(0, 0, 20, 10);
    fill("white");
    ellipse(10, 0, 20, 10);
    fill("orange");
    rect(0, -3, 22, 5);
    fill("black");
    rect(7, -5, 5, 10);

    pop();
}

function sushi3Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi3
    fill("black");
    noStroke();
    ellipse(10, 10, 20, 10);
    rect(0, 0, 20, 10);
    fill("white");
    ellipse(10, 0, 20, 10);
    fill("salmon");
    ellipse(10, 0, 10, 5);

    pop();
}


function makePlate(birthLocationX) {
    var plt = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nItems: round(random(1,3)),
                move: platesMove,
                display1: sushi1Display,
                display2: sushi2Display,
                display3: sushi3Display}
    return plt;
}

//drawing elements in the room
function displayRoom(){
    //curtain panels
    fill("cornsilk");
    noStroke();
    rect(0, 0, width, 75);

    stroke("peru");
    strokeWeight(1);

    for (var i = 0; i < 20; i++) {
        line(i * 30, 0, i * 30, 75);
    };
    
    strokeWeight(10);
    line(0, 75, width, 75);

    //lights
    stroke("black");
    strokeWeight(2);

    for (var i = 0; i < 5; i++) {
        line(50 + i * 90, 0, 50 + i * 90, 100);
        triangle(50 + i * 90, 100, 40 + i * 90, 110, 60 + i * 90, 110);
        rect(45 + i * 90, 100, 10, 5);
    };

    //conveyor belt
    fill("gray");
    noStroke();
    rect(0, 150, width, 40);

    //table
    noStroke();
    fill("tan");
    rect(0, 190, width, 200);
    
    fill("peru");
    rect(0, 190, width, 10);

    strokeWeight(1);
    stroke(0);
    line(0,height-70, width, height-70); 

    //plate
    fill("white");
    ellipse(width / 2, height - 40, 90, 30);

    //chopsticks
    noStroke();
    fill("lightgray");
    rect(300, height - 50, 20, 8);
    fill("black");
    rect(305, height - 55, 2, 40);
    rect(310, height - 55, 2, 40);

}



Rotating sushi bars are one of my favorite types of restaurants, so I tried to create a conveyor belt serving scene in this project. It took me some time to figure out how to randomly select different objects, and also the overlapping of objects being generated. I tried playing around with probability/count/ etc. but some instances are still overlapped. 🙁

Initial sketch