Project 10

My project was inspired by Les Miserable’s famous barricade scene: Enjolras is on the wagon riding through France and passing by the buildings in the city.  I used a photo to render Enjolras and the French flag (copyright disclaimer, I don’t own either image used in the program).  This is Chris Durling as Enjolras of Melborne’s production of Les Mis.  Link to production.

Here is a shot from the 2012 Les Mis movie’s barricade scene and a screenshot of Ramin Karimloo as Enjolras in the West End’s 2004 Les Mis revival.  It’s hard to see but Karimloo is on top of a wagon similar to the one I created.

sketch

//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-10

var buildings = [];
var img;
var inloc = "http://i.imgur.com/yxe5I2n.png";
var ig;
var loc = "http://i.imgur.com/uOmk2ms.png";
var x = 200;
var y = 200;
var rotS=0;
var terrainSpeed = 0.00008;
var terrainDetail = 0.005;


function preload() {
   img = loadImage(inloc);
   ig = loadImage(loc);
  }

function setup() {
  
    createCanvas(600, 400);
    frameRate(10);

    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
}


function draw() { 
  background(35,58,70);
    rotS=rotS-8;
    fill(1,82,28); 
    stroke(1,82,28)
    beginShape(); 
    for (var w = 0; w < width; w++) {
        var t = (w * terrainDetail) + (millis() * terrainSpeed);
        var a = map(noise(t), 0,1, 0.5, height);
        vertex(w, a);
        vertex(width,height); 
        vertex(0,height);    
    }
    endShape();

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

        fill(100);
        noStroke();
    rect(0,height-80,width,100);
    push();
    translate(250,50);
    scale(-1,1);
 image(ig, 0,0,img.width/8,img.height/8);
 pop();
 image(img,250,80, img.width/10, img.height/10);  //Enjolras
 wagon();

}

function wagon(){
   fill(59,35,31);   //makes main of wagon
 strokeWeight(0);
 rect(x,y,250,100);
 ellipseMode(CENTER);
 stroke(42,25,22);    //outter rim of L wheel
 strokeWeight(4);
 noFill();
 ellipse(x,y + 100,100,100);
 fill(59,35,31);
 ellipse(x,y + 100,25,25);   //center of L wheel

 push();
    translate(x,y+100);
    rotate(rotS);
    stroke(42,25,22);
    strokeWeight(4);
 line(0,0,0,-50);  //spokes of the L wheel
 line(0,0,0,50);   
 line(0,0,50,0);
 line(0,0,-50,0);
 pop();

 stroke(42,25,22);    //outter rim of R wheel
 strokeWeight(4);
 noFill();
 ellipse(x+250,y + 100,100,100);
 fill(59,35,31);
 ellipse(x+250,y + 100,25,25);   //center of R wheel

 push();
    translate(x+250,y+100);
    rotate(rotS);
    stroke(42,25,22);
    strokeWeight(4);
 line(0,0,0,-50);  //spokes of the R wheel
 line(0,0,0,50);   
 line(0,0,50,0);
 line(0,0,-50,0);
  pop();
 strokeWeight(15);
 stroke(59,35,31);
 line(x,y + 25, x-100, y +25);
 }

 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.007; 
    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() {
    var floorHeight = 20;
    var bHeight = 300; 
    fill(188,185,184); 
    strokeWeight(0);
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, (bHeight+ this.put));
    fill(139,165,163);
    rect(this.pos, -bHeight+this.place, 30, 50);
    fill(140,149,115);
    rect(this.pos,-bHeight+this.put,this.wide,this.tall);
    stroke(2); 
    fill(137,115,132);
    rect(this.pos, -bHeight+this.set, this.wide,this.tall);
    pop();
}


function makeBuilding(LocationX) {
    var bldg = {x: LocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                wide: random(10,30),
                tall: random(10,50),
                pos: random(0,13),
                place: random(10,50),
                put: random(75, 150),
                set: random(170, 200),
                display: buildingDisplay}

    return bldg;
}