Category: Section D

I wanted to upload an image of my sketch but for some reason my phone keeps taking images filled with grey color

And…finally my phone worked. Thanks.

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Project-10

var waves = [];//create an array to hold waves
var mountainPeak1 = 0.03;
var mountainSpeed1 = 0.0003;//speed of mountain
var mountainPeak2 = 0.01;
var mountainSpeed2 = 0.0005;//speed of mountain
var boat;
var lighthouse;
var bX = 480;//x position of boat

function setup() {
    createCanvas(480, 440);
    //create initial collection of waves
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        waves[i] = makeWave(rx);
    }
}

function preload() {//load images of boat and lighthouse
    boat = loadImage("https://i.imgur.com/7ehKMrX.png"); // boat image
    lighthouse = loadImage("https://i.imgur.com/8foDjEk.png")//lighthouse image
}

function draw() {
    sun();//draw sun
    mountain1();//draw mountain1
    mountain2();//draw mountain2
    waterBackground();//draw water

    image(lighthouse, 350, height/2);//draw lighthosue
    //draw waves
    updeteAndDisplayWave();
    addWave();
    removeWaves();
    //draw boat
    makeBoat();
}

function waveDisplay(wave){ //draw waves
    var radius = 10;//radius increment of wave
    fill(255);
    stroke(39, 55, 81);
    strokeWeight(2);
    //create 4 rows of waves
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 80, this.y - 60, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 20, this.y - 40, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 50, this.y - 20, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x, this.y, this.number*radius, this.number*radius, PI, 2*PI);
    }

}

function makeWave(){
    var wave = {x: width,
                y: height,
                number: round(random(2,8)),//control size of each wave
                speed: -1,
                breadth: 50,
                move: waveMove,
                display: waveDisplay
    }
    return wave;
}

function waveMove() {
    this.x += this.speed;//wave moves by the speed
}

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

}

function removeWaves(){//remove waves that's outside of canvas
    var keepWaves = [];
    for (var i = 0; i < waves.length; i++) {
        if (waves[i].x + waves[i].breadth > 0) {
            keepWaves.push(waves[i]);
        }
    }
    waves = keepWaves;

}

function addWave(){//add new waves
    var waveChance = .05;
    if (random(0, 1) < waveChance) {
        waves.push(makeWave(width));
    }

}

function makeBoat(){
    bX -= .5;
    image(boat, bX, 3*height/4);
    if (bX < -40) { // if boat exits left, make it come in right
        bX = width;
    }
}

function mountain1(){//make mountain1
    noStroke(); 
    fill(21, 40 ,73);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak1) + (millis() * mountainSpeed1);
        var y = map(noise(t), 0,1, height/5, height/2);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function mountain2(){//make mountain2
    noStroke(); 
    fill(50, 70, 104);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak2) + (millis() * mountainSpeed2);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function waterBackground(){
    fill(91, 141, 176);
    rect(0, 2*height/3, width, height/3);
}

function sun(){
    //gradient background
    for (var i = 0; i < 480; i++) {
        strokeWeight(2);
        stroke(94 + 1.5 * i, 120 + i, 158 + 0.5 * i);
        line(0, i, width, i);
    }
    //sun
    noStroke();
    fill(254, 255, 241);
    ellipse(350, 90, 120, 120);
}

I wanted to create a landscape with ocean, water, sun, lighthouse, mountain, and to for making it more playful, a paper boat. I started with making mountains using the noise function (the terrain sample code). I used a gradient color for the background using layers of lines. I used two images for the light house and the paper boat. I created waves as objects, and continuously adding waves to the canvas. I create several rows of waves and offset them to make the drawing more dynamic.

PS.I wanted to upload an image of my sketch but for some reason my phone keeps taking images filled with grey color…

Landscape

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-10: Generative Landscape

var clouds = [];
var birds = [];
var frames = [];
var mS1 = 0.0003;
var mD1 = 0.03;
var mS2 = 0.0005;
var mD2 = 0.01;

function preload(){
    // Images for the bird flight cycle
    var filenames = [];
    filenames[0] = "https://i.imgur.com/RXatjYL.png";
    filenames[1] = "https://i.imgur.com/tUdWerm.png";
    filenames[2] = "https://i.imgur.com/4RK7a5B.png";
    filenames[3] = "https://i.imgur.com/tUdWerm.png";
    filenames[4] = "https://i.imgur.com/RXatjYL.png";
    filenames[5] = "https://i.imgur.com/yZgWcpm.png";
    filenames[6] = "https://i.imgur.com/wT9v4PU.png";
    filenames[7] = "https://i.imgur.com/0Ss2jc0.png";

    // Load images into frames array for birds
    for(i = 0; i < filenames.length; i++){
        frames[i] = loadImage(filenames[i]);
    }
}

function setup(){
    createCanvas(480, 320);
    frameRate(10);
}

function draw(){
    Sky(0, 0, width, height);
    makeMountain();
    makeBird();

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();

    updateAndDisplayBirds();
    addNewBirdsWithSomeRandomProbability();

    Airplane();
}

function Sky(x, y, w, h) {
    //Draws the gradient sky
    var c1, c2;

    c1 = color(251, 234, 192);
    c2 = color(118, 85, 45);
    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);
    }
}
function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
    }
}

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

function removeCloudsThatHaveSlippedOutOfView(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

function addNewCloudsWithSomeRandomProbability(){
    // Spawn a new cloud to the right edge of the canvas
    var newCloudLikelihood = 0.02; //clouds are spawned relatively often
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}

function addNewBirdsWithSomeRandomProbability(){
    // Spawn a new bird to the right edge of the canvas
    var newBirdLikelihood = 0.005; //birds spawn less frequently than the clouds
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width));
    }
}

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

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

function cloudDisplay() {
    var cHeight = this.altitude * 25;

    push();
    translate(this.x, height - 260);

    // Draws Clouds of various sizes
    fill(191, 175, 159);
    // Variables randomize the positioning and size of the clouds
    ellipse(0, -cHeight, this.breadth, cHeight-20);
    ellipse(-10, -cHeight+10, this.breadth*.8, cHeight-20);
    ellipse(25, -cHeight+5, this.breadth, cHeight-20);
    ellipse(15, -cHeight+15, this.breadth*1.2, cHeight-20);
    pop();
}

function birdDisplay(){
    push();
    translate(this.x, this.height);
    for (i = 0; i< this.size; i++){
      var frame = frameCount % 5; //cycles through bird images
      image(frames[frame + i],this.x-this.disX*i,0-this.disY*i);
  }
  pop();
}

function makeCloud(birthLocationX) {
    var clouds = {x: birthLocationX,
                breadth: 60,
                speed: -1.2,
                altitude: round(random(-1,2)),
                move: cloudMove,
                display: cloudDisplay}
    return clouds;
}

function makeBird(birthLocationX){
    var birds = {x: birthLocationX,
                disX: random(15, 40),
                disY: random(30),
                size:floor(random(1, 5)),
                speed: random(-5, -2),
                height: round(random(75, 100)),
                move: birdMove,
                display: birdDisplay}
    return birds;
}

function makeMountain(){
    // Generates the terrain
    // Larger background mountains
    noStroke();
    fill(98, 89, 79);
    beginShape();
    for(x1 = 0; x1 < width; x1++){
         var t1 = (x1 * mD1) + (millis() * mS1);
         var y1 = map(noise(t1), 0, 1, 0, height);
         vertex(x1, y1 - 10);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

    // Middlegorund mountains
    fill(63, 57, 53);
    beginShape();
    for(x2 = 0; x2 < width; x2++){
         var t2 = (x2 * mD2) + (millis() * mS2);
         var y2 = map(noise(t2), 0, 1, 0, height);
         vertex(x2, y2 + 80);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
}


function Airplane(){
    // Wing
    noStroke();
    fill(193, 173, 146);
    quad(401, 247, 176, 124, 208, 121, 454, 175);
    fill(67, 63, 52);
    quad(401, 247, 200, 146, 228, 143, 444, 232);
    fill(73, 58, 47);
    triangle(176, 124, 208, 121, 187, 129);
    fill(68, 39, 18);
    quad(176, 124, 208, 121, 158, 70, 147, 66);

    // Window Frame
    beginShape();
    noStroke();
    fill(23, 16, 16);
    vertex(0, 0);
    vertex(0, 320);
    vertex(480, 320);
    vertex(480, 0);
    vertex(450, 0);
    vertex(430, 158);
    vertex(426, 177);
    vertex(416, 203);
    vertex(400, 237);
    vertex(373, 270);
    vertex(350, 283);
    vertex(333, 290);
    vertex(295, 300);
    vertex(250, 307);
    vertex(211, 309);
    vertex(163, 302);
    vertex(121, 294);
    vertex(87, 275);
    vertex(56, 245);
    vertex(39, 203);
    vertex(20, 0);
    endShape();

    // Window Frame Highlight
    beginShape();
    noStroke();
    fill(86, 66, 59);
    vertex(0, 90);
    vertex(19, 214);
    vertex(31, 255);
    vertex(44, 277);
    vertex(59, 292);
    vertex(67, 299);
    vertex(86, 312);
    vertex(97, 320);
    vertex(81, 320),
    vertex(70, 312);
    vertex(51, 299);
    vertex(43, 292);
    vertex(28, 277);
    vertex(15, 255);
    vertex(0, 214);
    endShape();

    beginShape();
    vertex(480, 52);
    vertex(467, 109);
    vertex(456, 182);
    vertex(447, 226);
    vertex(428, 261);
    vertex(411, 279);
    vertex(378, 304);
    vertex(347, 320);
    vertex(363, 320);
    vertex(394, 304);
    vertex(427, 279);
    vertex(444, 261);
    vertex(463, 226);
    vertex(472, 182);
    vertex(480, 109);
    endShape();
}

I really wanted to show the view from a plane, because I love flying. I think there is something very calming about being in the air and I wanted my project to encapsulate this idea. Being in the air offers new perspectives, and I would love it if I could fly. Added some birds, clouds and mountains in the background.

sketch2

//Natalie Schmidt
//nkschmid@n=andrew.cmu.edu
//Section D
//Project-10-Generative Landscape

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
//x position of rock
var rx = 470;
//y position of rock
var ry = 280;
//array to store all the rainbow rocks
var clouds = [];

function setup() {
    createCanvas(480, 300);
    frameRate(10);
//load the clouds ito the array
//code came from example
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        clouds[i] = makeClouds(rx);
    }
    frameRate(10);
}

function draw() {
    background(32, 46, 71);
    noStroke();
    //draw clouds - came from example
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    //draw the moon
    fill(255, 255, 255, 220);
    ellipse(30, 30, 40);
    noFill();
    beginShape();
    //draw the terrains
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 10, height);
        //create 2 terrains so it looks dimensional
        vertex(x, y);
        vertex(x + 10, y);
        //fill the terrain with lines
        stroke(47, 73, 121, 80);
        line(x, y, x, height);
    }
    endShape();
//draw the "horizon"
    fill(32, 46, 71, 90);
    rect(0, 255, width, 45);
//draw the rocks
    rainbowRock1();
    rainbowRock2();
    rainbowRock3();
    rainbowRock4();
    rainbowRock5();
    rainbowRock6();
    rainbowRock7();

// if they disappear off screen, enter again
// from the right
    if (rx + 195 < 0) {
        rx = width;
    }
    else {
        rx -= 8;
    }

}

//draw the first stack of rocks
function rainbowRock1() {
    noStroke();
    fill(0);
    ellipse(rx, ry, 35, 30);
    fill(0, 0, 255);
    ellipse(rx, ry - 14, 35, 30);
    fill(236, 223, 21);
    ellipse(rx, ry - 28, 35, 30);
    fill(255);
    ellipse(rx, ry - 42, 35, 30);
    fill(255, 0, 0);
    ellipse(rx, ry - 56, 35, 30);
}

//draw the second stack
function rainbowRock2() {
    fill(21, 112, 49);
    ellipse(rx + 70, ry, 35, 30);
    fill(177, 157, 120);
    ellipse(rx + 70, ry - 14, 35, 30);
    fill(0);
    ellipse(rx + 70, ry - 28, 35, 30);
    fill(114, 113, 108);
    ellipse(rx + 70, ry - 42, 35, 30);
    fill(0, 0, 255);
    ellipse(rx + 70, ry - 56, 35, 30);
}

//draw third stack
function rainbowRock3() {
    fill(161, 52, 116);
    ellipse(rx + 110, ry, 35, 30);
    fill(255, 113, 151);
    ellipse(rx + 110, ry - 14, 35, 30);
    fill(255, 0, 0);
    ellipse(rx + 110, ry - 28, 35, 30);
    fill(255, 107, 59);
    ellipse(rx + 110, ry - 42, 35, 30);
    fill(216, 208, 28);
    ellipse(rx + 110, ry - 56, 35, 30);
    fill(14, 97, 36);
    ellipse(rx + 110, ry - 70, 35, 30);
}

//draw fourth stack
function rainbowRock4() {
    fill(213, 180, 30);
    ellipse(rx + 160, ry, 35, 30);
    fill(255, 107, 59);
    ellipse(rx + 160, ry - 14, 35, 30);
    fill(255, 0, 0);
    ellipse(rx + 160, ry - 28, 35, 30);
    fill(255, 97, 139);
    ellipse(rx + 160, ry - 42, 35, 30);
}

//draw fifth stack
function rainbowRock5() {
    fill(255, 97, 139);
    ellipse(rx + 220, ry, 35, 30);
    fill(209, 198, 174);
    ellipse(rx + 220, ry - 14, 35, 30);
    fill(0, 0, 255);
    ellipse(rx + 220, ry - 28, 35, 30);
    fill(213, 180, 30);
    ellipse(rx + 220, ry - 42, 35, 30);
}

//draw sixth stack
function rainbowRock6() {
    fill(157, 150, 130);
    ellipse(rx + 260, ry, 35, 30);
    fill(0);
    ellipse(rx + 260, ry - 14, 35, 30);
    fill(179, 31, 109);
    ellipse(rx + 260, ry - 28, 35, 30);
}

//draw seventh stack
function rainbowRock7() {
    fill(255, 0, 0);
    ellipse(rx + 310, ry, 35, 30);
    fill(179, 31, 109);
    ellipse(rx + 310, ry - 14, 35, 30);
    fill(0, 0, 255);
    ellipse(rx + 310, ry - 28, 35, 30);
    fill(14, 97, 36);
    ellipse(rx + 310, ry - 42, 35, 30);
    fill(217, 199, 33);
    ellipse(rx + 310, ry - 56, 35, 30);
    fill(255, 80, 49);
    ellipse(rx + 310, ry - 70, 35, 30);
}

//code below comes from example, modified to make clouds
//instead of buildings
function updateAndDisplayClouds() {
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

function removeCloudsThatHaveSlippedOutOfView() {
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

function addNewCloudsWithSomeRandomProbability() {
    var newCloudsLikelihood = 0.20;
    if (random(0, 1) < newCloudsLikelihood) {
        clouds.push(makeClouds(width));
    }
}

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

function cloudsDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;
    fill(66, 69, 85, 100);
    push();
    translate(this.x, height - 40);
    ellipse(0, -bHeight - 115, bHeight, this.breadth);
    pop();
}

function makeClouds(birthLocationX) {
    var cloud = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                nFloors: round(random(5, 12)),
                move: cloudsMove,
                display: cloudsDisplay}
     return cloud;
}

This project was really rough. I had a hard time using objects for this particular assignment, so I couldn’t really implement what I originally wanted. I’m okay with the final product, but it is a very simplified version of what I originally intended to make. I wish I had a better understanding of these functions, so I could better use them for my own purposes.

Here’s my original idea sketched out on paper:

Here’s also where my inspiration came from:

These are the “Seven Magic Mountains,” an installation in Nevada somewhere by the highway to Las Vegas. My family and I have driven from home (California) to Las Vegas several times, and we always pass by these enormous, brightly statues.

creyes1 Project-10 (Generative Landscape)

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-10 (Generative Landscape)

//Colors
var green1 = [152, 186, 157];
var green2 = [169, 200, 172];
var green3 = [122, 153, 126];

//Shape Arrays
var orbs = [];
var cords = [];
var clouds = [];
var landlines = [];

var inc = 0; //Value for noise command

function setup() {

    createCanvas(480, 480);
    background(green1);
    noStroke();
    angleMode(DEGREES);

    //Generates random land form
    for (var x = 0; x < width; x++) {
        landlines.push(makeLandscape(x, 1));
    }

    //Draws initial set of orbs
    for (var i = 0; i < 5; i++) {
        var rx = random(width);
        var ry = random(height);
        orbs[i] = makeOrb(rx, ry);
    }

    //Adds cord properties to array
    for (var i = 0; i < 10; i++) {
        cords.push(makeCord());
    }


}



function draw() {

    background(green1);

    //Lighter background shapes
    fill(green2);
    noStroke();
    ellipse(width/2, height/2, 100, 300);
    ellipse(width/2 + 120, height/2, 75, 200);
    ellipse(width/2 - 120, height/2, 75, 200);

    //Renders and moves landscape
    for (var x = 0; x < landlines.length; x++) {
        landlines[x].display();
        landlines[x].move();
    }

    //Removes first in the array, or the line that goes off-canvas
    landlines.shift();

    //Increases increment by 1, pushes a new land line onto array
    inc += 1;
    landlines.push(makeLandscape(width-1, inc));

    //Layers lines and orbs for depth
    for (var i = 0; i < 7; i++) {
        cords[i].display();
    }

    updatePositions();

    for (var i = 7; i < 10; i++) {
        cords[i].display();
    }

    addOrb();
    addCloud();
}



//GENERAL FUNCTIONS-------------------------------------------------------------

function updatePositions() {

    //Update orb position and display
    for (var i = 0; i < orbs.length; i++) {
        orbs[i].move();
        orbs[i].display();
    }

    //Update cloud position and display
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }

}


//Removes orbs and clouds after passing edge of canvas
function removeFalloff() {

    var orbsToKeep = [];

    for (var i = 0; i < orbs.length; i++) {
        if (orbs[i].x + orb[i].breadth > 0) {
            orbsToKeep.push(orbs[i]);
        }
    }

    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x) {
            cloudsToKeep.push(clouds[i]);
        }
    }

}

//ORB FUNCTIONS-----------------------------------------------------------------

//Orb & orb properties
function makeOrb(spawnPositionX, spawnPositionY) {

    var orb = {x: spawnPositionX,
               y: spawnPositionY,
               breadth: 216 * this.scale,
               scale: random(.25, 1),
               speed: random(-.75, -.15),
               angle: random(0, 360),
               move: orbMove,
               display: displayOrb}

    return orb;
}

//Base orb drawing, capabable of scaling and rotation
function displayOrb() {

    var orbSize = 216 * this.scale;
    var px = this.x-(orbSize/2);
    var py = this.y-(orbSize/2);

    //center position 108, 108
    //Inside pink shell rim
    fill(216, 154, 196);
    push();
    translate(px, py);
    rotate(this.angle);
    beginShape();
    vertex((53.8 * this.scale), (15.2 * this.scale));
    bezierVertex((1.781 * this.scale), (45.703 * this.scale),
                 -(15.078 * this.scale), (112.01 * this.scale),
                 (15.42 * this.scale), (163.31 * this.scale));
    bezierVertex((45.919 * this.scale), (214.601 * this.scale),
                 (112.226 * this.scale), (231.46 * this.scale),
                 (163.52 * this.scale), (200.96 * this.scale));
    bezierVertex((214.817 * this.scale), (170.462 * this.scale),
                 (231.676 * this.scale), (104.155 * this.scale),
                 (201.18 * this.scale), (52.86 * this.scale));
    bezierVertex((170.679 * this.scale), (1.564 * this.scale),
                 (104.372 * this.scale), -(15.295 * this.scale),
                 (53.8 * this.scale), (15.2 * this.scale));
    endShape();

    //Inside purple
    fill(158, 90, 146);
    beginShape();
    vertex(134.1 * this.scale, 40.76 * this.scale);
    bezierVertex(97.698 * this.scale, 46.405 * this.scale,
                 62.946 * this.scale, 83.298 * this.scale,
                 56.3  * this.scale, 126.13 * this.scale);
    bezierVertex(49.074 * this.scale, 172.708 * this.scale,
                 77.436 * this.scale, 207.524 * this.scale,
                 119.85 * this.scale, 200.15 * this.scale);
    bezierVertex(161.836 * this.scale, 192.853 * this.scale,
                 196.48 * this.scale, 147.78 * this.scale,
                 197.52 * this.scale, 103.01 * this.scale);
    bezierVertex(198.488 * this.scale, 61.779 * this.scale,
                 170.188 * this.scale, 35.198 * this.scale,
                 134.1 * this.scale, 40.76 * this.scale);
    endShape();

    //Inside purple shadow
    rectMode(CENTER);
    fill(116, 55, 107);
    push();
    translate((83.78 * this.scale), (93.85 * this.scale));
    rotate(30);
    rect(0, 0, 35 * this.scale, 175 * this.scale);
    pop();

    push();
    translate((108.09 * this.scale), (108.64 * this.scale));
    rotate(30);
    rect(0, 0, 6.5 * this.scale, 175 * this.scale);
    pop();

    //Large pink shell, counter-clockwise winding
    fill(194, 112, 173);
    beginShape();
        vertex((53.8 * this.scale), (15.2 * this.scale));
        bezierVertex((1.781 * this.scale), (45.703 * this.scale),
                     -(15.078 * this.scale), (112.01 * this.scale),
                     (15.42 * this.scale), (163.31 * this.scale));
        bezierVertex((45.919 * this.scale), (214.601 * this.scale),
                     (112.226 * this.scale), (231.46 * this.scale),
                     (163.52 * this.scale), (200.96 * this.scale));
        bezierVertex((214.817 * this.scale), (170.462 * this.scale),
                     (231.676 * this.scale), (104.155 * this.scale),
                     (201.18 * this.scale), (52.86 * this.scale));
        bezierVertex((170.679 * this.scale), (1.564 * this.scale),
                     (104.372 * this.scale), -(15.295 * this.scale),
                     (53.8 * this.scale), (15.2 * this.scale));

    //Ellipsoid cutout, clockwise winding
        beginContour();
            vertex((175.65 * this.scale), (50.62 * this.scale));
            bezierVertex((209.531 * this.scale), (65.455 * this.scale),
                         (222.219 * this.scale), (111.235 * this.scale),
                         (203.99 * this.scale), (152.87 * this.scale));
            bezierVertex((185.753 * this.scale), (194.502 * this.scale),
                         (143.504 * this.scale), (216.223 * this.scale),
                         (109.62 * this.scale), (201.38 * this.scale));
            bezierVertex((75.736 * this.scale), (186.544 * this.scale),
                         (63.049 * this.scale), (140.764 * this.scale),
                         (81.28 * this.scale), (99.13 * this.scale));
            bezierVertex((99.515 * this.scale), (57.497 * this.scale),
                         (141.764 * this.scale), (35.776 * this.scale),
                         (175.65 * this.scale), (50.62 * this.scale));
        endContour();

    endShape(CLOSE);

    //Shine
    fill(218, 179, 212);

    push();
    translate(  + (174.49 * this.scale),   + (117.35 * this.scale));
    rotate(25);
    ellipse(0, 0, 7 * this.scale, 30 * this.scale);
    pop();

    push();
    translate(  + (172.35 * this.scale),   + (140.86 * this.scale));
    rotate(25);
    ellipse(0, 0, 4 * this.scale, 17 * this.scale);
    pop();
    pop();
}

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

//Occasionally adds an additional orb to the array
function addOrb() {
    var spawnChance = 0.005;
    if (random(0, 1) < spawnChance) {
        orbs.push(makeOrb(width*1.5, random(height)));
    }
}

//CORD FUNCTIONS----------------------------------------------------------------

//Line properties
function makeCord() {
    var cord = {x1: 0,
               x2: width,
               y1: randomGaussian(height*(2/3), 40),
               y2: randomGaussian(height*(2/3), 40),
               col: [218, 179, 212],
               weight: 2,
               display: drawCord}
    return cord;
}

//Draws line
function drawCord() {
    stroke(this.col);
    strokeWeight(this.weight);
    line(this.x1, this.y1, this.x2, this.y2);
    noStroke();
}

//CLOUD FUNCTIONS---------------------------------------------------------------

//Cloud properties
function makeCloud() {
    var cloud = {
        x: width*1.5,
        y: random(height),
        h: random(3*4, 12*4),
        w: random(40*4, 85*4),
        move: cloudMove,
        speed: random(-.5, -.1),
        col: [255, 255, 255, 100],
        display: drawCloud}
    return cloud;
}

//Draws cloud
function drawCloud() {
    noStroke();
    fill(this.col);
    ellipse(this.x, this.y, this.w, this.h);

    //ellipse(this.x + this.w*1.3, this.y - this.h*.25, this.w*.33, this.h*.33);
}

//Cloud movement
function cloudMove() {
    this.x += this.speed;
}

//Occasionally adds cloud to array
function addCloud() {
    var spawnChance = 0.004;
    if (random(0, 1) < spawnChance) {
        clouds.push(makeCloud());
    }
}

//LAND FUNCTIONS----------------------------------------------------------------

//Landscape properties
function makeLandscape(x, i) {
    var noiseScale = 0.002;
    var noiseVal = noise((x+i)*noiseScale);
    var landline = {x: x,
                    y1: height - 50 - noiseVal*100,
                    y2: height,
                    col: green3,
                    weight: 1,
                    speed: -1,
                    move: panLand,
                    display: drawLandscape}
    return landline;
}

//Draws individual lines for landscape
function drawLandscape() {

        stroke(this.col);
        strokeWeight(this.weight);
        line(this.x, this.y1, this.x, this.y2);

}

//Moves landmass
function panLand() {
    this.x += this.speed;
}

I wound up running into more difficulty than usual with this assignment, although it was definitely an interesting process when it came to problem-solving. I kept the main components of the program fairly simple – objects with random properties moving across the page. However, I really wanted to try to figure out how the landscape in the Flags assignment work, and after a lot of trial and error made a variation of it using moving vertical lines to piece together that far-off hillside. While the main objects weren’t so difficult to implement, the landscape took up a sizable chunk of my time, but I’m still happy with the result, plus it forced me to really understand the order in which functions were performed, as well as the little nuances of arrays and objects.

Analog & Digital Sketches: