heeseoc-LookingOutwards-12

I thought this particular Super Mario game could be relevant to my final project idea. Basically, what I am looking to make is a game where the user controls a main character to move (walk, jump, duck, etc) and achieve goals such as avoiding obstacles, meeting other characters, and collecting items. Me and my partner decided to base the story our game off of the novel “A Little Prince,” and have the character collect (or learn) items (knowledges) as he proceeds. The aspect that I especially thought was helpful in developing our vision for our project in this Super Mario game, was that not only the interaction is relevant, it leads the user to different stages as the character exits the frame, which gets us to help the viewer understand the shift of environments because in the novel, the little prince has to travel from planet to planet in order to meet different characters. I thought this game was interesting to look at because not only it challenges the user through the obstacles in the map, it also opens up an opportunity for the user to think based on whatever I decide to place at the end of each map.

https://scratch.mit.edu/projects/13674627/

Another piece that I was inspired by was the online game Maplestory, which is basically a game where you are given quests through interactions with static characters and solving them. I was largely inspired not only how the user controls the character, but also its aspect of having conversations with characters embedded in the environment, and how it affects the character that the user is controlling. So, I am going to merge aspects of these two games to make my final project.

heeseoc-Project-11-Composition

sketch

//Steph Chun
//Section A
//heeseoc@andrew.cmu.edu
//Project-11

var turtle, turtle2;
var angle = 20;
var side = 5;
var angle2 = 160;
var side2 = 10;

function setup(){
    createCanvas(400,400);
    background(20,20,50);
	frameRate(10);
	//circular geometric shape
	turtle = makeTurtle(random(0,width), random(0,height));
	//spikey geometric shape expanding from the center
	turtle2 = makeTurtle(width/2, height/2);
}

function draw(){
	stroke(255);
	strokeWeight(.8);
	textSize(14);
	text("click anywhere!", 5, 20);

	//circular geometric shape 
	for (var i = 0; i < 30; i++){
		turtle.setColor(color(random(150,255), random(200,255), random(200,255)));
	    turtle.penDown();
	    turtle.setWeight(.2);
	    turtle.left(angle);
	    turtle.forward(side);
}
	turtle.right(10);
    side += .5;

    //spikey geometric shape expanding from the center
	turtle2.setColor(color(random(150,255), random(200,255), random(100,255)));
    turtle2.penDown();
    turtle2.setWeight(.3);
    turtle2.left(angle2);
    turtle2.forward(side2);
    turtle2.right(5);
    side2 += 2;

}

//creating spiral shape on mouseclick 
function mousePressed(){
	turtle = makeTurtle(mouseX, mouseY);
}


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;}

While I was exploring what I can do with turtles, I noticed how I can make interesting spirals through drawing lines and manipulating angles. At first, I was trying to execute these (not-so-exactly) circular spirals with some random factors on mouseclick, but then it looked somewhat boring with only those on a dark background. So I re-generated one of the spirals that I thought was interesting and placed it at the center. After a while I left the code alone, it made this interesting circular shape even though it started off as a rather angular and spikey shape, which I thought resonated with the circular shapes that are being created on mouseclick. I liked how it has an interactive component, but later on, the user is like swallowed by the dense spiral and notice the connection between the two seemingly different elements.

heeseoc-LookingOutwards-11

I happened to stumble upon this piece named Automatic Orchestra while I was browsing the internet for algorithmic or computational compositions. It is basically an audio installation, orchestrated by networked machines and people. Students from the University of the Arts, Bremen and the Copenhagen Institute of Interaction Design created the setup, which consists of twelve pods, each with a controller attached to speakers. All pods are wired together to form a network transmitting musical data. Therefore the data travels through each unit before it is passed on to the next one. An interesting part of this project is that each pod will interpret and alter the same data that has been passed on based on its individual algorithmic rule set, which is like having their own personalities as instruments. So the music takes on different qualities depending upon the artist who programmed it. In contrary to the immediate impression of “computational music” that feels very robotic and cyber, this piece has some humanistic attributes that adds an extra point of interest.

http://resonate.io/2015/projects/automatic-orchestra/

heeseoc-LookingOutwards-10

I decided to write a post about Lorna Barnshaw, a 3D designer from London, United Kingdom. She earned her degree for Bachelor of Fine Arts at Winchester School of Art, and also studied at the University of Northampton. She creates virtual, glitch sculptures, which I thought was interesting because a lot of her works generate different looks depending on the perspective that the viewers are looking at which could be skewed at some point but still makes sense. She creates these mask-like sculptures, with characteristics unique to the different programs that she uses. Some of her studies look very realistic, and some are highly abstracted, geometric reinterpretation of the human face. They are very experimental, often uncanny, but I think that’s the thing that is enticing about her work and differentiates them from everything else.

 

https://www.behance.net/gallery/7149765/Layar-Basic-Trial

heeseoc-Project-10-Landscape

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-10

var buildings = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.008;
var c1, c2;
var lc1, lc2, lc3, lc4;

function setup() {
    createCanvas(480, 480); 
    //background gradient color
    c1 = color(60,1,29);
  	c2 = color(205,100,70);
  	//gradient color for reflected streetlight
  	lc1 = color(255,230,109,30);
  	lc2 = color(255,230,109,0);
  	//gradient color for reflected buildings
    lc3 = color(random(180,200), random(100,150), random(100,150), 50);
  	lc4 = color(random(180,200), random(100,150), random(100,150), 0);

    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(20);
}

function draw() {
    setGradient(0, 0, width, height/2+50, c1, c2, 1);
    updateBuildings();
    removeBuildings();
    addBuildings(); 
    makeBushes();
    riverDisplay();
}

//gradient for the background(sky)
function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    } 
}

//
function updateBuildings(){
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}

//remove buildings when they're out of frame
function removeBuildings(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;
}

//introduce new buildings
function addBuildings() {
    var newBuilding = 0.008; 
    if (random(0,1) < newBuilding) {
        buildings.push(makeBuilding(width));
    }
}

//move the buildings
function buildingMove() {
    this.x += this.speed;
}

//draw multiple buildings
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    push();
    noStroke();
    fill(this.bColor); 
    translate(this.x, height - 190);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var y = 0; y < this.nFloors; y++) {
    	for (var x = 0; x < 6; x++){
    		noStroke();
    		fill(random(165,255), random(180,255), random(200,220));
    		rect(x*10+8, -10-(y*floorHeight), 4, 7);
    	}
	}
    pop();
}

//determine the shape and movement of the building
function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 70,
                speed: -1.2,
                bColor: color(random(180,200), random(100,150), random(100,150)),
                nFloors: round(random(3,10)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

//make bushes
function makeBushes(){
    noStroke(); 

    //the farthest bush
    beginShape();
    for (var x = 0; x < width; x++) {
    	fill(93,15,11);
        var t = (terrainDetail * x) + (millis() * terrainSpeed);
        var y = map(noise(t*2), -.5, 1, 370, height/2-30);
        curveVertex(x, y); 
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE); 

    //second to the front 
    beginShape();
	for (var x = 0; x < width; x++) {
        fill(61,0,4);
        var t2 = (terrainDetail * x) + (millis() * terrainSpeed);
        var y2 = map(noise(t2*2), -.5, 1, 390, height/2-30);
        curveVertex(x, y2); 
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE);   

    //closest(darkest) bush
    beginShape();
	for (var x = 0; x < width; x++) {
        fill(31,7,6);
        var t3 = (terrainDetail * x) + (millis() * terrainSpeed);
        var y3 = map(noise(t3*2), -.7, 1.1, 420, height/2-10);
        curveVertex(x, y3); 
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE); 
}

function riverDisplay(){

	//river and road
    fill(31,4,9);
    rect(0, height/2+50, width, height/2+50); 
    fill(120,6,41);
    rect(0, height/2+50, width, 5);
    fill(161,12,44);
    rect(0, height/2+53, width, 2);

    for (var s = 0; s < width; s++) {

    	//streetlight
    	strokeWeight(1.3);
    	stroke(255,216,205);
    	line(s*80-7, height/2+30, s*80+7, height/2+30);
    	stroke(217,136,109);
    	line(s*80, height/2+50, s*80, height/2+30);
    	noStroke();
    	fill(255,246,109,60);
    	quad(s*80-7, height/2+30, s*80+7, height/2+30, s*80+15, height/2+50, s*80-15, height/2+50);
    	
    	//gradient for the reflected streetlights
    	setlGradient(s*80-8, height/2+55, 16, height/2-55, lc1, lc2, 1);
    	setl2Gradient(s*80-15, height/2+55, 30, height/2-55, lc1, lc2, 1);

    	//gradient for the reflected buildings 
    	setl3Gradient(s*30+(random(10,70)), height/2+55, 10, height/2-55, lc3, lc4, 2);
    }

    //road detail
    fill(31,4,9,80);
    rect(0, height/2+53, width, 10); 
 
}

//gradient for the reflected streetlights
function setlGradient(x, y, w, h, lc1, lc2, axis) {
	noFill();
	for (var i = y; i <= y+h; i++) {
	    var inter = map(i, y, y+h, 0, 1);
	    var lc = lerpColor(lc1, lc2, inter);
	    stroke(lc);
	    line(x, i, x+w, i);
    } 
}
function setl2Gradient(x, y, w, h, lc1, lc2, axis) {
	noFill();
	for (var i = y; i <= y+h; i++) {
	    var inter = map(i, y, y+h, 0, 1);
	    var lc = lerpColor(lc1, lc2, inter);
	    stroke(lc);
	    line(x, i, x+w, i);
    } 
}

//gradient for the reflected buildings 
function setl3Gradient(x, y, w, h, lc3, lc4, axis) {
	noFill();
	for (var i = y; i <= y+h; i++) {
	    var inter = map(i, y, y+h, 0, 1);
	    var lc = lerpColor(lc3, lc4, inter);
	    stroke(lc);
	    line(x, i, x+w, i);
    } 
}




I created a cityscape at night, with the lights reflected on the river. I immediately came up with the image when I first read the instructions, and then noticed that the sample code would be super helpful for me to get started on this. I modified the code so that the shapes are visually more pleasing, and played around a lot with gradients to achieve the reflected city on the surface of the water. I wanted to have multiple layers of buildings, but for some reason, my code got broken whenever I tried adding more. So I just settled with varying the colors of the building to be more random.

heeseoc-LookingOutwards-09

I decided to reply to Joohee Kim’s post, about a generative art titled “Random Numbers,” created by generative artist Marius Watz and data artis Jer Thorp. I was browsing through all the posts she had made, and thought I like the look of the generated object, how the layers of lines create a dimension, and was curious about the algorithm behind it. In her post, Joohee describes about how she appreciates the randomness in this piece of artwork, and I also agree that this work has an interesting way of combining data and randomness, since those are the two contrasting ideas since data isn’t a thing that could be completely random. Also, the fact that the final piece was screen printed by hand gave it a bit more authenticity because it has a original yet unexpected quality to it since the outcome is not necessarily the same each time, and the concept of it is parallel to the “data and randomness” since they use the same exact frame for printing but the results come out as random.

https://creators.vice.com/en_us/article/vvzxkb/random-numbers-screen-printed-generative-art-nyc-event

LookingOutwards06-jooheek

heeseoc-Project-09-Portrait

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-09

var img;

// load image
function preload() {
	var imageurl = "https://i.imgur.com/jYztupF.jpg";
  	img = loadImage(imageurl);
}

function setup() {
	createCanvas(500, 500);
	background(0);
	img.loadPixels();
	frameRate(20);
}

function draw() {
	
	//array for the letters that comes up in random sizes and position
	//which spells out the name of my roomate in order
	var name = [];
	name[0] = "j";
	name[1] = "o";
	name[2] = "o";
	name[3] = "h";
	name[4] = "e";
	name[5] = "e";

	//the position of the letters
	var x = random(width);
	var y = random(height);

	//assigning colors to the letters according to the pixel of the image
	var ix = constrain(floor(x), 0, width-1);
	var iy = constrain(floor(y), 0, height-1);
	var dotcolor = img.get(ix, iy); 

	//letters of random sizes that shows up constantly
	noStroke();
	fill(dotcolor);
	textSize(random(10, 30));
	text(name[frameCount%6], x, y);

	//text that follows the mouse
 	var mousecolor = img.get(mouseX, mouseY);
	fill(mousecolor);
	textSize(10);
 	text("I don't know man", mouseX, mouseY);

}

I made a portrait of my roommate, Joohee, out of the letters of alphabet in her name and the phrase that she uses a lot. I wanted to somewhat capture her personality through this project, by the photo I chose and the text in a more minimal way. Below are the original photo and different experiments that I’ve done, only with text.

heeseoc-LookingOutwards-08

I watched the video of Frieder Nake, a German mathematician, computer scientist, and pioneer of computer art. He is internationally famous for his contributions to the earliest manifestations of algorithmic and generative art. In 1963, he began his first artistic experiments with the drawing machine of Konrad Zuse, at the Technical University of Stuttgart where he studied mathematics. The reason why I thought his lecture was interesting and worth watching was first of all, he set a significant cornerstone for computer art, trying out new things in the field yet unexplored. What he has done was so innovative and creative for the time period, and what we are doing in this class right now might not be the same if he hadn’t try out new things himself.He talks through his encounter with early generative art, what he had to go through as a pioneer of the field. Through presenting some anecdotes from of his life, he tries to demonstrate how algorithmic art requires algorithmic thinking, and how computer graphics is the origin of digital media. His lecture help us understand more in depth about the thought process of the people who initiated these practices, in a different language other than actual code. Listening to the talk by somebody who made his way through an unpaved path helped me make more sense of algorithms used in generative art.

What I really liked about his art, I think, came mostly from its originality. Of course, art is original in nature, but for his work, he did not have anything to make reference from. His works are truly experimental from all aspects. I attached one of his works that I liked below. Not only that I enjoy the visual composition or the color of the piece, but because I learned from the video about how he appreciates the whole process of generative art and algorithm, it gives the piece more meaning and life.

  • I wasn’t able to find his website anywhere online.
“Polygon Drawings” by Frieder Nake

Eyeo 2014 – Frieder Nake from Eyeo Festival // INSTINT on Vimeo.

heeseoc-Project-07-Curves

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-07

var a = 30;
var b = 10;
var t = 500;
var h = 80;

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

function draw() {
	background(0);
	stroke(255);

	push();
	translate(width/2, height/2);
	beginShape();

	//lines//
	for (var i = 0; i < 50; i++) {
		var Xcoord = ((a-b)*cos(i))+(h*cos(((a-b)/b)*i));
		var Ycoord = ((a-b)*sin(i))+(h*sin(((a-b)/b)*i));
		var Xcoord2 = ((a-b)*cos(i-t))+(h*cos(((a-b)/b)*(i-t)));
		var Ycoord2 = ((a-b)*sin(i-t))+(h*sin(((a-b)/b)*(i-t)));
		b = mouseX + 650;
		line(Xcoord + random(-3, 3), Ycoord+ random(-3, 3), Xcoord2+ random(-3, 3), Ycoord2+ random(-3, 3));
    	
    	//bubbles//
		push();
		rotate(i);
    	ellipse (i + random(-3, 3), Ycoord, 2, 2);
    	ellipse (i + random(-3, 3), Ycoord2, 4, 4);
    	ellipse (Xcoord, i + random(-3, 3), 2, 2);
    	ellipse (Xcoord2, i + random(-3, 3), 4, 4);
    	pop();
    }
    endShape(CLOSE);
    pop();
    
    //bigger circle//
    push();
    translate(width/2, height/2);
    beginShape();
    for (var i = 0; i < 20; i++) {
    	fill(255, 50);
        var theta = map(i, 0, 20, 0, TWO_PI);
        var x = mouseX * 0.25 + 60;
        var px = x * cos(theta);
        var py = x * sin(theta);
        vertex(px + random(-3, 3), py + random(-3, 3));
    }
    endShape(CLOSE);
    pop();

    //smaller circle//
    push();
    translate(width/2, height/2);
    beginShape();
    for (var i = 0; i < 20; i++) {
    	fill(0);
        var theta = map(i, 0, 20, 0, TWO_PI);
        var x = mouseX * 0.25 + 20;
        var px = x * cos(theta);
        var py = x * sin(theta);
        vertex(px + random(-3, 3), py + random(-3, 3));
    }
    endShape(CLOSE);
    pop();

}

For this project, I started off with browsing mathworld website and finding the curve that we would want to use. I chose hypotrochoid. Then, I tried to generate that curve through coding, and what I found out was at some point, the lines that I made through the equation I chose made an eye-shaped form at some point, so I restricted the mouse movement to have it start from the shape and added wiggly circles in the middle of those lines. I added the wiggly bubbles in the back because it felt like it needed some more elements to it to have some sort of a visual balance. I kept all the colors white, because I did not want it to be way to literal in communicating my “zooming into an eye” idea. Below is the screenshot of the shape I got inspired from.