Month: November 2020

/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

// Variables for people 
var px = [];
var py = [];
var pdx = [];
var pc = [];
var skin = []; 
var pWidth = []; 
var pHeight = []; 

// Variables for clouds 
var cx = [];
var cy = [];
var cdx = [];
var cWandH = []; 

var buildings = [];
var houses = []; 

function preload() {
    // loading image files 
    finger = loadImage("https://i.imgur.com/DPWPwwe.png"); 
    police = loadImage("https://i.imgur.com/9xYWNnM.png"); 
    taxi = loadImage("https://i.imgur.com/ywwvyoP.png")
} 

function setup() {
    createCanvas(480,480); 
    frameRate(20); 

    // Finger 
    fin = new Object(); 
    fin.image = finger; 
    fin.x = 200;
    fin.y = 460; 
    fin.dx = 1; 
    fin.dy = 1; 
    fin.width = 290; 
    fin.height = 200; 
    fin.move = fingerMove; 
    fin.draw = fingerDraw;

    pol = new Object(); 
    pol.image = police; 
    pol.x = 700; 
    pol.y = 255; 
    pol.dx = 15; 
    pol.width = 240; 
    pol.height = 240; 
    pol.move = polMove; 
    pol.draw = polDraw; 

    tax = new Object(); 
    tax.image = taxi; 
    tax.x = 900; 
    tax.y = 275; 
    tax.dx = 10; 
    tax.width = 230
    tax.height = 230 
    tax.move = taxiMove; 
    tax.draw = taxiDraw; 

    // People
    for (var i = 0; i < 10; i ++){
        px[i] = random(25, width - 25); 
        py[i] = 350; 
        pdx[i] = random(1,3); 
        pc[i] = color(random(255), random(255), random(255));
        skin[i] = color(random(55,200), 80, 90); 
        pWidth[i] = random(20,50); 
        pHeight[i] = random(30,80); 
    }

    // Clouds 
    for (var i = 0; i < 5; i ++){
        cx[i] = random(20,460); 
        cy[i] = random(30,90); 
        cdx[i] = 2; 
        // cloud width and height 
        cWandH[i] = random(20,30); 
    }

    // Building 
    for (var j = 0; j < 5; j ++){
        var bx = random(width); 
        buildings[j] = makeBuildings(bx); 
    }

    // House 
    for (var k = 0; k < 3; k ++){
        var hx = random(width); 
        houses[k] = makeHouses(hx); 
    }

    frameRate(10); 
} 

function draw() {
//  background(130,208,218); 
    background(200,241,208);

    sidewalk(); 
    road(); 

    // Draw clouds, make them move right, and reappear if they move off canvas 
    for (var i = 0; i < 5; i++){
       cloud(cx[i], cy[i], cdx[i], cWandH[i], cWandH[i]);
       cx[i] += cdx[i]; 

       if (cx[i] > width + 10){
           cx[i] = -40; 
       }
   }

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

    updateAndDisplayHouses();
    removeHousesThatHaveSlippedOutOfView();
    addNewHousesWithSomeRandomProbability(); 

    // Make buildings reappear if they go off the right side of the canvas 
    // Reappear on the left side 
    for (var j = 0; j < buildings.length; j++){
        if (buildings[j].x > width + 20) {
           buildings[j].x = -60; 
       }
   }

    // Make houses reappear if they go off the right side of the canvas 
    // Reappear on the left side 
    for (var k = 0; k < houses.length; k ++){
        if (houses[k].x > width + 20) {
            houses[k].x = -100; 
        }
    }

    // Make people reappear if they go off the right side of the canvas 
    // Reappear on the left side     
    for (var i = 0; i < 10; i ++){
        people(px[i], py[i], pdx[i], pc[i],skin[i],pWidth[i], pHeight[i]); 
        px[i] += pdx[i]; 

        if(px[i] > width+50){
           px[i] = -50; 
        }
    }

    pol.draw(); 
    pol.move(); 

    tax.draw(); 
    tax.move();  

    drawiPhone();  
    fin.draw(); 
    fin.move(); 

    if (frameCount >= 60){
    record(); 
    }

}

 function people(px, py, pdx, pc,skin, pWidth, pHeight){
    fill(pc); 
    noStroke(); 
    // Shirt 
    ellipse(px, py, pWidth, pHeight); 
    // Head 
    fill(skin); 
    ellipse(px,py-25,20,20); 
 }


function fingerDraw(){
    image(finger, this.x, this.y, this.width, this.height); 
}

// Move finger to record button 
function fingerMove(){ 
    if (fin.x > 142 & this.y > 378){
    this.x -= this.dx; 
    this.y -= this.dy; 
    }
}

function polDraw(){
    image(police, this.x, this.y, this.width, this.height); 
}

function polMove(){
    this.x -= this.dx; 
    if (this.x <= -800){
        this.x = 500; 
    }
}

function taxiDraw(){
    image(taxi, this.x, this.y, this.width, this.height); 
}

function taxiMove(){
    this.x -= this.dx; 
    if (this.x <= -1000){
        this.x = 500; 
    }
}

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

function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = [];
    for (var j = 0; j < buildings.length; j++){
        if (buildings[j].x + buildings[j].breadth > 0) {
            buildingsToKeep.push(buildings[j]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}

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

// Make buildings move to right 
function buildingsMove() {
    this.x += this.speed;

}

function buildingsDisplay() {
    var floorHeight = 30;
    var bHeight = this.nFloors * floorHeight; 
    push();
    noStroke(); 
    fill(this.col); 
    translate(this.x, height - 40);
    // Drawing the actual buildings
    rect(0, -bHeight-110, this.breadth, bHeight);
//    fill(18, 126, 190);  
    // Windows 
    for (var i = 0; i < this.nFloors; i++) {
        fill(18, 126, 190);  
        rect(5, -130 - (i * floorHeight), this.breadth - 10, 10);
    }
    // Building antennae 
    stroke(18,126,190); 
    strokeWeight(2); 
    line(5,-bHeight-110,5,-bHeight-120); 
    line(10,-bHeight-110,10, -bHeight-130); 
    noStroke(); 
    pop();
}

function makeBuildings(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60,
                speed: 4.0,
                col: color(121,204,221),
                nFloors: round(random(5,10)),
                move: buildingsMove,
                display: buildingsDisplay}
    return bldg;
}

//              HOUSES                   //
function updateAndDisplayHouses(){
    for (var k = 0; k < houses.length; k++){
        houses[k].move(); 
        houses[k].display(); 
    }
}

function makeHouses(birthLocationX){
    var houses = {x: birthLocationX,
                 breadth: 100,
                 speed: 4.0, 
                 col1: color(232,175,104),
                 col2: color(182,110,125),
                 nFloors: round(random(2,4)), 
                 move: housesMove, 
                 display: housesDisplay}
    return houses; 
}

function removeHousesThatHaveSlippedOutOfView() {
    var housesToKeep = []; 
    for (var k = 0; k < houses.length; k++){
        if (houses[k].x + houses[k].breadth > 0) {
            housesToKeep.push(houses[k]); 
        }
    }
    houses = housesToKeep; 
}


function addNewHousesWithSomeRandomProbability() {
    var newHousesLikelihood = .0001; 
    if (random(0,1) < newHousesLikelihood) {
        houses.push(makeHouses(width)); 
    }
}

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

function housesDisplay() {
    var floorHeight = 20; 
    var hHeight = this.nFloors * floorHeight; 
    push(); 
    noStroke(); 
    fill(this.col1); 
    translate(this.x, height-30); 
    rect(0, -hHeight - 110, this.breadth, hHeight); 
    fill(this.col2); 
    triangle(0, -hHeight - 110, this.breadth, -hHeight - 110, this.breadth/2, -hHeight - 140); 
    rect(30, -hHeight - 90, this.breadth - 60, hHeight - 20); 
    fill(252, 197, 132); 
    ellipse(50, -hHeight - 110 , 8, 8); 
    pop(); 
}

function cloud(cx, cy, cdx, cWandH, cWandH){
    push(); 
    stroke(255); 
    strokeWeight(20); 
    line(cx, cy, cx+30, cy); 
    pop(); 
    fill(255);
    ellipse(cx,cy,cWandH, cWandH); 
    ellipse(cx+10,cy-10,cWandH, cWandH); 
    ellipse(cx+20,cy,cWandH, cWandH); 
}

function drawiPhone(){
    fill(0); 
    // top rectangle
    rect(130,40,200,60); 
    // left side 
    rect(130,40,20,400); 
    // right side 
    rect(330,40,20,400); 
    // bottom rectangle 
    rect(130,380,200,60) 
    // home button 
    fill(255); 
    ellipse(236,416,31,31); 
    fill(33);
    ellipse(240,416,33,33);  
    // small rectangle at top 
    fill(58); 
    rect(215,65,50,10); 
    // glass shine 
    push(); 
    stroke(255); 
    strokeWeight(10); 
    line(160,140,200,110); 
    line(160,170,240,110); 
    line(240,360,310,305); 
    line(272,370,315,336); 
    pop(); 
} 

function sidewalk(){
    noStroke(); 
    fill(236,205,158); 
    rect(0,330,480,70); 
    fill(132,64,64); 
    rect(0,390,480,10); 
}

function road(){
    fill(180,145,126); 
    rect(0,400,480,80); 
}

// REC button on iPhone 
function record(){
    fill(255,0,0); 
    ellipse(270,124,13,13); 
    textSize(20);     
    text("REC", 280, 130); 
}

var Stars = [];
var Planets = [];
var asteroids = [];
var terrain = [];
var noiseParam = 0;
var noiseStep = 0.007;

function setup() {
    createCanvas(480, 300); 
    // create an initial collection of stars, planets, and asteroids
    for (var i = 0; i < 100; i++){
        var rx = random(width);
        var ry = random(height);
        Stars[i] = makeStar(rx, ry);
    }
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        var ry = random(height);
        Planets[i] = makePlanet(rx, ry);
    }
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        var ry = random(height);
        asteroids[i] = makePlanet(rx, ry);
    }
//set up noise function to create scrolling planet terrain
  for (i = 0; i<=width/5; i++){
    var n = noise(noiseParam);
    var value = map(n, 0,1,height/2, height)
    terrain.push(value)
    noiseParam+= noiseStep
  }

    frameRate(20);
}

function draw() {
    background(0); 

    updateStars();
    removeStars();
    addNewStars(); 

    updatePlanets();
    removePlanets();
    addNewPlanets(); 

    updateasteroids();
    removeasteroids();
    addNewasteroids(); 

mars();
insideSpaceship();
astronaut();
}

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

function removeStars(){
    var StarsToKeep = [];
    for (var i = 0; i < Stars.length; i++){
        if (Stars[i].x + Stars[i].breadth > 0) {
            StarsToKeep.push(Stars[i]);
        }
    }
    Stars = StarsToKeep; 
}


function addNewStars() {
    var newStarLikelihood = 0.2; 
    if (random(0,1) < newStarLikelihood) {
        Stars.push(makeStar(width, random(height)));
    }
}

// method to update position of Star every frame
function StarMove() {
    this.x += this.speed;
}
    
// draw Stars
function StarDisplay() {
    fill(255);  
    push();
    translate(this.x, this.y);
    ellipse(0, this.breadth, this.nsize)
    pop();
}

function makeStar(birthLocationX, birthLocationY) {
    var star = {x: birthLocationX,
                breadth: 50,
                y:birthLocationY,
                speed: -2.0,
                nsize: round(random(1,8)),
                move: StarMove,
                display: StarDisplay}
    return star;
}

//view scrolling landscape from inside spaceship
function insideSpaceship(){
	noStroke()
fill(151, 163, 194)
	rect(0, height/9*7, width, height);
	rect(0,0, width, height/9);
	rect(0,0, width/9, height)
	rect(width/9*8, 0, width, height);
noFill();
strokeWeight(10);
stroke(61, 81, 133)
beginShape();
	vertex(width/9, height/9);
	vertex(width/9*8, height/9);
	vertex(width/9*8, height/9*7);
	vertex(width/9, height/9*7);
	vertex(width/9, height/9);
endShape();
strokeWeight(2);
var lx = 80;
var ly = 10;
var pt = 15
for (i=0; i<4; i++){
	line(lx, 0, lx, height/9)
	line(lx, height/9*7, lx, height)
	lx+=110
	line(0, ly, width, ly)
	ly += 250
	}
line(0, 120, width/9, 120)
line(width/9*8, 120, width, 120)
strokeWeight(7)
	point(width/9 + 10, height/9 +10)
	point(width/9 + 10, height/9*7 - 10)
	point(width/9*8-10, height/9 +10)
	point(width/9*8-10, height/9*7 - 10)
noStroke();
}

//draw astronaut looking out spaceship window
function astronaut(){
fill(255)
	ellipse(70, 230, 100);
	rect(30, 240, 80,100)
fill(143, 150, 168)
	ellipse(85,225, 60)
stroke(143, 150, 168)
strokeWeight(4);
	line(85, 270, 85, height)
noFill()
stroke(181, 199, 247)
	ellipse(85,225, 60)
noStroke();
}

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

function removePlanets(){
    var PlanetsToKeep = [];
    for (var i = 0; i < Planets.length; i++){
        if (Planets[i].x + Planets[i].breadth > 0) {
            PlanetsToKeep.push(Planets[i]);
        }
    }
    Planets = PlanetsToKeep; 
}

function addNewPlanets() {
    var newPlanetLikelihood = 0.01; 
    if (random(0,1) < newPlanetLikelihood) {
        Planets.push(makePlanet(width, random(height)));
    }
}

function PlanetMove() {
    this.x += this.speed;
}
    
function PlanetDisplay() {
    fill(this.clr);  
    push();
    translate(this.x, this.y);
    ellipse(0, this.breadth, this.nsize)
    pop();
}

function makePlanet(birthLocationX, birthLocationY) {
    var Planet = {x: birthLocationX,
                breadth: 50,
                y:birthLocationY,
                clr: color(random(1, 255), random(1, 255), random(1, 255)),
                speed: -1.0,
                nsize: round(random(10,50)),
                move: PlanetMove,
                display: PlanetDisplay}
    return Planet;

}

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

function removeasteroids(){
    var asteroidsToKeep = [];
    for (var i = 0; i < asteroids.length; i++){
        if (asteroids[i].x + asteroids[i].breadth > 0) {
            asteroidsToKeep.push(asteroids[i]);
        }
    }
    asteroids = asteroidsToKeep;
}

//asteroids appear the least frequently - "surprise element"
function addNewasteroids() {
    var newasteroidLikelihood = 0.005; 
    if (random(0,1) < newasteroidLikelihood) {
        asteroids.push(makeasteroid(width, random(height)));
    }
}

//make the asteroid move in both x direction and y direction
function asteroidMove() { 
    this.x += this.speed;
    this.y += this.speedy;
}
    
// draw asteroids
function asteroidDisplay() {
    fill(random(255), random(255), random(255));  
    push();
    translate(this.x, this.y);
    ellipse(0, 5, this.nsize)
    beginShape();
    	vertex(5,5);
    	vertex(15,5);
    	vertex(9,7);
    	vertex(15,10);
    	vertex(9,13);
    	vertex(10,15);
    	vertex(5,15);
    endShape();
    pop();
}

function makeasteroid(birthLocationX, birthLocationY) {
    var asteroid = {x: birthLocationX,
                breadth: 50,
                y:birthLocationY,
                speed: -5.0,
                speedy: -1.0,
                nsize: 10,
                move: asteroidMove,
                display: asteroidDisplay}
    return asteroid;
}
//generate landscape of planet in foreground, placed low on screen so low frequency of apearance
function mars (){
    var n = noise(noiseParam);
    var value = map(n, 0,1,height/5*3, height)
    terrain.push(value)
    terrain.shift();
    noiseParam+= noiseStep
  for (i = 0; i<=width/5; i++){
    noStroke();
    fill(222, 106, 11)
    beginShape();
    vertex(0, height)
    vertex(width, height)
    vertex(i*5, terrain[i])  
    endShape();
  if (terrain[i] < terrain[i+1] & terrain[i] < terrain[i-1]){
  drawAlien(i)
  }
}
}

  function drawAlien(i){ 
  fill(0,255,0)

  ellipse(i*5, terrain[i]-10, 10);
  stroke(0,255,0)
  strokeWeight(2);
    line(i*5,terrain[i]-20, i*5, terrain[i]-10)
   strokeWeight(10)
    ellipse(i*5, terrain[i]-5, 5)
   noStroke()
    fill(255)
   ellipse(i*5, terrain[i]-5, 8)
   fill(0)
     ellipse(i*5, terrain[i]-5, 5)

}