monicah1-lookingoutward-10-SectionA

Social Soul by Lauren McCarthy , Kyle McDonald and MKG 2014

Lauren McCarthy is an artist focus on social and techonolgy. Kyle McDonald is an artist focus on code. MKG is a creative agency specialize in branding.

Social Soul was an immersive digital experience created for Delta Airlines at TED 2014 and was inspired by the question “how does it feel to be inside someone else’s social media stream?”. It’s an space and media projection experience of one’s twitter streams in 360 degree surrounding mirror, monitor, and sound space.

I am intrigued by the unexpected approach on presenting social media physically larger than human scale. People use social media so often daily on their phones and computers, which are always on screens that are smaller than human scale. The scale difference makes people feel the autonomy over social media. Standing in the Social Soul space, I imagining myself feeling overwhelmed. It gives people the sense of they have no control of the endlessly replicants of informations and time. The experience is a metaphor of how powerful social media can be. The mirror is the physical metaphor of replicating information infinitely.

http://lauren-mccarthy.com/Social-Soul

 

 

jwchou-Project10-GenerativeLandscape

I did not understand how to go about doing this project/had no time this week, so I just created something by modifying the template. I thought it would be better to at least post something rather than nothing. it doesn’t quite work, but it’s what I have.

 

sketch

sketch 90

var planes = [];


function setup() {
    createCanvas(480, 300); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        planes[i] = makePlane(rx);
    }
    frameRate(8);
}


function draw() {
    background(20, 51, 137); 
    
    updateAndDisplayPlanes();
    addNewPlanesWithSomeRandomProbability(); 
}


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

function removePlanesThatHaveSlippedOutOfView(){
    // 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 PlanesToKeep = [];
    for (var i = 0; i < planes.length; i++){
        if (planes[i].x + planes[i].breadth > 0) {
            planesToKeep.push(planes[i]);
        }
    }
    planes = planesToKeep; // remember the surviving buildings
}


function addNewPlanesWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newPlaneLikelihood = 0.01; 
    if (random(0,1) < newPlaneLikelihood) {
        planes.push(makePlane(width));
    }
}


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

// draw the building and some windows
function planeDisplay() {
    var R = random(100, 200);
    var G = random(100, 200);
    var B = random(100, 200);
    var planeHeight = random(100, 300)
   // var bHeight = this.nFloors * floorHeight; 
    fill(R, G, B); 
    noStroke(0); 
    push();
    translate(this.x, height - planeHeight);
   // rotate(HALF_PI);
    fill(R, G, B);
    beginShape();
    for (var a = 0; a < TWO_PI; a += TWO_PI/5) {
    var sx = 0 + cos(a) * 6;
    var sy = 0 + sin(a) * 6;
    vertex(sx, sy);
    sx = 0 + cos(a + TWO_PI/10) * 14;
    sy = 0 + sin(a + TWO_PI/10) * 14;
    vertex(sx, sy);
  }
  endShape(CLOSE);
   // triangle(40, 40, 45, 50, 50, 40);
    }    

    /*ellipse(40, 40, 70, 11); //wings
    ellipse( 40, 20, 35, 8); //horz stabilizer
    fill(R, G, B);
    ellipse( 40, 40, 17, 45); //fuselage
    ellipse( 57,  45, 6, 15); //left engine
    ellipse( 23, 45, 6, 15); //right engine
    fill(0);
    ellipse( 23, 50, 10, 2); //right propeler
    ellipse( 57, 50, 10, 2); //left propeller
    fill(190);
    ellipse( 40, 15, 5, 17); //tail
    fill(0);
    beginShape(); //cockpit
    vertex(35, 50);
    vertex( 40, 57);
    vertex(45,  50);
    vertex(45,  45);
    vertex( 40,  50);
    vertex( 35,  45);
    vertex( 35, 50);
    endShape();
    pop();*/



function makePlane(birthLocationX) {
    var plane = {x: birthLocationX,
                breadth: 50,
                speed: -2.0,
                move: planeMove,
                display: planeDisplay}
    return plane;
}

hannahk2-Project-10

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-10

var gemboy; 
var terrainSpeed = 0.0075;
var terrainDetail = 0.06;
var gemY;

//preload image of spaceship
function preload(){
	gemboy = loadImage("https://i.imgur.com/OBAJ0Kb.png");
}

function setup() {
    createCanvas(480, 400); 
    frameRate(10);
}

function draw() {
	background(0);

    //background layer 1 farthest layer back
    //uses noise to create randomized terrain
    push();
    beginShape(); 
    fill(1, 100, 167, 100);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/20) + (millis() * terrainSpeed/20);
        var y = map(noise(t), 0, 1, height/10, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //bg layer 2
    push();
    beginShape(); 
    fill(1, 83, 130);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/5) + (millis() * terrainSpeed/2);
        var y = map(noise(t), 0, 1, height/5, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //bg layer 3
    push();
    beginShape(); 
    fill(250, 230, 162);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/50) + (millis() * terrainSpeed/2);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

	image(gemboy, 100, 60, 280, 300);

    //closest layer
    push();
    beginShape(); 
    fill(25, 176, 186);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail*1.5) + (millis() * terrainSpeed*20);
        var y = map(noise(t), 0, 1, height-200, height*1.2);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //calling stars to be drawn
    makeStar();
}

//function to create star object with randomized opacity
//and randomized size
function makeStar() {
  var starX = random(5, width); 
  var starY = random(5, 200);
  var starW = random(2, 5);

  noStroke();
  fill(255, random(10, 255)); 
  ellipse(starX, starY, starW, starW);
}

I wanted to create a cave landscape of a character in a gem spaceship. This was a very frustrating project for me as manipulating the different terrains and their speeds, heights, etc. was confusing. I did, however, have fun creating the drawing of the spaceship and choosing the colors. The object that I chose to include in my landscape was randomized stars. I wish I had more time so I could really create a more complex landscape with more objects, that I was happy with.

above is an image of my drawing.

rgroves – Landscape – Section B

sketch

//Rebecca Groves
//Section B
//rgroves@andrew.cmu.edu
//Landscape

var middlecacti = [];
var foregroundcacti = [];
var shrubs = [];
var buttes = [];

var MiddlegroundSpeed = .0003;
var MiddlegroundDetail = .004;
var ForegroundSpeed = .0005;
var ForegroundDetail = .005;

var middleTerrain = [];
var foregroundTerrain = [];

function setup() {
    createCanvas(480, 250);
    //pregenerated vegetation
    for (var i = 0; i < 4; i++) {
		buttes[i] = makeButte(random(width));
	}
	for (var i = 0; i < 5; i++) {
		middlecacti[i] = makeCactus(floor(random(width))); 
	}
	for (var i = 0; i < 3; i++) {
		foregroundcacti[i] = makeCactus(floor(random(width))); 
	}
	for (var i = 0; i < 100; i++) {
		shrubs[i] = makeShrub(random(width));
	}

}

//LANDSCAPES

function drawForeground() {
	noStroke();
	fill(223, 194, 140);
	beginShape();
	for (var x = 0; x <= width; x++) {
		var t = (x * ForegroundDetail) + (millis() * ForegroundSpeed);
		var y = map(noise(t), 0, 1, 2 * height/3, height);
		vertex(x,y);
		foregroundTerrain[x] = y;

	} 
	vertex(width, height);
	vertex(0, height);
	endShape();
	if (random(0, 1) < .003) {
		foregroundcacti.push(makeCactus(width))
	}
	for (var i = 0; i < foregroundcacti.length; i++) {
		foregroundcacti[i].move();
		foregroundcacti[i].foregrounddraw();
	}
}

function drawMiddleground() {
	noStroke();
	fill(210, 170, 100);
	beginShape();
	for (var x = 0; x <= width; x++) {
		var t = (x * MiddlegroundDetail) + (millis() * MiddlegroundSpeed);
		var y = map(noise(t), 0, 1, height/2, height);
		vertex(x,y);
		middleTerrain[x] = y;
	} 
	vertex(width, height);
	vertex(0, height);
	endShape();
	if (random(0, 1) < .005) {
		middlecacti.push(makeCactus(width))
	}
	for (var i = 0; i < middlecacti.length; i++) {
		middlecacti[i].move();
		middlecacti[i].middledraw();
	}
}

function drawBackground() {
	fill(230, 190, 90);
	noStroke();
	rect(0, 2 * height/3, width, height/3);

	if (random(0, 1) < .01) {
		buttes.push(makeButte(width))
	}
	for (var i = 0; i < buttes.length; i++) {
		buttes[i].move();
		buttes[i].draw();
	}
	if (random(0, 1) < .5) {
		shrubs.push(makeShrub(width))
	}
	for (var i = 0; i < shrubs.length; i++) {
		shrubs[i].move();
		shrubs[i].draw();
	}
}

//REMOVE UNUSED OBJECTS

function removeButtes() {
	var buttesToKeep = [];
	for (var i = 0; i < buttes.length; i++) {
		if (buttes[i].x + buttes[i].breadth > 0)
			buttesToKeep.push(buildings[i]);

	}
	buttes = buttesToKeep;
}

function removemiddleCacti() {
	var middlecactiToKeep = [];
	for (var i = 0; i < middlecacti.length; i++) {
		if (middlecacti[i].x > 0)
			middlecactiToKeep.push(middlecacti[i]);

	}
	middlecacti = middlecactiToKeep;
}

function removeforegroundCacti() {
	var foregroundcactiToKeep = [];
	for (var i = 0; i < foregroundcacti.length; i++) {
		if (foregroundcacti[i].x > 0)
			foregroundcactiToKeep.push(foregroundcacti[i]);

	}
	foregroundcacti = foregroundcactiToKeep;

}

//BUTTES

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

function drawButte() {
	beginShape();
	vertex(this.x + this.breadth, 2 * height/3);
	vertex(this.x + this.breadth, 2 * height/3);
	vertex(this.x + this.breadth - 10, (2 * height/3) - this.tall);
	vertex(this.x + 10, (2 * height/3) - this.tall);
	vertex(this.x, 2 * height/3);
	endShape();
	
}

function makeButte(birthlocationX) {
	var butte = {x: birthlocationX,
				breadth: random(40, 150),
				tall: random(10, 30),
				speed: -1,
				move: butteMove,
				draw: drawButte}
	return butte;
}

//VEGETATION

function cactusMove() {
	this.x -= 1;
}

function drawmiddleCactus() {
	strokeWeight(10);
	stroke('green');
	line(this.x, middleTerrain[this.x], this.x, middleTerrain[this.x] - this.height);
	for (i = 0; i < this.limbs; i++) {
		if (i%2 == 0) {	
			line(this.x - 10, middleTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, middleTerrain[this.x] - this.height/(1.25 * i));
		} else {
			line(this.x + 10, middleTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, middleTerrain[this.x] - this.height/(1.25 * i));

		}
	}
	noStroke();
	if (this.flowercolor < .3) {
		fill(236, 96, 160);
	} else if (this.flowercolor > .3 & this.flowercolor < .6) {
		fill(255, 255, 0);
	} else {
		noFill();
	}
	push();
	translate(this.x, middleTerrain[this.x] - this.height);
	rotate(-90);
	for (i = 0; i < 3; i++) {
		angleMode(DEGREES);
		var angle = 45;
		rotate(angle);
		angle += 45 * i;
		ellipse(0, -5, -7, 15);
	}
	pop();
	

}

function drawforegroundCactus() {
	strokeWeight(10);
	stroke('green');
	line(this.x, foregroundTerrain[this.x], this.x, foregroundTerrain[this.x] - this.height);
	for (i = 0; i < this.limbs; i++) {
		if (i%2 == 0) {	
			line(this.x - 10, foregroundTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, foregroundTerrain[this.x] - this.height/(1.25 * i));
		} else {
			line(this.x + 10, foregroundTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, foregroundTerrain[this.x] - this.height/(1.25 * i));
		}
	}
	noStroke();
	if (this.flowercolor < .3) {
		fill(236, 96, 160);
	} else if (this.flowercolor > .3 & this.flowercolor < .6) {
		fill(255, 255, 0);
	} else {
		noFill();
	}
	push();
	translate(this.x, foregroundTerrain[this.x] - this.height);
	rotate(-90);
	for (i = 0; i < 3; i++) {
		angleMode(DEGREES);
		var angle = 45;
		rotate(angle);
		angle += 45 * i;
		ellipse(0, -5, -7, 15);
	}
	pop();
}

function makeCactus(locationX) {
	var cactus = {x: locationX,
				height: random(20, 70),
				limbs: floor(random(1, 4)),
				middledraw: drawmiddleCactus,
				foregrounddraw: drawforegroundCactus,
				move: cactusMove,
				flowercolor: random(0, 1)}
	return cactus;
}

function shrubMove() {
	this.x += this.speed
}

function drawShrub() {
	fill(50, 100, 100);
	ellipse(this.x, this.y, 3, 3);
}

function makeShrub(locationX) {
	var shrub = {x: locationX, y: random(2 * height/3, height),
				speed: -1,
				draw: drawShrub,
				move: shrubMove}
	return shrub;
}

function draw() {
    background("skyblue");
    drawBackground();
    drawMiddleground();
	drawForeground();

}

For my landscape I was inspired by driving through New Mexico this summer. Unfortunately I could not figure out how make the cacti move at the same speed as the landscape. I borrowed the code for the landscape from the class website and I think maybe if I understood how that worked a little better I might have been able to make the speeds match. I will keep thinking about it. Other than that, I thought this project went pretty well. I’m glad I was finally able to figure out objects, even at a pretty basic level. I still find them confusing but I can use them!

hdw – Project 10 – Landscape

sketch

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}


function draw(){
  background(0, 29, 76);

//draw sun
  sun();

//draw landscape
    noStroke()
    fill(44, 0, 206);
    beginShape();
    for (var x = 0; x < width; x++) {
      var u = x * terrainDetail + millis() * terrainSpeed;
      //restrict map to bounded range
      var y = map(noise(u), 0,1, 110, height/2);
      //bring waves up
      vertex(x,y+100);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

//draw the lines in the front of the landscape
    for (var k = 0; k < 30; k++){
    stroke(255);
    beginShape();
    for (var x = 0; x <width*5; x++) {
      var u = x * terrainDetail + millis() * terrainSpeed;
      var y = map(noise(u), 0,1, 110, height/2);
      //make lines start left of each other, y modified to start beyond canvas
      vertex(x-5*k,y+100+5*k);
    }
    vertex(width*5,height);
    vertex(0,height);
    endShape();
}
}

//draw sun
function sun() {
  fill(255, 59, 0);
  ellipse(240,290,400,400);
  //white circle outlines
  for (var j = 0; j < 36; j++){
  noFill();
  stroke(255);
  strokeWeight(1);
  ellipse(240,290,400 + 10*j,400 + 10*j);
  }
}

This was kinda hard so I kept it simple. I have an object sun in the back, and layered the foreground to create a sense of depth, instead of doing so with different colors.

HaeWanPark-LookingOutwards-10

Changing Waters by Nathalie Miebach

Nathalie Miebach is a women data artist who is usually working with weather data with interdisciplinary execution. She incorporates data, science, visualization, and music. She visually articulates weather data into complex weaved sculptures. Then, she makes these sculptures into musical scores. Changing Water is a series of sculpture that visualizes seasonal variation in marine life based on the data about meteorological and oceanic interactions within the Gulf of Maine. She gathered these data from weather stations along the coast and buoys within the Gulf of Maine. Information about geographical location and relationship between ecosystem and weather are plotted on all the installations. I admire her because she combined multiple disciplines in translating data. Incorporation of the data, scientific knowledge, sculpture, and music composing is very unique.

Changing Waters

rmanagad-project10

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-10


var mountain = [];
var mountainLinks = [
	"https://i.imgur.com/U4n2NMc.png",
	"https://i.imgur.com/OwkMkiT.png"]
var mountainAssets = [];

var tree = [];
var treeLinks = [
	"https://i.imgur.com/4b5pxqM.png",
	"https://i.imgur.com/1YjM5m7.png",
	"https://i.imgur.com/7sXiAyN.png"]
var treeAssets = [];

function preload() { //made assets in Adobe Illustrator to transfer over.

	//mountainloop
	for (var i = 0; i < mountainLinks.length; i++) {
		mountainAssets[i] = loadImage(mountainLinks[i]);
	}
	for (var i = 0; i < treeLinks.length; i++) {
		treeAssets[i] = loadImage(treeLinks[i]);
	}
} 

function setup() {
    createCanvas(480, 240); 
    frameRate(60);
    mountain[0] = mountainComponents(200);

    tree[0] = treeComponents(150);

}


function draw() {
    background(255); 

    //actual background
    stroke(0);
    fill(51, 46, 42);
    rect(0,0, width, height);

    //draw mountains
   	newMountains();
   	randomizeMountains();


   	//draws hills in the background
   	drawHills();

   	//drawing the ground
   	noStroke();
   	fill(238);
   	rect(0, 170, width, 70);

   	//setting mountains in an initial location.
    
    //draws bushes
   	newTrees();
   	randomizeTrees();


}

/////////////////////////////////

function drawHills(){ //midground hills for introduction of color.
	var terrainSpeed = 0.0006;
    var terrainDetail = 0.005;

    push();
    beginShape();
    noStroke();
    fill(186, 219, 217);
    vertex(0, 300);
    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 - 10);

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



///////////////////// TREES

function newTrees() {
	//keeps the trees moving along the x-axis
	for (var i = 0; i < tree.length; i++) {
		tree[i].tMove();
		tree[i].tPlace();
	}
}

function treePlace() { //draws the trees
	image(treeAssets[this.nFloor], this.x, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	image(treeAssets[this.nFloor], this.x+300, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	fill(255);
}

function treeMove() {
	this.x -= this.speed
}

function randomizeTrees() {
	var chance = 0.002 //places in more trees into the array.
	if (random(0, 1) < chance) {
		tree.push(treeComponents(width));
	}
}

function treeComponents(originX) {
	var treeComponents = {
		x: originX,
		y: random(135, 140),
		cwidth: random(30, 50),
		cheight: random(30, 50),
		speed: 1,
		nFloor: floor(random(0,3)),
		tMove: treeMove,
		tPlace: treePlace
	}
	return treeComponents;
}

///////////// MOUNTAINS 

function newMountains() {
	//keeps the mountains moving along the x-axis
	for (var i = 0; i < mountain.length; i++) {
		mountain[i].mMove();
		mountain[i].mPlace();
	}
}

function mountainPlace() { //draws the mountains
	image(mountainAssets[this.nFloors], this.xx -100, this.yy-130, mountainAssets[this.nFloors].width/10, mountainAssets[this.nFloors].height/10);
	fill(255);
}

function mountainMove() {
	this.xx -= this.speedy
}

function randomizeMountains() {
	var chance = 0.002 //places in more mountains into the array.
	if (random(0, 1) < chance) {
		mountain.push(mountainComponents(width));
	}
}

function mountainComponents(originXX) {
	var mountainComponents = {
		xx: originXX,
		yy: random(130, 140),
		speedy: 0.5,
		nFloors: floor(random(0,1)),
		mMove: mountainMove,
		mPlace: mountainPlace
	}
	return mountainComponents;
}

 

I took inspiration for this landscape by a project I was working on in Illustrator. With that being said, many of the assets were created first in Illustrator and loaded into my program. I had the most challenge with debugging this code and scaling images correctly — minor issues kept me from moving forward with actually drawing the program out.

 

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.

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.