Month: November 2019

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!