Category: Section C

sketch

var lamps = [];
var stars = [];


function setup() {
    createCanvas(480, 280); 
    
    // create an initial collection of objects
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        lamps[i] = makeLamp(rx);
        stars[i] = makeStar(rx);
    }
    frameRate(10);
}


function draw() {
    background(37, 33, 90); 
    noStroke();
    fill(209, 215, 41);
    rect(0,height - 100,width,100);//ground
    fill(195,206,60);
    rect(0,height - 70, width, 70);
    fill(181,200,52);
    rect(0,height - 40, width, 40);

    updateAndDisplayLamps();
    removeLampsThatHaveSlippedOutOfView();
    addNewLampsWithSomeRandomProbability();
    
    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability(); 
    for(var i = 190; i < height; i+=10){//draws lines in the foreground
      stroke(181,200,52);
      strokeWeight(1.5);
      line(0, i, width, i);
    }
}


function updateAndDisplayLamps(){
    // Update the building's positions, and display them.
    for (var i = 0; i < lamps.length; i++){
        lamps[i].move();
        lamps[i].display();
    }
}

function updateAndDisplayStars(){
    // Update the building's positions, and display them.
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}

function removeLampsThatHaveSlippedOutOfView(){
    // takes away lamps once they leave the frame
    var lampsToKeep = [];
    for (var i = 0; i < lamps.length; i++){
        if (lamps[i].x + lamps[i].breadth > 0) {
            lampsToKeep.push(lamps[i]);
        }
    }
    lamps = lampsToKeep; // remember the surviving buildings
}

function removeStarsThatHaveSlippedOutOfView(){
//removes stars from array stars and puts them in new array
//once they've moved off the edge of frame
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep; // remember the surviving stars
}

function addNewLampsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newLampLikelihood = 0.013; 
    if (random(0,1) < newLampLikelihood) {
        lamps.push(makeLamp(width));
    }
}

function addNewStarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newStarLikelihood = 0.02; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}

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

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

// draws lamps
function lampDisplay() {
    fill(255,255,0,45);
    noStroke()
;    ellipse(this.x, height -100 - this.h,this.r,this.r); //halo of light from lamp
    fill(102,166,218);
    rect(this.x-1.5, height - 100 - this.h, this.breadth, this.h); //lamp post
    fill(255);
    ellipse(this.x, height - 100 - this.h, this.r2, this.r2); //lightbulb
    stroke(255);
    strokeWeight(0.5);
    noFill();
    quad(this.x - 1.5, height - 97 - this.h,
        this.x - 5, height - 110 - this.h,
        this.x + 5, height - 110 - this.h, 
        this.x + this.breadth - 1.5, height - 97 - this.h); //draws the lamp box
}

function starDisplay(){
  //halo of light around star
  noStroke();
  fill(255, 255, 0, 30);
  ellipse(this.x + this.breadth/2, this.h, this.breadth * 5, this.breadth * 5);
  stroke(255,255,0);
  strokeWeight(0.5);
  noFill();
  //draws diamonds that make up star
  quad(this.x, this.h,
       this.x + this.breadth / 2,this.h - this.tall / 2,
       this.x + this.breadth, this.h,
       this.x + this.breadth / 2,this.h + this.tall / 2);
  //quad(this.x - this.breadth / 2, this.h,
       //this.x + this.breadth, this.h + this.tall / 2,
       //this.x + this.breadth / 2, this.h,
       //this.x + this.breadth / 2, this.h - this.tall/2);
}


function makeLamp(posX) {
    var lamp = {x: posX,
                breadth: 3,
                speed: -1.5,
                h: random(40,60),
                r: random(20,35),
                r2: 4,
                move: lampMove,
                display: lampDisplay}
    return lamp;
}

function makeStar(posX) {
    var star = {x: posX,
                breadth: 3,
                speed: -0.5,
                tall: random(5,10),
                h: random(20, 100),
                move: starMove,
                display: starDisplay}
    return star;
}

this was my original mock up in illustrator, but I struggled to get the building code to do what I wanted it to, so I decided to add other elements to supplement my lamps, so I added star objects, and made the foreground more detailed.

sketch

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


function updateAndDisplayCactus(){
    // Update the building's positions, and display them.
    for (var i = 0; i < cactus.length; i++){
        cactus[i].move();
        cactus[i].display();
    }
}


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


function updateAndDisplayCactus(){
    // Update the building's positions, and display them.
    for (var i = 0; i < cactus.length; i++){
        cactus[i].move();
        cactus[i].display();
    }
}


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


function updateAndDisplayCactus(){
    // Update the building's positions, and display them.
    for (var i = 0; i < cactus.length; i++){
        cactus[i].move();
        cactus[i].display();
    }
}


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

My process for this project was based on a previous drawing I have done with cacti. To me, these are significant structures because they exist in some isolation from each other by their spread and spacing in the desert, away from clusters of other living organisms, so their visual existence is very extraordinary. To create the cacti in p5, I started with creating a curve shape as the base of the cactus. Then, I randomized the number of arms present on the cactus’s body, where I had to play around with trial and error in creating a curve shape which looked like a cactus arm, but also that was attached to the cactus’s main body. I then, played with creating other objects like the smaller, darker cactus and its visual randomization and its positioning on the second horizon line lower than the first, larger, lighter cactus which was on the first horizon line.

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 10

var buildings = []; //the big icebergs
var sparkles = []; //yellow sparkles on bottom

function setup() {
    createCanvas(309, 480);
    frameRate(10);
    
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    
    for (var h = 0; h < 5; h ++) {
        var rz = random(width);
        sparkles[h] = makeSparkle(rz);
    }
}   
 


function draw() {
    background("#364442");
    noStroke();
    fill("#5e7d6f");
    rect(0,135,width,346);

    drawBoat();
   
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    
    updateAndDisplaySparkles();
    removeSparklesThatHaveSlippedOutOfView();
    addNewSparklesWithSomeRandomProbability();
    
}

//draw and update position of boat
var boatX = 125;
var boatY = 137;
var boatSpeed = 3

function drawBoat() {
    fill("#141916")
    stroke(2);
    beginShape(); //boat body
    vertex(boatX,boatY);
    vertex(boatX+9,boatY-11);
    vertex(boatX-16,boatY-11);
    vertex(boatX-16,boatY-58);
    vertex(boatX-18,boatY-58);
    vertex(boatX-18,boatY-11);
    vertex(boatX-42,boatY-11);
    vertex(boatX-34,boatY);
    endShape();
    fill("#d5d9b8");
    noStroke();
    beginShape(); //right boat sails
    vertex(boatX-14,boatY-17);
    vertex(boatX-14,boatY-59);
    vertex(boatX+14,boatY-17);
    endShape();
    beginShape(); //left boat sails
    vertex(boatX-20,boatY-17);
    vertex(boatX-37,boatY-17);
    vertex(boatX-20,boatY-47);
    endShape();
    boatX += boatSpeed; //makes boat move left and right across canvas
    if (boatX >=width) {
        boatSpeed *= -1;
    }
    else if (boatX <= 0) {
        boatSpeed *= -1;
    }
}


//Below: set of functions that create the big icebergs
function updateAndDisplayBuildings(){
    // Update the iceberg's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = []; //says building because using code template
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth +30 > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving icebergs
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.009; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of an iceberg every frame
function buildingMove() {
    this.x -= this.speed;
}
    

// draw the icebergs
function buildingDisplay() {
    fill("#a4bcad"); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    beginShape(); //draws iceberg shape using vetices
    vertex(this.x,this.y);
    vertex(this.x-69,this.y+93);
    vertex(this.x-143,this.y+105);
    vertex(this.x-193,this.y+31);
    vertex(this.x-179,this.y-114);
    vertex(this.x-139,this.y-229);
    vertex(this.x-120,this.y-213);
    vertex(this.x-93,this.y-120);
    endShape();
    pop();
}


function makeBuilding(birthLocationX) { //creates iceberg objects to store in array
    var bldg = {x: birthLocationX,
                y: 150,
                breadth: random(60,90),
                speed: 1,
                sparklespeed: random(0.5,1),
                nFloors: round(random(1,1.5)),
                move: buildingMove,
                display: buildingDisplay
               }
    return bldg;
}





//Below: set of functions that generate the yellow sparkles
function updateAndDisplaySparkles(){
    for (var i = 0; i < sparkles.length; i++){
        sparkles[i].move();
        sparkles[i].display();
    }
}


function removeSparklesThatHaveSlippedOutOfView(){
    var sparklesToKeep = [];
    for (var i = 0; i < sparkles.length; i++){
        if (sparkles[i].x + sparkles[i].breadth +30 > 0) {
            sparklesToKeep.push(sparkles[i]);
        }
    }
    sparkles = sparklesToKeep;
}


function addNewSparklesWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSparkleLikelihood = 0.1; 
    if (random(0,1) < newSparkleLikelihood) {
        sparkles.push(makeSparkle(width));
    }
}



function sparkleMove() {
    this.x -= this.speed;
}
    


function sparkleDisplay() { 
    push();
    fill("#ffce71");
    translate(this.x+100, random(30) + this.y);
    ellipse(0, 0, 10);
    pop();
}


function makeSparkle(birthLocationX) {
    var sparkle = {x: birthLocationX,
                y: random(400,420),
                breadth: random(60,90),
                speed: random(2,3),
                transparency: random(100,200),
                move: sparkleMove,
                display: sparkleDisplay
               }
    return sparkle;
}

This project was challenging for me to understand because I’ve never worked with this many helper functions before. It took a while for me to unpack the template code and understand what does what, so I’m happy I finally understand.

First, in setup we fill the array with objects. We make the objects in a separate function; that is the make[name] function. The function that draws the images is the [name]display function. At the same time, the move function is running and since the array with the objects is a global variable, we don’t need to pass the objects between the move and display functions. Finally we have the remove and add functions, which constantly scan the “x” methods of each object in the arrays to remove items that have fallen off the screen and push new objects into the array.

Above: Sketch I drew in Adobe Illustrator prior to implementing in p5

The concept behind this project is the rotating sushi bar I used to love when i was a child living in china. The sushi chef will prepare the sushi in dishes and place them on top of the transporting track. Customers will just wait and select the different sushi and sea food dishes they want. So I drawn this graphic sushi bar from the customer standing perspective. The dishes will change randomly between two types: Sushi roll, Sushi and fish head that I illustrated. It will also generate randomly size and color of the dishes.

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-10 
var speed= -4;
var linex=-100;
var disk = [];
var sushilink = 
["https://i.imgur.com/b6hRo0j.png",
"https://i.imgur.com/QaOb647.png",
"https://i.imgur.com/099E6kA.png"] 

var roll;
var sushi;
var fish;

function preload(){ //load sushi image 
    roll= loadImage(sushilink[0]);
    fish= loadImage(sushilink[1]);
    sushi=loadImage(sushilink[2]);



}

function setup() {
    createCanvas(480, 480); 
    var rx = 0;
    // create an initial collection of disks 
    for (var i = 0; i < 30; i++){
        disk[i] = makeDisk(rx);
        rx+=250;
    }
    frameRate(10);
}


function draw(){
    background(80);
    translate(0,-20); //frame shift upward 

    sushiBar(); //calling sushi bar function 
    displayLine();
    updatedisplayDisk(); //call disk draw funciton 
    displayChopstick(); //calling chopstick draw function 
    displayChopstick1(); //calling second chopstick function 

   

}

function sushiBar(){ // drawing of the sushi bar 
    noStroke();

    //drawing the transporting trail 
    fill(120,120,90);
    rect(0,0,width,120);
    fill(220,180,130);
    stroke(0);
    strokeWeight(3);
    rect(0,height/2-140,width,20);
    fill(170,140,100);
    strokeWeight(1);
    rect(0,height/2-130,width,20);
    fill(180);
    strokeWeight(3);
    rect(0,height/2-120,width,150);
    //drawing the sushi counter
    fill(220,180,130)
    rect(0,height/2+30,width,10);
    strokeWeight(1);
    fill(170,140,100)
    rect(0,height/2+39,width,10);
    strokeWeight(1.5);
    fill(190,170,130)
    rect(0,height/2+49,width,80);
    fill(230,220,190)
    rect(0,height/2+129,width,140);
}

function updatedisplayDisk(){ //keep the sushi and disk display

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


function diskMove(){ //moving the disk by updating the speed 
    this.x += this.speed; 

}

function displayDisk(){ //drawing the disk 
    push();
    fill(this.color);
    //line(30,height/2-120,30,height/2+30)
    strokeWeight(2); //the ellipse of the plate 
    ellipse(this.x,this.disky,this.diskw,this.diskh);
    fill(120);
    noStroke();
    ellipse(this.x+5,this.disky+10,80,30); //shadow of the food 


    //deciding which food will be on the plate  
    if(this.food == roll){

        image(roll,this.x-230,50,roll.width*0.7,roll.height*0.8);  
        rectMode(CENTER);
        fill(250);

    }else if(this.food == fish){
        fill(0);
        image(fish,this.x-70,120,fish.width*0.8,fish.height*0.8);  
    } else{

        image(sushi,this.x-190,70,roll.width*0.6,roll.height*0.7);  

    }
    
    pop();


}
function displayLine(){

    push();
   
    //drawing the sushi trail 
    stroke(0);
    strokeWeight(2);
    for(var i=0; i<300;i++){
    var space = i*30
    line(linex+space,height/2-120,linex+space,height/2+30);
    }
    linex += speed
    pop();


}

function displayChopstick(){ //drawing of the chopstick 

    translate(-120,0);
    var chopx=190
    var chopy1= height/2+180
    var chopy2= height/2+192
    fill(90,80,70);
    noStroke();
    rect(chopx+17,chopy1-10,7,38);
    fill(120,120,70);
    rect(chopx+17,chopy1-10,7,33);
    strokeCap(ROUND);
    stroke(220,70,60);
    strokeWeight(6)
    line(chopx,chopy1,chopx+120,chopy1)
    line(chopx,chopy2,chopx+120,chopy2)
    stroke(20);
    line(chopx+90,chopy1,chopx+120,chopy1)
    line(chopx+90,chopy2,chopx+120,chopy2)
    stroke(190,190,20);
    strokeCap(SQUARE);
    line(chopx+85,chopy1,chopx+90,chopy1)
    line(chopx+85,chopy2,chopx+90,chopy2)
}

function displayChopstick1(){ //same chopstick drawing copyed to a different position 

    translate(220,0);
    var chopx=190
    var chopy1= height/2+180
    var chopy2= height/2+192
    fill(90,80,70);
    noStroke();
    rect(chopx+17,chopy1-10,7,38);
    fill(120,120,70);
    rect(chopx+17,chopy1-10,7,33);
    strokeCap(ROUND);
    stroke(220,70,60);
    strokeWeight(6)
    line(chopx,chopy1,chopx+120,chopy1)
    line(chopx,chopy2,chopx+120,chopy2)
    stroke(20);
    line(chopx+90,chopy1,chopx+120,chopy1)
    line(chopx+90,chopy2,chopx+120,chopy2)
    stroke(190,190,20);
    strokeCap(SQUARE);
    line(chopx+85,chopy1,chopx+90,chopy1)
    line(chopx+85,chopy2,chopx+90,chopy2)
}


function makeDisk(diskx){ //object of the disk 

    var disk = {x: diskx, 
                disky: 200,
                diskw: random(100,200),
                diskh: random(70,130),
                speed: -4.0,
                move: diskMove, 
                display:displayDisk,
                color: random(190,230),
                food: random([roll,fish,sushi])
    }

     return disk; 
}





   


    

sijings_ GenerativeLandscape

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//GenerativeLandscape

var frames = [];
var frameeys=[];
var humans=[];
var cakes = [];
var frames2 = [];
var r=220;


function setup() {
    createCanvas(480, 240);
    var x=width/2;
    var y=height/2;
    var x1;
    var y1;
    
    // create an initial collection of humans
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        humans[i] = makeHuman(rx);
    }

    for (var i2 = 0; i2 < 5; i2++){
        var rx2 = random(0,5);
        cakes[i2] = makeCake(rx2);
    }
    frameRate(10);


}

function preload(){
    var filenames = [];
    filenames[0] = "https://i.imgur.com/SqI6peg.png";
    filenames[1] = "https://i.imgur.com/045MUOm.png";
    filenames[2] = "https://i.imgur.com/fQHcLAX.png";
    filenames[3] = "https://i.imgur.com/8xnKXdV.png";
    filenames[4] = "https://i.imgur.com/RXbcttI.png";
    
    for (i=0; i<filenames.length; i++){//create a new arrary for humans
        frames.push(loadImage(filenames[i]));
    }

    frames2.push(loadImage("https://i.imgur.com/4Li0MwV.png"));
    frames2.push(loadImage("https://i.imgur.com/DPquy2W.png"));
    var filenames2 = [];
    filenames2[0]="https://i.imgur.com/eKURFcs.png";
    filenames2[1]="https://i.imgur.com/6khWp0b.png";
    filenames2[2]="https://i.imgur.com/ftnXNpy.png";
    filenames2[3]="https://i.imgur.com/GUpBr3X.png";
    for (i=0; i<filenames2.length; i++){
        frameeys.push(loadImage(filenames2[i]));//create a new arrary for eyes
    }
}


function draw() {
    background(222,212,212); 
    fill(206,119,44);
    angleMode(DEGREES);
    push();
    noStroke();
    arc(width/2, -40, 390, 390, 0, 180,90);
    pop();
    for (var i2=0; i2<18; i2++){//for drawing the sound's light rays
        x=width/2+sin((360/18)*i2)*r;
        y=-10+cos((360/18)*i2)*r;
        x1=width/2+sin((360/18)*i2)*(r-20);
        y1=-10+cos((360/18)*i2)*(r-20);
        stroke(157,82,32);
        strokeWeight(6);
        line(x, y, x1, y1);
    }
    push();
    scale(0.5,0.5);
    translate(-60,0);
    image(frameeys[frameCount%4], width/2+30, -30);//for the eyes animation
    pop();
    push();
    addNewCake();//call these functions in setup so it is actually get called
    updateHumansandCakes();
    removecakeandhuman();
    addNewHuman(); 
    pop();

    
}


function updateHumansandCakes(){
    // Update the building's positions, and display them.
    for (var i = 0; i < humans.length; i++){
        humans[i].move();
        humans[i].display();
    }
    for (var i2 = 0; i2 < cakes.length; i2++){
        cakes[i2].move2();
        cakes[i2].display2();
    }
}


function removecakeandhuman(){//to remove the cakes and humans which are off the canvas
    var lakesToKeep = [];
    for (var i2 = 0; i2 < cakes.length; i2++){
        if (cakes[i2].x2 + cakes[i2].breadth2 > 0) {
            lakesToKeep.push(cakes[i2]);
        }
    }
    cakes = lakesToKeep; 
    var buildingsToKeep = [];
    for (var i = 0; i < humans.length; i++){
        if (humans[i].x1 + humans[i].breadth > 0) {
            buildingsToKeep.push(humans[i]);
        }
    }
    humans = buildingsToKeep; // remember the surviving buildings
    
}

function addNewCake(){
    var newCakeLikelihood1 = 0.01; //make possibility lower
    if (random(0,1) < newCakeLikelihood1) {
        var randompos1=-5;
        cakes.push(makeCake(randompos1));
    }
}

function addNewHuman() {
    // With a very tiny probability, add a new building to the end.
    var newHumanLikelihood = 0.6; //higher possibility
    if (random(0,1) < newHumanLikelihood) {
        var randompos=random(-5,0);
        humans.push(makeHuman(randompos));        
    }
}

//update position of building every frame
function humanMove() {
    this.x1 += this.speed1;
}
function cakeMove(){
    this.x2 += this.speed2;
}

function lakeDisplay(){
    push();
    translate(this.x2,50);//note here translate has to be inside of push so that
    scale(this.scaleS,this.scaleS);//new objects won't be added out side of the
    image(frames2[0],0,height-10);//canvas instead, they will be added inside
    translate(-650,300);
    image(frames2[1],40,height-10);
    pop();

}


//reconmded to create a new object for a separate image
function makeCake(lakeLocationX){//similar as creating the object below
    var cake = {x2:lakeLocationX,
                speed2 : random(1,2.5),
                move2: cakeMove,
                breadth2: 50,
                scaleS: random(0.1,0.5),
                display2 : lakeDisplay}
    return cake;
}



// display the pedestrian
function humanDisplay() {
    push();
    translate(this.x1,this.floatHeight);
    var framesC = frameCount % 5; //animating the birds
    scale(this.scaleS2,this.scaleS2);
    image(frames[framesC],0,0);// the birds will flap their wings staggered

    pop();
}

function makeHuman(birthLocationX) {//create the human object with below properties
    var pedestrian = {x1: birthLocationX,
                speed1: random(5,10),
                floatHeight: random(40,150),//for some going a little bit higer than others
                breadth: 50,
                nFloors: round(random(2,8)),
                scaleS2: random(0.05,0.15),//for some is larger than others
                move: humanMove,
                display: humanDisplay}
    return pedestrian;//remember to return the object
}

For this project, I was aiming for creating a city landscape where odd, strange things happen as well as normal people walking on the street. The inspiration comes from the idea how people sometimes walk on the street and won’t give too much attention on what’s happening around them. To achieve this idea, I created two objects, one for the pedestrian and the other for all other moving objects (b/c they have different speed and position, so I think it is easier to have them on two different objects). Some randomization here is the location, size, and speed of the individuals in the object. For example, each pedestrian is walking in a different speed. Here is the sketch for the city landscape I imagined.

For this project, I got to learn how to use object much clearly. Also, I also find that loading frames is a really useful strategy for creating cool visual elements.

Here are two screenshot for the original dimention I was working on.

sketch

var house = [];
var houseImg = [];
function preload() {
  houseImg[3] = loadImage("https://i.imgur.com/wsrsd27.png");
  houseImg[2] = loadImage("https://i.imgur.com/AG35goZ.png");
  houseImg[1] = loadImage("https://i.imgur.com/PkUvm1J.png");
}  
function setup() {
  createCanvas(480, 480);
  for (var i = 0; i < 1; i++){
    var x = random(0,width);
    house[i] = makeHouse(x);
  }
  frameRate(10);
}
function draw(){
  background(256);
  updateNdisplayHouses();
  newHouses();
}
function updateNdisplayHouses() {
  for (var i = 0; i < house.length; i ++){
    house[i].move();
    house[i].display();
  }
}
function newHouses() {
  var newHouseProb = .015;
  if (random(0,1) < newHouseProb) {
    house.push(makeHouse(width));
  }
}
function houseMove() {
  this.x += this.speed;
}
function houseDisplay() {
  push();
  translate(this.x, 0);
  // var imgNum = floor(random(1, 3.99));
  image(houseImg[1], 0, 0);
  image(houseImg[2], 220, 0);
  image(houseImg[3], 400, 0);
  noStroke();
  fill(0);
  rect(0, 400, 2000, 80);
  for (var i = 0; i < 2000; i += 48) {
    fill(256, 256, 0);
    rect(i, 435, 28, 10);
  }
  pop();
}
function makeHouse(startLocationX) {
  var house = {x: startLocationX,
              speed: -5,
              move: houseMove,
              display: houseDisplay}
  return house;
}

I took a rather simple approach to this project – none of the ideas I came up with was more interesting than this experiment that I made:

sketch

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 10 - Landscape

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 10 - Landscape

// Simple demonstration of the noise() function. 
// Change these for different effects:

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var i;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
}
 
function draw() {
    
    background(255);
    beginShape(); 
    fill(0, 100);

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

    for (var i = 0; i < width; i++) {
        fill (0);
        var t = (i * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, -1, 0, height);
        vertex(i, y + 400); 
        fill(0, 10)
        noStroke();
        rect (i, y + 800, i, y + 100);
    }

    endShape();
    drawSun();
}

function drawSun() {
    // making the sun and its lines

    var S = second();
    var H = hour();
    var M = minute();

    //drawLines();

    push ();
    stroke (255);
    strokeWeight (2.5);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 320, 320, radians (0), radians (45));
    arc (0, 0, 320, 320, radians (55), radians (100));
    arc (0, 0, 320, 320, radians (110), radians (155));
    arc (0, 0, 320, 320, radians (165), radians (210));
    arc (0, 0, 320, 320, radians (220), radians (265));
    arc (0, 0, 320, 320, radians (275), radians (310));
    arc (0, 0, 320, 320, radians (320), radians (350));

    fill (255, 100, 120);
    ellipse (0, 0, 200 + (H * 3), 200 + (H * 3));   // draws the sun
    fill (255);
    ellipse (0, 0, S + 75, S + 75);     // draws the white ball in the sun, growing every second
    pop ();

    push ();
    stroke (255);
    strokeWeight (1.5);
    translate (width, 0);
    rotate (radians (S * -6));
    fill (0, 0);
    arc (0, 0, 300, 300, radians (0), radians (45));
    arc (0, 0, 300, 300, radians (55), radians (100));
    arc (0, 0, 300, 300, radians (110), radians (155));
    arc (0, 0, 300, 300, radians (165), radians (210));
    arc (0, 0, 300, 300, radians (220), radians (265));
    arc (0, 0, 300, 300, radians (275), radians (310));
    arc (0, 0, 300, 300, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();

    push ();
    stroke (255);
    strokeWeight (1);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 280, 280, radians (0), radians (45));
    arc (0, 0, 280, 280, radians (55), radians (100));
    arc (0, 0, 280, 280, radians (110), radians (155));
    arc (0, 0, 280, 280, radians (165), radians (210));
    arc (0, 0, 280, 280, radians (220), radians (265));
    arc (0, 0, 280, 280, radians (275), radians (310));
    arc (0, 0, 280, 280, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();
    
}