Category: Project-10-Landscape

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

Initially, I wanted to have a Bhutan inspired mountain-scape with Buddhist temples at the peaks. I couldn’t figure out how to establish temples at the peaks without recycling the Planting the Flag code, but I didn’t know how to tweak that function that renders the terrain in the first place so I gave up. Then I changed my idea anyways.

These are some strong and determined birds migrating to warmer climate.  They have a long way to go.

I don’t really like how this appears in-site so I’m attaching an openprocessing.org link that will take you to a full screen version of this:

https://www.openprocessing.org/sketch/388221

I highly recommend looking at the link instead!

 

sketch

/* Rhea Nayyar
rnayyar@andrew.cmu.edu
Section C
Project 10-C; Generative Landscape
*/

var terrainSpeed = 0.0003;
var terrainDetail = 0.0025;

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(10);
}
 
function draw() {
    background(200, 240, 255); //sky
   
 noStroke();
    fill(40, 75, 55, 100);  //rolling mountain tops
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (7*x * terrainDetail) + (millis() * terrainSpeed/2);
        var y = map(noise(t/2), 0,1, 0, height);
        curveVertex(x, y); 
    }
 curveVertex(width, height);
 curveVertex(0,width);
 endShape(CLOSE);



 noStroke(); //cloud front 1 (hits the floor of the canvas)
    fill(255, 245, 250, 90); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (4.5*x * terrainDetail) + (millis() * terrainSpeed/2);
        var y = map(noise(t/2), 0,1, 0, height);
        curveVertex(x, y); 
    }
 curveVertex(width, height);
 curveVertex(0,width);
 endShape(CLOSE);


    noStroke(); //cloud front 2 (hits the floor of the canvas)
    fill(250, 240, 250, 180); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (2.5*x * terrainDetail) + (millis() * terrainSpeed/2);
        var y = map(noise(t/2), 0,1, 0, height);
        curveVertex(x, y); 
    }
 curveVertex(width, height);
 curveVertex(0,width);
 endShape(CLOSE);


 fill(252, 250, 255, 140) //wispy cloud stream 1
 beginShape();
 for (var x = 0; x < width; x++) {
        var t = (x/2 * terrainDetail) + (millis() * terrainSpeed/2);
        var y = map(noise(t/2), 0,1, 0, height);
        curveVertex(x, y); 
 }
        endShape(CLOSE);

fill(232, 250, 255, 140) //wispy cloud stream 2
 beginShape();
 for (var x = 0; x < width; x+=3) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed/2);
        var y = map(noise(t/2), 0,1, 0, height);
        curveVertex(x, y); 
 }
        endShape(CLOSE);


     for (var x = 0; x < width; x+=12) { //bird line
        var t = (1.5*x * terrainDetail) + (millis() * terrainSpeed/8);
        var y = map(noise(t/2), 0,1, 0, height);
        if(x%7===0){
            
        fill('Red');
        birb(x,y);
     }
    
}
    
   
}

function birb(x, y){
    fill(70);
    ellipse(x, y, 30, 10); //body
    rect(x+5, y-2, 12, 5); //tiny neck
     fill(220, 200, 0);
    triangle(x+21, y-2, x+28, y+2, x+21, y+3); //beak
    fill(70);
    ellipse(x+16, y, 11, 8); //head
    fill('MediumSlateBlue'); //eye
    ellipse(x+17, y-1, 2, 2);
    fill(85); //wing
    quad(x-3, y-3, x+10, y, x+8, y+7, x-10, y+10, 20);


}

sketch

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//project-10

//plant images
var plantLinks = [
    "http://i.imgur.com/soZ0M4T.png",
    "http://i.imgur.com/5jepe87.png",
    "http://i.imgur.com/gykEUiU.png",
    "http://i.imgur.com/66xaRxm.png",
    "http://i.imgur.com/oIwcCrB.png",
    "http://i.imgur.com/oIwcCrB.png",
    "http://i.imgur.com/DtJV3gc.png",
    "http://i.imgur.com/990trNC.png",
    "http://i.imgur.com/FIWKdfq.png",
    "http://i.imgur.com/S1al7lF.png",
    "http://i.imgur.com/g3buUN0.png",
    "http://i.imgur.com/fL8CKao.png.jpg"
  ]
//empty arrays
var plantImage = [];
var grass = [];

//pre-load images
function preload() {
    for(var i = 0; i < plantLinks.length; i ++){
        plantImage.push(loadImage(plantLinks[i]));
    }
}
function setup() {
    createCanvas(640, 240); 
    
    //initial images
    for (var i = 0; i < 40; i++){
        var rx = random(width);
        grass[i] = make(rx);
    }
    frameRate(10);
}


function draw() {
    background(90,194,194);
    update();
    removeImages();
    add(); 
}


function update(){
    // display image 
    for (var i = 0; i < grass.length; i++){
        grass[i].move();
        grass[i].display();
    }
}


function removeImages(){
 //remove images when they are past canvas
    var buildingsToKeep = [];
    for (var i = 0; i < grass.length; i++){
        if (grass[i].x + grass[i].breadth > 0) {
            buildingsToKeep.push(grass[i]);
        }
    }
}


function add() {
    //add imagages
    var newGrass = 1; 
    if (random(0,5) < newGrass) {
        grass.push(make(width));
  }
}

function imageMove() {
  //images move to the side
    this.x += this.speed;
}
    
function imagesDisplay() {
    noStroke();
    strokeWeight(6)
    fill(50,205,50);

    //heights
    var gHeight = this.n * 5; 
    var cHeight = this.n * 20; 
    var pHeigth = this.n * 30

    push();
    translate(this.x, height+40);
    ellipseMode(CORNER);
    //grass
    ellipse(0, -gHeight, this.breadth, this.breadth);
    var p = floor(random(0,plantLinks.length));
    //plants
    image(plantImage[p],-gHeight,-gHeight,this.breadth,this.breadth);
    fill(255,200,200,100);
    //pink bubbles
    ellipse(-cHeight,-cHeight,this.breadth,this.breadth);
    pop();
   
}


function make(birthLocationX) {
    //draw image at beging of canvas
    var bldg = {x: birthLocationX,
                breadth: 80,
                speed: -5,
                n: random(0,20),
                move: imageMove,
                display: imagesDisplay}
    return bldg;
}

I wanted to go for a surreal and whimsical valley type landscape. I wanted to use photo images from the beginning but the rapid shuffling came by messing around with the code.

I tried to make this project look like heartbeat pattern of a dying person. The person will die after a while.sketch

var pulses = [];
var initialX = 0;

function setup() {
    createCanvas(640, 400); 

    for (var i = 0; i < 10; i ++){
     pulses[i] = makePulses(width);
    }
    frameRate(10);
}


function draw() {
    background(0); 
    updateAndDisplayPulses();
    removePulsesThatHaveSlippedOutOfView();
    addNewPulsesWithSomeRandomProbability(); 
    
    
}


function updateAndDisplayPulses(){
    // Update the pulse's positions, and display them.
    for (var i = 0; i < pulses.length; i++){
        pulses[i].move();
        pulses[i].display();
    }
}


function removePulsesThatHaveSlippedOutOfView(){
    var pulsesToKeep = [];
    for (var i = 0; i < pulses.length; i++){
        if (pulses[i].x + pulses[i].breadth > 0) {
            pulsesToKeep.push(pulses[i]);
        }
    }
    pulses = pulsesToKeep; 
}


function addNewPulsesWithSomeRandomProbability() {
    // With a very tiny probability, add a new shape of pulse to the end.
    var newPulsesLikelihood = 0.007; 
    if (random(0,1) < newPulsesLikelihood) {
        pulses.push(makePulses(width));
    }
}


// method to update position of pulse every frame
function PulseMove() {
    this.x += this.speed;
}
    

// show the pulses 
function PulseDisplay() {
    var pulseWidth = 50;
    //when the frame count exceeds 250, the person is dead...
    if (frameCount < 200) {
        var quietWidth = random(width); 
    }else{
        var quietWidth = width;
    }
    stroke(244, 66, 66);
    strokeWeight(3);
    push();
    translate(this.x, 0);
    line(0, height/2, quietWidth, height/2);
    line(quietWidth, height/2, quietWidth+pulseWidth/2, height/2-this.pheight);
    line(quietWidth+pulseWidth/2, height/2-this.pheight, quietWidth+pulseWidth, height/2);
    stroke(0);
    line(quietWidth, height/2, quietWidth+pulseWidth, height/2);
    pop();
}


function makePulses(birthLocationX) {
    var pulse = {x: birthLocationX,
                breadth: 50,
                speed: -4.0,
                pheight: random(-150, 150),
                move: PulseMove,
                display: PulseDisplay,
                }
    return pulse;
}

function deathPulse(){
    stroke(244, 66, 66);
    strokeWeight(3);
    line(0, height/2, width, height/2);
}

sketch
 

// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project 10
var hills = [];
var clouds = [];
var blocks = [];
var pipes = [];


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of hills
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        hills[i] = makeHill(rx);
    }


    for (var i = 0; i < 5; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }

    for (var i = 0; i < 5; i++){
        var rx = random(width);
        blocks[i] = makeBlock(rx);
     }   

    for (var i = 0; i < 1; i++){
        var rx = random(width);
        pipes[i] = makePipe(rx);
     } 

    frameRate(20);
}


function draw() {
    background(112,166,255); 
    
    displayHorizon();

    updateAndDisplayHills();
    removeHillsThatHaveSlippedOutOfView();
    addNewHillsWithSomeRandomProbability(); 

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();

    updateAndDisplayBlocks();
    removeBlocksThatHaveSlippedOutOfView();
    addNewBlocksWithSomeRandomProbability();

    updateAndDisplayPipes();
    removePipesThatHaveSlippedOutOfView();
    addNewPipesWithSomeRandomProbability();

    backgroundDesign();
}


function updateAndDisplayHills(){
    // Update the building's positions, and display them.
    for (var i = 0; i < hills.length; i++){
        hills[i].move();
        hills[i].display();
    }
}

function updateAndDisplayClouds(){
 
    for (var i = 0; i <clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}

function updateAndDisplayBlocks(){
 
    for (var i = 0; i < blocks.length; i++){
        blocks[i].move();
        blocks[i].display();
    }
}
function updateAndDisplayPipes(){
 
    for (var i = 0; i < pipes.length; i++){
        pipes[i].move();
        pipes[i].display();
    }
}

function removeHillsThatHaveSlippedOutOfView(){
    var hillsToKeep = [];
    for (var i = 0; i < hills.length; i++){
        if (hills[i].x + hills[i].breadth > 0) {
            hillsToKeep.push(hills[i]);
        }
    }
    hills = hillsToKeep; // remember the surviving buildings
}

function removeCloudsThatHaveSlippedOutOfView(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if(clouds[i].x + clouds[i].breadth > 0){
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

function removeBlocksThatHaveSlippedOutOfView(){
    var blocksToKeep = [];
    for (var i = 0; i < blocks.length; i++){
        if(blocks[i].x + blocks[i].breadth > 0){
            blocksToKeep.push(blocks[i]);
        }
    }
    blocks = blocksToKeep;
}

function removePipesThatHaveSlippedOutOfView(){
    var pipesToKeep = [];
    for (var i = 0; i < pipes.length; i++){
        if(pipes[i].x + pipes[i].breadth > 0){
            pipesToKeep.push(pipes[i]);
        }
    }
    pipes = pipesToKeep;
}

function addNewHillsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newHillLikelihood = 0.007; 
    if (random(0,1) < newHillLikelihood) {
        hills.push(makeHill(width));
    }
}

function addNewCloudsWithSomeRandomProbability(){
    var newCloudLikelihood = 0.007;
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}


function addNewBlocksWithSomeRandomProbability(){
    var newBlockLikelihood = 0.007;
    if (random(0,1) < newBlockLikelihood) {
        blocks.push(makeBlock(width));
    }
}

function addNewPipesWithSomeRandomProbability(){
    var newPipeLikelihood = 0.002;
    if (random(0,1) < newPipeLikelihood) {
        pipes.push(makePipe(width));
    }
}


// method to update position of building every frame
function hillMove() {
    this.x += this.speed;
}

function cloudMove(){
    this.x += this.speed;
}

function blockMove(){
    this.x += this.speed;
}

function pipeMove(){
    this.x += this.speed;
}


// draw the building and some windows
function hillDisplay() {
    var floorHeight = 30;
    var hHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill(255,213,48);
    stroke(255,175,48);
    ellipse(0, -hHeight, this.breadth+50, hHeight+100);
    
    pop();
}

function cloudDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(10,bHeight,this.breadth+100,bHeight/2);
    pop();

    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(30,-bHeight-200,this.breadth+100,bHeight/2);
    pop();



}

function blockDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(140,78,47);
    rect(30,-bHeight-100,30,30);
    pop();



}

function pipeDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(77,175,28);
    rect(30,-bHeight-50,50,70);
    rect(20,-bHeight-50,70,10);
    pop();



}


function backgroundDesign(){
    fill(120,224,60);
    noStroke();
    rect(0,350,600,50);


    fill(255,212,71);
    rect(0,370,600,50);

   }

function makeHill(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: hillMove,
                display: hillDisplay}
    return bldg;
}

function makeCloud(birthLocationX){

    var cloudV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(1,10)),
        move: cloudMove,
        display: cloudDisplay}
    return cloudV;
}

function makeBlock(birthLocationX){

    var blockV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(5,5)),
        move: blockMove,
        display: blockDisplay}
    return blockV;
}

function makePipe(birthLocationX) {
    var pipeV = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: pipeMove,
                display: pipeDisplay}
    return pipeV;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

My project is just a remake of the first world in Super Mario. There are pipes, the basic hills in the background, clouds and item blocks.

mluria-10

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-10-Project
*/

var x = []; //circle X
var y = []; //circle Y
var circSize = []; //size
var circHue = []; //hue
var myParticles = []; //particles
var nParticles = 700;

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

    //build an initial array of particles
    for (var i = 0; i < nParticles; i++) {
        var rx = random(width);
        var ry = random(height);
        myParticles[i] = makeParticle(rx, ry, 0, 0);
    }

    //set color to HSB
    colorMode(HSB, 100);
    frameRate(20);

}


function draw() {

    background(0);
    fill(255);
    noStroke();

    
    push();

    //draw particles according to gravity and repulsion forces
    //the first part of the code implements the particle code we learned in class

    var gravityForcex = 0;
    var gravityForcey = 0.05;
    var mutualRepulsionAmount = 2.5;
 
 
    for (var i = 0; i < myParticles.length; i++) {
        var ithParticle = myParticles[i];
        var px = ithParticle.px;
        var py = ithParticle.py;
 
        if (mouseIsPressed) {
            ithParticle.addForce(gravityForcex, gravityForcey);
        }
 
        for (var j = 0; j < i; j++) {
            var jthParticle = myParticles[j];
            var qx = jthParticle.px;
            var qy = jthParticle.py;
 
            var dx = px - qx;
            var dy = py - qy;
            var dh = sqrt(dx * dx + dy * dy);

            if (dh > 1.0) {
                var componentInX = dx / dh;
                var componentInY = dy / dh;
                var proportionToDistanceSquared = 1.0 / (dh * dh);
                var repulsionForcex = mutualRepulsionAmount *
                    componentInX * proportionToDistanceSquared;
                var repulsionForcey = mutualRepulsionAmount *
                    componentInY * proportionToDistanceSquared;
                // add in forces
                ithParticle.addForce( repulsionForcex,  repulsionForcey);
                jthParticle.addForce(-repulsionForcex, -repulsionForcey);
            }
        }
    }
 
    for (var i = 0; i < myParticles.length; i++) {
        myParticles[i].bPeriodicBoundaries = false;
        myParticles[i].bElasticBoundaries = true;
        myParticles[i].update(); // update all locations
    }
 
    for (var i = 0; i < myParticles.length; i++) {
        myParticles[i].draw(); // draw all particles
    }

    //----=====end of particle code=====-----//

    pop();

    //set the likelihood of a circle showing up
    var newCircleLikelihood = 0.3;
    if (random (0,1) < newCircleLikelihood){
        //if new circle is created, push a random location, size and hue
        x.push(random(0, width));
        y.push(random(0, height)); 
        circSize.push(random(0,2));
        circHue.push(random(0,100));
    }
    
    //for the circle array length
    for (var i = 0; i < x.length; i++) {
        var ex = x[i]; //set new x
        var ey = y[i];  //set new y
        var eCirc = circSize[i]; //set new circle size
        var eHue = circHue[i]; //set new hue
        fill(eHue, 100, 100); 

        //every 5 circles draw a moving triangle instead
        if (i % 5 == 0){
            triangle(ex, ey, ex+random(-20,20), ey, ex+(random(-20,20)), ey-random(-20,20));

        //if not triangle, draw circle
        } else {
            ellipse(ex,ey, eCirc, eCirc);  //draw the new circle
        }

        circSize[i] += random(0,3); //make the circle grow in side

        //code to move the circle slightly out of the center
        if (x[i] > width/2) { //if on the left side - move left
            x[i]+=3 ;
        } else { //if on the right side - move right
            x[i]-=3 ;
        }

        if (y[i] > height/2) { //if the circle is on the bottom half
            y[i]++ ; //move down
        } else { //if on the top half
            y[i]-- ; //move up
        }

        if (circSize[i] > height) { //if the circle is too big

            x[i] += 1500; //move it to the side
            y[i] += 1500;
        }
    }


}


// Implementation of partical code with variation
//Mutual repulsion, with optional gravity

// Update the position based on force and velocity
function particleUpdate() {
    if (this.bFixed == false) {
        this.vx *= this.damping;
        this.vy *= this.damping;
  
        this.limitVelocities();
        this.handleBoundaries();
        this.px += this.vx;
        this.py += this.vy;
    }
}


// Prevent particle velocity from exceeding maxSpeed
function particleLimitVelocities() {
    if (this.bLimitVelocities) {
        var speed = sqrt(this.vx * this.vx + this.vy * this.vy);
        var maxSpeed = 10;
        if (speed > maxSpeed) {
            this.vx *= maxSpeed / speed;
            this.vy *= maxSpeed / speed;
        }
    }
}


// do boundary processing if enabled
function particleHandleBoundaries() {
    if (this.bPeriodicBoundaries) {
        if (this.px > width) this.px -= width;
        if (this.px < 0) this.px += width;
        if (this.py > height) this.py -= height;
        if (this.py < 0) this.py += height;
    } else if (this.bHardBoundaries) {
        if (this.px >= width) {
            this.vx = -abs(this.vx);
        }
        if (this.px <= 0) {
            this.vx = abs(this.vx);
        }
        if (this.py >= height) {
            this.vy = -abs(this.vy);
        }
        if (this.py <= 0) {
            this.vy = abs(this.vy);
        }
    }
}


// draw the particle as a white circle
function particleDraw() {
    fill(255);
    noStroke();
    ellipse(this.px, this.py, 2, 2);
}


// add a force to the particle using F = mA
function particleAddForce(fx, fy) {
    var ax = fx / this.mass;
    var ay = fy / this.mass;
    this.vx += ax;
    this.vy += ay;
}


// make a new particle
function makeParticle(x, y, dx, dy) {
    var p = {px: x, py: y, vx: dx, vy: dy,
             mass: 1.0, damping: 0.9,
             bFixed: false,
             bLimitVelocities: false,
             bPeriodicBoundaries: false,
             bHardBoundaries: false,
             addForce: particleAddForce,
             update: particleUpdate,
             limitVelocities: particleLimitVelocities,
             handleBoundaries: particleHandleBoundaries,
             draw: particleDraw
            }
    return p;
}
  



 

For the landscape project this week, I wanted to create a project that would give the sense of outer space, with shapes flying your way. In order to do this, I used different shapes in different sizes and colors, and tried to code their movement to seem to move in your direction. In order to make it more interesting, I also added shape shifting triangles.

For the background of the project, I used the particle code we learned in class, because I liked the way it shifts slowly, similar to how we would see movement of something that is very far away.

Attached is a sketch of my initial idea on paper:

siminl-project10

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 10

var clowns = [];
//store the clown fish
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
//used to control sea rocks

function setup() {
    createCanvas(600, 400); 
    // create an initial collection of fish
    for (var i = 0; i < 4; i++){
        var rx = random(width);
        var ry = random(0.8 * height);
        clowns[i] = makeClownFish(rx,ry);
    }
    frameRate(10);
}

function draw() {
    background(160);
    seaViewer(150,200);
    seaViewer(450,200);
    seaRocks(); 
    updateAndDisplayClownFish();
    removeClownFishThatHaveSlippedOutOfView();
    addNewClownFishWithSomeRandomProbability(); 
    fill(41,115,179,0.2);
    rect(0,0,width,height);

}

function updateAndDisplayClownFish(){
    // Update the fish's positions, and display them.
    for (var i = 0; i < clowns.length; i++){
        clowns[i].move();
        clowns[i].display();
    }
}

function removeClownFishThatHaveSlippedOutOfView(){
    var clownsToKeep = [];
    for (var i = 0; i < clowns.length; i++){
        if (clowns[i].fishX + clowns[i].fishWidth > 0) {
            clownsToKeep.push(clowns[i]);
        }
    }
    clowns = clownsToKeep; // remember the surviving buildings
}

function addNewClownFishWithSomeRandomProbability() {
    // With a very tiny probability, add a new fish to the end.
    var newClownLikelihood = 0.009; 
    if (random(0,1) < newClownLikelihood) {
        clowns.push(makeClownFish(width,random(0,0.8 * height)));
    }
}

// method to update position of fish every frame
function clownFishMove() {
    this.fishX += this.speed;
    this.fishY += noise(-this.speed,this.speed);
    //randomize speed
}

//draw the clown fish
function clownFishDisplay(){
    var fishHeight = this.fishWidth / 2;
    noStroke();
    fill(255,this.greeness,0);
    beginShape();
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY - fishHeight * 2 / 3);
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY - (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth, this.fishY);//tail of fish
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY + (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY + fishHeight / 3);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY + fishHeight * 1 / 6);
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX, this.fishY);//head of fish
    endShape();
    //draw body
    
    noStroke();
    fill(255);
    beginShape();
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY - fishHeight * 2 / 3);
        curveVertex(this.fishX + this.fishWidth / 3 + this.headStripe, this.fishY - fishHeight * 1 / 3);
        curveVertex(this.fishX + this.fishWidth / 3 - 0.3 * this.headStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY + fishHeight / 3);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY + fishHeight * 1 / 6);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY - fishHeight * 1 / 3);
    endShape();
    //draw head stripe

    noStroke();
    fill(255);
    beginShape();
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY - (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 7 / 8 + this.tailStripe, this.fishY - (fishHeight / 6));
        curveVertex(this.fishX + this.fishWidth * 7 / 8 + 0.3 * this.tailStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth * 7 / 8 - this.tailStripe, this.fishY + (fishHeight / 6));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY + (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth * 2 / 3 + this.tailStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
    endShape();
    //draw tail stripe 
    
    fill(0);
    ellipse(this.fishX + 0.1 * this.fishWidth, this.fishY - fishHeight * 0.05,fishHeight / 10,fishHeight / 10);
    //draw eye
}

function seaViewer(windowX,windowY){
    //draw submarine outside window 
    strokeWeight(3);
    stroke(90);
    rectMode(CENTER);
    noFill();
    rect(windowX,windowY,240,340,80,80,80,80);
    fill("LightBlue");
    noStroke();
    rect(windowX,windowY,200,300,70,70,70,70);
    nail(windowX,windowY - 160, 12);
    nail(windowX,windowY + 160, 12);
    nail(windowX - 110,windowY, 12);
    nail(windowX + 110,windowY, 12);
    nail(windowX - 100,windowY - 120, 12);
    nail(windowX + 100,windowY + 120, 12);
    nail(windowX - 100,windowY + 120, 12);
    nail(windowX + 100,windowY - 120, 12);

}

//draw nails on window
function nail(nailX, nailY, nailSize){
    noStroke();
    fill(100);
    ellipse(nailX,nailY,nailSize,nailSize);
    var screwlength = nailSize / (4 * sqrt(2));
    strokeWeight(1);
    stroke(0);
    line(nailX - screwlength,nailY - screwlength,nailX + screwlength,nailY + screwlength);
    line(nailX - screwlength,nailY + screwlength,nailX + screwlength,nailY - screwlength);
}

//draw sea rocks
function seaRocks(){
    fill(11,20,61);
    noStroke();
    push();
        translate(0,80);
        //move down 80
        beginShape(); 
        vertex(0, height); 
        for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail) + (millis() * terrainSpeed) * 3 / 4;
            var y = map(noise(t), 0,1, 0, height );
            vertex(x, y); 
        }
        vertex(width, height); 
        endShape();
    pop();
}

//create an object to store clownfish
function makeClownFish(birthLocationX,birthLocationY) {
    var clownFish = {                
                fishX: birthLocationX,
                //x location of fish
                fishY: birthLocationY,  
                //y location of fish              
                fishWidth: random(30,120),
                //width of fish
                greeness: random(30,140), 
                //G value of the fish body color
                move: clownFishMove,
                //move the fish
                speed: -random(0,4),
                //randomize horizontal speed
                display: clownFishDisplay,
                //draw fish
                headStripe: random(-8,8),
                //randomize the stripe on head
                tailStripe: random(-5,5)
                //randomize the stripe on tail
}
    return clownFish;
}

In this project I wanted to depict a view of marine life in front of a submarine window. The camera is following the submarine from outside. At first I only changed the color and size of the fish, then I realized I could make variations in the patterns of the fish as well.

I created a scene of a spaceship travelling in space. The stars and the planets are randomized moving away from the spaceship. The planets are getting smaller(as they should be) as they move toward the edge of the screen. In the control room there is a flashing red button and a screen “monitoring” the condition of the spaceship.

sketch

//create objects
var planets = [];
var stars = [];
var redStar = [];

function setup() {
	createCanvas(600, 400);
    frameRate(8);
	// initial planet and stars
		var initialX = random(width);
		planets[0] = makePlanets(initialX);
		redStar[0] = makeRedPlanets(initialX);
		redStar[1] = makeRedPlanets(initialX);
		for (var i = 0; i < 100; i++) {
			stars[i] = makeStars(initialX);
		}
}

function draw() {
	background(0);
	PlanetsinMotion();
	addPlanets();
	StarsinMotion();
	addStars();
	redStarinMotion();
	addRed();
	spaceship();
 	
 	//flashing button
	if (second() & 2 > 0) {
		fill("red");
	} else fill(0);
	noStroke();
	ellipse(170, 260, 5, 5);
	//make screen and moving red line
	fill(226, 223, 222);
	stroke(65, 73, 86);
	strokeWeight(2);
	rect(420, 170, 60, 50);//screen
	beginShape(); 
	noFill();
	stroke("red");
	strokeWeight(1);
    for (var x = 0; x < width-540; x++) { //moving red line
        var t = (x * 0.009) + (millis() * 0.0003);
        var y = map(noise(t), 0, 0.13, 40, 45);
        vertex(x+420, y+140); 
    }
    endShape();

   
}

// all about the planets
function PlanetsinMotion() {
	for (var i = 0; i < planets.length; i++) {
		planets[i].move();
		planets[i].display();
	}
}
function addPlanets() {
	var maybeAdd = 0.004;
	if (random(0,1) < maybeAdd) {
		planets.push(makePlanets(width));
	}
}
function moveplanets() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function displayplanets() {
    fill(187, 210, 247);
	noStroke();
	ellipse(this.x, this.y, this.randomsize, this.randomsize);//blue planets
	this.randomsize += -0.01;
}
function makePlanets(planetX) {
	var plt = { x: planetX,
		        y: height/2,
		        speedX: -1.0,
		        speedY: -0.5,
		        randomsize: random (10, 100),
		        move: moveplanets,
		        display: displayplanets,
		        }
    return plt;
}

//all about the red stars
function redStarinMotion() {
	for (var i = 0; i < redStar.length; i++) {
		redStar[i].move();
		redStar[i].display();
	}
}
function moveRed() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function displayRed() {
	fill(122, 43, 19);
	noStroke();
	ellipse(this.x, this.y, this.randomsize, this.randomsize);
	this.randomsize += 0.005;
}
function addRed() {
	var maybeAdd = 0.003;
	if (random(0,1) < maybeAdd) {
		redStar.push(makeRedPlanets(width));
	}
}
function makeRedPlanets(redX) {
	var red = {x: random(200,400),
		       y: random(height-50, height-100),
		       speedX: -0.5,
		       speedY: -0.7,
		       randomsize: random(5, 8),
		       move: moveRed,
		       display: displayRed
	           }
	return red;

}

//all about the stars
function StarsinMotion() {
	for (var i = 0; i < stars.length; i++){
		stars[i].move();
		stars[i].display();
	}
}
function displayStars() {
	stroke("yellow");
	point(this.x, this.y);
}
function addStars() {
    var maybeAdd = 0.6;
	if (random(0,1) < maybeAdd) {
		stars.push(makeStars(random(width-50, width)));
	}
}
function moveStars() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function makeStars(StarX) {
	var str = {x: random(width),
	           y: random(height),
	           speedX: -1.0,
	           speedY: -0.5,
	           move: moveStars,
	           display: displayStars,
	       	   }
	return str;
}

//creating the interior of spaceship
function spaceship() {
	noStroke();
	fill(53, 58, 66);
	rect(0, 315, width, height-315);//floor
	fill(95, 105, 122);//light color
	quad(287, 0, 357, 0, 419, 26, 397, 53);//3rd wall 1
	quad(311, 255, 173, 249, 184, 269, 311, 271);//2nd wall 1
	quad(27, 213, 0, 223, 0, 269, 30, 269);//1st wall 3
	quad(30, 269, 25, 381, 0, 361, 0, 269);//1st wall 4
	fill(81, 90, 104);// medium light
	quad(419, 26, 397, 53, 409, 126, 497, 110);//3rd wall 2
	quad(311, 255, 311, 271, 476, 276, 497, 250);//3rd wall 4
	quad(311, 330, 311, 271, 184, 269, 186, 339);//2nd wall 2
	triangle(495, 0, 357, 0, 419, 26);//1st wall 1-3
	fill(73, 81, 94);//slightly dark
	quad(409, 126, 497, 110, 497, 250, 311, 255);//3rd wall 3
	quad(476, 351, 476, 276, 311, 271, 311, 330);//3rd wall 6
	quad(600, 87, 497, 110, 419, 26, 495, 0);//4th wall 1
	triangle(495, 0, 600, 87, 600, 0);//4th wall 1-2
	fill(62, 68, 78);//dark
	quad(476, 276, 497, 250, 497, 334, 476, 349);//3rd wall 5
	fill(144, 156, 175);//lightest
	quad(187, 271, 162, 229, 27, 213, 30, 269);//1st wall 1
	fill(122, 133, 153);//still very light
	quad(30, 269, 187, 271, 186, 357, 25, 381);//1st wall 2
	fill(65, 73, 86);//darkest
	quad(497, 110, 600, 87, 600, 130, 497, 150);//4th wall 2-1
	quad(497, 150, 536, 142, 536, 345, 497, 334);//4th wall 2-2
	quad(536, 345, 536, 262, 600, 268, 600, 360); //4th wall 2-3
}

sketch

/*Emma Shi
eyshi@andrew.cmu.edu
Section B
Project 10
*/

var waveSpeed = 0.0002;
var waveDetail = 0.002;
var waves = 4;
var waveHeight = 0;
var deepColor;
var lightColor;
var clouds = [];

function setup() {
  createCanvas(500, 300);
  frameRate(20);

  for (var i=0; i<5; i++){ 
    var rx = random(width);
    var ry = random(height - 100);
    clouds[i] = new Clouds(rx, ry);
    }  
}
 
function draw() {
  
  drawBackground();
  drawSun();
  drawWaves();
  updateAndDisplayClouds();
  removeCloudsThatAreOutOfView();
  addNewCloudsWithSomeRandomProbability(); 

}

function drawBackground() {
  for (var i = 0; i < 50; i++) {
    noStroke();
    var rBackground = 167 + i;
    var gBackground = 209 + i;
    var bBackground = 241 + i
    fill(rBackground, gBackground, bBackground);
    rect(0, i, width, height);
  }//draws background/sky with some color gradient
}

function drawWaves() {
  var deepColor = color(22, 104, 180);
  var lightColor = color(15, 153, 189);

  for (j = 0; j < waves; j++) {
    noStroke(); 
    fill(lerpColor(deepColor, lightColor, j/(waves - 1)));
    beginShape(); 
    for (var x = 0; x < width; x++) {
      var t = (x * waveDetail) + (millis() * waveSpeed);
      var y = map(noise(t * j/waves, waveHeight), 0, 1, 70*j, height);
      vertex(x, y); 
    }
      waveHeight += 0.0008;
      vertex(width, height);
      vertex(0, height);
      endShape(CLOSE);
  }//draws four waves
}

function drawSun() {
  noStroke();
  fill(240, 170, 77);
  ellipse(width/2, height/2, 200, 200);
}//draws sun

function updateAndDisplayClouds() {
  for (var k = 0; k < clouds.length; k++) {
    clouds[k].move();
    clouds[k].display();
    }//updates and displays cloud positions
}

function removeCloudsThatAreOutOfView() {
  for (var l = 0; l < clouds.length; l++) {
    if (clouds[l].x < 0-clouds[l].breadth) {
        clouds.splice(l, 1); 
    }
  }
}//removes clouds that disappear from the view

function addNewCloudsWithSomeRandomProbability() {
  var newCloudLikelihood = 0.003; 
  if (random(0, 1) < newCloudLikelihood) {
    clouds.push(new Clouds (width, random(height - 200)));
  }
}//adds a new cloud to the end with a small probability

function Clouds (birthLocationX, birthLocationY){
  this.x = birthLocationX;
  this.y = birthLocationY;//birth location of clouds

  this.speed = -0.7;//speed of clouds
  
  this.move = function() {
  this.x += this.speed;
  }//clouds change position
    
  this.display = function() { 

  push();
  translate(this.x, this.y);
  fill(255); 
  stroke(255); 
  ellipse(10, 10, 40, 10);
  fill(240);
  stroke(240);
  ellipse(3, 6, 30, 7);
  pop();
  }//draws clouds
}

I originally thought about doing a landscape of the city, but amidst the stress from schoolwork and other activities, I thought doing an calming ocean landscape might be more relaxing. I started out by sketching the very basic landscape and listing out some ideas I had on what it could look like (i.e. using birds or clouds as the JavaScript object, or depicting a sunrise/sunset). I also wanted to originally use the mousePressed function to allow the user to click the mouse and change the background from sunrise to sunset, but unfortunately I couldn’t get it to cooperate.

This project was a lot of fun. I had trouble at first, but it got easier as I worked on it. I was inspired by pac man and video games in general, and so I tried to reflect retro video game pixels in the background and put pac man and the ghosts that follow him as my objects. As you can see, they become a random size each time they cycle through.

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Generative landscape

//initialize variables for background pixels
var m = 1;
var s = 20;
var y = 100;

//create variable for pacman to be an object
//move = x location, b = y location, r = ellipse size
var pacman = {move: 10, b: 200, r: 100}; 

//create variable for ghost to be an object
//go = x location, chase = y location, r = ellipse size
var ghost = {go: 1, chase: 200, r: 100};

//initialize distance variables
var dist1;
var dist2;
var dist3;

  

function setup() {
    createCanvas(600, 400);
    //make pixels move quickly across screen
    frameRate(50);
}

function draw() {
    background(0);

    //repeats pixelate to have multiple pixels in background
    for (var r = 0; r < 20; r++) {
        pixelate();    
    }
    
    //create pacman and ghosts
    createPacman();  
    createGhostOne();
    createGhostTwo();
    createGhostThree(); 
    
    //restablish fill for background pixels
    fill(random(1,255), random(1, 255), random(1, 255));   

}

function pixelate() {
    //reassign pixel vairables so m moves by 10
    //and reassign y so that it is randomized
    m = m + 10;
    y = random(1,400);
    //draw rectangle(pixel)
    rect(m, y, s, s);
    //create contidional to randomize pixel fill, size, and reset location to 0
    if (m > width) {
    	m = 0;
        fill(random(1,255), random(1, 255), random(1, 255));
        s = random(10,50);
    }
}

function createPacman() {
    //create variable for pacman to be an object
    //move = x location, b = y location, r = ellipse size, c = fill color
       
    fill(255, 255, 0);
    arc(pacman.move, pacman.b, pacman.r, pacman.r, HALF_PI, TWO_PI);
    
    //make pacman move
    pacman.move = pacman.move + 1;
    
    //make pacman move back to start
    if (pacman.move > width + 500) {
    	pacman.move = -50;
    	pacman.r = random(10, 100);
    }    
}

function createGhostOne(){
    //create arc (ghost)
    fill(255, 0, 0);
    arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);
    
    //set variable for distance between pac man and ghost
    dist1 = 200;
    ghost.go = pacman.move - dist1;
    ghost.r = pacman.r;   
}

function createGhostTwo() {
    //create arc (ghost)
    fill(0, 255, 0);
    arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);
    
    //set variable for distance between pac man and ghost
    dist2 = 300;
    ghost.go = pacman.move - dist2;
    ghost.r = pacman.r;    
}

function createGhostThree() {
    //create arc (ghost)
    fill(0, 0, 255);
    arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);
    
    //set variable for distance between pac man and ghost
    dist3 = 400;
    ghost.go = pacman.move - dist3;
    ghost.r = pacman.r;        
}

Below is my rough sketch for this project.