Category: SectionB

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 11

var time = 0; // time of day (by frame rate)
var timeRate = 1; // rate of time passing
var angle = 0; // rotation angle of sun/moon system
var angleRate = 180 / 255; // rate of change of the angle 
var birdsX = []; // xcoords of birds on the screen
var birdsY = []; // ycoords of birds on the screen
var birdsSpeed = []; // speeds of all birds on the screen
var birdsColor = []; // colors of all birds on the screen

function setup() {
    createCanvas(480, 400);
    ellipseMode(CENTER);
    frameRate(30);
    angleMode(DEGREES);

    // birds
    for (var i = 0; i <= 30; i ++){
        birdsSpeed.push(random(1, 10));
        birdsX.push(600);
        birdsY.push(random(70, 320));
        birdsColor.push(color(random(0, 255), random(0, 255), random(0, 255)));
    }
}

function draw() {
    // managing time
    time += timeRate;
    if (time == 255) {
        timeRate = -1;
    } else if (time == 0) {
        timeRate = 1;
    }

    // coloring sky
    colorSky(time);
    
    // drawing sun/moon
    push();
    translate(240, 250);
    rotate(angle);
    drawSun(0, 200);
    drawMoon(0, -200);
    pop();
    
    angle -= angleRate

    // ground
    ground();
    
    for (var i = 0; i < birdsY.length; i ++){
        drawBird(birdsX[i], birdsY[i], birdsColor[i]);
        birdsX[i] -= birdsSpeed[i];

        if (birdsX[i] < -10) {
            birdsX[i] = 600;
        }
    }
}

function drawSun(x, y) {
    // draws sun
    noStroke();
    fill("yellow");
    ellipse(x, y, 100);
}

function drawMoon(x, y) {
    // draws moon
    noStroke();
    fill("grey");
    ellipse(x, y, 70);
}

function colorSky(time) {
    // draws the sky according to the time of day
    var blue = time;
    var green = map(time, 0, 255, 0, 204);

    noStroke();
    fill(0, green, blue);
    rect(0, 0, width, height);
}

function drawBird(x, y, color) {
    fill(color);
    noStroke();

    triangle(x, y, x - 3, y + 5, x, y + 5);
    triangle(x + 7, y, x + 13, y - 7, x + 11, y)
    rect(x, y, 15, 5);
    triangle(x + 5, y, x + 8, y - 7, x + 8, y);
}

function ground() {   
    fill("darkgreen"); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * .005) + (millis() * .0005);
        var y = map(noise(t), 0, 1, 150, 350);
        vertex(x, y); 
    }
    vertex(width + 100, height);
    vertex(0, height);
    endShape();
}

For this project, I wanted to depict something creative based in something very realistic. Thus, I came up with the idea of doing a rolling landscape that depicted the passing of days in a logical manner but featuring an assortment of randomly placed and colored birds. In this way, I am also able to emphasize the pop on the screen that the birds have in an interesting way.

The process was very difficult for me in automating everything correctly while still maintaining readability of code while debugging. Thankfully, however, I was able to get past that! Below are some initial sketches from my laptop as to what my first idea was.

reshin-project11

/* Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 11 - Landscape
*/

var terrainSpeed = 0.0005;
var terrainDetail = 0.0195;
var terrainDetail1 = 0.04;
var stars = [];

function setup() {
    createCanvas(400, 300);
    frameRate(15);
    for (var i = 0; i < 70; i++){
        var starX = random(width);
        var starY = random(0, height/4);
        stars[i] = makeStar(starX, starY);
    }

}

function draw() {
    background(0);
    displayStars(); //bottom layer
    darkTerrain(); //next layer
    terrain(); //second to top layer
    bottomTerrain(); //top layer

    
}

function terrain() {
    noStroke();
    fill(220);
    beginShape(); 

    for (var x = 0; x < width; x ++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 1, 200, 100);
      vertex(x, y);
    }
    
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function darkTerrain() {
    noStroke();
    fill(17, 25, 36);
    beginShape(); 

    for (var x = 0; x < width; x ++) {
      var t = (x * terrainDetail1) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 2, 0, 300);
      vertex(x, y);
    }

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

function bottomTerrain() {
    noStroke();
    fill(255);
    beginShape();

    for (var x = 0; x < width; x ++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 50, 300);
        vertex(x, y);
    }

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

function drawStar() {
    noStroke();
    fill(230, 242, 174);
    push();
    translate(this.x, this.y);
    ellipse(5, 10, 5, 5);
    pop();
}

function makeStar(starX, starY) {
    var makeStar = {x: starX,
                y: starY,
                speed: -1,
                move: moveStar,
                draw: drawStar}
    return makeStar;
}

function moveStar() {
    this.x += this.speed;
    if (this.x <= -10){
        this.x += width;
    }
}

function displayStars() {
    for(i = 0; i < stars.length; i ++) {
        stars[i].move();
        stars[i].draw();
    }
}

As a kid, I often went on trips to Reno or Lake Tahoe with my family and family friends. If I wasn’t playing video games in the car, I would stare at the mountains that we drove past and was mesmerized by the stars that I couldn’t see in Cupertino because of all the light pollution there. I decided to create 3 different terrains to create more depth in my production and put many stars in it to represent the countless number of stars that I saw during the drive.

For my landscape project, I chose to make a basic underwater scene containing water, sand, bubbles, and fish. I think this project was a great opportunity to play around with objects and setting different types of parameters. I definitely came out of this with a much better understanding of how to use objects in code. One of the elements that I had trouble with is setting the color using the color() function (which is why I ended up using grayscale). Some things I wish I could have added are: coral/seaweed, other types of animals, and lines to represent water flow.

project11

/* Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-11 */

var bubbles = [];
var seaweed = [];
var fish = [];

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

    for (i = 0; i < 50; i++) {
        bubbleX = random(width);
        bubbleY = random(height);
        bubbles[i] = blowBubbles(bubbleX, bubbleY);
    }

    for (k = 0; k < 30; k++) {
        fishX = random(width);
        fishY = random(height);
        fish[k] = makeFish(fishX, fishY);
    }
}

function draw() {
    background(140, 225, 255);
    showBubbles();
    showFish();
    showSand();
}


var sandSpeed = 0.0004;

function showSand() {
    var sand = 0.01;
    stroke(235, 220, 180);
    strokeWeight(2)
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * sand) + (millis() * sandSpeed);
        var s = map(noise(x), 0, 1, 150, 200);
        line(i, s, i, height);
        // using map() and noise() function to generate randomized sand terrain
    }
    endShape();
}

function blowBubbles (bubbleX, bubbleY) {
    // making bubble object
    var bubble = {
        x: bubbleX,
        y: bubbleY,
        radius: random(8, 12),
        speed: -0.5,
        float: floatBubbles, 
        draw: drawBubbles 
    }
    return bubble;
}

function floatBubbles() {
    // making the bubbles move horizontally and float
    this.x += (this.speed * 2);
    this.y += this.speed;
    if (this.x <= 0) {
        this.x = width;
    }
    if (this.y <= 0) {
        this.y = height;
    } // bubbles "pop" when they reach top of screen
}

function drawBubbles() {
    push();
    translate(this.x, this.y);
    strokeWeight(1);
    stroke(255, 255, 255, 90);
    fill(160, 245, 255, 90);
    ellipse(1, 10, this.radius, this.radius);
    noStroke();
    fill(255, 255, 255, 90);
    ellipse(-1, 8, 2, 2);
    pop();
}

function showBubbles() {
    for (i = 0; i < bubbles.length; i++) {
        bubbles[i].float();
        bubbles[i].draw();
    }
}

function makeFish(fishX, fishY) {
    var fish = {
        fx: fishX,
        fy: fishY,
        fishspeed: random(-3, -8),
        fishmove: moveFish,
        fishcolor: random(100, 200),
        fishdraw: drawFish
    }
    return fish;
}

function moveFish() {
    this.fx += this.fishspeed;
    if (this.fx <= -10) {
        this.fx += width;
    }
}

function drawFish() {
    var tailLength = 8;
    noStroke();
    fill(this.fishcolor);
    ellipse(this.fx, this.fy, 10, 5);
    triangle(this.fx + (tailLength / 2), this.fy, this.fx + tailLength, this.fy - 3, this.fx + tailLength, this.fy + 3);
}

function showFish() {
    for (i = 0; i < fish.length; i++) {
        fish[i].fishmove();
        fish[i].fishdraw();
    }
}

** I’m using a grace day for this project!

sketch-237.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project-11

var terrainSpeed;
var terrainDetail;
var c1, c2;
var cacti = [];
var cWidth = 50; //cactus Width
var cLeft = - 20 - cWidth; //left point of cactus drawn

function setup() {
    createCanvas(480, 240);
    // create an initial collection of cacti
    for (var i = 0; i < 4; i++){
        var xLocation = random(width);
        var yLocation = random(150, 170);
        cacti[i] = makeCacti(xLocation, yLocation);
    }

    frameRate(20);
    //two end colors of the gradient backgound
    c1 = color(134, 162, 148);
    c2 = color(245, 193, 140);
}

function draw() {
    setGradient(c1, c2);
    terrain();
    //addCacti();
    updateCacti();

}

function drawCacti() {
    noStroke();
    fill(255, 230, 238);
    push();
    translate(this.x2, this.y2);
    scale(this.cactiSize);
    stroke(61,73,49);
    strokeWeight(10);
    line(0, 0, 0,60);

    noFill();
    stroke(61,73,49);
    strokeWeight(10);
    beginShape();
    curveVertex(-20,20);
    curveVertex(-20,20);
    curveVertex(-15,30);
    curveVertex(0,30);
    curveVertex(20,25);
    curveVertex(25,-10);
    curveVertex(25,-10);
    endShape();

    stroke(100,100,89);
    strokeWeight(0.5);
    line(0, -2, 0,62);
    line(2, -2, 2,62);
    line(-2, -2, -2,62);

    //draw cacti spines
    fill(0);
    noStroke();
    ellipse(0,2,2,2);
    ellipse(5,20,3,3);
    ellipse(20,30,2,2);
    ellipse(30,10,2,2);
    ellipse(-15,17,3,3);
    ellipse(-10,27,2,2);
    ellipse(5,45,2,2);
    pop();
}


function makeCacti(xlocation, ylocation) {
    //Cacti objects
    var makeCactus = {x2: xlocation,
                      y2: ylocation,
                      cactiSize: random(0.8,1.5),
                      speed: -2.0,
                      move: moveCacti,
                      draw: drawCacti}
    return makeCactus;
}

function moveCacti() {
    //make cacti move
    this.x2 += this.speed;
    if (this.x2 <= cLeft) {
        this.x2 += width - cLeft;
    }
}

function updateCacti() {
    for(i = 0; i < cacti.length; i++) {
        cacti[i].move();
        cacti[i].draw();
    }
}

function setGradient(c1, c2) {
    //gradient color background
    noFill();
    for (var y = 0; y < height; y++) {
        var inter = map(y, 0, height, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

function terrain(){
    terrainSpeed = 0.0002;
    terrainDetail = 0.006;

    //draw dessert mountain 1
    fill(225, 184, 139);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t1 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y1 = map(noise(t1), 0, 1, 80, height);
        vertex(x, y1);
    }
    vertex(width, height);
    endShape();

    //draw dessert mountain 2
    terrainDetail = 0.007;
    fill(225, 164, 109);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t1 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y1 = map(noise(t1), 0, 1, 100, height);
        vertex(x, y1);
    }
    vertex(width, height);
    endShape();

    //draw ground
    terrainDetail = 0.0005;
    fill(160, 96, 69);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y2 = map(noise(t2), 0, 1, 180, height);
        vertex(x, y2);
    }
    vertex(width, height);
    endShape();
}

This is a landscape of a desert with different sized cactus along the road and different depth of the scenery.

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 11 - Generative Landscape

var landscapeScale = 0.005; //detail in hills
var landscapeSpeed = 0.00075; //speed of hills going by
var hillColor = '#92CA6D'; //light green

var houses = []; //array for houses
var trees = []; //array for trees

var train = { ////train variables
    wY: 200, //Y of windows
    wW: 325, //width of windows
    wH: 275, //height of windows
    corners: 30, //roundness of window corners
    wWeight: 25, //stroke weight of light gray
    backgroundColor: 255, //white
    mainColor: '#475AA8', //light blue
    wColor: '#2A357A', //dark blue, color of window and seats
    divXL: 61, //X coordinate of left divider
    divXR: 419, //X coordinate of right divider
}

function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 5; i ++) { //first houses
        var rx = random(width);
        houses[i] = makeHouses(rx);
    }
    for (var i = 0; i < 3; i ++) { //first trees
        var tx = random(width);
        trees[i] = makeTrees(tx);
    }
    frameRate(30);   
}

function draw() {
    background('#8ED9EF'); //blue sky
    //creates hills in the background
    stroke(hillColor);
    for (var x = 0; x < width; x ++) {
        var l = (x * landscapeScale) + (millis() * landscapeSpeed);
        var y = map(noise(l), 0, 1, 100, 230); //constrains hills
        line(x, y, x, height); //creates vertical lines, forming a solid shape
    }
    displayHouses(); //houses
    removeOldHouses();
    addHouses();

    displayTrees(); //trees
    removeOldTrees();
    addTrees();

    drawTrain(); //train
}

function displayHouses() { //displays and updates house location
    for (var i = 0; i < houses.length; i ++) {
        houses[i].move();
        houses[i].draw();
    }
}
function removeOldHouses() { //gets rid of old houses, puts the houses that are still on the canvas in a new array
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i ++) {
        if (houses[i].x + houses[i].breadth > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep;
}
function addHouses() { //adds new houses into the array
    if (random(0, 1) < 0.02) {
        houses.push(makeHouses(width));
    }
}
function moveHouses() { //moves the houses
    this.x += this.speed;
    if (this.x < -this.breadth) {
        this.x == width + this.breadth;
    }
}
function drawHouses() { //draws the houses
    noStroke();
    rectMode(CORNER);
    fill(this.r, this.g, this.b); //randomizes color
    push();
    translate(this.x, this.y);
    rect(0, -this.height, this.breadth, this.height); //house rectangle
    //roof
    fill(255);
    triangle(-2, -this.height + 1, this.breadth + 2, -this.height + 1, this.breadth / 2, -this.height - this.roofH);
    //door
    rect(this.doorX, - this.doorH, this.doorW, this.doorH);
    pop();
}
function makeHouses(locationX) { //house variables
    var hse = {x: locationX,
               y: random(225, 275),
               r: random(255),
               g: random(255),
               b: random(255),
               roofH: round(random(10, 25)),
               height: round(random(25, 50)),
               breadth: round(random(30, 60)),
               doorX: random(10, 20),
               doorW: 10,
               doorH: 15,
               speed: -6.0,
               move: moveHouses,
               draw: drawHouses}
    return hse;
}

//trees
function displayTrees() { //dispays and updates tree locations
    for (var i = 0; i < trees.length; i ++) {
        trees[i].movet();
        trees[i].drawt();
    }
}
function removeOldTrees() { //gets rid of old trees
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i ++) {
        if (trees[i].xt + trees[i].breadtht > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}
function addTrees() { //adds new trees
    if (random(0, 1) < 0.1) {
        trees.push(makeTrees(width));
    }
}
function moveTrees() { //moves trees
    this.xt += this.speedt;
    if (this.xt < -this.breadtht) {
        this.xt == width + this.breadtht;
    }
}
function drawTrees() { //draws trees
    noStroke();
    rectMode(CORNER);
    colorMode(HSB, 100); //switches color mode to HSB to assist with random colors
    fill(this.ht, 55, this.bt); //random colors between yellow-green to green
    push();
    translate(this.xt, height * 3 / 4);
    rect(0, -this.heightt, this.breadtht, this.heightt, 50, 50, 0, 0);
    pop();
}
function makeTrees(locationX) { //tree variables
    var trs = {xt: locationX,
               bt: random(50, 85),
               ht: random(17, 25),
               heightt: round(random(50, 160)),
               breadtht: round(random(100, 130)),
               speedt: -10.0,
               movet: moveTrees,
               drawt: drawTrees}
    return trs;
}

//train
function drawTrain() {
    colorMode(RGB);
    drawWindow(width / 2); //draws center window
    drawWindow(-118); //draws left window
    drawWindow(width + 118); //draws right window
    //light blue panels
    noStroke();
    rectMode(CORNER);
    fill(train.mainColor);
    rect(0, 0, width, train.wY - (train.wH / 2) - 10); //top panel
    rect(0, train.wY + (train.wH / 2) + 10, width, height - (train.wY + (train.wH / 2)) - 10); //bottom panel
    //seats
    drawSeats(train.divXL, 0, 0, 40); //left seat
    drawSeats(train.divXR, width - 200, 40, 0); //right seat
    //table
    rectMode(CENTER);
    rect(width / 2, height - 105, 150, 20, 5, 5, 5, 5);
    //section dividers, light gray
    drawDividers(train.divXL);
    drawDividers(train.divXR);
}
function drawWindow(x) { //creates center window
    rectMode(CENTER);
    noFill();
    stroke(train.backgroundColor); //creates light gray area around the windows
    strokeWeight(train.wWeight);
    rect(x, train.wY, train.wW + train.wWeight, train.wH + train.wWeight, train.corners, train.corners, train.corners, train.corners);
    stroke(train.wColor); //creates blue window border
    strokeWeight(10);  
    rect(x, train.wY, train.wW, train.wH, train.corners, train.corners, train.corners, train.corners);
}
function drawSeats(x1, x2, UL, UR) {
    fill(train.wColor);
    rect(x1 - 45, height - 200, 90, 200, 30, 30, 0, 0); //seat back
    rect(x2, height - 50, 200, 50, UL, UR, 0, 0); //left seat cushions
}
function drawDividers(x) {
    strokeWeight(5);
    stroke(200);
    line(x, train.wY - (train.wH / 2) - 7.5, x, height); //line dividing sections
}

For this project, I wanted to create a landscape outside of a train window. I decided to use three layers, some bushes or trees in the foreground, houses in the middle ground, and hills in the background. I tried to change the speeds of the different layers, with the tree layer the fastest and the hill layer the slowest, in order to give the illusion of perspective, and that you’re looking out of a window as everything flies by.