Category: Section B

sketch

// Veronica Wang
// Section B 
// yiruiw@andrew.cmu.edu
// Project-10

var sushi1 = [];
var sushi2 = [];
var sushi3 = [];

function setup() {
    createCanvas(480, 300); 
    frameRate(100);
}


function draw() {
    background("wheat"); 
    
    displayRoom();

    displayPlates();
    removePlates(sushi1);
    removePlates(sushi2);
    removePlates(sushi3);
    newPlate(); 

}


function displayPlates(){
    for (var i = 0; i < sushi1.length; i++){
        sushi1[i].move();
        sushi1[i].display1();
    }
    for (var i = 0; i < sushi2.length; i++){
        sushi2[i].move();
        sushi2[i].display2();
    }
    for (var i = 0; i < sushi3.length; i++){
        sushi3[i].move();
        sushi3[i].display3();
    }
}


function removePlates(plates){

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


function newPlate() {
    // With a very tiny probability, add a new sushi to the end.   
    var prob = 0.008;
    //sandomly select which type of sushi to serve
    if (random(0, 1) < prob) {
        var sunum = random(0,3);
        if (sunum < 1){
            sushi1.push(makePlate(width));
        } else if (sunum < 2){
            sushi2.push(makePlate(width));
        } else {
            sushi3.push(makePlate(width));
        }
        
    }  
}


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

// draw the building and some windows
function sushi1Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi1
    fill("black");
    noStroke();
    ellipse(12.5, 10, 25, 10);
    rect(0, 0, 25, 10);
    fill("white");
    ellipse(12.5, 0, 25, 10);
    fill("red");
    ellipse(10, 0, 5, 5);
    ellipse(11, 2, 5, 5);
    ellipse(12, -1, 5, 5);
    ellipse(14, -3, 5, 5);
    ellipse(10, 2, 5, 5);
    ellipse(11, -4, 5, 5);
    ellipse(15, -2, 5, 5);
    ellipse(16, -3, 5, 5);

    pop();
}

function sushi2Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi2
    fill("black");
    noStroke();
    ellipse(10, 10, 20, 10);
    rect(0, 0, 20, 10);
    fill("white");
    ellipse(10, 0, 20, 10);
    fill("orange");
    rect(0, -3, 22, 5);
    fill("black");
    rect(7, -5, 5, 10);

    pop();
}

function sushi3Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi3
    fill("black");
    noStroke();
    ellipse(10, 10, 20, 10);
    rect(0, 0, 20, 10);
    fill("white");
    ellipse(10, 0, 20, 10);
    fill("salmon");
    ellipse(10, 0, 10, 5);

    pop();
}


function makePlate(birthLocationX) {
    var plt = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nItems: round(random(1,3)),
                move: platesMove,
                display1: sushi1Display,
                display2: sushi2Display,
                display3: sushi3Display}
    return plt;
}

//drawing elements in the room
function displayRoom(){
    //curtain panels
    fill("cornsilk");
    noStroke();
    rect(0, 0, width, 75);

    stroke("peru");
    strokeWeight(1);

    for (var i = 0; i < 20; i++) {
        line(i * 30, 0, i * 30, 75);
    };
    
    strokeWeight(10);
    line(0, 75, width, 75);

    //lights
    stroke("black");
    strokeWeight(2);

    for (var i = 0; i < 5; i++) {
        line(50 + i * 90, 0, 50 + i * 90, 100);
        triangle(50 + i * 90, 100, 40 + i * 90, 110, 60 + i * 90, 110);
        rect(45 + i * 90, 100, 10, 5);
    };

    //conveyor belt
    fill("gray");
    noStroke();
    rect(0, 150, width, 40);

    //table
    noStroke();
    fill("tan");
    rect(0, 190, width, 200);
    
    fill("peru");
    rect(0, 190, width, 10);

    strokeWeight(1);
    stroke(0);
    line(0,height-70, width, height-70); 

    //plate
    fill("white");
    ellipse(width / 2, height - 40, 90, 30);

    //chopsticks
    noStroke();
    fill("lightgray");
    rect(300, height - 50, 20, 8);
    fill("black");
    rect(305, height - 55, 2, 40);
    rect(310, height - 55, 2, 40);

}

Rotating sushi bars are one of my favorite types of restaurants, so I tried to create a conveyor belt serving scene in this project. It took me some time to figure out how to randomly select different objects, and also the overlapping of objects being generated. I tried playing around with probability/count/ etc. but some instances are still overlapped. 🙁

Initial sketch

planes

//Kade Stewart
//Section B
//kades
//Project-10


var planes = [];
//a variable that holds each of the colors that a plane could be
var pastels = [230, 245, 245, 255, 250, 205, 180, 236, 180];
var terrain1 = [];
var terrain2 = [];
var terrain3 = [];

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

    //initialize a plane
    planes[(planes.length)] = new Plane();


    //add terrain that has random but connected altitudes
    var y = height/4;
    for (var i = 0; i < width; i++) {
    	terrain1.push(y += random(-1,1));
    }

   	y = height/2;
   	for (var i = 0; i < width; i++) {
    	terrain2.push(y += random(-1,1));
    } 

    y = height * (3/4);
    for (var i = 0; i < width; i++) {
    	terrain3.push(y += random(-1,1));
    }
}

function Plane() {
	this.y = random(0, height);
	this.x = width + 50;
	this.speed = floor(random(-.01, -3));    //this is the speed that the plane actually goes back
	this.path = [];    //this is where the path is stored for the plane
	this.pathspeed = this.speed * 3;    //this is the speed that the path is made
	this.c = floor(random(1,4));    //this is where the color is determined

	//this is function that draws both the plane and the path
	this.draw = function() {
		stroke(0);
		strokeWeight(1);
		fill(pastels[this.c], pastels[this.c + 1], pastels[this.c + 2]);

		triangle(this.x - (6 * -this.pathspeed/2), this.y - 9 * -this.pathspeed/2,
				 this.x + 18 * -this.pathspeed/2, this.y,
				 this.x, this.y);

		//draw the path
		if (this.path.length > 2) {
			for (var i = 1; i < this.path.length; i++) {
				stroke(125);
				strokeWeight(1);
				noFill();
				line(this.x + (this.pathspeed * (i-1)), this.path[this.path.length - i - 1],
					 this.x + (this.pathspeed * (i)), this.path[this.path.length - i]);
			}
		}
	}
}

function updatePlanes(index) {
	planes[index].x += planes[index].speed;
	planes[index].y += random(-1, 1);

	//if the plane is past the window, delete it
	if (planes[index].x - (18 * planes[index].pathspeed/2) < 0) {
		planes.splice(index, 1);
	}
}

function updatePath(index) {
	var p = planes[index];

	//add the planes current position to the path to trace where it's been
 	p.path.push(p.y);

 	//if the path is longer than the window, delete what's outside of the window
	if (p.path.length * p.pathspeed > width) {
		p.path.splice(0, 1);
	}
}

function randomlyMakePlane(odds) {
	//this is the randomizer that decided whether the plane is made or not
	var newPlaneMaybe = random(-odds + 1, 1);
	if (newPlaneMaybe > 0) {
		planes[(planes.length)] = new Plane();
	}
}

//draw 3 different tiers of background, to give a sense of depth
function drawTerrain() {
	for (var j = 0; j < width; j++) {
		stroke(255, 241, 245);
		strokeWeight(5);
		noFill();
		line(j, terrain1[j], j, height);
	}
	for (var j = 0; j < width; j++) {
		stroke(255, 235, 239);
		strokeWeight(5);
		noFill();
		line(j, terrain2[j], j, height);
	}
	for (var j = 0; j < width; j++) {
		stroke(255, 209, 220);
		strokeWeight(5);
		noFill();
		line(j, terrain3[j], j, height);
	}
}

function updateTerrain() {
	terrain1.splice(0, 1);
	terrain1.push(terrain1[terrain1.length-1] + random(-1, 1));
	terrain2.splice(0, 1);
	terrain2.push(terrain2[terrain2.length-1] + random(-1, 1));
	terrain3.splice(0, 1);
	terrain3.push(terrain3[terrain3.length-1] + random(-1, 1));
}

function draw() {
	background(255, 250, 253);

	//this is where the terrain is drawn and then generated
	drawTerrain();
	updateTerrain();

	for (var i = 0; i < planes.length; i++) {
		var p = planes[i];

		//draw the planes
		planes[i].draw();

		//update its path
		updatePath(i);

		//update its x and y position, and delete it if it's too far off the screen
		updatePlanes(i);
	}

	//**60** to 1 odds that there is a new plane made (about 1 every second)
	randomlyMakePlane(60);

}

I wanted to make a generative landscape that wasn’t just actual land, or even anything that was extremely natural, but something more artificial. I came up with paper airplanes, which ended up being an interesting challenge. I randomly generated airplanes that were large and fast to look closer to the viewer (who’s reference frame was moving forward) or small and slow to seem farther away. The background, varying pink levels, also moves to increase the viewer’s sense that they’re moving as well. Overall, I think I achieved my goal of giving the viewer a sense of wonderment.

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Projecct 10 


var mushrooms = [];
var pigs = [];

//Load two images of the pig
function preload(){
  var filenames = [];
  filenames[0] = "https://i.imgur.com/DmGVjxo.png";
  filenames[1] = "https://i.imgur.com/WuMtlCY.png";
  for (var i = 0; i < filenames.length; i++) {
    pigs.push(loadImage(filenames[i]));
  }
}

function setup() {
  createCanvas(480, 480);
//Create the giant mushroom moving at the background
  for (var i = 0; i < 10; i++){
    var rx = random(width);
    mushrooms[i] = makeMushroom(rx);
  }
  frameRate(10);
}



function draw(){
  background(202, 220, 249);
  noStroke();
  fill(135, 196, 165);
  rect(0, 300, 480, 180);
  fill(255, 214, 119);
  ellipse(480, 0, 200, 200);
  updateAndDisplayMushrooms();
  removeMushroomsThatHaveSlippedOutOfView();
  addNewMushroomsWithSomeRandomProbability();
//Display the two images alternatively to create motion
  push();
//Flip the direction of the pig
  scale(-1, 1);
  image(pigs[frameCount % 2], -230, height / 2);
  pop();
}


function updateAndDisplayMushrooms(){
// Update and display the mushrooms
    for (var i = 0; i < mushrooms.length; i++){
        mushrooms[i].move();
        mushrooms[i].display();
    }
}

function removeMushroomsThatHaveSlippedOutOfView(){
    var mushroomsToKeep = [];
    for (var i = 0; i < mushrooms.length; i++){
        if (mushrooms[i].x + mushrooms[i].breadth > 0) {
            mushroomsToKeep.push(mushrooms[i]);
        }
    }
    mushrooms = mushroomsToKeep; 
}



function addNewMushroomsWithSomeRandomProbability() {
// With a very tiny probability, add a new mushroom to the end.
    var newmushroomLikelihood = 0.007; 
    if (random(0,1) < newmushroomLikelihood) {
        mushrooms.push(makeMushroom(width));
    }
}



// Update the position of building for every frame
function mushroomMove() {
    this.x += this.speed;
}
    

// Draw the mushrooms
function mushroomDisplay() {
    var mushroomHeight = this.nHeight * 20; 
    fill(255); 
    stroke(252, 190, 181);
    push();
    translate(this.x, height - 180);
    rect(0, -mushroomHeight, this.breadth, mushroomHeight, 15);
    pop();
    push();
    translate(this.x, height - 180);
    fill(252, 161, 148);
    arc((this.breadth / 2), -mushroomHeight+10, (this.breadth + 60), (mushroomHeight*0.8), PI, 0);
    stroke(200); 
    pop();
}

function makeMushroom(locationX) {
    var mushroom = {x: locationX,
                breadth: 40,
                speed: -1.0,
                nHeight: round(random(2,8)),
                move: mushroomMove,
                display: mushroomDisplay}
    return mushroom;
}

For this project, I created a series of giant mushrooms at the background. Learning from the base code provided from the assignment requirement, I used object command to generate rectangles and semicircle to represent a mushroom. Then, I used translate command to move them to the position I want them to be at. I also loaded two images of the pig and displayed them alternatively to create a flying motion. For this project I think it is a good practice for the previous projects relating to load images and also help me to practice my use of object command. It also helps me with previewing the scale command that flip the canvas to the opposite side.

Sketch :

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 10 

var nails = [];

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

    //Creation of initial nail polish
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        nails[i] = makeNails(rx);
    }
    frameRate(30);
}

function draw() {
    background(color(255,231,218));

    displayText();
    updateAndDisplayNails();
    removeOldNails();
    addNewNails();

    //Tabletop 
    noStroke();
    fill(230);
    rect(0, 260, width, height);
}

function displayText() {
    textSize(25);
    textAlign(CENTER);
    textStyle(BOLD);
    fill("Salmon");
    text("Welcome to Sarah's Nail Salon!", width / 2, 50);
}

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

function removeOldNails() {
    var nailskeep = [];
    for (var i = 0; i < nails.length; i++) {
        if (nails[i].x + 50 > 0) {
            nailskeep.push(nails[i]);
        }
    }
    nails = nailskeep;
}

function addNewNails() {
    var chance = 0.01;
    if (random(0,1) < chance) {
        nails.push(makeNails(width));
    }

}

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

function nailsDisplay() {
    var nailbody = 90;
    var nailtip = 60;

    noStroke();

    push();
    translate(this.x, height - 40);

    //Body of Nail Polish
    fill(this.randomColor);
    rect(this.x, -nailbody, this.bodybreadth, nailbody); 

    //Tip of Nail Polish
    fill(80);
    rect(this.x + 7, -nailbody - nailtip, this.tipbreadth, nailtip); 

    pop(); 

}

function makeNails(birthlocationX) {
    var nails = {x: birthlocationX, 
        bodybreadth: 40,
        tipbreadth: 25,
        speed: -1.0,
        randomColor: color(random(255), random(255), random(255)),
        move: nailsMove,
        display: nailsDisplay}
    return nails;
}

This project was difficult to tackle; I did not have any idea on which animation I wanted to do, nor did I have too much technical knowledge on where to start. However, I got inspired from my friend’s nail kit. My friends and I would go to her room and do each other’s nails sometimes- and I thought it would be a cool idea to display different nail polishes that circulate. For the code, I referred to the template to get initial ideas on where to develop my code. Overall, this was an interesting project!