Category: SectionA

sketch

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-11
*/

var luggage = [];

function setup() {
    createCanvas(480,450);
    frameRate(50);

    // create an initial collection of luggage
    for (var i = 0; i < 3; i++) {
        var rx = random(width);
        luggage[i] = makeLuggage(rx);
    }
}

function draw() {
    background(225, 225, 218);

    baggageClaim(); //background details

    updateLuggage(); //update luggage
    removeLuggage(); //remove luggage
    addLuggage(); //add luggage
}

function updateLuggage() {
    // update the luggage's position and display them
    for (var i = 0; i < luggage.length; i++) {
        luggage[i].move();
        luggage[i].display();
    }
}

function removeLuggage() {
    //remove luggage from array if it's out of sight
    var luggageToKeep = [];
    for (var i = 0; i < luggage.length; i++) {
        if (luggage[i].x + luggage[i].breadth > 0) {
            luggageToKeep.push(luggage[i]);
        }
    }
    luggage = luggageToKeep; //remember the surviving luggage
}

function addLuggage() {
    //with a very small probability, add a new luggage to the end
    var newLuggageProb = 0.008; 
    if (random(0,1) < newLuggageProb) {
        luggage.push(makeLuggage(width));
    }
}

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

// draw the luggage
function luggageDisplay() {
    //bag
    noStroke();
    fill(this.r, this.g, this.b);
    rect(this.x, 360, this.breadth, this.h);

    //bag handle
    fill("#654321");
    var top = 350 + this.h; //top of bag
    rect(this.x + 20, top, this.breadth - 45, 5);
    rect(this.x + 20, top, 5, 10);
    rect(this.x + this.breadth - 25, top, 5, 10);

    //bag tag
    fill(245);
    stroke(this.r, 50, 150);
    strokeWeight(3);
    rect(this.x + 30, top + 20, 15, 27);
    line(this.x + 35, top, this.x + 35, top + 20);
}

// make a luggage bag object
function makeLuggage(beginX) {
    var lgg = {x: beginX,
                breadth: random(80, 120),
                speed: -1.0,
                h: -random(50, 100), //luggage height
                //set color
                r: random(10, 250),
                g: random(10, 250),
                b: random(10, 250),
                move: luggageMove,
                display: luggageDisplay}
    return lgg;
}

function baggageClaim() { //create background details
    noStroke();

    //floor
    fill(238, 239, 235);
    rect(0, 200, width, height);

    //windows
    fill(236, 236, 230);
    rect(0, 50, width, 120);
    for(i = 0; i < 6; i++) {
        stroke(255);
        strokeWeight(4);
        strokeCap(SQUARE);
        line(i * 85 + 25, 50, i * 85 + 25, 170);
    }
    line(0, 110, width, 110);
    line(0, 140, width, 140);

    chair();

    //carousel sign
    fill(90);
    rect(150, 45, 250, 60);
    rect(200, 10, 3, 35);
    rect(350, 10, 3, 35);
    noStroke();
    fill(29, 40, 80);
    rect(155, 65, 70, 35);
    fill(0);
    rect(235, 65, 160, 35);
    textSize(8);
    fill(255);
    text("Baggage Claim", 155, 60);
    text("Arrival Time", 235, 60);
    textSize(15);
    text("Delta    2:50", 270, 88);
    textSize(35);
    text("K", 180, 95);

    //conveyor belt
    fill(135, 147, 141);
    rect(0, 400, width, 20);
    fill(67, 67, 67);
    rect(0, 420, width, 5);
    fill(168, 184, 179);
    rect(0, 395, width, 5);
    rect(0,305, width, 5);
    fill(30);
    rect(0, 310, width, 85);
    for(j = 0; j < width; j++) { //belt lines
        stroke(15);
        strokeWeight(3);
        line(j * 30, 310, j * 30, 395);
    }
}

function chair() { //create a chair
    for(x = 0; x < 4; x++) {
        noStroke();
        fill(196, 197, 190);
        rect(80 + x * 22, 155, 20, 12);
        rect(80 + x * 22, 168, 20, 2);
        stroke(196, 197, 190);
        strokeWeight(2);
        strokeCap(SQUARE);
        line(x * 22 + 90, 167, x * 22 + 90, 172);
        line(x * 25 + 85, 172, x * 25 + 85, 180);
        strokeWeight(1);
        line(84, 172, 161, 172);
    }
}

I think this week’s project was the one that I had the most fun making but also the most challenging. Coming up with the idea was easy. I love to travel and I like staring at the baggage claim conveyor belt because if I stare long enough, it makes me feel like I’m moving. I quickly drew a sketch of what I wanted my landscape to look like.

I then moved on to the starter code template and tried to understand what each part of the code was doing and how it was changing the image. This part was a little hard just because there were so many moving parts but I ultimately figured it out and then I tailored it one function at a time to match my sketch and create the final product. The colors and sizes of the bags are generated randomly.

sketch

//Steven Fei
//zfei@andrew.cmu.edu
//project 11
//section-A
var stars = [];
function setup() {
    createCanvas(480, 480);
    frameRate(8);
    //set the initial display of the stars
    for(var i = 0; i<8; i++){
        var sx = random(width);
        var sy = random(50, height/3);
        stars[i] = makeStars(sx, sy);
    }
    
}



function draw() {
    background("black");
    //create the terrain in the far back of the canvas
    var terrain3 = terrain(30, 2, height/5, height * 3/4, 3);
    //create the terrain in the middle of the canvas
    var terrain2 = terrain(80, 2, height/3, height * 3/4, 2);
    //create the terrain in the front of the canvas
    var terrain1 = terrain("white", 2, height/2, height * 3/4, 1);
    //create the blue lake at the bottom of the canvas
    noStroke();
    fill(0,33,41);
    rect(0, height * 4/5, width, height);
    //create trees
    for (var x = 0; x < width; x+=5){
        var orange = random(80,150);
        stroke(240, orange, 80);//define the color of the tree to draw
        strokeWeight(1.2);
        push();
        translate(x * random(5,10), height * 4/5);
        drawTree(0, random(5,15), int(random(3,6)));//calling the function to draw the tree
        pop();
    }
    //update star by showing the stars and the moving positions of the stars
    updateStar();
    //only keep the stars that are still on the canvas
    removeStar();
    //add new stars under a certain probability
    addStars();
}
//showing the star positions
function updateStar(){
    for (var i = 0; i<stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}
//only keep the stars on the canvas
function removeStar(){
    var starKeep = [];
    for ( var i = 0; i < stars.length; i++){
        if(stars[i].x > 0){
            starKeep.push(stars[i]);
        }
    }
    stars = starKeep;
}
//add more stars by chance
function addStars(){
    var starProbability = 0.01;
    if(random(0,1) < starProbability){
        stars.push(makeStars(width,random(50,height/3)));
    }
}
//defining the moving speed of the star
function starMove(){
    this.x += this.speed;
}
//displaying the star by drawing the circle
function starDisplay(){
    fill("white");
    noStroke();
    push();
    translate(this.x, this.y);
    circle(0,0,this.size);
    pop();
}
//main function to make the star
function makeStars(birthX, birthY){
    var str = { x: birthX,
                y: birthY,
                speed: -1.5,
                size: random(5,15),
                move: starMove,
                display: starDisplay};
    return str;
                
}
//making the terrain
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
function terrain(color,strokeweight,min,max,noiseseed){
    var verticesX = [];//array to append values for x coordinates
    var verticesY = [];//array to append values for y coordinates
    noiseSeed(noiseseed);//decide the pseudo random number seed
    stroke(color);//the color to choose to draw the terrain
    strokeWeight(strokeweight);//the strokeweight to choose to draw
    noFill();
    beginShape();
    for ( var x = 0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, min, max);
        vertex(x,y);//generating the terrain points 
        verticesX.push(x);
        verticesY.push(y);
        if(verticesX.length > width){
            verticesX.shift();
            verticesY.shift();
        }
    }
    for ( var j = 0; j < verticesX.length; j++){
        line(verticesX[j], verticesY[j], verticesX[j],height);//add vertical coloring to the terrain
    }
    endShape();  
}
//function to draw trees by defining depth(number of branches), len(branch length), seed(upper limit of the branch counts)
function drawTree(depth, len, seed){
    if(depth < seed){
        rotate(radians(-10));
        drawBranch(depth,len, seed);
        rotate(radians(20));
        drawBranch(depth,len, seed);
    }
}
function drawBranch(depth, len, seed){
    line(0,0,0,-len);
    push();
    translate(0,-len);
    drawTree(depth + 1, len, seed);
    pop();
}

For this project, I was intended to create a serene atmosphere by the lake. The mountains are majorly created in 3 layers with different shades to represent a sense of depth and distance. Symbolic maple trees were drawn in different saturations of orange and different sizes and branch counts to have a “realistic” impression of the diverse range of the trees. The circular stars are moving in the upper part of the canvas to strengthen the sense of moving. By setting different moving speed of those different objects, I was aiming to deepen a spatial feeling in the visual hierarchy. The maple trees were moving fastest because they are relatively in the very front of the canvas, while the mountains are constantly moving slower, and the stars are the slowest. The project gives me some chances to make different objects and functions and use different strategies to fulfill those elements through building a connection between the draw function and the other specific functions I make for the elements.