Category: SectionA

//Diana McLaughlin, dmclaugh@andrew.cmu.edu, Section A
//A generative landscape that shows trees, clouds, and mountains on a fall day

var trees = [];
var clouds = [];
var mountain = [];
var noiseParam = 0;
var noiseStep = 0.04;

function setup() {
    createCanvas(480, 380);
    
    //set up mountains
    for (var i = 0; i <= 96; i++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        mountain.push(value);
        noiseParam += noiseStep;
    }  
    
    //draw initial trees
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
    
    //draw initial clouds
    for (var i = 0; i < 10; i++){
        var cx = random(width);
        clouds[i] = makeCloud(cx);
    }
    frameRate(10);
}


function draw() {
    background(0, 200, 255); //sky blue

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

    mountains();
    fill(0, 120, 0);
    rect(0, 335, width, 65);

    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();   
}


function updateAndDisplayTrees(){
    // Update the trees' positions
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function removeTreesThatHaveSlippedOutOfView(){
    //remove these trees from the array
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}


function addNewTreesWithSomeRandomProbability() {
    // Add a new tree to the end of the array
    var newTreeLikelihood = 0.05; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

function treeMove() {
    this.x += this.speed;
}
    
function treeDisplay() {
    //draw the tree
    var tHeight = 70; 
    fill(this.clr); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    triangle(0, -tHeight, -this.breadth/2, tHeight-90, this.breadth/2, tHeight-90);
    fill(255, 255, 150);
    rect(-5, tHeight-90, 10, 20);
    stroke(200); 
    pop();
}


function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
                clr: color(random(0, 255), random(0, 255), 0),
                breadth: 50,
                speed: -6.0,
                move: treeMove,
                display: treeDisplay}
    return tr;
}

//Clouds

function updateAndDisplayClouds(){
    // Update the clouds' positions
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


function removeCloudsThatHaveSlippedOutOfView(){
    // remove clouds that are no longer visible
    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() {
    // Add clouds to the end of the arrayS
    var newCloudLikelihood = 0.02; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}

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

// draw the clouds
function cloudDisplay() {
    var cHeight = 250; 
    fill(255); 
    noStroke(); 
    push();
    translate(this.x, height - 40);
    ellipse(0, -cHeight, 30, 30);
    ellipse(15, -cHeight, 15, 15);
    ellipse(5, -cHeight+10, 50, 20);
    pop();
}


function makeCloud(birthLocationX) {
    var cld = {x: birthLocationX,
                breadth: 50,
                speed: -2.5,
                move: cloudMove,
                display: cloudDisplay}
    return cld;
}


function mountains() {
    //use random noise to draw mountains
    mountain.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    mountain.push(value);
    noiseParam += noiseStep;
    
    
    fill(0, 150, 0); //land green
    beginShape(); //shape the terrain
    vertex(0, height);
    for (var i = 0; i <= 96; i++) {
        vertex(i*5, mountain[i]);
    }
    vertex(width, height);
    endShape(); 
}

// 15-104
// SEAN CHEN

var bgbuildings = [];
var forebuildings = [];
var sidewalk = [];
var dash = [];
var light, bgCloud, foreCloud;
var frames = [];
var run = [];

function preload() {
    light = loadImage('https://i.imgur.com/147kNrs.png');
    bgCloud = loadImage('https://i.imgur.com/Fn6e7H6.png');
    foreCloud = loadImage('https://i.imgur.com/PNyKohG.png');
    frames[0] = loadImage('https://i.imgur.com/xxj2N5D.png');
    frames[1] = loadImage('https://i.imgur.com/ju233XV.png');
    frames[2] = loadImage('https://i.imgur.com/En4Sjg2.png');
    frames[3] = loadImage('https://i.imgur.com/KXPlTB9.png');
    frames[4] = loadImage('https://i.imgur.com/Ya0obgN.png');
    frames[5] = loadImage('https://i.imgur.com/wFN72zO.png');
    frames[6] = loadImage('https://i.imgur.com/DtMtZEq.png');
    frames[7] = loadImage('https://i.imgur.com/oEUisa6.png');
}

// update scene objects
function sceneUpdate(){
    for (var i = 0; i < bgbuildings.length; i++){
        bgbuildings[i].move();
        bgbuildings[i].display();
    }
    for (var i = 0; i < forebuildings.length; i++) {
        forebuildings[i].move();
        forebuildings[i].display();
    }
    for (var i = 0; i < dash.length; i++) {
        dash[i].move();
        dash[i].display();
    }
    for (var i = 0; i < run.length; i++) {
        run[i].move();
        run[i].display();
    }
    for (var i = 0; i < sidewalk.length; i++) {
        sidewalk[i].move();
        sidewalk[i].display();
    }
}

// adding and deleting excess objects
function shiftScene() {
    var buildingsToKeep = [];
    for (var i = 0; i < bgbuildings.length; i++) {
        if (bgbuildings[i].x + bgbuildings[i].breadth > 0) {
            buildingsToKeep.push(bgbuildings[i]);
        }
    }
    bgbuildings = buildingsToKeep;
    for (var i = 0; i < forebuildings.length; i++) {
        if (forebuildings[0].x + forebuildings[0].width < 0) {
            forebuildings.push(makeBuildingFore((forebuildings.length-1)*95));
            forebuildings.shift();
        }
    }
    for (var i = 0; i < sidewalk.length; i++) {
        if (sidewalk[0].x + 50 < 0) {
            sidewalk.push(makeSidewalk(width + width/7));
            sidewalk.shift();
        }
    }
    for (var i = 0; i < dash.length; i++) {
        if (dash[0].x + width/7 < 0) {
            dash.push(makeDash(width));
            dash.shift();
        }
    }
}

// randomly adding background buildings
function bldgProb() {
    var newBuildingLikelihood = 2.5; 
    if (random(0,100) < newBuildingLikelihood) {
        bgbuildings.push(makeBuilding(width));
    }
}

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

// draw background building and windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(53); 
    stroke(0); 
    push();
    translate(this.x, height - 60);
    rect(0, -bHeight, this.breadth, bHeight);
    for (var i = 0; i < this.nFloors; i++) {
        for (var j = 0; j < this.breadth/20; j++) {
            fill(155, 133, 38);
            circle(j*15+10, -10-(i * floorHeight), 10);
        }
    }
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1,
                nFloors: round(random(6,10)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

// drawing foreground buildings with long windows
function buildingDisplayFore() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight;
    fill(120);
    stroke(0);
    push();
    translate(this.x, height - 60);
    rect(0, -bHeight, this.width, bHeight+10);
    for (var i = 0; i < this.nFloors; i++) {
        fill(155, 133, 38);
        rect(5, -10-(i*floorHeight), this.width-10, floorHeight-10, 5);
    }
    pop();
}

function makeBuildingFore(birthLocationX) {
    var bldg = {x: birthLocationX,
                width: 90,
                speed: -2,
                nFloors: round(random(3, 6)),
                move: buildingMove,
                display: buildingDisplayFore
                }
    return bldg;
}

// adding street lights
function sidewalkDisplay() {
    image(light, this.x, height-85, 57, 50);
}

function makeSidewalk(birthLocationX) {
    var swalk = {x: birthLocationX,
                 speed: -2.5,
                 width: width/4,
                 move: buildingMove,
                 display: sidewalkDisplay
                }
    return swalk;
}

// adding street dashes
function dashDisplay() {
    stroke(144, 133, 0);
    line(this.x, height-20, this.x + width/14, height-20);
}

function makeDash(birthLocationX) {
    var d = {x: birthLocationX,
             speed: -2.5,
             width: width/7,
             move: buildingMove,
             display: dashDisplay
            }
    return d;
}

// adding running dude
function charDisplay() {
    image(frames[this.frame], this.x, 243, 30, 27);
}

function frameMove() {
    if (this.frame == 7 & this.step%3 == 0) {
        this.frame = 0;
    } else if (this.step%3 == 0) {
        this.frame++;
    }
    this.step++;
}

function makeChar(birthLocationX) {
    var c = {x: birthLocationX,
             frame: 0,
             step: 0,
             move: frameMove,
             display: charDisplay
            }
    return c;
}

function setup() {
    createCanvas(450, 300);
    background(5, 5, 45);
    // create an initial collection of buildings
    for (var i = 0; i < 7; i++){
        var rx = random(width);
        bgbuildings[i] = makeBuilding(rx);
        forebuildings[i] = makeBuildingFore(i * 95);
        dash[i] = makeDash(i * width/6);
    }
    for (var i = 0; i < 5; i++) {
        sidewalk[i] = makeSidewalk(i * width/4);
    }
    for (var i = 0; i < frames.length; i++) {
        run[i] = makeChar(10);
    }
    frameRate(30);
}

function draw() {
    background(5, 5, 45);
    //backgournd cloud
    image(bgCloud, 0, 0, 600, 100);
    // road and sidewalk
    fill(0);
    rect(0, height-50, width, 60);
    fill(66);
    rect(0, height-60, width, 20);
    // updatinga and displaying scene objects
    sceneUpdate();
    shiftScene();
    bldgProb(); 
    push();
    // layering transparent clounds
    tint(255, 127);
    image(foreCloud, 0, 0, 600, 100);
    pop();
}

// Susie Kim
// susiek@andrew.cmu.edu
// Section A
// Project 11

// set global variables
var landSpeed = 0.001;
var landFlow = 0.005;

var firefly = [];

var fWidth = 50;
var fLeft = 27 - fWidth;

// load in images for background
function preload() {
	feet = loadImage('https://i.imgur.com/VLK5brn.png');
	fruit = loadImage('https://i.imgur.com/NNwEjtA.png');
	cloud = loadImage('https://i.imgur.com/m6zIO0u.png');
}

function setup() {
    createCanvas(400, 480);
	background(29, 51, 81);
    imageMode(CENTER);

    // create fireflies at random locations on canvas
    for (var i = 0; i < 7; i++) {
    	var xLocation = random(20, 380);
    	var yLocation = random(0, 360);
    	firefly[i] = makeFireflies(xLocation, yLocation);
    }
}

function draw() {
	background(29, 51, 81);

	image(cloud, width/2, height/2-65, width-20, height-20); // background cloud image

	// blue water
	fill(147, 169, 209);
	noStroke();
	rect(0, 200, 400, 200);

    // call upon functions to draw land, foreground, and update fireflies
	land();
	createForeground();
	updateFirefly();
}

// draws front foreground porch, feet, and fruit dish
function createForeground() {
	fill(188, 158, 130);
	strokeWeight(1);
	stroke(124, 87, 61);

	// create porch base
	rect(0, 360, 400, 120);
	rect(0, 350, 400, 10);
	rect(0, 0, 30, 355);
	rect(370, 0, 30, 355);

	// insert self-drawn images of feet laying on porch and fruit
	image(feet, 100, 405, 150, 150);
	image(fruit, 300, 410, 125, 125);
}

// draws undulating sand landscape
function land() {
	fill(249, 228, 183);
	stroke(255);
	strokeWeight(8);

	beginShape();
	vertex(0, height);

	// undulating line of sandscape
	for (var x = 0; x < width; x++) {
		var a = (x*landFlow) + (millis()*landSpeed);
		var y = map(noise(a), 0, 1, height*12/20, height*11/20);
		vertex (x, y);
	}

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

// draws fireflies
function drawFirefly() {
	fill(255, 245, 0, 100);
	noStroke();
	push();

	translate(this.x1, this.y1); // allows fireflies to move depending on function
	scale(this.fireflySize); // allows fireflies to be scalable depending on make function
	ellipse(50, 50, 10, 10);
	ellipse(50, 50, 5, 5);

	pop();
}

// summons fireflies at given location with variables
function makeFireflies(xlocation, ylocation) {
	var makeFirefly = {x1: xlocation,
					   y1: ylocation,
					   fireflySize: random(0.25, 2),
					   speed: -1,
					   move: moveFirefly,
					   draw: drawFirefly}
	return makeFirefly;
}

// makes fireflies move across the page
function moveFirefly() {
	this.x1 += this.speed;
	if (this.x1 <= fLeft) {
		this.x1 += width - fLeft;
	}
}

// updates the array of fireflies
function updateFirefly() {
	for (i = 0; i < firefly.length; i++) {
		firefly[i].move();
		firefly[i].draw();
	}
}