Yoonseo1- Final project

TURN UP YOUR SOUND!

My exploration on the final project was on illustrating the beauty of space and exploration. I tried on how to create 3D experience in p5.js. I have successfully developed beginning exploration scene with
interaction between characters, but I could not get to the next part, which character is visible and exploring the foreign planet. I am still very satisfied with what I came up with.
Some sound effects are from free-sound effects and music from No Man’s Sky.

Press ENTER to continue on dialogues and Scripts.
Animation below will tell you control, but in case you miss it.
W to raise speed and S to lower speed.
Enjoy!

Beginning of Space Exploration

//Name: Yoonseo(Dave) Choi
//Andrew ID: yoonseo1
//15-104: final project
//Space exploration 
stars = [];
stars.length = 2500;
var speed = 1; var ox;var oy;var nx;var ny;var Sspeed;var galaxy;var planet1;
var ship; var dTodestine; // distance left to planet
var arrive = false; var dialoague = true; var main = true; var control = true;
var imgplanet;
var pr = 0; // planet raito
var startup = false; var Onwarp = false; var durWarp = false; var off = false;
var counter = 0; //counter for the string output
var warp; var end; var engine; var starthyp;
var fcount=0; // custom frame count
var tposx; var barh; var slow;
var tposy; var tboxx; var tboxy; var dstart = true; 
var BGM;
var currentText; 
var num = 0; // for calling dialogues
var diagarray = []; //array for dialogues
var diagCount = 13; // total dialogues
var monologues = false; // monologue boolean
var comm = true;  // communication boolean
var portrait = []; // portrait animation calling
var monoarray = []; // monologue array 
var monotext; // current monologues
var monocount = 4; // total monologues
var nnum = 0; //calling monologues
var crystal; // crystal image
var aimOn = false;  // boolean for aim setting
var crossline; //cross line image
var da = 0; // darkness level for the black out later. 
var distort1;
var distort2;
var distort3;
var distort4;
function preload(){
		//Sound calling

		BGM = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/BGM.mp3"); //back ground music
		warp = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/warp.wav"); //warping sound
		end = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/End.wav"); // end of warping sound
		starthyp = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/hyps-2.wav"); // beginig of warping
		engine = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/engine-start-2.wav"); // engine sound 
		IamHere = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Arrived.mp3"); // when arrived to planet
		Digital = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Typing.wav"); // typing sound
		Intro = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Intro-theme.wav"); // intro main sounds
		Message = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/message-receive.wav"); // coordinate exchange
		slow = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/engine-back.wav"); // deceleration 

		crossline = loadImage("https://i.imgur.com/hbpD5CT.png"); 
		crystal = loadImage("https://i.imgur.com/sm0Kud3.png");
		galaxy = loadImage("https://i.imgur.com/59T2snK.jpg");
		ship = loadImage("https://i.imgur.com/vIFxRkT.png");
		warpped = loadImage("https://i.imgur.com/gjcQn7H.jpg"); // altered space image
		imgplanet = loadImage("https://i.imgur.com/Je1AEea.png"); // planet image

		// portrait animation call
		distort1 = loadImage("https://i.imgur.com/gXjhgGZ.png");
		distort2 = loadImage("https://i.imgur.com/rx5N8wr.png");
		distort3 = loadImage("https://i.imgur.com/OGEuf4o.png");
		distort4 = loadImage("https://i.imgur.com/oi7RWEZ.png");
		
		portrait.push(distort1);
		portrait.push(distort2);
		portrait.push(distort3);
		portrait.push(distort4);

		//calling the dialogues and monologues. 
		
		for (var i =0; i < 13; i ++){ // calling dialogues 
		diagarray.push(loadStrings('https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/info'+ i + '.txt'));
		}
		for (var m = 0; m < 4; m ++){ // calling monologues
		monoarray.push(loadStrings('https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/mono'+ m +'.txt'));
		}
}
function setup() {
  createCanvas(480, 480);
  background(0);
  Intro.loop();	//BGM play
  tposx = width-200; // setting position for the text
  tposy = 100;
  tboxx = 200;
  tboxy = height/2;
  currentText = diagarray[0];
 	for (var i = 0; i < stars.length; i++){ //array for creating stars
 		stars[i] = new makeStar();
 	
 	}
}
function makeStar() {
	var star = { 	x : random(-width,width),  // random position in X
					y : random(-height,height), // random position in Y
					z : random(width), // for acceleration of stars
					pz: this.z,
					R : random(100,255), //colors
					G : random(150,200),
					B : random(150,255),
					update: starupdate,
					Display: starmake

				}
				return star;
}
function approach(x,y,x2,y2){ // displaying planet

	image(imgplanet,x,y,x2,y2)
}
function UD(spe){ // displaying speed meter
	textAlign(CENTER);
	textSize(10);
	stroke(0,255,0);
	text("Speed Meter",width-40,height/2+60);

	noFill();
	stroke(0,255,0)
	rect(width-50,height/2+50.5,25,-51)
	fill(255,0,0);
	noStroke();
	rect(width-49.5,height/2+52,25,spe);
	noFill();
}
function starmake(){ // creating starts
		
		fill(this.R,this.G,this.B,aplh); //fill with colors
		noStroke(); 
		var sx = map (this.x/this.z,0,1,0,width); // x movement of stars 
		var sy = map(this.y/this.z,0,1,0,height); // y movement of stars 
		var r = map (this.z,0,width,10,0); // raidus change so it gets large as user get closer
		var aplh = map (this.z,0,width,10,700) // alpha level 
		if (Sspeed < 34){ // while it is not warping
		ellipse(sx,sy,r,r); //creating visible stars
		fill(255,255,255);
		ellipse(sx,sy,r/2,r/2)
	}
	else if (Sspeed >= 34){ // if in state of warpping
			var px = map (this.x/this.pz,0,1,0,width); // get the x 
			var py = map(this.y/this.pz,0,1,0,height); // get the y 
			this.pz =this.z; // update z 
			stroke(255)
			line(px,py,sx,sy); //create line from previous stars to current creating lines
		}
	
}
function starupdate(){
	this.z = this.z -Sspeed; // movement of the stars based on the speed of the ship.
	if (this.z < 1){ // if it is out set new position to it. 
		this.z = width; 
		this.x = random(-width,width);
		this.y = random(-height,height);
		this.pz = this.z;
	}
}
function keyReleased(){ // preventing constant sound creation. 
	// W = 87, S =83
	if (keyCode === 87 & Onwarp == false && dialoague == false){
		engine.stop(); // engine stop when up arrow is disabled
	}
	if (keyCode === 83 & Onwarp == false && dialoague == false){
		slow.stop(); // decelerating sound stop 
	}
}
function keyPressed(){
	if (keyCode === 87  & Onwarp == false && dialoague == false){
		engine.loop(); // when up is pressed, engine creates sound
	}
	if (keyCode === 83 & Onwarp == false && dialoague == false){
		slow.loop(); // when down is pressed slow 
	}
	if (keyCode === 13 & dialoague == true && frameCount/5 > 60){ // for dialogues when enter is pressed. 
		
		diagCount -= 1; // keep track of dialogues
		num += 1; // move on to next line
		currentText = str(diagarray[num]); // current text set to next line  
		counter = 0; // counter set to 0 every time enter is pressed 
		if(num > 13){ // preventing error lines appearing 
			num = 13; 
		}
		
		if (num< 13){ // prevent playing sound at the end of line
		Digital.play();
		}
		if (num == 6){ // alarams the coordinate message
			Message.play();
		}

	}
	if ( keyCode === 13 & monologues == true){ // when enter pressed on monologues part
		monocount -= 1; // track of monologues 
		nnum += 1; //move on to the next lien 
		counter = 0; // reset counter 
		monotext = str(monoarray[nnum]); // set current monologues 
		if (nnum == 3){ // when at the last line play 
			Digital.play();
		}
		if (nnum > 3){ // prevent error in monologues message 
			
			nnum = 3
			monologues = false; 
		}
		if (nnum < 3){ // prevent playing sound at the end of line 
			Digital.play();
		}
	}
}
function draw() {
	noCursor(); // no cursor 
	rectMode(CORNER); // rectangle set corner to default 
	barh = -map(Sspeed,0,27,0,40); // tracking the speed of the ship for speed meter
	engine.setVolume(0.3); // set volumes of sounds 
		starthyp.setVolume(0.1);
		warp.setVolume(0.3);
		end.setVolume(0.3);
		slow.setVolume(0.3);
		 var  f = frameCount % 3; //getting the timing for the frame.  
	if (main == true){ // in main screen. 
		textAlign(CENTER); // Set the text in the center
		background(0); // back ground to black 
		fill(255); // fill the text with white for lcontrast 
		textSize(50); // set the size of the test to be 50. 
		text("Start Exploration?", width/2, height/2 -100); // starting sentence 
			if (frameCount % 30 == 1 || frameCount % 30 == 2 || frameCount % 10 == 3){
			fill(0);
			}
			textSize(20);
			text("Press S to Start",width/2, height/2 + 100); // display blinking effect of the satar
				if(keyCode == 83){
					Intro.stop();
					BGM.loop(); // let the BGM loop at the main screen., 
				main = false;
				}
	}
	if (arrive == false & main == false){ // when the main screen is off and moved to the actual game

		fcount += 1; // custom frame count
		background(0); //set back ground to black 
		image(galaxy,0,0); // display the galaxy image
 
    	if ( dialoague == false){ // i f dialogues to false 
    		background(0); // set back ground to black 
			image(galaxy,0,0); //show space image 
    	}
		if (keyIsDown(87) & control == true && dialoague == false){
		
			speed += 1; //raise speed
			}
		if (keyIsDown(83) & control == true && dialoague == false){
			speed -= 1; // reduce speed 
			}
			Sspeed = map(speed,0,100,0.5,20); // factor of speed 
		if (Sspeed < 0){
			Sspeed = 1;// not letting speed to go under 1
			}
		if (Sspeed > 40){
			Sspeed = 40; // maximum speed limit 
			}
		
		if (Sspeed >= 27){ 
			Sspeed += 8 // let speed to go up automatic for warp. 
			}
		if (Sspeed >= 27 & Onwarp == false){ // set warp true and play warpping sounds
			Onwarp = true; // this is to prevent sounds to play constantly
			engine.stop();
			starthyp.play();
			}
		if (Sspeed >= 34 & durWarp == false){ // when the speed is greater than 34, warp initiates
			warp.loop();
			durWarp = true; //allows star to be lines for faster movment visual
			}
		if (Sspeed >= 34){
			image(warpped,0,0); //back ground image alters 
			aimOn = false; 
			control = false; //not allowing user input 
		}
	push();
	translate(width/2,height/2);
for(var i = 0; i < stars.length; i ++){ // putting stars into display 
		stars[i].update();
		stars[i].Display();
	}
	
	pop();
	if (aimOn == true){
	//image(crossline,mouseX-crossline.width/2,mouseY-crossline.height/2);	
	}
	UD(barh); //display HUD 

	if (Sspeed <34){ // allow sHUD to be displayed before warp
		UD(barh)
	image(ship,0,0);
	}else if (Sspeed >= 34){
		UD(barh)
	dTodestine -= 10;
	image(ship,random(-5,0),random(-5,0)); //during warp ship shakes 
	}
	if ( fcount/5 > 60 & dstart == true){ // begining scene start
			Digital.play();
			dstart = false; 
		}
		if ( fcount/5 > 60){ // start of the dialogues
		counter += 1; //start counter for the string output speed
		textSize(20); // set size of text 
		if (num == 9){ // no more animation at dialogue 9 
			comm = false;
		}
  		if (num > 1 & comm == true){  // show animation 
  			image(portrait[f],350,0,100,100);
  		}
  		if (dialoague == true){ // when the dialogue is true 
  		for(var t =0; t < currentText.length; t ++){
  			fill(255,0,0);
  			if (num == 1 || num == 3||num == 5 || num == 7 || num == 9){ // protagonist commentary
  				fill(255,255,0);
  				textAlign(CENTER);
  				text(
    				currentText[t].substring(0, counter),
    				70,height/2+50,350,100);
    	
  			}else{
  			textAlign(LEFT);
  			text(
    				currentText[t].substring(0, counter), //info/ N's commentary
    				tposx,tposy,tboxx,tboxy);
  				}
 
  			}
    	if (diagCount ==0){// if reached to end of dialogue
    		counter =0; //reset 
    		dialoague = false; 
    		dTodestine = 7000; //set distance to the planet
    		diagCount = -1; // not letting any overlap of numbers
    		aimOn = true;
    		
    		}
    	}
    }
	}
	if (dTodestine < 800 & off == false){ //one time running codes 
		monologues = true;
		BGM.stop();
		IamHere.play(); //arriving sound
		warp.stop();
		Digital.play();
		end.play(); // end warp sound
		monotext = monoarray[0];
		off = true;
	}
	if (dTodestine < 800){
		pr += 0.25
		ox = width/2-pr;
		oy = height/2-pr;
		nx = pr*2
		ny = pr*2;
		approach(ox,oy,nx,ny) // set the planet to get large as it approaches
		control = false; //no control input
		speed -= 3; // slow down after warp 
	if (Sspeed <34){
		UD(barh);
		image(ship,0,0);
		dTodestine -= 0.75; // set distance reduce amount 
	}
	}

	if ( dTodestine < 800 & monologues == true){ //monologues display 
			textSize(20);
				for(var t =0; t < monotext.length; t ++){
  				fill(255,0,0);
  			
  				fill(255,255,0);
  				textAlign(CENTER);
  				text(
    			monotext[t].substring(0, counter),
    			70,height/2+50,350,100);
  				}
			}
	

	if (dTodestine < 100){ //if get close to planet
		da += 10;
		fill(0,da); //black out start  
		rect(0,0,width,height)

	}
	if (dTodestine  < 0){
		arrive = true; //arrive to true
		dTodestine = 0;  
		speed = 0;
		monologues = false;
		clear(); //reset the scene
		background(0);
		fill(255);
		textSize(40);
		textAlign(CENTER);
		text("...To Be Continued....",width/2,height/2); // message for continued 
}
}

Project 12 – Space Explorer

I am interested in creating an animation or a game that is interactive based on Key inputs. The theme and visual that I am interested in is Sci-Fi theme. The exploration of the space and futuristic image is what I want to convey for this project.  I imagine that Ultimate goal would be a interactive game/ animation that explore through the stars and character moving inside the space ship, and may be possible to change the scene to a planet with discovery and move around in different scene(planet).

Main focus of the project I want to convey is the beautiful space inside the space ship and the feeling of adventure. I do not expect myself to be able to code the whole game concept with change of scene, but my focus is on the traveling in space and convey the beauty.

I imagine that travel phase will be close to image below and change of scene probably based on time or travel speed.

Below is a concept sketch. I want this to start in space as ship travels then tells the user how to accelerate the ship and may be encounter a planet and goes into the planet. If I can figure out the change of scene and animation inside the planet, game will continue to phase where you can see the moving character, if not it will fade out with planet approaching.

 

Looking outwards 12

Following images are from games: Galaxy on Fire , and Star Citizens. These games are consisted of open world with the main story with a battle phase occurring through out the game. It is consist of adventure and beautiful space view  and creative illustration of planets, space ships, and alien cities.  Galaxy on Fire is mainly battle based game that takes place in outer space. It is a rather overly simplistic story for a game that shares similar genre to other space game that involves exploration and battle. Graphic is nice but the negative thing about the game is that travel between solar system was slow, battle was not tense enough to keep tension of game. Only attracting facts of the game was the graphic; in contrast, Star citizens is a more open world based game, which is close to MMO RPG in space. This game is still in the process of development, but early access are available, and they propose a interesting dynamic of game plays with overwhelming graphics.

My main project will be close to convey similar exploration feeling of the beautiful space and interactivity with user/player.

Project 11- Turtles!

Customwall

var myTurtle; //my turtyle variable
var distToM; //variable for distance between turtle and mouse 
var MyTurtles = []; //turtle array 

function setup() {
    createCanvas(480, 480); //canvas size   
    background(0); //background to black
    frameRate(10); //frame rate to 10

    for (var v =0; v < 6; v ++){
    for (var i = 0; i < 12; i ++){
        var turs = makeTurtle(20+i*(width/12),40+v*(height/6)); //create turtles in array 
        MyTurtles.push(turs);
    }
}
}

function draw() {
    for (var t = 0; t < MyTurtles.length;t++){
        distToM =MyTurtles[t].distanceTo(mouseX,mouseY); // get distance of mouse to each turtle
        var redist = map(distToM,0,600,0,360); //remap the distance 
        MyTurtles[t].penDown(); //pendown to true
        MyTurtles[t].setWeight(2); //set weight to 2
        if (redist < 180){ // if remappe is less than 180 
            MyTurtles[t].right(redist); // turn right with remapped value
        }
        else 
       { MyTurtles[t].left(redist); //if not turn left with remapped value
       }

        MyTurtles[t].forward(5); //constantly moving 5 steps
       
    }
}
function mousePressed(){
    var ran = int(random(0,72)) //get random turtle in array
    MyTurtles[ran].setColor(color(random(0,255),random(0,255),random(0,255))); //random color when mouse pressed 
}


function turtleLeft(d){this.angle-=d;}
function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}
function turtleBack(p){
this.forward(-p);}
function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}
function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}
function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}
function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}
function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}
function turtleFace(angle){
this.angle = angle;}
function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

Iterations: 

For this project, I have thought of the wall paper project that we have done in past. I wanted to see if I could come up with a randomly generating turtles spaced apart that will create certain pattern to create custom wall paper  based on movement of the turtle.

I made the turtles’ color to change randomly whenever user clicks on.

For the movement, I wanted them to keep the constant speed but different direction based on the mouse position. I have calculated the distance from each turtle to the mouse location and let the turtles to turn based on the distance and its decision factor on to turn right or left.

I have came up with two different iteration playing with the code.

Enjoy.

Looking outwards 11

I have choose the Google’ Magenta project as computer Music. I am very much interested in machine’s capability on learning realm that is considered to be human’s. The Magenta research project is aimed to push limits of what AI can do in arts. In order to achieve such an intelligence for the AI, they have tried many different machine- learning techniques, such as recurrent neural networks, convolutional neural networks, variational methods, adversarial training methods, and reinforcement learning.

They used NSynth algorithm, which uses neural networks to synthesize new sounds, on notes generated by different instruments.

This is such an inspiring and provoking project that allows more thought to be brought up on limits of AI and possibilities.

Looking outwards-10

This is a work called Filtered Transparencies by Filipa Valente.

She is an architect, experience &environmental interaction designer. She has studied architecture and Media art. Her work shop is currently located at Los Angeles. She studied at Bartlett School of Architecture in London and Master in Media Art and Architecture MEDIASCAPEs at SciArc in L.A. She has collaborated with different architects, one of them are Zaha Hadid architects. Her project revolves around interest in immediate space that surround us, as in architecture, room ,a city, a crowd of people. This work is particularly admiring to me because of its abstraction and spatial quality it brings. Abstraction is one of my hardest challenge in designing. This combines bit of abstraction with the possible spatial quality that are generated with overlapping transparency of lights, which is not physical but rather abstract.

Project 10- Halloween

Halloween

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 10
var trees = []; //tree array
var houset = []; //house array
function setup() {
    createCanvas(480, 480); //canvas size
    strokeJoin(MITER); //set lines to be rectangular
    strokeCap(PROJECT) //set lines to be rectangular
    angleMode(DEGREES); //set angle to degrees
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width); // random value of rx
        trees[i] = makeTree(rx); //create tree at random rx 
        houset[i] = makeHouse(rx); //create house at random rx
    }
    
}


function draw() {
    var run = map(mouseX,0,width,20,60); //remap the x value to 20- 60
    frameRate(run);//set frame rate based on mouse position 
    noStroke(); //no stroke
    background(30); //background to 30
    fill(299,149,41,30) //create brown ground plance
    rect(0,280,width,height,80); //ground plane
    noFill(); //remove fill
    fill(0) //black fill
    rect(0,0,width,300); //black sky background
    noFill();
    displaybackground(); //display background elements

    updateAndDisplayobjects(); //display objects
    removeobjects(); //remove when at end
    addNewobjects();  //add new based on probaility
}


function updateAndDisplayobjects(){
    // Update the building's positions, and display them.
    for (var h = 0; h < houset.length; h ++){ // for length of the array, update house move value and display it
        houset[h].hmove();
        houset[h].hdisplay();
    }
    for (var i = 0; i < trees.length; i++){//for length of the array, update htree move value and display it
        trees[i].tmove();
        trees[i].tdisplay();

    }
    
}


function removeobjects(){
    var treesKeep = []; // tree keeping array
    var housekeep = []; //house keeping array
    for (var h =0; h < houset.length; h++){
        if(houset[h].hx + 50 >0){ //if the x value of the house +50 is larger than 0 then keep 
            housekeep.push(houset[h]);
        }
    }
    houset = housekeep;
    for (var i = 0; i < trees.length; i++){ //if the x value of the tree is larger than 0, keep 
        if (trees[i].x>0){
            treesKeep.push(trees[i]);

        }
    }
    trees = treesKeep;
   
// remember the surviving buildings
}


function addNewobjects() {
    var newobjprob = 0.4; //probability of 40 % for tree
    var houseprob =0.02; //probability of 2% for witch housing
    if (random(0,1) < houseprob){ //when number is within probability create
        houset.push(makeHouse(width))
    }
    if (random(0,1) < newobjprob) { //when number is within probability create
        trees.push(makeTree(width))
    }
    
    }
function treeDisplay(){ //tree display method
    var treeheight = 20;
    var tHeight = this.nHeight*treeheight;
    var bcount = 0;
    var branchlen = 60;
    fill(10);
    stroke(50,19,41);
    push();
    strokeWeight(1.5);
    translate(this.x, height-60);
    line(0,0,0,-tHeight);
    translate(0,-tHeight);
    stroke(120,59,41);
    while(bcount < this.branch){
    push();
    translate(0,branchlen)
    bcount+=1;
    branchlen *= 0.67
    if (branchlen > 4){
    push();
    rotate(45);
    line(0,0,0,-branchlen);
    pop();
    push();
    rotate(-70)
    line(0,0,0,-branchlen)
    pop();
    }
    pop();
    }
    pop();
}
function houseDisplay(){ //house display method
    var houseHeight = 40;
    var hwid = this.hwidth;
    var hHeight = this.hfloor*houseHeight;
    push();
    translate(this.hx,height-60);

    stroke(127,152,182,180);
    strokeWeight(3);
    line(0,0,-10*this.flip,-hHeight/2);
    line(0,0,30*this.flip,-hHeight/2);
    push();
    translate(-10*this.flip,-hHeight/3);
    line(0,0,15,-height/5)
    line(0,0,35,-height/5)
    pop();
    push();
    noStroke();
    fill(37,23,3);
    translate(-10,-height/5);
    beginShape();
    vertex(0,0);
    vertex(hwid*4,0);
    vertex(hwid*3,-hHeight);
    vertex(-hwid,-height/6)
    endShape();
    for( var i =0; i <this.hfloor; i += this.hdiv){
        fill(187,121,18,200);
        ellipse(20,-20 - (i*houseHeight/2),this.hwidth*2,this.hwinh);
    }
    pop();
    pop();


}
function treeMove(){
    this.x += this.speed;
}
function houseMove(){
    this.hx += this.hspeed;
}
function makeTree(tx){ //tree object
    var tree = {x: tx,
                speed: random(-7.0,-20),
                nHeight: floor(random(4,8)),
                branch: random(20,30),
                tmove: treeMove,
                tdisplay: treeDisplay
            }
            return tree;
}
function makeHouse(hhx){ //house object
    var house = {hx: hhx, 
                  hspeed: -2.0,
                  flip: random(-1,1),
                  hdiv: random(1,3),
                  hwinh: random(10,20),
                  hfloor: round(random(2,5)),
                  hwidth: random(10,20),
                  hmove: houseMove,
                  hdisplay: houseDisplay
             }
    return house;
}

function displaybackground(){ //background element
    noStroke();
    fill(color(255,235,5,190));
    ellipse(width-80,110,180,180);
    noFill();
    noStroke();
    fill(255,255,255,20);
    ellipse(width-30,70,30,30);
    fill(0,0,0,30);
    ellipse(width-160,130,10,30);
    fill(0,0,0,20);
    ellipse(width-20,160,35,25);
      
          noStroke();
    
    stroke(70,130,170,150);
    beginShape();
    for( var x = 0; x < width; x++){ //using noise in p5.js to create river edge
        var t = (x * 0.005)+(millis()*0.0005);
        var y = map(noise(t),0,1,20,75);
        vertex(x,height-y);
        vertex(0,height+70);
        vertex(width,height+70) ;
    }endShape();
    noStroke();
    fill(239,234,188) //moon reflection
    ellipse(100,height-20,130+random(-1,1),5+random(-1,1));
    noFill();
    fill(239,239,188);//secondary reflection 
    ellipse(80,height-15,80+random(-1,1),4+random(-1,1));
    noFill(); 
}

Since it was Halloween, I wanted to create a landscape that is staged at night with tree landscapes and witch houses on river’s edge. I wanted to give depth to the landscape formation. I have decided to create the river’s edge using the noise function in the p5js. When I tried to convey the sense of the 3D, I realized that giving a different in speed of object passage is very effective. I generated trees that differ in speed and height to convey the depth. Almost giving the sense of when someone walks in forest, they pass in different relative speed. I have created abstracted witch houses behind the trees. I created large moon and its reflection on the river to convey another layer of depth. Frame rate interact with the mouse X position giving a feel of running through the landscape vs. walking

 

Project-09 Portrait

sub portrait

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 09

var portrait; // global variable for the image
var px = []; // array for storing previous x value
var py = []; // array for storing previous y value
var pp = []; //array for storing previous pixel 

function setup() {
    createCanvas(275,480); //canvas size
    background(0); //set background 0
   
}

function preload(){
    portrait = loadImage("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/10/yoonseo1_bro-172x300.jpg"); //load image from the asset folder
}
function draw() {
var x = floor(random(portrait.width)); // create x point in random place of image
var y = floor(random(portrait.height)); //create y point in random place of image
var pix = portrait.get(x,y); //get color of image at x,y coordinate
pp.push(pix); //push the color into the array
noStroke(); //no stroke
px.push(x); //append the x coordinate to the array
py.push(y); //append the y coordinate to the array 

for(var i = 0; i < px.length; i ++){
    strokeWeight(0.5); // stroke weight of 0.5
    stroke(pp[i],1); //create stroke color to be color of x,y location. 
    line(px[i],py[i],px[i-1],py[i-1]); //create line between previous x,y and current x,y
}
}

For this project, I have used my brother’s photo for the portrait to use. I wanted to see what are ways to draw a portrait without illustrating direct same image at the location, but rather something that connects with previous point with current. For this project, I have made code to create random lines using randomly generated points. x and y coordinates are randomly generated and lines are created based on current points and previous points with color of the the pixel at the current x and y. By having code to do such a motion allows the portrait to be abstract image of color but end product shows the resemblance of the original image

left is original and right is portrait

Looking Outwards 09: on Looking outwards

This is from Looking Outwards 07 by Jamie.

This Botanicus Interacticus project is by Disney Research. This is a mesmerizing work that is creating a very appealing visual. I agree that one of the interesting aspect of the project is on the development of response through lighting, creating dynamic visual from the static movement. Another thing I see particularly interesting is that we all consider plant as a organism that is alive but something that just cannot move, which sometimes make us think they are not even alive. I feel like this has almost given the personality and method of expression to the plants itself creating personification of the static living being.

Looking outwards 08: The creative practice of an Individual

Eyeo 2015 – Deray Mckesson and Samuel Sinyangwe from Eyeo Festival // INSTINT on Vimeo.

Work of Deray McKesson and Samuel Sinyangwe link: https://mappingpoliceviolence.org/

Deray and Samuel are both American civil rights activist and supporter/ member of Black lives matter. Interesting fact of Deray is that he has launched the Campaign Zero, which is a policy platform to end police violence. It is a website with ten proposals that are aimed to reduce police violence.

Samuel was also part of the launching Campaign Zero platform. Since the Protests emerged in the wake of 2014 shooting of Michael Brown in Ferguson, Missouri, Samuel worked with Deray since then to work and develop solution to address police violence in America.

I admire their work particularly because of addressing such a crucial and controversial problem that occurs often in America. I personally had close relationship with African-Americans back in California. I was there when my fellow friends were scared of police violence. In order for the information to spread and let people know of the matters, what they are doing such as protests, creating map of police violence and creating visualization of the data are best way to provide awareness to people who have access to digital medias. Their works are straightforward and logically laid out, allowing people and me to understand their challenge, solution and main issue to address.