Category: SectionD

sketch

/*  Mari Kubota
    49-104 Section 1
    mkubota@andrew.cmu.edu 
    Project 11
*/

var lamps = [];
var stars = [];
var buildings = [];


function setup() {
    createCanvas(480, 280); 

    // create an initial collection of objects
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        lamps[i] = makeLamp(rx);
        stars[i] = makeStar(rx);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}


function draw() {
//creates gradient sky
	c1 = color(0, 28, 84);
    c2 = color(222, 241, 255);
    setGradient(c1, c2);

//creates roads
    noStroke();
    fill(100);
    rect(0, height*.75, width, height/4);
    fill(200);
    stroke(50);
    rect(0,height*.9, width, height/9);
//calls functions with objects     
    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability(); 

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

    updateAndDisplayLamps();
    removeLampsThatHaveSlippedOutOfView();
    addNewLampsWithSomeRandomProbability();

}


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

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

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 removeLampsThatHaveSlippedOutOfView(){
    // takes away lamps once they leave the frame
    var lampsToKeep = [];
    for (var i = 0; i < lamps.length; i++){
        if (lamps[i].x + lamps[i].breadth > 0) {
            lampsToKeep.push(lamps[i]);
        }
    }
    lamps = lampsToKeep; // remember the surviving buildings
}


////////////////////////////////////////////////////////
function removeStarsThatHaveSlippedOutOfView(){
//removes stars from array stars and puts them in new array
//once they've moved off the edge of frame
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep; // remember the surviving stars
}

function removeBuildingsThatHaveSlippedOutOfView(){
    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 addNewLampsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newLampLikelihood = 0.03; 
    if (random(0,1) < newLampLikelihood) {
        lamps.push(makeLamp(width));
    }
}

function addNewStarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newStarLikelihood = 0.02; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}

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 lampMove() {
    this.x += this.speed;
}

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

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


// draws lamps
function lampDisplay() {
    fill(255,255,0,45);
    noStroke();    
    ellipse(this.x, height -25 - this.h,this.r,this.r); //halo of light from lamp
    fill(102,166,218);
    rect(this.x-1.5, height - 25-this.h, this.breadth, this.h); //lamp post
    fill(255);
    ellipse(this.x, height -25 - this.h, this.r2, this.r2); //lightbulb
    stroke(255);
    strokeWeight(0.5);
    noFill();
    quad(this.x - 1.5, height - 20 - this.h,
        this.x - 5, height - 35 - this.h,
        this.x + 5, height - 35 - this.h, 
        this.x + this.breadth - 1.5, height - 20 - this.h); //draws the lamp box
}

function starDisplay(){
  //halo of light around star
  noStroke();
  fill(255, 255, 0, 30);
  ellipse(this.x + this.breadth/2, this.h, this.breadth * 5, this.breadth * 5);
  stroke(255,255,0);
  strokeWeight(0.5);
  noFill();
  //draws diamonds that make up star
  quad(this.x, this.h,
       this.x + this.breadth / 2,this.h - this.tall / 2,
       this.x + this.breadth, this.h,
       this.x + this.breadth / 2,this.h + this.tall / 2);
}

function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = height; 
    noStroke();
    fill(0);  
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    for (var i = 0; i < this.nFloors; i+=2) {
    	fill("yellow");
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 15);
    }
    pop();
}
//////////////////////////////////////////////////////////////////////////


function makeLamp(posX) {
    var lamp = {x: posX,
                breadth: 3,
                speed: -2.5,
                h: random(40,60),
                r: random(20,35),
                r2: 4,
                move: lampMove,
                display: lampDisplay}
    return lamp;
}

function makeStar(posX) {
    var star = {x: posX,
                breadth: 3,
                speed: -0.5,
                tall: random(5,10),
                h: random(20, 100),
                move: starMove,
                display: starDisplay}
    return star;
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                nFloors: round(random(10,20)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}
//////////////////////////////////////////////////////////////////////////////

//gradient sky function
function setGradient(c1, c2) {
  noFill();
  for (var y = 0; y < height; y++) {
    var inter = map(y, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, y, width, y);
  }
}

For this project, I created a landscape of a city during the night time. The three objects in the landscape are the buildings, lamps, and stars. All of the objects appear randomly in random quantities. The only consistency is the height at which the buildings and lamps appear. The lamps’s colors are randomized and made transparent in order to create a halo effect. The objects all move across the canvas at different speeds in order to create a sense of depth. The stars move slowest, followed by the buildings, and the lamp posts move the fastest.

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 11 - Landscape
*/

// mountain slope and move speed variables
var tDetail1 = 0.002;
var tSpeed1 = 0.0001;
var tDetail2 = 0.005;
var tSpeed2 = 0.0003;
var tDetail3 = 0.01;
var tSpeed3 = 0.0008;

// mountain colors
var terrC1 = "#597081";
var terrC2 = "#7EA0B7";
var terrC3 = "#D6EEFF";

//mountain heights range
var h1Min = 0;
var h1Max = 300;
var h2Min = 150; 
var h2Max = 400;
var h3Min = 250;
var h3Max = 480;

// star variables
var sList = [];
var sNum = 20; // number of stars
var sLeft = -20; // reset start to canvas right
var sSpeed = -0.5;

// car variables
var cList = [];
var cHeight = 20; // car height
var cWidth = 50; // car width
var cNum = 5; //number of cars
var cLeft = -20 - cWidth; // reset car to start
var cSpeed = -1.5; // car speed
var wSize = 10; // car wheel size


function setup() {
    createCanvas(480, 480);
    // star start at random px and py
    for (var j = 0; j < sNum; j++) {
        var px = random(width);
        var py = random(height / 3);
        sList[j] = starMake(px, py);
    }

    // car cx and cy
    var ground = height - height / 15;
    for (var k = 0; k < cNum; k++) {
        var cx = random(width);
        var cy = ground - wSize / 2 - cHeight;
        cList[k] = carMake(cx, cy);
    }

    
}

function draw() {
    // sky color
    background("#2B2D42");
    // render stars
    starRender();
    // render mountains 
    terrainDraw(tDetail1, tSpeed1, terrC1, h1Min, h1Max);
    terrainDraw(tDetail2, tSpeed2, terrC2, h2Min, h2Max);
    terrainDraw(tDetail3, tSpeed3, terrC3, h3Min, h3Max);
    // draw ground
    fill("#8D99AE");
    rect(0, height - height / 15, width, height / 15);
    // render car
    carRender();
    
}

// mountain draw function 
function terrainDraw(terrainDetail, terrainSpeed, terrC, terrMin, terrMax) {
    noStroke();
    // fill with layer color
    fill(terrC);
    // start drawing the shape
    beginShape();
    vertex(0, height);
    // generate terrian
    for (var i =  0; i < width; i++) {
        var t = (i * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, terrMin, terrMax);

        vertex(i, y);
    }
    vertex(width, height);
    endShape();
}

// star object
function starMake(px, py) {
    var star = {x: px, y:py, speed: sSpeed,
                update: starUpdate,
                draw: starDraw}
    return star;
}

// update star px and py
function starUpdate() {
    this.x += this.speed;
    if (this.x <= sLeft) {
        this.x += width - sLeft;
    }
}

// draw star at this.x and this.y location
function starDraw() {
    noStroke();
    fill("yellow");
    var size = random(1, 5); // make it shine
    push();
    translate(this.x, this.y);
    circle(0, 0, size);
    pop();
}

// render the star based on previous info
function starRender() {
    for (var i = 0; i < sList.length; i++) {
        sList[i].update();
        sList[i].draw();
    }
}

// car info
// a is car x position; b is car y position
function carMake(cx, cy) {
    var car = {a: cx, b: cy, speed: cSpeed, c: color(random(100), random(0), random(255)),
                update: carUpdate,
                draw: carDraw}
    return car;
}

// update car position
function carUpdate() {
    this. a += this.speed;
    if(this.a <= cLeft) {
        this.a += width - cLeft;
    }
}

// draw initial car
function carDraw() {
    // wheel location
    var wX1 = cWidth / 4;
    var wX2 = cWidth - wX1;
    noStroke();
    push();
    translate(this.a, this.b);
    // draw car
    fill(this.c);
    rect(0, 0, cWidth, cHeight);
    // draw car wheels
    fill(0);
    circle(wX1, cHeight, wSize);
    circle(wX2, cHeight, wSize);
    pop();
}

// render car to this.a and this.b
function carRender() {
    for (var m = 0; m < cList.length; m++) {
        cList[m].update();
        cList[m].draw();
    }
}

The idea is to create a night scene on a highway. In the scene, stars and mountains move relative to the cars in a various speed based on depth relationship.

I wanted to make a landscape that gave the illusion of depth, so objects would be moving past at different speeds depending on ‘how far back’ they are. I started by creating the mountains using the noise function. They were initially straight lines (x values i and i), but I used i*0.8 and i instead because the offset created an interesting effect. Then I made a balloon that randomly picked an image from an array. This balloon also randomly generated things like speed and height.

After ironing things out a bit, I used the sample code as a framework for making several balloons in an array. I also made the speed/size more deliberate. Now, the closer the balloon is to the top (the smaller the y-value), the slower it moves, giving the illusion that it is farther away.

sketch

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-11
*/

var balloons = [];
var balloonLinks = [];
var t1 = 0;
var t2= 0;
var t3 = 0;


function preload() {
    balloonLinks = [
    "https://i.imgur.com/rmLvmIq.png",
    "https://i.imgur.com/03Cr2Sx.png", 
    "https://i.imgur.com/peP166r.png"];
}


function setup() {
    createCanvas(480, 480); 
    frameRate(30);
  
    // create an initial collection of balloons
    for (var i = 0; i < 10; i++){
        var rx = random(-180, width);
        var ry = random(40,height-200);
        var rs = 70*(0.005*ry); //make balloons higher up smaller
        var spd = ry/70; //make balloons higher up move slower
        randomBalloon = floor(random(balloonLinks.length));
        balloon = loadImage(balloonLinks[randomBalloon]);
        balloons[i] = makeBalloon(balloon, rx, ry, rs, spd);
    }
    frameRate(10);
}

function draw() {
    background(200); 
  
    updateAndDisplayBalloons();
    removeBalloonsThatHaveSlippedOutOfView();
    addNewBalloonsWithSomeRandomProbability();
    
    //the larger t is
    //the faster it moves
    t1 += 0.01;
    t2 += 0.04;
    t3 += 0.1;
  
  
    for(var i=0; i < width*1.3; i++)
    {
    //the larger the number you divide i by
    //the 'faster' the terrain will move
    n1 = noise(i/100-t1);
    n2 = noise(i/100-t2);
    n3 = noise(i/100-t3);
    
    stroke(0,20);
    line(i*0.8, height*n1, //top of the line (bumpy randomized part)
         i, height); //bottom of line is bottom of canvas
    
    stroke(0,70);
    line(i*0.8, height*n2,
         i, height);
      
    stroke(0,200);
    line(i*0.8, height*n3,
         i, height);
    }
}

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

function removeBalloonsThatHaveSlippedOutOfView(){
    // If a balloon has dropped off the left edge,
    // remove it from the array.
    var balloonsToKeep = [];
    for (var i = 0; i < balloons.length; i++){
        if (balloons[i].x + balloons[i].size > 0) {
            balloonsToKeep.push(balloons[i]);
        }
    }
    balloons = balloonsToKeep; // remember the surviving balloons
}


function addNewBalloonsWithSomeRandomProbability() {
    var newBalloonLikelihood = 0.03; 
    if (random(0,1) < newBalloonLikelihood) {
        rx = random(-60, -50);
        ry = random(40,height-200);
        rs = 70*(0.005*ry);
        spd = ry/70; //make balloons higher up move slower
        randomBalloon = floor(random(balloonLinks.length));
        balloon = loadImage(balloonLinks[randomBalloon]);
        balloons.push(makeBalloon(balloon, rx, ry, rs, spd));
    }
}

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

// draw the balloon
function balloonDisplay() {
    image(this.img,this.x,this.y,this.size,this.size);
}

function makeBalloon(balloon, balloonX, balloonY, balloonSize, balloonSpeed) {
    var blln = {img: balloon,
                x: balloonX,
                y: balloonY,
                size: balloonSize,
                speed: balloonSpeed,
                move: balloonMove,
                display: balloonDisplay}
    return blln;
}