Author: Jisoo

Jisoo Geum – Looking Outwards 07

Interstitial Fragment Processor (2007)  – Goland Levin

link:  http://www.flong.com/projects/ifp/

Interstitial Fragment Processor is an interactive system that maps and visualizes the negative space created by our bodies. The sensor records and collects data from the silhouette of people’s body, and then animates shapes that are based on the holes created from the silouette. The shapes in the screen eventually fall down and create sound effects as it hits the bottom of the screen. Although the artist Goland Levin has numerous other works that are based on interaction design and physical computing, I found Interstitial Fragment Processor the most interesting due to its sound element. Also, I thought that the idea of visualizing and mapping the shapes of our body was a unique topic within the category of data art. I also think the artist’s vision of creating works that provide rich interactive experience is best represented through Interstitial Fragment Processor since the software urges people to make different poses in order to see more of the artwork. The artistic sensibilities are best portrayed through the sound and animation in this work since these features effectively emphasize the physical and sensible nature of the work. In terms of algorithms, the artist built a spontaneous performance system for audiovisual improvisations and a synthetic visualization of the mass created by our body. The software can somewhat accurately outline the negative space of our bodies even when they are constantly moving, which is why I appreciate the building of this system.

 

Jisoo Geum – Project 07 – Curves

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-07
var x;
var y; 
var bR; // big radius outside 
var r; // smaller radius inside 
var d; // distance from the center of the interior circle 
var mx; // mouseX
var my; // mouseY 

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

function draw() {
    background(255,0,0);
    translate(width/2, height/2);
    noFill();
    mx = constrain(mouseX,0, width);
// draw a Hypotrochoid with ellipses 
        strokeWeight(1);
        stroke(255);
        for (var a = 0; a < 2*TWO_PI; a ++){ // a is angle 
            bR = 50; // big radius 
            r = map( mx, 0, width, 10, 65 ); // small radius
            d = map( mx, 0, width, 10, 100 ); // distance 
            x = (bR-r)*cos(a) + d*cos( ((bR-r)/r)*a ) ;
            y = (bR-r)*sin(a) - d*sin( ((bR-r)/r)*a ) ;
        ellipse(0,0,x*5,y*7);
        }

// draw Nephroid
            strokeWeight(0.25);
            stroke(255);
            for (var a = 0; a < 10*TWO_PI; a ++){ // a is angle 
                bR = map( mx, 0, width, 0, 130 ); // big radius  
                x = bR*((3*cos(a)) -  (cos(3*a))) ;
                y = bR*((3*sin(a)) -  (sin(3*a))) ;
            ellipse(0,0,x*30,y*15);
            }

// draw Hypotrochoid 
    beginShape();
        strokeWeight(.75);
        stroke(255);
        for (var a = 0; a < 25*TWO_PI; a ++){ // a is angle 
            bR = 200;   // big radius 
            r = map( mx, 0, width, 10, 130 ); // small radius
            d = map( mx, 0, width, 10, 300 ); // distance 
            x = (bR-r)*cos(a) + d*cos( ((bR-r)/r)*a ) ;
            y = (bR-r)*sin(a) - d*sin( ((bR-r)/r)*a ) ;
        vertex(x,y);
        }
    endShape();

}

 

I first went to WolframMathworld website too look for shapes that I found interesting. I eventually decided to use the equations for hypotrochoid and nephroid since I thought the combination of roulette and plane curves would make a good contrast.  Although the curves in the final iteration didn’t turn out as I thought, I thought that the shapes were still interesting.

These are the process images before I adjusted the limits in the for loops and the parameters of vertex & shapes. If I could change anything from the final design, I would adjust the map()  more so that the movement would look more organized.

Jisoo Geum Project – 06

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-06
var prevSec;
var millisRolloverTime;
var sx =[];
var sy =[];
var gx = [];
var gy = [];
var pr = 0;
var pg = 0;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0; 
    angleMode(DEGREES);
}

function draw() {
    background(188,236,235);
    var H = hour();
    var M = minute();
    var S = second();
    
    //shadow 
    noStroke();
    fill(148,219,217);
    ellipse(240,400,350,50);
    

    // top part of the pomegranate 
    var colR = map (H,0,24,82,224);
    var colG = map (H,0,24,193,0);
    fill(colR,colG,86);
    triangle(240,53,260,115,220,115);
    triangle(260,85,270,115,250,115);
    triangle(220,85,230,115,210,115);
    
    //body of the pomegranate 
    strokeWeight(10);
    stroke(colR,colG,86);// outer layer color changes every hour (from green to ) 
    fill(255,242,205); // inner layer color 
    rect(90,120,297,280,120); 
    noStroke();
    fill(165,0,70); // darker part inside the pomegranate  
    rect(111,140,256,241,100);
    fill(255,242,205); 
    rect(222,113,35,23,50); // tip part 
    rect(230,128,20,262); // the line that divides the pomegranate 
    
    // seeds 
    for(var i = 0; i < M; i++){
        // number of seeds change depending on the current minute 
        sx =[212,193,272,214,269,214,269,214,269,214,269,214,269,214,269,212,272,191,293,193,290,290,193,290,193,290,193,290,193,290,192,291,171,312,172,311,172,311,172,311,172,311,172,311,170,313,150,333,150,334,150,334,148,335,151,333,130,353,130,353];
        sy =[166,219,166,194,194,220,220,246,246,298,272,271,298,324,324,350,350,167,167,193,193,219,245,245,270,271,297,297,323,323,349,349,181,181,207,207,233,233,259,259,285,285,311,311,337,337,198,198,230,230,260,260,287,287,318,318,239,239,265,265];
        gx = [210,195,269,213,271,213,270,213,271,213,271,213,271,213,271,210,273,192,297,195,293,293,197,292,195,297,197,297,195,297,196,298,174,319,175,318,175,318,173,318,175,318,174,318,174,310,153,340,154,340,153,340,151,342,154,339,133,360,133,360];
        gy = [162,217,163,193,191,217,217,243,243,295,268,268,295,321,321,347,347,167,167,191,191,216,243,242,267,273,299,299,320,325,351,351,183,183,209,209,235,235,256,261,282,287,308,313,339,339,200,200,232,232,261,261,289,289,320,320,241,241,267,267];
        
        // to make the seeds rotate by seconds 
        push();
        var tilt = (S*(30));
        translate(sx[i], sy[i]);
        rotate(tilt); 
        fill(255, 63, 113);
        ellipse(0,0, 15, 22); 
        pop();

        //the white glow 
        fill(255);
        ellipse (gx[i],gy[i],5,5);
     
    }
}

I decided to use the seeds in a pomegranate to describe minutes and then make them rotate to represent seconds. The color of the pomegranate changes every hour, turning from green to red.

The most challenging part of this assignment was putting all the coordinates for the seed values. I knew that there would be a way to use ratio and for loop to avoid the tedious part, but I could not figure out how to use it with the minute () function.

The reason why I chose to make the colors change from green to red is to show how a pomegranate’s color changes over time as it becomes ripe.

Jisoo Geum – Looking Outwards 06

https://www.tandfonline.com/doi/pdf/10.1080/17513472.2013.769833

Carola-Bibiane Schönlieb and Franz Schubert

Arnulf Rainer Piece – Processing Algorithm (2012) 

This piece is created by a team of programmers, Carola-Bibiane, Schönlieb, and Franz Schubert. By creating a set of random curves that are drawn sequentially, they emulated the etched prints of Arnulf Rainer shown below.

Essentially, the lines are generated by the random number generators, which eventually create ‘pseudo’ random numbers. The most admiring part about this work, despite the fact that the work is not original, was the number of rules that the creators had to set in order to perfectly copy the work of Arnulf Rainer. Although the image looks simple, the curves seemed to be encoded with intricate set of planned parameters. The fact that these fine lines are created by using randomness, but with a set of restrictions, was fascinating to me. To expand on this idea, the piece made me wonder if perfect randomness is even possible and, if it does, whether the final product will look the same as the usual ‘randomly generated’ numbers or shapes. The artistic sensibilities are best shown through the idea of copying an organically generated piece into a digital image, using the exact opposite method: the computer.    

Jisoo Geum – Looking Outwards 05 – 3D Computer Graphics

INTANGIBLE MATTER 2016

By Lucy Hardcastle

work: https://lucyhardcastle-thefifthsense.i-d.co/en_gb/

Intangible Matter is a browser-based interactive motion graphic created by Lucy Hardcastle, which recreates a visceral experience of the Chanel perfume No.5 L’Eau.

For this particular project, Hardcastle collaborated with web/content developers, sound artists, and animators who work with software such as Javascript, Maya, Adobe programs, and etc. What I admire the most about this project is its full utilization of every possible artistic element in the creation of the final browser. The web form allows people to interact with the content physically, while visually engaging them with grandeur motion graphics. In addition, the sound embedded in every theme brings the audience even further to the experience. While Hardcastle’s artistic sensibilities are best represented in the visual rendering of texture and intangible experiences, I believe that the interactive feature of the final art form – how users have to click and complete every task to move further – works as a powerful element that makes this project unique.

Jisoo Geum – Project 05 – Wallpaper

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-05
var rect1y = 50;
var rect1x = 10;
var rect2xy = 25; 
var rect3y = 81;
var rect3x = 0;
var rect4y = 0;
var rect4x = 50;

function setup (){
	createCanvas(600,600);
	background(1,59,255);  
}

function draw(){
    // red lines 
    for (var redvertX =5; redvertX<width; redvertX+=10){
            stroke(252,59,69);
            line( redvertX, 0, redvertX, height ); 
    }
    // yellow lines 
    for (var yellowY = 40; yellowY < height; yellowY +=100){
        stroke(255,190,8);
        line(0,yellowY, width, yellowY);
    }
    //first rect layer (3rd one from the right top)
    for (var numbY= 0; numbY < 6; numbY++){ // the y number of squares increase till 6 
        for (var numbX = 0; numbX < 6; numbX++){ // the x number of squares also increase till 6
            var r1y= rect1y +numbY * 100; // position of y increases by each tile
            var r1x = rect1x +numbX * 100; // position of x also increses
        fill(1,59,255);
        stroke(255);
        rect(r1x,r1y,40,40);
    // 2nd rect layer (2nd one from the right top)
            var r2y= rect2xy +numbY * 100;
            var r2x = rect2xy +numbX * 100;
        fill(1,59,255);
        stroke(255);
        rect(r2x,r2y,50,50);
    // 3rd rect layer (bottom left corner)
            var r3y= rect3y +numbY * 100;
            var r3x = rect3x +numbX * 100;
        noFill();
        stroke(255);
        rect(r3x,r3y,19,19);
    // 4th rect layer (top right)
            var r4y= rect4y +numbY * 100;
            var r4x = rect4x +numbX * 100;
        noFill();
        stroke(255);
        rect(r4x,r4y,50,50);
     }
    }
}

I decided to create a geometric pattern that looks interconnected.

The final pattern turned out to be more simple than my initial design because I could not create a big gap between every 10 or 3 lines as shown above.

I tried to reduce the number of lines like the picture above, but I ended up creating dense lines using the for-loop.

Jisoo Geum – Looking Outwards 04 – Sound Art

Mileece “Nightfall” 2003

Mileece Abson is a sonic artist and an environmental designer who creates sound art using plants. Mileece generates original sound by connecting electrodes to plants that conduce bioelectric emissions. Bioelectric emissions are currents that come from different plants. The electrodes that are attached to leaves then conduct currents and send the information to an amplifier. The amplifier than transfers the currents into codes and transmit the codes into a software that animates the sound.

Her music tends to be extremely subtle and abstract, capturing the movement and growth of nature. I liked the organic and peaceful energy that her sound creates; it felt like I was brought to a different space. Miller’s music style and vision were also very inspiring because of her vision behind the work. As an ambassador of environments and renewable energy, Mileece mirrors her passion by creating sound art that facilitates connections between people and nature.

Jisoo Geum – Project 04 – String Art

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-04

function setup (){
	createCanvas(400,300);
	background(255);
}

function draw(){
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var circS = 10;
	//var ix = 1.2;
	var iy = 1.1;
//rectangle 
	fill(255,150,143);
	noStroke();
	rect(190,0,215,190);

//ellipses 
     for (circX = 0; circX <= width; circX += 15 ){
     	for (circY = 0; circY <= height; circY +=10){
     		if (circY>180){break;} // makes the loop stop at a certain point 
     		if (circX>180){break;}
     	circY = circY * iy;
     	//draw circles 
     	stroke(255,126,143);
     	strokeWeight(.5);
     	// circles at top left
     	noFill();
     	ellipse(circX ,circY , circS ,circS );
     	// circles at the bottom right 
     	push();
     	translate(200,200);
     	ellipse(circX ,circY , circS ,circS );
     	pop();		
 		}	
 	}
    //point loops from top left  
    for (var i = 0; i < 80; i++){ // assign increment value as i 
        x1 += i+10;
        y1 += i;
        x2 += 20;
        y2 += 10; 
        // grey lines 
        stroke(90);
        line(100, 0, width, y1); 
        if (x1 > 500){break;}
        line(width, height, 90+x1, 0); 
        // light blue lines
        stroke(109,145,255);
        line(0, y1, x1, height); 
        // dark blue lines lines
        stroke(40,90,255);
        line(100, y1, x1+100, height);      
    }

}

 

This project was very experimental for me since the process was different from the previous ones. I usually draw my ideas in my sketchbook or illustrator, and then translate it into javascript. For the string art, however, I began straight from javascript and then decided on the other elements such as shapes and color. I think using the line loop was very difficult to me because I often got confused with the x and y coordinates.

Jisoo Geum – Looking Outwards – 03

 

Circular Knitic 2014, created by Varvara Guljajeva and Mar Canet.http://www.varvarag.info/circular-knitic/

Circular Knitic is an automated machine made by an artist duo, Varvara Guljajeva and Mar Canet, which renders textile designs into a physical form through knitting.

The duo first began the project in 2012 when they were interested in working with knitting machines. Although knitting machines have existed since 1976, they became obsolete over time due to the lack of accessibility. As a solution, the duo developed an idea of an open source contemporary knitting machine that can be made by digital fabrication media. They achieved the goal in 2014 by creating Circular Knitic and uploaded the open source file on GitHub so that anyone who has the access to 3D printer, laser cutter, makerbeam, and Arduino can build the machine on their own. The algorithm that was used for their early design of Circular Knitic was a board that holds control over obsolete machines and knit patterns through a computer. At a glance, the machine itself did not seem like an artwork, which is the reason why it fascinated me the most. Circular Knitic was a machine made by digital fabrication ‘machines’ that can create an infinite amount of new artworks through soft sculpture. Furthermore, the fact that anyone can have access to the machine and render their own unique vision seemed like a perfect example of new media. The images that come to my mind when I think about digital fabrication are usually hard objects such as a sculpture with intricate surface patterns and cutouts (or even products such as fidget spinners). But making a machine that produces soft fabrics that not only is an artwork on its own but also can become a resource for daily life and fashion was inspiring. The duo has shown passion in creating interactive artworks using coding and visual arts for many years, but I could see their vision the most clearly in Circular Knitic project since it is a work of art that requires the most interaction.

 

Jisoo Geum – Project 03 – Dynamic Drawing

Move the cursor vertically

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-03
var bgr = 221;
var bgb = 212;
var bgg = 197;
var shW = 122; //shoulder width
var shH = 110; //shoulder height
var shX = 261; // x axis of shoulder
var shY = 313; // y axis of shoulder 
var lfteyeX1 = 297.91;
var lfteyeY1 = 254.05;
var lfteyeX2 = 316.61;
var lfteyeY2 = 254.05;
var rgteyeX1 = 326.4;
var rgteyeY1 = 254.05;
var rgteyeX2 = 345.1;
var rgteyeY2 = 254.05;

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

function draw(){
var my = 300 + mouseY*0.02 ; // shoulders' position change when cursor moves vertically 
var mthW = 4 + -mouseY * 0.05; // mouth width changes when cursor moves vertically
var haloSize = mouseY * .8; // size of the halo increases as the cursor moves down 
var transparencyL = mouseY * 0.3; // to make lines (and arcs) appear as the cursor moves down
var transparencyH = mouseY * 0.7; // to make the halo appear as the cursor moves down 
var relaxX = mouseY * 1.2; // to make text 'relax' moves horizontally
var transparencyT = mouseY * 0.5; //changes transpareny for the text 
var circleSizea = mouseY * .85; // the radius of the arcs changes as they rotate 
var circleSizeb = mouseY * .95;
var circleSizec = mouseY * 1.05;
var circleSized = mouseY * 1.15;
var circleSizee = mouseY * 1.25;
var circAngle = mouseY *1; // angle of which the circles in the background rotate

	background(bgr,bgb,bgg); // background color turns to white 
	if (mouseY > 0  & mouseY < height) {
	bgr = 221 + mouseY/10
	bgb = 212 + mouseY/8
	bgg = 197 +  mouseY/5
}
	//lines around the halo 
	stroke(242,187,161, transparencyL)
	strokeWeight(4);
	push();
	translate(320,240);
	rotate(mouseY/150);
	line(0,0,0,-180);
	line(0,0,86,-166);
	line(0,0,160,-100);
	line(0,0,180,0);
	line(0,0,160,100);
	line(0,0,86,166);
	line(0,0,0,180);
	line(0,0,-86,166);
	line(0,0,-160,100);
	line(0,0,-188,0);
	line(0,0,-160,-100);
	line(0,0,-86,-166);
	pop();

	//halo 
	noStroke();
	ellipseMode(CENTER);
	fill(242,187,161,transparencyH);
	ellipse (320,240,haloSize,haloSize);

	// arcs (or circles ) around the halo 
	push();
	noFill();
	stroke(242,187,161, transparencyL);
	translate(320,240);
	rotate(radians(circAngle));
	arc(0,0,circleSizea,circleSizea,PI,PI/2);
	arc(0,0,circleSizeb,circleSizeb,PI/2,TWO_PI);
	arc(0,0,circleSizec,circleSizec,TWO_PI,PI-QUARTER_PI);
	arc(0,0,circleSized,circleSized,PI-QUARTER_PI,PI);
	arc(0,0,circleSizee,circleSizee,PI,PI/2);
	pop();


	//text
	fill(255);
	textSize(50);
	textFont('impact');
	text('Relax',relaxX,100);


	//water on the floor
	fill(203,224,224);
	ellipse(320,440,530,70);
	noFill();

	//wave thingy 
	stroke(255); 
	strokeWeight(2);
	arc(320,435,320,20,PI,0);
	arc(312,438,445,52,PI, 0);
	arc(320,445,390,40, 0,PI);


	//bath tub legs 
	noStroke(); 
	fill(181);
	ellipse(176,420,15,58);
	ellipse(457,420,15,58);

	//neck
	fill(236,118,118);
	rect(311.481,282.847,20,34);

	//towel 
	fill(215,237,217);
	rect(275.37,212.36,90,60,50);

	//face
	fill(255,129,129);
	ellipse(321.06,261.31,65,75);

	//shoulder
	fill(255,129,129);
	rect(shX,my,shW,shH,20);

	// eyes
	stroke(90,129,129);
	strokeWeight(2) ;
	line(lfteyeX1, lfteyeY1,lfteyeX2,lfteyeY2);
	line(rgteyeX1,rgteyeY1,rgteyeX2,rgteyeY2);

	//mouth
	fill(236,76,119);
	noStroke();
	ellipse(321.06,282.92,mthW,4);

	//tub
	fill(255);
	arc(320,340,407,250,TWO_PI,PI);




}

This project was very fun to do but challenging at the same time since the prompt was open-ended. I wanted to give a theme to the project but also incorporate an abstract element. I ended up drawing a person resting in the bathtub whose shoulders move up and down while the cursor moves vertically. I thought I would need to use a lot of ‘if’ statements but I figured that assigning a lot of variables would be more simple. I definitely think that I could have improved the movements in the background and add more shapes to it.

Initial sketches on Adobe illustrator.