Category: Uncategorized

sketch_project11

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-11*/

var x1 = 100;
var x2 = 400;
var x3 = 30;
var luggage = [];

function setup() {
    createCanvas(480, 480);
    frameRate(60);
    background(191, 233, 255);

    //set an initial group of luggage
    for (var i = 0; i < 5; i++) {
    	var rx = random(width);
    	luggage[i] = makeLuggage(rx)
    }
}

function draw() {
	//drawing sun
	noStroke();
	fill(255, 252, 227);
	ellipse(80, 40, 80, 80);
	fill(255, 246, 179);
	ellipse(80, 40, 70, 70);
	fill(255, 238, 112);
	ellipse(80, 40, 50, 50);

	//drawing clouds
	drawCloud(x1);
	drawCloud(x2);
	drawCloud(x3);

	//drawing floor & window
	fill(100);
	rect(97, 0, 10, height);
	rect(377, 0, 10, height);
	rect(0, 67, width, 10);
	rect(0, 294, width, 180);
	fill(184);
	rect(0, 300, width, 180);
	rect(100, 0, 10, height);
	rect(380, 0, 10, height);
	rect(0, 70, width, 10);

	//drawing conveyor belt
	fill(50);
	rect(0, 372, width, 10);
	fill(110);
	rect(0, 380, width, 50)
	fill(200);
	rect(0, 390, width, 30)
	for(var dots = 0; dots < 9; dots ++) {
		fill(110);
		ellipse(dots * 70 + 20, 408, 10, 10);
		fill(250);
		ellipse(dots * 70 + 20, 403, 10, 10);
	}

	//drawing luggage
    updateLuggage();
    removeLuggageFromView();
    addLuggage();
}

function drawCloud(x) {
    push();
    noStroke();
    fill(240);
    ellipse(x, height / 5, 100, 100);
    ellipse(x + 10, height / 5 + 5, 100, 100);
    ellipse(x + 80, height / 5, 80, 70);
    ellipse(x + 10, height / 5 - 10, 80, 80);
    ellipse(x + 70, height / 4 - 55, 60, 50);
    pop();
}


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

function removeLuggageFromView() {
    //remove luggage from array if it's out of sight
    var luggageToKeep = [];
    for (var i = 0; i < luggage.length; i++) {
        if (luggage[i].x + luggage[i].breadth > 0) {
            luggageToKeep.push(luggage[i]);
        }
    }
    luggage = luggageToKeep; //remember the surviving luggage
}

function addLuggage() {
    //with a very small probability, add a new luggage to the end
    var newLuggageProb = 0.005; 
    if (random(0,1) < newLuggageProb) {
        luggage.push(makeLuggage(width));
    }
}

function luggageDisplay() {
	var top = 375 + this.height;
	//draw luggage
	stroke(0);
    fill(this.r, this.g, this.b);
    rect(this.x, 380, this.breadth, this.height);
    //draw handle
    fill(50);
    rect(this.x + 20, top, this.breadth - 45, 4);
    rect(this.x + 20, top, 4, 10);
    rect(this.x + this.breadth - 25, top, 4, 10);



}

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

function makeLuggage(startX){
    var myLuggage = {x: startX,
                speed: -1.0,        
                breadth: random(80, 120),
                height: -random(50, 80),
                r: random(100, 255),
                g: random(100, 255),
                b: random(100, 255),
                move: luggageMove,
                display: luggageDisplay}
    return myLuggage;
}

My project is of a luggage conveyor belt in an airport. I decided to choose this landscape because of the picture that was posted within the instructions, which showed luggage moving around the belt. Luggage size and color is randomly picked and drawn onto the conveyor belt. This was a very fun project to do, and it was a great opportunity for me to practice using objects. The part I struggled with the most was figuring out how to draw the luggage handles on top of the suitcases. But overall, I learned a lot and am very happy with how the project turned out.

shariqs-project-11

// Name: Shariq M. Shah
// Andrew ID: shariqs
// Section: C
// Project 11

//initializing objects as empty arrays
var boxes = [];
var balls = [];

var spikesSpeed = 0.0005;
var spikesDetail = 0.5;

function setup() {
    createCanvas(640, 240);
    // creating boxes
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        boxes[i] = makebox(rx);
    }
    frameRate(30);
}
function draw() {
    background(235, 183, 52);
    noFill();
    stroke(1);
    beginShape();
    for (var x = 0; x < width; x++) {
      var t = (x * spikesDetail * 2) + (millis() * 1.3 * spikesSpeed);
      var y = map(noise(t), 0, 1, 0, height);
      vertex(x, y);
      push();
      fill(0);
      ellipse(x, y, 5, 5);
      pop();
    }
    endShape();
    updateAndshowboxes();
    removeboxesThatHaveSlippedOutOfView();
    addNewboxesWithSomeRandomProbability();
    //text that moves in generative landscape
    text("//wishyouwerehere", constrain(mouseX, 50, width - 100), height/2 + 50, 5)
}
function updateAndshowboxes(){
    // Update the box's positions, and show them.
    for (var i = 0; i < boxes.length; i++){
        boxes[i].move();
        boxes[i].show();
    }
}
function removeboxesThatHaveSlippedOutOfView(){
    var boxesToKeep = [];
    for (var i = 0; i < boxes.length; i++){
        if (boxes[i].x + boxes[i].breadth > 0) {
            boxesToKeep.push(boxes[i]);
        }
    }
    boxes = boxesToKeep; // remember the surviving boxes
}
function addNewboxesWithSomeRandomProbability() {
    // With a very tiny probability, add a new box to the end.
    var newboxLikelihood = 0.007;
    if (random(0,1) < newboxLikelihood) {
        boxes.push(makebox(width));
    }
}
// method to update position of box every frame
function boxMove() {
    this.x += this.speed;
}
function boxshow() {
    var heightUp = 20;
    var bHeight = this.nFloors * heightUp;
    fill(0);
    stroke(5);
    push();
    translate(this.x, height - 40);
    noStroke();
    for (var i = 0; i < 50; i++) {
        rect(5, -15 - (i * heightUp), this.breadth - 5, 1 + i);
        ellipse(-20, -(i * 1.2 * 2 * heightUp), 5 + i, 5 + i);
    }
    pop();
}
function makebox(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: boxMove,
                show: boxshow}
    return bldg;
}

In this project, I used objects to generate an abstract and dynamic landscape that interacts with the rectangular geometry objects in the background. The arrays and dynamic objects generate a constantly moving and energetic field.