I instantly thought of Tron bikes when I read through the assignment, so that’s what I ended up doing. I modified a version of my generative hillside from Assignment 7 (I think?) and created two types of random objects, some abstract distant vertical structures that are represented by lines, and some dystopian irregular buildings. The height of the buildings and the placement of the window sections are randomized, as well as the heights of the structures in the background. There is also a moving grid to create more sense of motion in the work.
I spent a lot of the time fiddling with the different movement rates of objects and the tonal values to get the right depth and parallax effect.
var buildings = [];
var lines = [];
var bottomLines =[];
var topLines =[];
let hillHeight = [];
let noiseParam = 0;
let noiseStep = 0.05;
function setup() {
createCanvas(480, 240);
// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
//populates the grid lines
for (var i=0; i<49;i++){
topLines[i]=10*i;
bottomLines[i]=-1200+(60*i);
}
frameRate(10);
//hill values
for (let i=0; i<=width;i+=5){
var n= noise(noiseParam);
var value = map(n,0,1,height/8,height/2,true);
hillHeight.push(value);
noiseParam += noiseStep;
}
}
function draw() {
background(0);
drawHill();
drawGrid();
drawBike();
updateAndDisplayLines();
removeLinesThatHaveSlippedOutOfView();
addNewLineWithSomeRandomProbability();
updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();
addNewBuildingsWithSomeRandomProbability();
displayHorizon();
}
//updates and draws the grid
function drawGrid(){
strokeWeight(1);
stroke(255);
fill(18,49,62);
rect(0,height-100,width,height/2);
//vertical lines
for (var i=0; i<49;i++){
line(topLines[i],height-100,bottomLines[i],height);
topLines[i]-=5;
bottomLines[i]-=30;
if(topLines[i]==0){
topLines[i]=480;
}
if(bottomLines[i]==-1200){
bottomLines[i]=1680;
}
}
//horizontal lines
for(var i=0; i<10; i++){
line(0,height-100+pow(2,i),width,height-100+pow(2,i));
}
}
//draws background hill
function drawHill(){
strokeWeight(0.25);
hillHeight.shift();
var n= noise(noiseParam);
var value = map(n,0,1,0,height,true);
hillHeight.push(value);
noiseParam+=noiseStep;
fill(8,26,34);
//start of the hill shape, with a buffer point off screen
beginShape();
curveVertex(0,height);
curveVertex(0,height);
curveVertex(-5,hillHeight[0]);
//loop for drawing all vertices
for(let j=0; j<(width/5)+1; j++){
if(j!=0&hillHeight[j-1]>hillHeight[j]&&hillHeight[j+1]>hillHeight[j]){
rect(j*5,hillHeight[j]-20,5,hillHeight[j]-20);
}
curveVertex(j*5,hillHeight[j]);
}
//end of hill shape with buffer
curveVertex(width+5,hillHeight[width/5]);
curveVertex(width,height);
curveVertex(width,height);
endShape();
}
//draws the Tron bike
function drawBike(){
push();
translate(100,180);
noStroke();
//stripe
fill(255,190,107);
rect(-213,9,220,15);
//base back
fill(182,134,44);
beginShape();
vertex(7,5);
vertex(7,5);
vertex(31,0);
vertex(60,10);
vertex(60,22);
vertex(19,22);
vertex(19,10);
vertex(7,5);
endShape();
//wheels
fill(198,128,4);
ellipse(6,18,18,18);
ellipse(52,18,18,18);
fill(0);
ellipse(6,18,12,12);
ellipse(52,18,12,12);
pop();
}
//buildings
function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}
function removeBuildingsThatHaveSlippedOutOfView(){
// 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 buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}
function addNewBuildingsWithSomeRandomProbability() {
// With a very tiny probability, add a new building to the end.
var newBuildingLikelihood = 0.12;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}
// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}
// draw the building and some windows
function buildingDisplay() {
strokeWeight(0.5);
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(14,43,55);
stroke(255);
push();
translate(this.x, height - 100);
rect(0, -bHeight, this.breadth, bHeight);
fill(0);
stroke(255);
for (var i = 0; i < this.nFloors-1; i++) {
if(this.side==2){
rect(this.breadth/2,-15 - (i * floorHeight),this.breadth-10, 10);
}
else{
rect((this.breadth/2)-this.breadth,-15 - (i * floorHeight),this.breadth-10, 10);
}
}
pop();
}
function makeBuilding(birthLocationX) {
var bldg = {x: birthLocationX,
side: (int(random(0,3))),
breadth: 40,
speed: -15.0,
nFloors: round(random(2,8)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}
//lines
function updateAndDisplayLines(){
// Update the line's positions, and display them.
for (var i = 0; i < lines.length; i++){
lines[i].move();
lines[i].display();
}
}
function removeLinesThatHaveSlippedOutOfView(){
var linesToKeep = [];
for (var i = 0; i < lines.length; i++){
if (lines[i].x + lines[i].breadth > 0) {
linesToKeep.push(lines[i]);
}
}
lines = linesToKeep; // remember the surviving lines
}
function addNewLineWithSomeRandomProbability() {
var newLineLikelihood = 1;
if (random(0,1) < newLineLikelihood) {
lines.push(makeLine(width));
}
}
// method to update position of line every frame
function lineMove() {
this.x += this.speed;
}
//draw the line spikes
function lineDisplay() {
strokeWeight(5);
var floorHeight = 8;
var bHeight = this.nFloors * floorHeight;
stroke(80);
push();
translate(this.x, height - 100);
line(0, -bHeight, 0, 0);
pop();
}
function makeLine(birthLocationX) {
var ln = {x: birthLocationX,
breadth: 40,
speed: -10.0,
nFloors: round(random(1,6)),
move: lineMove,
display: lineDisplay}
return ln;
}
function displayHorizon(){
stroke(255);
line (0,height-100, width, height-100);
}