Month: November 2017

dnoh-sectionD-project10-landscape

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project 10

var planes;
var clouds = [];

function preload() {
	//loading plane image
	var planeImage = "https://i.imgur.com/bQ0w1cU.png"
	planes = loadImage(planeImage);
}

function setup(){
  createCanvas(360,480);
  //create clouds inital
  for (var i = 0; i < 45; i++){
    var rd = random(width);
    clouds[i] = makeClouds(rd);
  }
  frameRate(30);
}

function draw(){
  var a = color(53,47,73);
  var b = color(113, 85, 52);
  backGradient(0, width, a, b);

  makeSun();
  updateCloud();
  removeCloud();
  addCloud();

  image(planes, 0, 0);
}

//creates a gradient color
function backGradient (y, x, a, b) {
    for (var i = y; i <= height; i++) {
      var mid = map(i, y, y+x, 0, 1);
      var c = lerpColor(a, b, mid);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+x, i);
	}
}

//creates a blinking sun
function makeSun() {
  for (var i = 0; i < 10; i++) {
    var number = random(7,10); //makes the opacity vary
    var transparency = 60 - number*i;
    fill (220, 200, 120, transparency);
    ellipse(width/2, height/2+60, 150+20*i, 150+20*i);
  }
	//the actual sun center circle
  noStroke();
  fill(220, 200, 120);
  ellipse(width/2, height/2+60,150,150);
}

//updates the clouds so they move and show
function updateCloud(){
  for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

//gets rid of clouds that pass the screen
function removeCloud(){
  var cloudsKeep = [];
  for (var i = 0; i < clouds.length; i++){
    if (clouds[i].x + clouds[i].breadth > 0){
      cloudsKeep.push(clouds[i]);
    }
  }
  clouds = cloudsKeep;
}

//adds clouds at a random interval, replacing the ones that are removed
function addCloud(){
  var newCloudPercent = 0.2;
  if (random(0,1) < newCloudPercent){
    var cloudX = width;
    var cloudY = random(height/1.2);
    clouds.push(makeClouds(width));
  }
}

//adds velocity to the clouds, making them move
function cloudMove(){
  this.x += this.speed;
}

//this is the things that make the cloud
function displayCloud(){
  var cloudHeight = 5;
  var cHeight = this.nCloud*cloudHeight;

  noStroke();
  fill(255, this.opaque);
  push();
  translate(this.x, height/1.15);
  ellipse(0, -cHeight, this.breadth, cHeight/1.5);
  pop();
  push();
  translate(this.x, height/1.15+40);
  ellipse(30, -cHeight, this.breadth, cHeight);
  pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
	var cloud = {x: cloudX,
				y: cloudY,
				breadth: random(50, 100),
				speed: -random(1, 3),
				nCloud: round(random(10,23)),
				opaque: random(80, 90),
				move: cloudMove,
				display: displayCloud}
	return cloud;
}

I started with a simple idea that an airplane was passing through in the skies. At first I imagined birds passing by, but quickly realized that birds don’t really exist that high up in the air. Therefore, I stuck with simple clouds that changed opacity and a sun that blinked in the sky. I created this sketch:

on illustrator and used that as the overlay that would envelope the moving clouds and blinking sun.

sijings-lookingoutwards-10

The Home Page of MINICADE | Chloe Varelidi is the Co-creator
The Home Page of Varelidi Website

This week, I was inspired by Chloe Varelidi and her project “MINICADE”. This project attracts me not only because of its being very interesting to play but also the ability to create our own games. In general, “MINICIADE” is a super easy way to collaboratively create a playlist of mini-games with participants’ friends. Each person can add a link to one or more mini-games to the playlist and instantly play them as one massive game. Mobile-friendly and 100% open-source. Participants also get a chance to learn code while we create the game. Personally, I always see this game as silly but really fun to play. And I think these games get to become really popular recently. However, sometimes I wished that I have an app to create these games myself, to create some tricks to my friends. I think Chloe Varelidi here provides this chance.

Some biography about Chloe Varelidi. Chloe Varelidi is a Game designer and illustrator who currently work at littleBits as a Sr. Product Design Strategist where she spends her days with the finest of humans designing new products that empower children to create inventions.

 

“Minicade” by Chloe Varelidi and Atul Varma  (the specific date was not found)

svitoora – 10 Hallow-Eve

Supawat’s Portrait

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Hallow-Eve: Recusively generate a forest of Sakura.
// Using a Lindenmayer system, each plant grows towards the sun.

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;


var w = 480;
var h = 480;
var x_create = w + 50;

// Global Variable
var PLANT;
var PLANTS = [];
var segment_l = h * .1;
var r = h * .05 * .5;
var common_ratio = .618033 //Golden Ratio
var food;

// Recursively generates a plant model
var max_i = 5; // Max iteration depth
var cur_i = 0;
var DRAW_i = 0; // DRAW's iteration depth

///// MODEL /////
// Creates the sun for plants to grow towards
function food_create(x = w / 2, y = -h * 2) {
	this.x = x;
	this.y = y;
}

// Creates plants node. Nodes that have .child are branches,
// and nodes without .child are leaves.
function create_plant_node(x, y) {
	this.x = x;
	this.y = y;
	this.x0 = this.x;
	this.y0 = this.y;
	this.child = [];
	this.x1 = null;
	this.y1 = null;
}

// Grows plant by making plant seek sunlight
function grow(plant, cur_i) {
	// Using the golden ratio, plant's branch size is a geometric sequence
	l = segment_l * (common_ratio ** (cur_i))
		// Randomly generate the next node via reducing
		// distance from plant ro sun
	do {
		angleMode(DEGREES);
		if (cur_i == 0) {
			angle = 5;
			theta = random(-90 - angle, -90 + angle);
		} else {
			theta = random(0, 360);
		}
		plant.x1 = plant.x0 + (l * cos(theta));
		plant.y1 = plant.y0 + (l * sin(theta));
		d_new = dist(plant.x1, plant.y1, food.x, food.y)
		d_old = dist(plant.x0, plant.y0, food.x, food.y)
	}
	// Keep generating until the new distance is less than the current one
	while (d_new > d_old)
	plant.child = [];
	// Randomly decide how many children(branches) a node should have
	for (var x = 0; x < random(1, 4); x++) {
		plant.child.push(new create_plant_node(plant.x1, plant.y1));
	}
}

// Recursively generates plant
function generate_plant(PLANT, cur_i, max_i) {
	// Break Base
	if (cur_i == max_i) {
		return
		// Continue case
	} else {
		grow(PLANT, cur_i);
		cur_i++;
		for (i in PLANT.child) {
			generate_plant(PLANT.child[i], cur_i, max_i)
		}
	}
}

///// DRAW /////
// Recursively draws plant
function draw_PLANT(plant, DRAW_i) {
	DRAW_i++; // Increases DRAW's Depth counter
	stroke(255 * .3)
	strokeCap(SQUARE);
	strokeWeight((h * .0125) * (common_ratio ** DRAW_i))
		// Break case: Flowers
		// If node has no children; draw leaf.


	// print(plant);
	if (plant.child == []) {
		fill(255, 255, 255);
		ellipse(plant.x, plant.y, (2 / 600) * w, (2 / 600) * w);
		return
	} // If node has chldren; draw branches
	else {
		r = r ** common_ratio;
		if (plant.child.length != 0) {
			for (i in plant.child) {
				line(plant.x, plant.y,
					plant.child[i].x, plant.child[i].y)
				draw_PLANT(plant.child[i], DRAW_i);
			}
		}
	}
}

///// SETUP /////
function setup() {
	createCanvas(w, h);
	background("#ff9900");
	food = new food_create();

	// Row Cols Controller
	num_tree = 3;
	num_row = 4;
	y_pos = 0;

	// Translates Row and Col of Trees
	// Rows
	y_pos = w * .75;

	PLANT = new create_plant_node(x_create, y_pos);
	generate_plant(PLANT, cur_i, max_i);
	PLANTS.push(PLANT);
}

// Recursively move each node of tree
function tree_move(tree) {
	D = -1;
	tree.x += D;
	tree.x0 += D;
	tree.x1 += D;

	// Break
	if (tree.child == []) {
		return
	} else {
		// Recurse
		for (i in tree.child) {
			tree_move(tree.child[i]);
		}
	}
}

// To reduce system overload
function kill_plant() {
	if (PLANTS.length > 5) {
		PLANTS.shift();
	}
}


var time = 1;
function draw() {
	time += 1
	background("#ff9900");
	kill_plant();

	// Represent and move trees
	for (index in PLANTS) {
		tree_move(PLANTS[index])
		draw_PLANT(PLANTS[index], DRAW_i);
	}
	
	// Create new tree every modulo time
	if (time % 160 == 0) {
		PLANT = new create_plant_node(x_create, y_pos);
		generate_plant(PLANT, cur_i, max_i);
		PLANT.time = time;
		PLANTS.push(PLANT);
	}
	// Draw Floor
	fill(255 * .3);
	rect(0, h * .75, w, h);
}

The most difficult part of this project was to get each node of the tree to move. Recursively creating the tree was easy because I had already done it before, but doing a DOF search for each node and moving it along was a challenge because it was hard to keep track of variables. I also didn’t expect recursive trees to be so computationally expensive to make, therefore I can only limit it to a few moving ones.

selinal-Project-10

sketch

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


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


function removeCactusThatHaveSlippedOutOfView(){
    // 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 cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


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


function removeCactusThatHaveSlippedOutOfView(){
    // 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 cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

//Selina Lee
//section C
//selinal@andrew.cmu.edu
//Project-10

var cactus = []; //tall cacti array w/ arms array
var smallCactus = []; //lower, short cacti w/o arms array


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 6; i++){ //there are a max of 6 objects in the array listed 
        var rx = random(width);  //randomized placement of cactus
        cactus[i] = makeCactus(rx); //creating cacti from position and read through cactus array
    }

    for(var i = 0; i < 8; i++) { //there is a max of 8 objects in listed array
    	var srx = random(width); //second varaiable for randomized placement
    	smallCactus[i] = makeSmallCactus(srx); 
    }
    frameRate(10); //slower frame rate 
}


function draw() {
    background(255, 70, 235); //purple background
    
    displayStatusString(); //displays text counting number of each object present in index
    displayHorizon(); //shows horizon line and subseding lines underneath

    updateAndDisplayCactus(); //updates position number of cactus depending on placement in array and time
    removeCactusThatHaveSlippedOutOfView(); //removes cactus out of view
    addNewCactusWithSomeRandomProbability();  //adds new object

    updateAndDisplaySmallCactus(); //same functions as bigger cactus but representation is different
    removeSmallCactusThatHaveSlippedOutOfView();
    addNewSmallCactusWithSomeRandomProbability(); 
}


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


function removeCactusThatHaveSlippedOutOfView(){
    // 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 cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) { //pushing objects into array of cacti to keep around based on present
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) { //random out of 100%
        cactus.push(makeCactus(width)); //pushing objects into array of cactus
    }
}


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

// draw the building and some windows
function cactusDisplay() {
    fill(150, 255, 100); //liget, bright green
    stroke(50, 200, 50); //darker green stroke
    strokeWeight(1); //normal weight for stroke
    push(); //translations only to this object
    translate(this.x, height - 40); //places cactus on horison line

    beginShape(); //curve to make cactus shape emerging from ground
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 

    for(var i = 0; i < this.nArmsLeft; i++) { //loop to place randomized number of arms on left side of cactus
        beginShape();
        curveVertex(this.breadth + 120, -i*30 - 10);
        curveVertex(this.breadth/2 - 10, -i*30 - 12);
        curveVertex(this.breadth/2 - 35, -i*40 - 50);
        curveVertex(this.breadth/2 - 15, -i*40 - 45);
        curveVertex(this.breadth/2 - 10, -i*30 - 17);
        curveVertex(this.breadth + 60, -i*30 - 15);
        endShape();
    }

    for(var i = 0; i < this.nArmsRight; i++) { //loop to place randomized number of arms on right side of cactus
        beginShape();
        curveVertex(this.breadth - 120, -i*30 - 10);
        curveVertex(this.breadth/2 + 10, -i*30 - 12);
        curveVertex(this.breadth/2 + 35, -i*40 - 50);
        curveVertex(this.breadth/2 + 15, -i*40 - 45);
        curveVertex(this.breadth/2 + 10, -i*30 - 17);
        curveVertex(this.breadth - 60, -i*30 - 15);
        endShape();
    }

    pop(); //end of translated parts
}


function makeCactus(birthLocationX) { //make a cactus at given location
    var cact = {x: birthLocationX,
                breadth: random(20, 50), //width of cactus
                speed: -1.0, 
                cHeight: random(100, 200), //height of cactus
                nArmsLeft: round(random(0,5)), // number of arms to display on left
                nArmsRight: round(random(0,5)), // number of arms on right
                move: cactusMove, //function to move cactus
                display: cactusDisplay} //fucntion to draw cactus
    return cact;
}

function updateAndDisplaySmallCactus(){ //same as for updateAndDisplayCactus but for smaller cactus
    // Update the building's positions, and display them.
    for (var i = 0; i < smallCactus.length; i++){
        smallCactus[i].move();
        smallCactus[i].display();
    }
}


function removeSmallCactusThatHaveSlippedOutOfView(){ //similar as above 
    var smallCactusToKeep = [];
    for (var i = 0; i < smallCactus.length; i++){
        if (smallCactus[i].x + smallCactus[i].breadth > 0) {
            smallCactusToKeep.push(smallCactus[i]);
        }
    }
    smallCactus = smallCactusToKeep; // remember the surviving buildings
}


function addNewSmallCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSmallCactusLikelihood = 0.007;  //small cactus array has likelihood of showing up
    if (random(0,1) < newSmallCactusLikelihood) {
        smallCactus.push(makeSmallCactus(width));
    }
}


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



function smallCactusDisplay() {
	fill(130, 240, 120);  //darker, more muted green
    stroke(50, 210, 90); //darker outline
    strokeWeight(1);
    push();
    translate(this.x, height - 20); //translates to second horizon line that is lighter than the first

    beginShape(); //creates shorter tube shape of cactus emergying from ground 
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(this.breadth/2 - 10, 0);
    curveVertex(0, -this.cHeight);
    curveVertex(this.breadth, -this.cHeight);
    curveVertex(this.breadth/2 + 10, 0);
    curveVertex(this.breadth/2 + 10, 0);
    endShape(); 
    pop();

}

function makeSmallCactus(birthLocationX) {
	var sCact = {x: birthLocationX,
                breadth: random(20, 50), //similar width as cactus
                speed: -1.0,
                cHeight: random(20, 80), //shorter height
                move: smallCactusMove,
                display: smallCactusDisplay}
    return sCact;

}


function displayHorizon(){
    stroke(255, 210, 80); //orange
    strokeWeight(20); //thick line
    line (0,height-50, width, height-50); //first opaque line
    stroke(255, 210, 80, 200);
    line(0, height-30, width, height-30); //second transparent line
    stroke(255, 210, 80, 140);
    line(0, height-10, width, height-10); //third, bottom-most translucent line
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Cactus = " + cactus.length; //text to display along with data available in arrays
    var secondString = "# Small Cactus = " + smallCactus.length;
    text(statusString, 5,20);  //place to display text 
    text(secondString, 5, 35);
}

My process for this project was based on a previous drawing I have done with cacti. To me, these are significant structures because they exist in some isolation from each other by their spread and spacing in the desert, away from clusters of other living organisms, so their visual existence is very extraordinary. To create the cacti in p5, I started with creating a curve shape as the base of the cactus. Then, I randomized the number of arms present on the cactus’s body, where I had to play around with trial and error in creating a curve shape which looked like a cactus arm, but also that was attached to the cactus’s main body. I then, played with creating other objects like the smaller, darker cactus and its visual randomization and its positioning on the second horizon line lower than the first, larger, lighter cactus which was on the first horizon line.

thlai-LookingOutwards-10

An interfaith mandala DIMONscape® based on the crucifixion
Roz Dimon
Now that it was brought to my attention, most or all of my looking outwards for the past 10 weeks have been about men creators, so it’s a breath of fresh air to focus on something different. Roz Dimon is a digital artist based in NYC – her work has a very unique style that I like, which is why it drew my eye.
Dimon works in a collage style for a lot of her projects, which result in multilayered images and textures composed in a single image. As a communication designer, I find her work engaging and exciting. One of her most recent works is still on exhibition now until November 18th in Connecticut – the exhibition aims to bring together her works that embody multiculturalism and inter-religious unity. I not only like the pieces in this exhibition (which include the works of several artists, Dimon being one of them), but also the message of highlighting the aspects of humanity that unite us rather than divide us. I’ve included an image of Dimon’s piece that is exhibited. It has the same collage-y feel of her other works, although I wish she didn’t write the words “peace, love, justice”. I just don’t think it’s necessary in the context of the piece.

danakim-Project-10

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-10

var moons = [];
var Terrain = [];
var terrainSpeed = 0.0003;
var terrainDetail = 0.001;

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

  //initial moons
  for(var i = 0; i < 5; i++){
    var rx = random(width);
    moons[i] = new Moons (rx);
  }
  frameRate(10);
}

function draw() {
  background(243, 178, 156);

  updateAndDisplayMoons();
  removeMoons();
  newMoons();
  citySkyLine();
  Smog();
}

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

function removeMoons(){
  for(var i = 0; i < moons.length; i++){
    if(moons[i].x < 0-moons[i].breadth){
      moons.splice(i, 1);
    }
  }
}

function newMoons(){
  var newMoonLikelihood = 0.007;
  colorList = [255, 150, 180];
  colorNum = int(random(0.5, 2.5));
  if(random(0,1) < newMoonLikelihood){
    moons.push(new Moons ( width, colorList[colorNum]));
  }
}

function Moons(birthLocationX, color){
  this.x = birthLocationX;
  this.y = random(50, 250);
  this.breadth = 50;
  this.speed = -1.0;
  this.move = function(){
    this.x += this.speed;
  }
  this.display = function(){
    push();
    fill(random(69, 126), 0, random(115, 213));
    ellipse(this.x, this.y, this.breadth, this.breadth);
    pop();
  }
}

function citySkyLine(){
  fill(189, 142, 138);
  beginShape();
  for( var x = 0; x < width; x++){
    var t = (x * 0.001) + (millis() / 0.0001);
    var y = map(noise(t), 0, 1, 0, height);
    vertex(x,y+100);
  }
  endShape();

}

function Smog(){
  fill(149, 121, 117);
  beginShape();
  for( var x = 0; x < width; x++){
    var t = (x * 0.0005) + (millis() * terrainSpeed);
    var y = map(noise(t), 0, 1, 0, height);
    vertex(x,y);
  }
  endShape();

}

This is an abstracted version of what I had intended on making initially. I was fooling around with the code and I happened to like what I got from that and stuck with it. It still conveys my initial idea of a city skyline with smog and multiple “moons.”

merlebac-Looking Outward-10

A gameplay still of “The Game: The Game”
An extremely disturbing image of “The Game: The Game”

A project that I thought was incredibly admirable was Angela Washko’s video game The Game: The Game. The title refers to a common phrase in the self proclaimed “seduction community.” For context, the members of the seduction community, to put it bluntly, aim to have sex with as many women as humanly possible and treat them like trash (this is unfortunately an accurate description). The Game: The Game is a point and click game where you play as a single female. The purpose of the goal is to see if you can distinguish average normal guys from members of the seduction community. I personally think that it is good that she is shedding light on this heinous group, and spreading social awareness. I wasn’t able to find that much information on her background. It was difficult for me to find information on her background. She graduated from from Temple University with a Bachelor of Fine Arts, and received a masters of fine arts at the University of California. Additionally, she won the Terminal Award for her video “Chastity,” and has had her art featured in several exhibits. Angela has worked on several other projects which fight for gender acceptance and women’s rights (Wikipedia, sect. 1-6).

Link to Angela’s Vimeo

Link to Angel’s main page on The Game: The Game

Sources Used:

  • “Angela Washko.” ANGELA WASHKO, angelawashko.com/home.html.
  • “Angela Washko.” Wikipedia, Wikimedia Foundation, 1 Nov. 2017, en.wikipedia.org/wiki/Angela_Washko.
  • “The Game: The Game.” ANGELA WASHKO, angelawashko.com/section/437138-The-Game-The-Game.html.
  • Washko, Angela. “Angela Washko.” Vimeo, Angela Washko, vimeo.com/angelawashko.

Sheenu-Looking Outwards-10

The artist I chose to talk about is Heather Kelly. Heather Kelly is a game designer, curator, and digital artist who is considered the “Five most powerful women in gaming” and “technology” according to Inc. magazine and Fast Company. As a curator, she co-curated “Joue le jeu / Play Along at La Gaîté lyrique” in Paris, a groundbreaking exhibition, and curated the GAMMA event, a renowned event that promotes experimental videogames as creative expression. As a game designer, she created numerous projects such as “Fabulous/Fabuleux”, a game installation that  can be controlled with your full body. Another game she worked on is called “Hyper Cube”, a VR puzzler pong game that takes the original game to a whole new level. In a technological field where it consists of people who are mostly men, Heather Kelly will be one of the most influential people that will make the technological field more gender diverse.

SUPERHYPERCUBE

 

Bettina-Project10-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 10

var buildings = []; //the big icebergs
var sparkles = []; //yellow sparkles on bottom

function setup() {
    createCanvas(309, 480);
    frameRate(10);
    
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    
    for (var h = 0; h < 5; h ++) {
        var rz = random(width);
        sparkles[h] = makeSparkle(rz);
    }
}   
 


function draw() {
    background("#364442");
    noStroke();
    fill("#5e7d6f");
    rect(0,135,width,346);

    drawBoat();
   
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    
    updateAndDisplaySparkles();
    removeSparklesThatHaveSlippedOutOfView();
    addNewSparklesWithSomeRandomProbability();
    
}

//draw and update position of boat
var boatX = 125;
var boatY = 137;
var boatSpeed = 3

function drawBoat() {
    fill("#141916")
    stroke(2);
    beginShape(); //boat body
    vertex(boatX,boatY);
    vertex(boatX+9,boatY-11);
    vertex(boatX-16,boatY-11);
    vertex(boatX-16,boatY-58);
    vertex(boatX-18,boatY-58);
    vertex(boatX-18,boatY-11);
    vertex(boatX-42,boatY-11);
    vertex(boatX-34,boatY);
    endShape();
    fill("#d5d9b8");
    noStroke();
    beginShape(); //right boat sails
    vertex(boatX-14,boatY-17);
    vertex(boatX-14,boatY-59);
    vertex(boatX+14,boatY-17);
    endShape();
    beginShape(); //left boat sails
    vertex(boatX-20,boatY-17);
    vertex(boatX-37,boatY-17);
    vertex(boatX-20,boatY-47);
    endShape();
    boatX += boatSpeed; //makes boat move left and right across canvas
    if (boatX >=width) {
        boatSpeed *= -1;
    }
    else if (boatX <= 0) {
        boatSpeed *= -1;
    }
}


//Below: set of functions that create the big icebergs
function updateAndDisplayBuildings(){
    // Update the iceberg's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = []; //says building because using code template
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth +30 > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving icebergs
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.009; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of an iceberg every frame
function buildingMove() {
    this.x -= this.speed;
}
    

// draw the icebergs
function buildingDisplay() {
    fill("#a4bcad"); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    beginShape(); //draws iceberg shape using vetices
    vertex(this.x,this.y);
    vertex(this.x-69,this.y+93);
    vertex(this.x-143,this.y+105);
    vertex(this.x-193,this.y+31);
    vertex(this.x-179,this.y-114);
    vertex(this.x-139,this.y-229);
    vertex(this.x-120,this.y-213);
    vertex(this.x-93,this.y-120);
    endShape();
    pop();
}


function makeBuilding(birthLocationX) { //creates iceberg objects to store in array
    var bldg = {x: birthLocationX,
                y: 150,
                breadth: random(60,90),
                speed: 1,
                sparklespeed: random(0.5,1),
                nFloors: round(random(1,1.5)),
                move: buildingMove,
                display: buildingDisplay
               }
    return bldg;
}





//Below: set of functions that generate the yellow sparkles
function updateAndDisplaySparkles(){
    for (var i = 0; i < sparkles.length; i++){
        sparkles[i].move();
        sparkles[i].display();
    }
}


function removeSparklesThatHaveSlippedOutOfView(){
    var sparklesToKeep = [];
    for (var i = 0; i < sparkles.length; i++){
        if (sparkles[i].x + sparkles[i].breadth +30 > 0) {
            sparklesToKeep.push(sparkles[i]);
        }
    }
    sparkles = sparklesToKeep;
}


function addNewSparklesWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSparkleLikelihood = 0.1; 
    if (random(0,1) < newSparkleLikelihood) {
        sparkles.push(makeSparkle(width));
    }
}



function sparkleMove() {
    this.x -= this.speed;
}
    


function sparkleDisplay() { 
    push();
    fill("#ffce71");
    translate(this.x+100, random(30) + this.y);
    ellipse(0, 0, 10);
    pop();
}


function makeSparkle(birthLocationX) {
    var sparkle = {x: birthLocationX,
                y: random(400,420),
                breadth: random(60,90),
                speed: random(2,3),
                transparency: random(100,200),
                move: sparkleMove,
                display: sparkleDisplay
               }
    return sparkle;
}

This project was challenging for me to understand because I’ve never worked with this many helper functions before. It took a while for me to unpack the template code and understand what does what, so I’m happy I finally understand.

First, in setup we fill the array with objects. We make the objects in a separate function; that is the make[name] function. The function that draws the images is the [name]display function. At the same time, the move function is running and since the array with the objects is a global variable, we don’t need to pass the objects between the move and display functions. Finally we have the remove and add functions, which constantly scan the “x” methods of each object in the arrays to remove items that have fallen off the screen and push new objects into the array.

Above: Sketch I drew in Adobe Illustrator prior to implementing in p5

mecha-project10-landscape

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-10

var clouds = [];
var birdStrings = [];
var birdImgs = [];
var birds = [];
var birdTalk = ["hello", "hey", "hi", "howdy", "help me", "i love bread", "thank you", "good bye", "hm"];

//preloads all illustrator bird files locally
function preload() {
    birdStrings[0] = "https://i.imgur.com/LMwUiTl.png";
    birdStrings[1] = "https://i.imgur.com/2DClEHo.png";
    birdStrings[2] = "https://i.imgur.com/LoaUSI2.png";
    birdStrings[3] = "https://i.imgur.com/yMJKBYw.png";
    birdStrings[4] = "https://i.imgur.com/jF6usAy.png";
    birdStrings[5] = "https://i.imgur.com/GPZ41QC.png";
    birdStrings[6] = "https://i.imgur.com/15jvGyQ.png";
    birdStrings[7] = "https://i.imgur.com/XcxgSGA.png";

    for (var b = 0; b < 8; b++) {
        birdImgs[b] = loadImage(birdStrings[b]);
    }
}

//creates canvas initialized with birds, clouds
function setup() {
    createCanvas(480, 360);

    //initializes three birds at set x location
    birds[0] = birdPicture(50);
    birds[1] = birdPicture(200);
    birds[2] = birdPicture(400);
    
    clouds[0] = cloudPicture(60);
    clouds[1] = cloudPicture(290);
}

function draw() {
    //sets background to be dark blue of bird
    background(81,81,122);

    //calls function that draws mountains
    mountains();
  
    //draws clouds behind first mountain    
    updateClouds();
    addNewClouds();
    
    mountains2();
    
    //draws horizon line
    noStroke();
    fill(250, 240, 240);
    rect(0, 290, width, height);
    
    //draws birds
    updateBirds();
    addNewBirds();
}

function updateClouds(){
    //change the x location of each cloud
    for(var i = 0; i < clouds.length; i++){
        clouds[i].cmove();
        clouds[i].cdraw();
    }
}

function addNewClouds(){
    //adds new clouds with same probability of a number drawn between 0 and 1.2 being less than 0.003
    var probability = 0.003;
    if(random(0,1.2) < probability) {
        clouds.push(cloudPicture(width));
    }
}

function cloudPicture(cloudX){
    var cloudPicture = {
        cx: cloudX,
        cy: random(40,140),
        velo: 0.4,
        cmove: cloudMove,
        cdraw: drawCloud,
        cwidth: random(60,130),
        cheight: random(20,30)
    }
    return cloudPicture;
}

function cloudMove() {
    this.cx -= this.velo;
}

function drawCloud(){
    noStroke();
    fill(255);
    rect(this.cx, this.cy, this.cwidth, this.cheight,30);
    rect(this.cx + this.cwidth-(this.cwidth/1.2), this.cy-this.cheight+(this.cheight/2), this.cwidth/2, this.cheight,30);
}

function updateBirds() {
    //change the x location of each of the birds
    for (var i = 0; i < birds.length; i++) {
        birds[i].bmove();
        birds[i].bdraw();
    }
}

function addNewBirds() {
    //adds new birds with same probability of a number drawn between 0 and 1.2 being less than 0.004
    var probability = 0.004;
    if (random(0, 1.2) < probability) {
        birds.push(birdPicture(width));
    }
}

function birdPicture(startX) {
    var birdPicture = {
        x: startX,
        vel: 1,
        type: floor(random(0, 7)),
        bmove: birdMove,
        bdraw: drawBird,
        speak: bTalk(),
        talkProbability: tP()
    }
    return birdPicture;
}

//coin toss equivalent
function tP() {
    var talkProb = false;
    if (random(0, 1) > 0.8) {
        return true;
    }
    return talkProb;
}

//adds velocity to x to make birds scroll horizontally
function birdMove() {
    this.x -= this.vel;
}

function drawBird() {
    //if bird is shorter, draw lower on page
    if (this.type == 0 || this.type == 1 || this.type == 4 || this.type == 5) {
        image(birdImgs[this.type], this.x, 213);

        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x + 20, 193)
        }


    }
    
    //if bird is taller, draw higher on page
    else {
        image(birdImgs[this.type], this.x - 30, 180);
        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x, 160);

        }

    }

}

//returns strings in birdTalk array
function bTalk() {
    return birdTalk[int(random(birdTalk.length))];
}

function mountains() {
    var terrainSpeed = 0.0002;
    var terrainDetail = 0.005;
    push();
    beginShape();
    noStroke();
    fill(190, 160, 180);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y - 90);

    }
    vertex(width, height);
    endShape();
    pop();

}

function mountains2() {
    var terrainSpeed = 0.0004;
    var terrainDetail = 0.003;
    push();
    beginShape();
    noStroke();
    fill(140,120,150);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y-40);

    }
    vertex(width, height);
    endShape();
    pop();

}

For this project, I decided to do a landscape with birds, as I had done a lot of projects with birds previously.

Rather than create the birds through coding, I decided to use illustrator in order to create vectors that I could implement in the code. In order to do this, I ran a preload function that populated an array with my images uploaded to imgur.

I created two objects–birds and clouds–and populated arrays with them in order to have them appear in my environment.