Category: Section A

index

var NPOINTS = 100;
var starX = [];
var starY = [];
var sandX = [];
var sandY = [];
var birdX = 270
var birdY = 160
var low = 300
var high = 120
var a = width / 2;
var b = width / 2;
var c = width / 2;

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

	//assigns new coordinate for each sand grain
	for (var i = 0; i < NPOINTS; i++) {
		sandX.push(random(0, 480));
		sandY.push(random(380, 480));
	};
}

function draw() {
	//sky gradient
	var col1 = color(47, 107, 177)
	var col2 = color(180, 197, 227)

	//rearranges values so that each line of sky has a different color
	for (var i = 0; i < height / 3 * 2; i++){
        var gradient = map (i, 0, height / 3 * 2, 0, 1);
        var newC = lerpColor(col1, col2, gradient);
        stroke(newC);
        line(0, i, width, i);
    }

	//bird's beak
	push();
	noStroke();
	fill(244, 198, 68);
	triangle(birdX + 8, birdY - 2, birdX + 8, birdY + 6, birdX + 17, birdY + 2);
	pop();

	//bird's head
	push();
	noStroke();
	fill(0);
	ellipse(birdX, birdY, 22, 20);
	pop();

	//bird's eye
	push();
	fill(255);
	strokeWeight(2);
	line(birdX + 1, birdY - 2, birdX + 4, birdY - 2);
	pop();


	//bird's back
	push();
	noStroke();
	fill(0);
	arc(birdX - 23, birdY + 2, 45, 30, 0, PI);
	pop();

	//sea
	noStroke();
	fill(123, 159, 189);
	rect(0, height / 3 * 2, width, height);

	//sand
	fill(211, 195, 182);
	arc(width / 2, height, width * 4, height / 7 * 3, PI, TWO_PI);

	//bird's wing
	noStroke();
	fill(0);
	quad(birdX - 30, birdY + 10, birdX - 35, birdY - 15, birdX - 21, birdY - 15, birdX - 5, birdY + 10);

	//moves bird according to mouse
	if (mouseY < 300 & mouseY > 120) {
		birdY = mouseY;
	} else if (mouseY < 120) {
		birdY = high;
	} else if (mouseY > 300) {
		birdY = low;
	};

	//makes sand move
	for (var i = 0; i < sandX.length; i++) {
		stroke(0);
		point(sandX[i], sandY[i]);
		sandX[i] = sandX[i] - 1;
		if (sandX[i] < 0) {
			sandX[i] = width;
		};
	};

}

For this project, I wanted to create a beach because I grew up living on an island. I initially wanted to create trees but ran out of time so I used sand as a way to represent a changing landscape.

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-10-Landscape */

var marioLink = "https://i.imgur.com/gaxoRHw.png"
var chutes = [];

function preload() {
	mario = loadImage(marioLink);
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of chutes
    for (var i = 0; i < 10; i++){
        var cx = random(width);
        chutes[i] = makeChute(cx);
    }
    frameRate(10);
}


function draw() {
    background(108, 130, 238); 
    displayHill();
    displayGround();

    updateAndDisplayChutes();
    removeChutes();
    addNewChutes(); 

    imageMode(CENTER);
    image(mario, 50, 330 + random(0, 30));
}


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


function removeChutes(){
    var chutesToKeep = [];
    for (var i = 0; i < chutes.length; i++){
        if (chutes[i].x + chutes[i].breadth > 0) {
            chutesToKeep.push(chutes[i]);
        }
    }
    chutes = chutesToKeep; // remember the surviving chutes
}


function addNewChutes() {
    // add a new chute to the end based on the probability
    var newChuteLikelihood = 0.03; 
    if (random(0,1) < newChuteLikelihood) {
        chutes.push(makeChute(width));
    }
}


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

// draw the building and some windows
function chuteDisplay() {
    var floorHeight = 45;
    var bHeight = floorHeight; 
//making the chutes
    push();
    translate(this.x, height - 40);
    strokeWeight(2);
    fill(147, 198, 63); 
    stroke(46, 104,28);
    rect(0, -bHeight - 61, 40, bHeight); // chute body
    rect(-5, -bHeight - 81, 50, 20); // chute head
//clouds
    fill(255, 70);
    noStroke();
    ellipse(0, -bHeight - 300, 100, 50);
    ellipse(10, -bHeight - 290, 90, 60);
    ellipse(20, -bHeight - 320, 110, 70);
//mystery boxes
    fill(233, 159, 87);
    strokeWeight(2);
    stroke(148, 85, 47);
    textSize(16);
    rect(50, -bHeight - 150, 30, 30);
    text('?', 60, -bHeight - 130);

    pop();
}


function makeChute(birthLocationX) {
    var cht = {x: birthLocationX,
                breadth: 70,
                speed: -6.0,
                nFloors: round(random(3,6)),
                move: chuteMove,
                display: chuteDisplay}
    return cht;
}
//making the green hill in the background
function displayHill() {
	var hill = 0.006
 	var hillSec = 0.0007;
 	stroke(71, 153, 44);
 	beginShape();
 	for (i = 0; i < width; i ++) {
 		var h = (millis() * hillSec) + (i * hill);
 		var y = map(noise(h), 0, 1, 300, 200);
 		line(i, y, i, height);
 	}
 	endShape();
}
//making the brick ground
function displayGround(){
	strokeWeight(2);
    stroke(136, 49, 27);
    fill(196, 83, 53);
    rect(0, 380, 480, 100);
    for (var j = 0; j < 50; j ++) {
    	line(j * 10, 380, j * 10, 480);
    	line(0, 380 + j * 10, 480, 380 + j * 10);
    }
}

I decided to my project based off of Super Mario Bros video game. I had trouble with figuring out how to make the chutes create new ones when the new screen comes by. Eventually I figured out if I increased the probability that a new chute is drawn, more will be drawn in the next screen. I also struggled with controlling the number of the chutes and couldn’t figure out how to make them not overlap each other.

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-10 */

var boats = [];
var c1, c2;

function setup() {
  createCanvas(480, 200);
  frameRate(20);

  c1 = color(255, 70, 0);
  c2 = color(204, 143, 0);

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

}

function draw() {

  /* background gradient */
  for (var i = 0; i < height - 70; i++) {
    var inter = map(i, 70, 110, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, i, width, i);
  }

  drawOcean();
  drawSun();

  updateAndDisplayBoats();
  addNewBoatsWithSomeRandomProbability();
}

/* draws ocean at bottom of canvas */
function drawOcean() {
  noStroke();
  fill(66, 31, 0);
  rect(0, height - 70, width, 70);
}
/* draws sun */
function drawSun() {
  noStroke();
  fill(255);
  ellipse(width/2 + 30, 68, 80, 80);
  fill(255, 235, 0);
  ellipse(width/2 + 30, 70, 80, 80);
  fill(115, 76, 0);
  rect(width/2 + 20, 140, 20, 5, 2.5);
  rect(width/2 + 10, 150, 40, 5, 2.5);
  rect(width/2, 160, 60, 5, 2.5);
  rect(width/2 - 10, 170, 80, 5, 2.5);
}


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

function addNewBoatsWithSomeRandomProbability() {
  var newBoatLikelihood = 0.007;
  if (random(0, 1) < newBoatLikelihood) {
    boats.push(makeBoats(width));
  }
}

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

function displayBoats() {
  noStroke();
  push();
  translate(0, 35);

  fill(0);
  quad(width/2 + this.x - 20, height/2 - 10,
    width/2 + this.x + 20, height/2 - 10,
    width/2 + this.x + 10, height/2,
    width/2 + this.x - 10, height/2);
  quad(width/2 + this.x - 5, height/2 - 15,
    width/2 + this.x + 5, height/2 - 15,
    width/2 + this.x + 10, height/2 - 10,
    width/2 + this.x - 10, height/2 - 10);
  fill(255);
  rect(width/2 + this.x - 3, height/2 - 13, 2, 2);
  pop();
}

function makeBoats(birthLocationX) {
  var bt = {x: birthLocationX,
  breadth: 50,
  speed: -1.6,
  r: random(0.1, 0.5),
  move: moveBoats,
  display: displayBoats,
  }
  return bt;
}

One of my favorite places to relax when I am home is Laguna Beach during the sunset. With its warm weather, the tranquility and warming color palette of the sky and ocean reflection makes it a prime destination to stop everything and enjoy the view. Because the setting is so calm, there is very minimal movement overall, barring any unconditional weather or wind. The only thing that moves in this script are the boats faraway, and even the boats seem to be moving at a peaceful movement.

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 10 */

var ab = []; //stands for abstract
var backcolor; //for a mouse changes color backdrop
var beanFill;

function setup() {
    createCanvas(400, 400); 
   
    for (var i = 0; i < 15; i++){
        var rx = random(width);
        ab[i] = makeAbs(rx);
    }
    frameRate(2);
}


function draw() {
	var R = mouseX
	var G = mouseY
	var B = mouseY
	backcolor = color(R, G, B);
    background(backcolor); 
    

    updateAbs();
    removeAbs();
    addNewAbs(); 
}

function updateAbs(){
    // update abstract position
    for (var i = 0; i < ab.length; i++){
        ab[i].move();
        ab[i].display();
    }
}

function removeAbs(){

    var Keep = [];
    for (var i = 0; i < ab.length; i++){
        if (ab[i].x + ab[i].breadth > 0) {
            Keep.push(ab[i]);
        }
    }
    beans = Keep;
}


function addNewAbs() {
    var Likelihood = 5; 
    if (random(0,4) < Likelihood) {
        beans.push(makeAbs(width));
    }
}

function abMove() {
    this.x += this.speed;
}
    
function absDisplay() {
    var AHeight = random(10, 30);
    var bHeight = this.nheight * AHeight; 

    var RR = mouseY
    var GG = mouseY
    var BB = mouseX
    beanFill = color(RR, GG, BB)
    fill(beanFill); 

    noStroke(0); 
    push();
    translate(this.x, height - 20);
    ellipse(0, -bHeight, this.breadth, bHeight); 
    pop();

    push();
    translate(0, 0);
    strokeWeight(7);
    stroke(beanFill);
    line(0,400, random(100,350), 0);
    pop();

    push();
    translate(0,0);
    strokeWeight(7);
    stroke(beanFill);
    line(400, 400, random(0,400), 0);
    pop();
}


function makeAbs(birthLocationX) {
    var abst = {x: birthLocationX,
                breadth: 40,
                speed: .4,
                nheight: round(random(2,6)),
                move: abMove,
                display: absDisplay }
    return abst;
}

***Move the mouse around image to work***

For this project I wasn’t interested in a stereotypical landscape, so I created a sort of abstract landscape with ‘jumping beans’, spotlights, and an RGB spectrum that changes based on mouse movement. I am really interested in how certain colors interact with one another and I used this project to explore that by watching the intersection of the moving beans and background color. Below is an early process sketch: