Category: SectionB

I had started out wanting to do a sunset, with the view of a car driving by it. I didn’t want to create a jagged moving landscape, so I decided to do a desert instead. I was first going to make cactuses, but then I made the ground black and realized I wanted a more futuristic look. So I decided my image would have the sunset, black ground, and then geometric shapes with their shadows. Because I had used the bezier() function in the past, I decided to use that for the sunset, having the anchor parts react with the sun, almost like the sky was melting. 

During the project I changed my objects from pyramids to stars to, finally, sailboats. I added to the black water horizon, putting color lines under the sun to look like a water reflection, and adding vertical lines to the water with an invisible ball pushing them to look like the boats were pushing the current.

sketch

var quarW = 120;//width divided by 4
var quarW2 = 360;//qaurW times 3
var bezH = 40;//height of bezier anchors
var bezW = 48;//width of ground bezier anchors
var bezWS = 48;//width of ground bezier side points
var sunX = 240;//x value placement of sun in sky
var sunH = 100;//height of sun in sky
var currX = 480;//x placement of horizontal circle
var bzHorLn1 = 360;//horizon line of the bezier anchors
var bzHorLn2 = 360;//horizon line of the bezier anchors
var bzHorLn3 = 360;//horizon line of the bezier anchors
var bzHorLn4 = 360;//horizon line of the bezier anchors
var bzHorLn5 = 360;//horizon line of the bezier anchors
var bzHorLn6 = 360;//horizon line of the bezier anchors
var bzHorLn7 = 360;//horizon line of the bezier anchors
var bzHorLn8 = 360;//horizon line of the bezier anchors
var horLn = 360;//horizon line of the bezier non anchors

var boats = [];

function setup() {
    createCanvas(480, 480); 
    frameRate(10);//faster framerate
    // create an initial collection of boats
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        boats[i] = makeBoat(rx);
    }
    frameRate(20);
}

function draw() {
    background(38,59,103);//dark blue
    
    fill(244,182,103);//brighter orange
    bezier(0,320, quarW,bezH * 8, quarW2,bezH * 8, 480,320);//8
    fill(213,131,87);//bright orange
    bezier(0,280, quarW,bezH * 7, quarW2,bezH * 7, 480,280);//7
    fill(185,106,82);//orange
    bezier(0,240, quarW,bezH * 6, quarW2,bezH * 6, 480,240);//6
    fill(207,63,57);////bright orange
    bezier(0,200, quarW,bezH * 5, quarW2,bezH * 5, 480,200);//5
    fill(167,62,72);//bright pink
    bezier(0,160, quarW,bezH * 4, quarW2,bezH * 4, 480,160);//4
    fill(141,80,94);//pink
    bezier(0,120, quarW,bezH * 3, quarW2,bezH * 3, 480,120);//3
    fill(93,80,109);//purple
    bezier(0,80, quarW,bezH * 2, quarW2,bezH * 2, 480,80);//2
    fill(67,88,122);//blue
    bezier(0,40, quarW,bezH, quarW2,bezH, 480,40);//1
    
    //-------------------------------SUN
    push();
    fill(0);
    ellipse(sunX, sunH, 200,200);
    pop();
    sunH += 5;//sun speed
    if(sunH > height + 100) {//resets sun placement if it moves past canvas
        sunH = -100;
    }
    if(dist(sunX,sunH, quarW,quarW) < 210){//pushes down sunset blocks
        bezH += 3;
    } 
    noFill();
    if(dist(sunX,sunH, horLn,horLn) < 170){//pushes down susnet lines
        bzHorLn1 += .05;
        bzHorLn2 += .1;
        bzHorLn3 += .15;
        bzHorLn4 += .2;
        bzHorLn5 += .25;
        bzHorLn6 += .3;
        bzHorLn7 += .35;
        bzHorLn8 += .4;
    } 
    //-------------------------------
    //-------------------------------GROUND
    push();
    fill(0);
    stroke(0);
    rect(0,360, 480,130);
    stroke(255);
    //vertical lines on black area
    stroke(255);
    strokeWeight(.1);
    bezier(bezWS,360, bezW,400, bezW,440, bezWS,480);
    bezier(bezWS * 2,360, bezW * 2,400, bezW * 2,440, bezWS * 2,480);
    bezier(bezWS * 3,360, bezW * 3,400, bezW * 3,440, bezWS * 3,480);
    bezier(bezWS * 4,360, bezW * 4,400, bezW * 4,440, bezWS * 4,480);
    bezier(bezWS * 5,360, bezW * 5,400, bezW * 5,440, bezWS * 5,480);
    bezier(bezWS * 6,360, bezW * 6,400, bezW * 6,440, bezWS * 6,480);
    bezier(bezWS * 7,360, bezW * 7,400, bezW * 7,440, bezWS * 7,480);
    bezier(bezWS * 8,360, bezW * 8,400, bezW * 8,440, bezWS * 8,480);
    bezier(bezWS * 9,360, bezW * 9,400, bezW * 9,440, bezWS * 9,480);
    pop();
    //horizontal sunset lines
    push()
    stroke(244,182,103);//brighter orange
    bezier(140,horLn, 190,bzHorLn1, 290,bzHorLn1, 340,horLn);
    stroke(213,131,87);//bright orange
    bezier(140,horLn, 190,bzHorLn2, 290,bzHorLn2, 340,horLn);
    stroke(185,106,82);//orange
    bezier(140,horLn, 190,bzHorLn3, 290,bzHorLn3, 340,horLn);
    stroke(207,63,57);////bright orange
    bezier(140,horLn, 190,bzHorLn4, 290,bzHorLn4, 340,horLn);
    stroke(167,62,72);//bright pink
    bezier(140,horLn, 190,bzHorLn5, 290,bzHorLn5, 340,horLn);
    stroke(141,80,94);//pink
    bezier(140,horLn, 190,bzHorLn6, 290,bzHorLn6, 340,horLn);
    stroke(93,80,109);//purple
    bezier(140,horLn, 190,bzHorLn7, 290,bzHorLn7, 340,horLn);
    stroke(67,88,122);//blue
    bezier(140,horLn, 190,bzHorLn8, 290,bzHorLn8, 340,horLn);
    pop();
    //water current (pushed by invisible ball)
    push();
    fill(50);
    noFill();
    noStroke();
    ellipse(currX,420, 20,20);//current ball
    currX -= 5;//speed of invisible ball
    if(currX < width - 600) {//resets invisible ball if it moves off canvas
        currX = 590;
    }
    if(dist(currX,currX, bezW,bezW) < 210){//moves vertical lines if ball nears
        bezW -= .5;//pushes them forward
    }
    else {
        bezW += .3;//pushes them back after ball leaves
    } 
    pop();

    updateAndDisplayBoats();
    removeBoatsThatHaveSlippedOutOfView();
    addNewBoatsWithSomeRandomProbability(); 
}

function updateAndDisplayBoats(){
    // Update the boats positions, and display them.
    for (var i = 0; i < boats.length; i++){
        boats[i].move();
        boats[i].display();
    }
}

function removeBoatsThatHaveSlippedOutOfView(){
    //If a boat has dropped off the left edge,
    //remove it from the array.  
    //Copy boats I want to keep into a new array.
    var boatsToKeep = [];
    for (var i = 0; i < boats.length; i++){
        if (boats[i].x + boats[i].breadth > 0) {
            boatsToKeep.push(boats[i]);
        }
    }
    boats = boatsToKeep; // remember the surviving boats
}

function addNewBoatsWithSomeRandomProbability() {
    // With a very tiny probability, add a new boats to the end.
    var newBoatLikelihood = 0.009; 
    if (random(0,1) < newBoatLikelihood) {
        boats.push(makeBoat(width));
    }
}

function boatMove() {//method to update position of boat every frame
    this.x += this.speed - 3;
}
    
function boatDisplay() {//draw the boat and some windows
    var floorHeight = 10;
    var bHeight = this.hPoles * floorHeight; 
    fill(this.R, this.G, this.B);//star colors
    stroke(0); 
    push();
    translate(this.x, height - 135);
    //boat
    noFill();
    stroke(255);
    bezier(30,67, 50,70, 80,74, 90,73);//top
    line(30,67, 37,83);//front side
    bezier(85,83, 91,80, 90,75, 90,73);//back side
    line(37,83, 85,83);//bottom
    line(60,5 * -bHeight / 60, 60,71);//pole
    triangle(40 / this.sailW,60, 60,5 * -bHeight / 60, 60,60);//flap large
    triangle(60,58, 60,5 * -bHeight / 60, 75 * this.sailW,58);//flap small
    pop();
}

function makeBoat(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 85,
                speed: -1.0,
                sailW: random(1,1.3),
                R: random(142),
                G: random(255),
                B: random(130),
                hPoles: round(random(-5,40)),
                move: boatMove,
                display: boatDisplay}
    return bldg;
}

For this project, I wanted to maximize randomization of the space objects, but still have some sort of coherency. Mostly, I was trying to become more comfortable with creating different classes of objects.

sketch

//Ghalya Alsanea
//galsanea@andrew.cmu.edu
//Section B
//Project 11

var lines;
var totalLines = 0;

var j;              //jiggle
var f;              //flower

var p1, p2, p3;     //planets
var sp;             //spinning planet

//stars
var star;
var star2;

function preload() {
    //
}

function setup() {
    createCanvas(600, 600);
    background(0);
    lines = new Array(500);

    //initiate the dif class ojects
    j = new Jiggle();
    f = new Flower();
    p1 = new Planet();
    p2 = new Planet2();
    p3 = new Planet3();
    sp = new SpinPlanet();
    star = new Star();
    star2 = new Star();
}

function draw() {
    background(0);
    //create the shooting starts lines
    lines[totalLines] = new Line();
    totalLines++;
    for (var i = 0; i < totalLines; i++) {
        lines[i].move();
        lines[i].display();
    }
    //show and move the objects
    //jiggle circle
    j.move();
    j.show();
    //flower
    f.move();
    f.show();
    // planets
    p1.move();
    p1.show();
    p2.move();
    p2.show();
    p3.move();
    p3.show();
    //spinplanet
    sp.move();
    sp.show();
    //star 1
    star.move();
    star.show();
    //star 2
    star2.move();
    star2.show();
}


//////////////////////////////////////////////////////////////////////
//                      define the classes                          //
//////////////////////////////////////////////////////////////////////

class Jiggle {
    constructor() {
        this.x = random(0, width);      //start at a random xpos
        this.y = height + 100;          //make sure to start  off the canvas
        this.size = random(20, 50);     //create a new size
        this.col = color("orange");     //define the color
    }
    move() {
        this.y-=2;                          //move up
        this.x = this.x + random(-5, 5);    //make the "jiggle" movement
        //if it moves too far up, reset the object
        if (this.y < -this.size) {
            this.y = height;
            this.x = random(0, width);
            this.size = random(20, 50);
        }
    }
    show() {
        //draw the object
        noStroke();
        strokeWeight(1);
        fill(this.col);
        circle(this.x, this.y, this.size);
    }
}

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

class Flower {
    constructor() {
        this.x = random(0, width);      //start at a random xpos
        this.y = height + 100;          //start y loc off the canvas
        this.size = random(40, 80);     //randomize size
    }
    move() {
        this.y--;                       //move up
        this.x = this.x + random(-1, 1);//cause the jiggle
        //reset if it goes too far up
        if (this.y < -this.size) {
            this.y = height;
            this.x = random(0, width);
            this.size = random(40, 80);
        }
    }
    show() {
        // draw the object
        noStroke();
        fill(204, 101, 192, 180);
        //rotate 
        push();
        translate(this.x, this.y);
        for (var i = 0; i < 10; i++) {
            ellipse(0, 30, this.size / 6, this.size);
            rotate(PI / 5);
        }
        pop();
    }
}

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

class Star {
    constructor() {
        this.x = random(0, width);          //start at random xpos
        this.y = height - 50;               //start y loc off canvas
        this.col = color("yellow"); 
        this.npoints = random(5, 12);       //points in star
        this.angle = TWO_PI / this.npoints;
        this.halfAngle = this.angle / 2.0;      
        this.r1 = random(5, 20);            //inner radius
        this.r2 = random(20, 40);           //outer radius

    }
    move() {
        this.x;
        this.y = this.y - random(0.8, 1.2);         //move in a random speed
        // reset if it goes off cnavas
        if (this.y < -100) {
            this.y = height;
            this.y -= random(0.8, 1.2);
            this.x = random(0, width);
            this.npoints = random(5, 12);
            this.angle = TWO_PI / this.npoints;
            this.halfAngle = this.angle / 2.0;
            this.r1 = random(10, 30);
            this.r2 = random(60, 100);
        }
    }
    show() {
        //draw the object
        noStroke();
        fill(this.col);
        //rotate it
        push();
        translate(this.x, this.y);
        rotate(radians(frameCount)/2);
        beginShape();
        //draw a star based on angles and npoints
        for (var a = 0; a < TWO_PI; a += this.angle) {
            var sx = cos(a) * this.r2;
            var sy = sin(a) * this.r2;
            vertex(sx, sy);
            sx = cos(a + this.halfAngle) * this.r1;
            sy = sin(a + this.halfAngle) * this.r1;
            vertex(sx, sy);
        }
        endShape();
        pop();

    }
}

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

class Planet {
    constructor() {
        this.x = random(0, width);
        this.size = random(10, 50);
        this.y = height - this.size;
        this.col = color("red");
    }
    move() {
        this.x;
        //Moving up at a constant speed
        this.y -= 0.75;
        // Reset to the bottom
        if (this.y < -100) {
            this.y = height + 250;
            this.size = random(10, 50);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500)) - 25;
        }
    }
    show() {
        //draw planet with ring
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);
        noFill();
        stroke(this.col);
        strokeWeight(1);
        ellipse(this.x, this.y, this.size * 2, this.size / 2);
    }
}

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

class Planet2 {
    constructor() {
        this.x = random(0, width);
        this.y = height + 100;
        this.size = random(50, 80);
        this.col = color("pink");
    }
    move() {
        this.x;
        //Moving up at a constant speed
        this.y-=1.1;
        // Reset to the bottom
        if (this.y < -50) {
            this.y = height;
            this.size = random(50, 80);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500)) - 25;
        }
    }
    show() {
        //draw planet with rotated ring
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);

        stroke(this.col);
        strokeWeight(2);
        noFill();
        push();
        translate(this.x, this.y);
        rotate(PI/4);
        ellipse(0, 0, this.size * 1.5, this.size / 3);
        pop();
    }
}

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

class Planet3 {
    constructor() {
        this.x = random(0, width);
        this.y = height + 100;      //start below window
        this.size = random(50, 80);
        this.col = color("coral");
    }
    move() {
        this.x = this.x + random(-1, 1);
        //Moving up at a constant speed
        this.y -= 0.85;
        // Reset to the bottom
        if (this.y < -100) {
            this.y = height;
            this.size = random(50, 80);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500)) - 25;
        }
    }
    show() {
        //draw planet with rotating ring
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);
        noFill();
        stroke(this.col);
        push();
        translate(this.x, this.y);
        rotate(radians(frameCount)/2);
        strokeWeight(1);
        ellipse(0, 0, this.size / 2, this.size * 2);
        pop();
    }
}

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

class SpinPlanet {
    constructor() {
        this.x = random(0, width);
        this.y = height + 100;      //start below window
        this.size = random(50, 90);
        this.col = color("green");
    }
    move() {
        this.x = this.x + random(-1, 1);
        //Moving up at a constant speed
        this.y -= 0.65;
        // Reset to the bottom
        if (this.y < -100) {
            this.y = height;
            this.size = random(50, 90);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500))-40;
        }
    }
    show() {
        //draw a spinning planet
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);
        noFill();
        stroke(this.col);
        strokeWeight(2);
        push();
        translate(this.x, this.y);
        rotate(frameCount);
        ellipse(random(-1,1), 0, this.size / 2, this.size * 2);
        pop();
        
    }
}

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

class Line {
    constructor() {
        this.r = height + 200;      // starting pt + 200 so to make sure it starts off canvas
        this.x = random(width);     // Start with a random x location
        this.y = this.r;            // Start pt below the window
        this.speed = random(2, 5);  // Pick a random speed
        this.l = random(100, 200);  //randomize length of line 
    }

    move() {
        // move y upwards by speed
        this.y -= this.speed;
    }

    display() {
        //only draw if it's in the canvas
        //draw the shooting stars lines
        if (this.y > 0) {
            strokeWeight(1);
            stroke(random(100, 255), random(100, 255), random(100, 255), 200);
            line(this.x, this.y, this.x, this.y - this.l);
        }
    }
}

sketch

var waterSpeed = 0.00005;
var waterDetail = 0.003;
var mountain1Speed = 0.0009;
var mountain1Detail = 0.05;
var mountain2Speed = 0.0005;
var mountain2Detail = 0.014;
var crows = [];

function setup() {
    createCanvas(480, 400);
    frameRate(10);
    for (var i = 0; i < 9; i++){
        var crowX = random(width);
        var crowY = random(0, 200);
        crows[i] = makeCrow(crowY, crowX);
    }
}

function draw(){
    background(240);
    drawSun();
    drawMountain2();
    drawMountain1();
    drawBoat();
    drawWater();
    updateCrow();
    addCrow();
    removeCrow();


}
function drawSun(){
    noStroke();
    fill(239.7, 186.15, 204, 25);
    ellipse(300, 200, 500, 500);
    fill(239.7, 186.15, 204, 30);
    ellipse(350, 200, 350, 350);
    fill(239.7, 186.15, 204, 35);
    ellipse(390, 200, 200, 200);

}
function drawBoat(){
        //line(265, 330, 240, 360);
    noStroke();
    fill(100);
    arc(255,345, 50, 10, 0, PI);
    ellipse(260,340, 5, 20);
    ellipse(260, 328, 5, 5);
    triangle(250, 326, 270, 326, 260, 323);

}
function drawMountain2(){
    noStroke();
    fill(188.7, 211.65, 229.5);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * mountain2Detail) + (millis() * mountain2Speed);
        var y = map(noise(x), 0, 1.5, 50, 300);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawMountain1(){
    noStroke();
    fill(155.55, 196.35, 226.95);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * mountain1Detail) + (millis() * mountain1Speed);
        var y = map(noise(x), 0, 1.2, 150, 250);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}
function drawWater(){
    noStroke();
    fill(119.85, 140.25, 165.75);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * waterDetail) + (millis() * waterSpeed);
        var y = map(noise(x), 0, 1.8, 345, 360);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}
function makeCrow(crowX, crowY){
    var crow = {
        x: crowX,
        y: crowY,
        velocity: random(3, 18),
        size: random(5, 10),
        move: moveCrow,
        show: showCrow,
    }
    return crow;
}
function moveCrow(){
    this.x -= this.velocity;
    this.y -= this.velocity / random(5, 10);
}
function showCrow(){
    strokeWeight(1);
    stroke(0);
    noFill();
    arc(this.x, this.y, this.size, this.size/2, PI, TWO_PI);
    arc(this.x + this.size, this.y, this.size, this.size/2, PI, TWO_PI);
}
function updateCrow(){
    for(i = 0; i < crows.length; i++){
        crows[i].move();
        crows[i].show();
    }
}
function addCrow(){
    if (random(0,1) < 0.1){
        var crowX = width;
        var crowY = random(0, height/2);
        crows.push(makeCrow(crowX, crowY));
    }
}
function removeCrow(){
    var keep = [];
    for (i = 0; i < crows.length; i++){
        if (crows[i].x + crows[i].size > 0){
            keep.push(crows[i]);
        }
    }
    crows = keep;
}

For this project, I wanted to create someone on a boat flowing along the landscape, with crows flying in the opposite direction.

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-11

var trees = [];

function setup() {
    createCanvas(480, 400);
    // collection of trees
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trees[i] = makeTrees(rx);
    }
    frameRate(100);

}

function draw() {
    background('lightblue');
    drawRoad();
    updateTrees();
    removeTrees();
    addNewTrees();
    drawRedcar(180, 230);
    drawYellowcar(260, 330);
    drawSun();
}

function drawSun() {
    fill(255, 102, 0);
    ellipse(440,20, 130);

}

function drawRoad() {
    //grey road
    fill(163);
    rect(0, 220, 480, 180);

    //white line
    fill('white');
    rect(0, 290, 480, 5);
}

function drawRedcar(x , y) {
    strokeWeight(0);

    //body
    fill('red');
    rect(x, y, 100, 20);
    rect(x + 20, y - 20, 50, 20);

    //tires
    fill('black');
    ellipse(x + 20, y + 20, 21, 21);
    ellipse(x + 80, y + 20, 21, 21);

    //wheels
    fill('white');
    ellipse(x + 20, y + 20, 15, 15);
    ellipse(x + 80, y + 20, 15, 15);

    fill('red');
    ellipse(x + 20, y + 20, 3, 3);
    ellipse(x + 80, y + 20, 3, 3);

    //windows
    fill(102, 204, 255);
    rect(x + 28, y - 17, 35, 15);
}

function drawYellowcar(x , y) {
    strokeWeight(0);

    //body
    fill('yellow');
    rect(x, y, 100, 20);
    rect(x + 20, y - 20, 50, 20);

    //tires
    fill('black');
    ellipse(x + 20, y + 20, 21, 21);
    ellipse(x + 80, y + 20, 21, 21);

    //wheels
    fill('white');
    ellipse(x + 20, y + 20, 15, 15);
    ellipse(x + 80, y + 20, 15, 15);

    fill('blue');
    ellipse(x + 20, y + 20, 3, 3);
    ellipse(x + 80, y + 20, 3, 3);

    //windows
    fill(102, 204, 255);
    rect(x + 28, y - 17, 35, 15);
}

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

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

function addNewTrees() {
    //probability of new trees
    var newTreeLikelihood = 0.01;
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTrees(width));
    }
}

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

// draw the trees
function treeDisplay() {
    fill(119, 83, 0);
    noStroke();
    push();
    translate(this.x, height - 230);
    noStroke();
    rect(0, 0, 15, 50);
    pop();

    fill(0, 153, 0);
    noStroke();
    push();
    translate(this.x, height - 230);
    noStroke();
    ellipse(0, 20, 40);
    ellipse(10, 3, 40);
    ellipse(20, 20, 40);
    pop();
}

function makeTrees(birthLocationX) {
    var tree = {x: birthLocationX,
                y: 200,
                breadth: 50,
                speed: -1.0,
                move: treeMove,
                display: treeDisplay}
    return tree;
}

For this project, I wanted to create a project that displays cars and the surroundings, which are sky, trees, road, and a sun. It was more challenging than my expectation but will be fun and useful once I absorb it.

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 11

var skyspeed = 0.001;
var skyamp = 0.001; //calm fluctuations like the skyline
var grassspeed = 0.001;
var grassamp = 5; //to make fluctuations grasslike

function setup() {
  createCanvas(480, 480);
} 

function draw() {
    background(255); //white background to represent cloud filled sky
    sky(); //draws sky
    grass(); //draws grass
    totoro(); //draws totoro
    
}


function sky(){
  fill(102, 225, 225); 
  beginShape(); 
  for (var x = 0; x < width; x++) {
    var position = x*skyamp + (millis()*skyspeed);
    var y = map(noise(position), 0, 10, height/5, height);
    vertex(x, y); 
  }
  vertex(width, height);
  vertex(0, height);
  endShape();
}

function grass(){
  fill(0, 255, 0); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var position2 = x*grassamp + (millis()*grassspeed);
            var y = map(noise(position2), 0, 3, height/1.4, height); //height adjustment to make totoro 'walk' on grass
            vertex(x, y); 
      }
      vertex(width, height);
      vertex(0, height);
    endShape();
}



function totoro(){ 
  
  translate(200,300) //translate Totoro as it was made seperately in web editor

  fill(30,144,255);
  ellipse(50,50,40,50); //body
  
  fill(135,206,250);
  ellipse(50,57,15,20); //arm
  
  fill(0);
  triangle(48,67,50,69,52,67); //claw
  
  fill(135,206,250);
  triangle(60,28,55,15,50,25); //ear
  
  fill(255,203,138);
  triangle(58,28,55,21,52,25); //inner ear
  
  fill(255);
  ellipse(60,38,7,7); //eye
  
  fill(0);
  ellipse(60,38,3,3); //pupil
  ellipse(69,42,3,3); //nose
 
}

For the landscape project, I chose my recurring character Totoro to walk across the grass with a beautiful skyline.

sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-11

var star = [];
var tree = [];
var terrainSpeed = 0.0008;
var terrainDetail1 = 0.014;
var terrainDetail2 = 0.01;

function setup() {
    createCanvas(480, 400);
    frameRate(10);
    for (var i = 0; i < 15; i++){
        var starX = random(width);
        var starY = random(0, height/2);
        star[i] = makeStar(starX, starY);
    }

    for (var i = 0; i < 7; i++){
        var treeX = random(width);
        var treeY = 330;
        tree[i] = makeTree(treeX, treeY);
    }
}

function draw() {
    background(0);
    displayStars();
    drawMountain1();
    drawMountain2();
    drawGround();
    drawMoon();
    displayTree();
}

function drawMountain1(){
	//draw background mountain
    noStroke();
    fill(21, 53, 82); 
    beginShape(); 

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

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

function drawMountain2(){
	//draw background mountain 2
    noStroke();
    fill(63, 94, 116); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail2) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 1, 120, 250);
      vertex(x, y);
    }

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

function drawGround(){
	//draw the ground plane
    noStroke();
    fill(200); 
    beginShape(); 

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

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

function drawStar(){
	//draw the shape of the star
    noStroke();
    fill(210, 193, 120);
    push();
    translate(this.x, this.y);
    ellipse(20, 20, 3, 3);
    pop();
}

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

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

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

function drawTree(){
	//draw the tree
    noStroke();
    fill(50);
    push();
    translate(this.x2, this.y2);
    rect(-10, -20, this.treeWidth, this.treeHeight);
    rect(0, 0, 5, 25);
    pop();

}

function moveTree(){
	//give the tree speed
    this.x2 += this.speed2;
    if(this.x2 <= -10) {
        this.x2 += width
    }
}

function makeTree(locationX, locationY){
    var makeT = {x2: locationX,
                y2: locationY,
                treeWidth: 25,
                treeHeight: random(20, 40),
                speed2: -6,
                move: moveTree,
                draw: drawTree}
    return makeT;
} 

function displayTree(){
    for (var l = 0; l < tree.length; l++){
        tree[l].move();
        tree[l].draw();
    }
}
function drawMoon() {
    fill(210, 193, 120);
    ellipse(370, 50, 60, 60);
    fill(230, 213, 140);
    ellipse(370, 50, 55, 55);
    fill(240, 223, 150);
    ellipse(370, 50, 50, 50);
}

For this project, I planed to create a landscape of snowy mountains at night. So I created some stars and a moon in the background, and I created two mountains with different color darkness to show the depth. In the front, I create a white snow covered ground plane and some trees growing on top. The position of the stars and trees are randomly generated, and I made the speed of the stars slower than other elements since that is what naturally happens in real life.