11 – Landscape

// Sarah Luongo
// Sluongo
// Section A
// Project

// This code aims to articulate the perspective of driving on the road, showing
//different scenery as the car moves forward.

var lines = [];
var cds = [];
var gps;

function preload() {
    gps = loadImage('https://i.imgur.com/tOwIpKP.png');
}

function setup() {
    createCanvas(420, 480);
    background(17, 124, 19);
    gps.resize(100, 100);
    // Creates 6 initial roadline objects
    for (var i = 0; i < 6; i++) {
        lines[i] = makeRoadlines(220,i*(7+(i*7)), i+4, (i+1)*10, -0.1, 0.4, i);
    }
    // Creates 2 initial cloud objects
    for (var i = 0; i < 2; i++) {
        cds[i] = makeCloud(100+(i*200), 40, 50, 40, .3);
    }
}

function draw() {
    road();
    roadlines();
    sky();
    updateRoads();
    driverseat();
}

function driverseat() {
    //Dashboard
    noStroke();
    fill(50);
    rect(0, 360, width, 120);

    //Fuel Meter and Speedometer
    fill('white');
    circle(110, 430, 50);	
    circle(190, 430, 50);
    fill('black');
    circle(110, 430, 40);
    circle(190, 430, 40);

    // Fuel meter lines
    push();
    translate(110, 430)
    rotate(radians(-45));
    for (var i = 0; i < 5; i++) {
	stroke('white');
        strokeWeight(.8);
	line(-15, 0, -10, 0);
	rotate(radians(55));
    }
    pop();

    // Speedometer lines
    push();
    translate(190, 430)    
    rotate(radians(-45));
    for (var i = 0; i < 10; i++) {
        stroke('white');
        strokeWeight(.8);
        line(-15, 0, -10, 0);   
        rotate(radians(25));
    }
    pop();
   
    // Needle
    fill('red');
    push();
    translate(110, 430);
    triangle(-2, -6, 8, 16, 12, 14);
    translate(80, 0);
    triangle(-2, -6, 8, 16, 12, 14);
    pop();

    //Steering Wheel
    stroke('black');
    strokeWeight(20);
    noFill();
    arc(150, 490, 200, 200, PI, PI);
    noStroke();
    fill('black');
    ellipse(150, 500, 200, 100);

    // GPS
    image(gps, 300, 380);

    //Mirror
    fill('black');
    rect(300, 0, 120, 45);
    fill(17, 124, 19);
    rect(310, 0, 100, 35);
    fill('gray');
    triangle(310, 35, 350, 0, 400, 35);
    fill('lightblue');
    rect(310, 0, 100, 10); 
}

function road() {
    noStroke();
    fill('gray');
    triangle(-(width), height, width/2, 80, 1.5*width, height);
}

function sky() {
    noStroke();
    fill('lightblue')
    rect(0, 0, width, 100);
    
    // Sun
    fill('yellow');
    circle(10, 10, 70);

    // Clouds
    clouds();
    updateClouds();
}

function roadlines() {
    fill('white');
    push();
    rotate(radians(20));
    for (var i = 0; i < 6; i++) {                           
        rect(lines[i].x, lines[i].y, lines[i].sx, lines[i].sy);
    }
    pop();
}

function makeRoadlines(xPos, yPos, xSize, ySize, changeX, changeY, c) {
    var roadlines = {x: xPos, y: yPos,
	             sx: xSize, sy: ySize,
                     dx: changeX, dy: changeY,
                     change: c}
    return roadlines;
}

// Updates roadlines & adds to size of road as it moves towards bottom of canvas
function updateRoads() {
    for (var i = 0; i < 6; i++) {
        // Makes new line when each line is greater than 300
        if (lines[i].y > 300) {
            lines[i] = makeRoadlines(220,0*(7+(0*7)),
	    0+4, (0+1)*10, -0.1, 0.4, 0);
	    // How far apart each line is
	    var k = i;
            for (var j = 0 ; j < 6; j++) {
	        if (k > 5) {
		    k = 0;
		}
	        lines[k].change = j;
		k++;
	    }
        }
	// Makes lines move and change size toward bottom of canvas
	lines[i].y += lines[i].dy + lines[i].change/4;
	lines[i].sx += 0.01;
	lines[i].sy += 0.1;
    }
}

function makeCloud(xPos, yPos, w, h, changeX) {
    var clouds = {x: xPos, y: yPos,
	          dx: changeX}
    return clouds;
}

function clouds() {
    fill('white');
    for (var i = 0; i < 2 ; i++) {
        ellipse(cds[i].x, cds[i].y, 50, 40);
        ellipse(cds[i].x + 20, cds[i].y + 20, 50, 40);
        ellipse(cds[i].x + 30, cds[i].y - 10, 50, 40);
        ellipse(cds[i].x + 60, cds[i].y + 15, 50, 40);
        ellipse(cds[i].x + 70, cds[i].y, 50, 40);
    }
}

// Makes cloads reappear at the left of the screen
function updateClouds() {
    // If cloads greater than 450 makes new one reappear from left of canvas
    for (var i = 0; i < 2; i++) {
        if (cds[i].x > 450) {
	    cds[i].x = -100;
	}
        // Makes them move towards right of canvas
	cds[i].x += cds[i].dx;
    }
}