I was motivated by my experiencing driving. Additionally, a lot of the projects from previous years and such seem to have objects move left or right off the screen, or top to bottom, but I haven’t seen any with “one-point” perspective, so I thought I would give it a try. It was a little challenging and I would’ve like to have made the roadlines move in the mirror as well, but I just couldn’t figure it out.
sketch.sarlDownload
// 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;
}
}