Project 11

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.

sketch

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); 
}