Portfolio+2015+YuYu

O F T R O

HSUA N E YU W

N

P 015 2

O I L

CONTENT Break up with the World, Mind the Gap, Installation, Condensed Image Test, What do you Expect, Photograph Work, Social Observation Note,

Installation, Projection, 2015 Projection, 2014

Experiment Image, 2015

Installation, 2014

Collection, 2014-2015

Reviews, 2014

INSTALL ATION,PROJECTION

BREAK UP WITH THE WORLD ABSENT, ALWAYS

DETACHED FROM THE WORLD “You ever have that feeling where you’re not sure if you’re awake or dreaming?”

Seeing, hearing , feeling, tasting and smelling: the five senses that govern how we interact with the world.

I started thinking about differences in perceiving the real world and my fantasy. They compliment each other, disturbing me how to recognize all the things in my eyes. It is hard for me to focus on a object, even it is a normal one. I would rather imagine all objects are drifting, moving and trying to escape the present situation. This is a way to reflex how I am confused and feel detached with the reality.

After sinking into my fantasy, I can see the objects moving with abnormal ways. In other words, every object is endowed its unique function. However, I change their functions making them becoming useless. They are no more functional and reasonable. The solid on can become soft texture.The fixed table can start rotating. Moreover, every boring things represent their passion simultaneously.

With the dreamlike projection dressing on the real scene, I desire to reappear how chaotic and unpleasant in my mind. No matter how calm and rational I look, there is no moment I five up to reverse the reality and virtual world.

The connection with the fact and the fake is unstable.

For example, when commuting to school, my brain is usually highly exciting. Consequently, the phantom-played world defeats the real one. On the other hand, after school, with exhausted body, I would get closer to the real world which means the abnormal objects are far away from me. It seems that I always dive in the sea. Sometimes I get close to the sea surface and sometimes dive deeply to embrace another world.

ABOUT THE SCENE:

When I recalled my mundane in daily life, I though them as pieces of my life. These pieces construct me. Therefore I find many planes which couldn’ t be flat as layers where I planed to project my videos. Where I projected the video may be a twist corner or even just a raincoat. These uneven planes result in the rough video images, making people confused what exactly the images are. The glitch of the images reveal how struggle I feel in my daily life.

I leave a window in the room. I suggest this window as the channel I can go anywhere. In other words, containing the window for this installation seems we can just stand there and watch it inhaling and exhaling. I hope my work could hold a little bit isolated atmosphere and also remain the human being characters.

K A

D

B

D

I

J

C

L

I E

K

L

F G

F H

N

S

DREAM NG

M

A – ‘ Alive leaves ’ gradient green | unique B – ‘ Cup : with hot water ’ black eyes | lazy always

C – ‘ Colorful Post It : use and re-use ’ plastic | the direction D – ‘ PU Sticks : hold the two sides ’ shaking | illusions E – ‘ Toys : from my room ’ which can | span itself

ES

SONS

F – ‘ Ping Pong Balls : @ MRT ’ station | flipping around

N

G – ‘ Hyperbola 2 : elegant ’ upside down | hourglass H – ‘ Magic Box : unsolved ’ busy hands | struggled mind I – ‘ Hyperbola : model ’ shape | the desk J – ‘ Book Marks: lie along ’ the paper | useless K – ‘ Medicine: powder inside ’ got a flue | running nose, dizzy L – ‘ Toys : a fireworker ’ loops | seems it never ends M – ‘ Tennis Racket : lean on a wall ’ rotating | nervous

SELECTED OBJECTS \\AND THEY DRIFT

Open with Preview

MIND THE GAP VISUALIZE IT

Open with Preview

INTERACTIVE PROJECTION

Open with Preview

t;// The font must be located in the sketch's // "data" directory to load successfullychar[] str = new char[2];int[] diff_my = new int[2];int loat distortionFactor = 1;float initRadius = 150;float centerX, centerY;float[] x = new float[formResolution];float[] y = new float[formResoluti p0, p1, p2, p3, shift;//four vectors for the bezier and one for shifting iterationsfloat cx, cy, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y;//varia itVelocity, vScale, velocityScale;int oldMouseX = 1, oldMouseY = 1;int numParticles;int nextIter =0;boolean move = false;Particle[] particles;Ra t;Phasor phasorColor;float offsetX;float offsetY;//visual1_3int nFrames_1_3 = 256;ArrayList shapes_1_3;Phasor phasor_1_3;Phasor phasor_1_3Amp;// int currentCount = 1;float[] newx = new float[maxCount];float[] newy = new float[maxCount];float[] x_2_1 = new float[maxCount];float[] y_2_1 = n sor_2_2Amp;Phasor phasor_2_2Width;Phasor phasor_2_2Height;Phasor phasor_2_2Randomness;float offset_2_2X;float offset_2_2Y;//visual2_3int xspacin le at 0float amplitude = 175.0f; // Height of wavefloat period = 500.0f; // How many pixels before the wave repeatsfloat dx; ues for the wave (not entirely necessary)//visual2_4float margin;float padding;float angle;float angleSpeed;//visual3_1ArrayList<PVector> stars ;float phasor_3_2Inc = 1.0 / (float) nFrames_3_2;ArrayList lineSegments;//visual3_3PVector[] loc;// circles have radius radfloat[] rad;// there CE = 15.0;ArrayList p;int TAIL_LENGTH = 133;float FRICTION = 0.006;float FOLLOW_SPEED = 30.0;int C_TRAIL_LENGTH = 3000;float sx, sy;PVector cen ame;PVector g = new PVector(0,9.8); //gravedadfloat dt = 0.1;int i_same = 0;//visual_2_5float raggio1 = 100; // 1째 segmentofloat raggio2 = 100; segmentofloat passoAngolo2 = PI/150; // 2째 segmentofloat passoAngolo3 = PI/60; // 3째 segmentofloat passoAngolo4 = PI/30; // 4째 segmentocol Graphics(1440,860,P3D); server = new SyphonServer(this, "Processing Syphon"); canvas.beginDraw(); canvas.smooth(); canvas.noStroke(); canva 34F99); rectBg = color(#4C5D73); //rectBg = color(204,102,108); //visual0_1 centerX = width*3/4; centerY = height*3/4; float angle = s; } //visula0_2v circles = new ArrayList(); float nCircles = 256.0; for (int i = 0; i < (int) nCircles; i++) { float n = (float) i / ght * 0.618 + height * (1 - 0.618)), n * 6 + 0.5, d, i % 2 * PI * random(-randomAngle, randomAngle) ght/2); p3 = rand(width/2, height/2); shift = rand(30, 30);//a random vector to offset each iteration of the bezier cx = shift.x;//post-lerp 1y = p2y = p3y = 0;//post-lerp bezier coordinates n = 0;//at n=0 the point is at p0, as n approaches 1 the point approaches p3 l = 0.004;//rat Particle[numParticles]; visc = 0.0008f; diff = 0.25f; velocityScale = 16; limitVelocity = 200; canvas.stroke(color(0)); canvas.fill(color float) nFrames_1_2 * 1.1); phasorWidth = new Phasor(1.0 / (float) nFrames_1_2 * 1.2, 0.75); phasorHeight = new Phasor(1.0 / (float) nFrames_1_ = (sin((float) i / (float) nShapes * TWO_PI * 15) + 1.0) * 0.5 * 0.05 + 0.2; PVector v = getVCoordinates(width * 0.5, height * 0.5, foo * wi ArrayList(); phasor_1_3 = new Phasor(1.0 / (float) nFrames_1_3); phasor_1_3Amp = new Phasor(1.0 / (float) nFrames_1_3 / 4); nShapes = 128 _PI * 37); // 37 shapes_1_3.add(new Ring(v.x, v.y, 2)); } //visual1_4 angle = radians(360/(leaf.length)); for (int i=0; i < leaf.length; f[i] = new Leaf(x, y, x2, y2); } //visual2_1 x_2_1[0] = width/2; y_2_1[0] = height/2; r_2_1[0] = 150; //visual2_2 shapes_2_2 = new Array ew Phasor(1.0 / (float) nFrames_2_2 * 1.7); phasor_2_2Height = new Phasor(1.0 / (float) nFrames_2_2 * 1.9); phasor_2_2Randomness = new Phasor( ght * 0.5, width * 0.125, (float) i / (float) nShapes * TWO_PI * 31); shapes_2_2.add(new VertexShape(v.x, v.y)); } //visual2_3 w = width+1 gin / 12.0; angle = 0; angleSpeed = PI / 10; //visual3_1 w2=width/2; h2= height/2; d2 = dist(0, 0, w2, h2); //visual3_2 lineSegments = n (float) i / nLines * TWO_PI); lineSegments.add(new LineSegment(v.x, v.y, width, (float) i / nLines * TWO_PI)); } //visual3_3 loc = new PVe ; } //visual3_4 //bck = loadImage("bck.png"); center = new PVector(0, 0); scenter = new PVector(0, 0); centrail = new ArrayList(); p = ne ctor center = new PVector(width/2, height/2); p_same = new Particula2(center); // canvas.endDraw();}void draw() { canvas.beginDraw(); if( wNextText == 1) { canvas.text("French Fries",textX, textY+150); // the second line } } else if (iter == 2) { canvas.background( made. ",textX, textY+45); } else if (iter == 3) { canvas.background(255,240,255); canvas.text("When I have the bandon,",textX, textY) y); canvas.stroke(0); canvas.strokeWeight(2); canvas.pushMatrix(); if(sDiff.equals("[0, 0]")) { if(bgColor==0) { e if(sDiff.equals("[0, 2]")){ visual0_3(); } else if(sDiff.equals("[0, 3]")){ visual3_1(); } else if(sDiff.equals("[ l3_1(); } else if(sDiff.equals("[1, 3]")){ visual3_4(); } else if(sDiff.equals("[2, 0]")){ visual3_2(); } else )){ visual3_4(); } else if(sDiff.equals("[3, 0]")){ visual1_3(); } else if(sDiff.equals("[3, 1]")){ visual2_ vas.popMatrix(); canvas.stroke(0); canvas.strokeWeight(3); canvas.colorMode(RGB, 255); canvas.fill(0); canvas.str e if(bgColor==2) { draw3(); } else if(bgColor==3) { draw5(); } } canvas.endDraw(); image(canvas,0,0); server Key == 'a' || previousKey == 's' || previousKey == 'd' || previousKey == 'f') { if (key == 'h' || key == 'j' || key == 'k' || key == 'l') { urn; } } if (previousKey == 'h' || previousKey == 'j' || previousKey == 'k' || previousKey == 'l') { if (key == 'a' || key == 's' || k urn; } else { return; } } if( showNextText==0 ) { showNextText = 1; } else { previousKey = key; }}void setDiff (ch l")) { nDiff = 0; } else if(cStr.equals("aj") || cStr.equals("sh") || cStr.equals("sk") || cStr.equals("dj") || cStr.equals("dl") || cStr.eq cStr.equals("al") || cStr.equals("fh")) { nDiff = 3; } if (iter == 1) { bgColor = nDiff; } else { diff_my[iter-2] = nDiff; }}void m ctBg); canvas.rect(0,0,500,300); canvas.translate(width/2-500, height/2-255); //background(#134755); //canvas.stroke(255,210,135) litude float px = (x*100+y*15*sin(n_draw))/2.2; // sin(n) : simulates rotation over x axis float py = (-z*130+y*30)/2.2; ca ; canvas.rect(0,0,500,300); canvas.translate(width/2-sin(n_draw/2)*40, height/2+sin(n_draw)*40); //translate(width/2, height/2); //b in(2*n_draw) * x*x; // sin(n) : changes amplitude float px = (x*90+y*12*sin(n_draw)-300)*0.5-310; // sin(n) : simulates rotation over x a canvas.point(px, py); } } } n_draw+=0.05; // speed if (n_draw>4*PI) { // 2*pi n_draw=0; }}void draw3() { 5,210,135); for (float y= -3.2; y<3.2; y+=0.1) { for (float x = -3.2; x<3.2; x+=0.2) { float z = sin(2*n_draw) * (sin(x)*4)/7; // *40)*0.8+10; canvas.point(px, py); } } n_draw+=0.05; // speed if (n_draw>6.28) { // 2*pi n_draw=0; }}void draw4() { oat y= -3.2; y<3.2; y+=0.2) { for (float x = -3.2; x<3.2; x+=0.02) { float z = sin(2*n_draw)*cos(x *y); // sin(2*n) : changes amplit 75+30, py*0.55+20); } } n_draw+=0.05; // speed if (n_draw>6.28) { // 2*pi n_draw=0; }}void draw5() { // cos(x*x+y*y) / 5,210,135); for (float y= -3; y<3; y+=0.2) { for (float x = -3; x<3; x+=0.04) { float z = sin(2*n_draw)*cos(x*x + y*y) / (x*x + y*y) -z*120+y*30)*0.5+20; if(!((px+width/2-500) > 500.0) && !((py+height/2-300) > 300.0)) { canvas.point(px, py); } } sualBg); } canvas.stroke(0, 50); if(nIter%100==0) { ramX = r.nextInt(width); ramY = r.nextInt(height); } nIter++; // floating towa nts for (int i=0; i<formResolution; i++){ x[i] += random(-stepSize,stepSize); y[i] += random(-stepSize,stepSize); // ellipse(x[i], y[i n-1]+centerX, y[formResolution-1]+centerY); // only these points are drawn for (int i=0; i<formResolution; i++){ canvas.curveVertex(x +centerY); canvas.endShape(); }String timestamp() { Calendar now = Calendar.getInstance(); return String.format("%1$ty%1$tm%1$td_%1$tH%1 t i = 0; i < lsSize; i++) { CirclesOnALine thisCircle = (CirclesOnALine) circles.get(i); thisCircle.draw(); } updatePhasor();}PVect sorInc; if (phasor >= 1.0) { phasor -= 1.0; }} class CirclesOnALine { PVector v; float r, d, a; // radius, distance, angle CirclesO es(v, d * phasor, a + PI); while (v1.x > -r && v1.x < width + r && v1.y > -r && v1.y < height + r) { v1 = getVCoordinates(v1, le (v1.x > -r && v1.x < width + r && v1.y > -r && v1.y < height + r); }}boolean inBounds(float x, float y) { return (x > 0 && x <= 0) {//every 160 frames or ~4 seconds shift = rand(30, 30); //randomize shift } p0x = lerp(p0x, p0.x, l);//move the bezier points gradu //use of PVector functions so it would work smoothly in js mode. p1y = lerp(p1y, p1.y, l); p2x = lerp(p2x, p2.x, l); p2y = lerp(p2y, p2.y, l) t i = -20; i < 20; i++) {//symnetrical(-20 to 20)iteration makes a leaf/ribbon shape canvas.noFill(); canvas.stroke(200, 100); canvas.s control point coordinates get shifted p2x + cx*i, p2y + cy*i, p3x, p3y); //B(t)=(1-t)^3 *p1 + 3*(1-t)^2 *t*p2 + 3(1-t)*t^2 *p at xe2 = 3*pow((1-n), 2)*n*(p1x + cx*i); float xe3 = 3*(1-n)*pow(n, 2)*(p2x + cx*i); float xe4 = pow(n, 3)*p3x; float x = xe1 + xe2 + x appropriate spot float ye3 = 3*(1-n)*pow(n, 2)*(p2y + cy*i); float ye4 = pow(n, 3)*p3y; float y = ye1 + ye2 + ye3 + ye4; canvas plete p0 = rand(width/2, height/2); p1 = rand(width/2, height/2); p2 = rand(width/2, height/2); p3 = rand(width/2, height/2); n = ; float y = random(-_y, _y); PVector r = new PVector(x, y); return r;}void visual0_4(){if(nIter == 0) { canvas.background(255);}if(nIter%50= if(r.nextInt(2)%2==1) {ramX = ramX + r.nextInt(nStep);} else {ramX = ramX - r.nextInt(nStep);}if(r.nextInt(2)%2==1) {ramY = ramY - r.nextInt(nSt idth*height-width-1;i>width;i--) pixels[i]=int((pixels[i-width]+pixels[i+1]+pixels[i-1])/3);canvas.updatePixels();}void visual1_1() { canva ntGrid(); canvas.stroke(color(96)); paintMotionVector((float) vScale * 2); vScale = velocityScale * 60/ frameRate; paintParticles(); .nextFloat() * width; particles[i].y = rnd.nextFloat() * height; } }private void paintParticles() { int n = NavierStokesSolver.N; cellX = floor(p.x / cellWidth); int cellY = floor(p.y / cellHeight); float dx = (float) fluidSolver.getDx(cellX, cellY); f lHeight - cellHeight / 2; int v, h, vf, hf; if (lX > 0) { v = Math.min(n, cellX + 1); vf = 1; } else { e { h = Math.min(n, cellY - 1); hf = -1; } float dxv = (float) fluidSolver.getDx(v, cellY); float dxh = ( at dyh = (float) fluidSolver.getDy(cellX, h); float dyvh = (float) fluidSolver.getDy(v, h); dx = lerp(lerp(dx, dxv, hf * lY / cell ellWidth), vf * lX / cellHeight); p.x += dx * vScale; p.y += dy * vScale; if (p.x < 0 || p.x >= width) { p.x = ran } } } private void handleMouseMotion() { if(move) { ramX = r.nextInt(width); ramY = r.

Iter+50; } move = !move; } nIter++; ramX = max(1, ramX); ramY = max(1, ramY); int n = N Y - oldMouseY; int cellX = floor(ramX / cellWidth); int cellY = floor(ramY / cellHeight); mouseDx = (abs((float) mouseDx) > limitVeloci itVelocity : mouseDy; fluidSolver.applyForce(cellX, cellY, mouseDx, mouseDy); oldMouseX = ramX; oldMouseY = ramY; } private void pain i < n; i++) { for (int j = 0; j < n; j++) { float dx = (float) fluidSolver.getDx(i, j); float dy = (float) fluidSolver.getDy( vas.line(x, y, x + dx, y + dy); } } } private void paintGrid() { int n = NavierStokesSolver.N; float cellHeight = height / n; llWidth * i, 0, cellWidth * i, height); } } public class Particle { public float x; public float y; } //visual1_2 class Phasor { se_; } void update() { phase += inc; if (phase >= 1.0) { phase -= 1.0; } if (phase < 0.0) { phase += 1.0; } }} vas.ellipse(v.x + offsetX, v.y + offsetY, r, r); } } class Shapes { PVector v; Shapes() { v = new PVector(); } void update() { } .noStroke(); if(nIter ==0 ){ canvas.background(VisualBg); } nIter++; canvas.fill(VisualBg,8); canvas.rect(0, 0, width, height); //back t i = 0; i < lsSize; i++) { color c = lerpColor(color(255, 128, 128), color(249, 66, 158), (sin((phasorColor.phase + (float) i / (float) lsSi _PI); offsetX = v.x * sin(phasorWidth.phase * TWO_PI); offsetY = v.y * cos(phasorHeight.phase * TWO_PI) * 1.617; Ring thisShape = (Ring update();}//visual1_3void visual1_3() { canvas.noStroke(); if(nIter ==0 ){ canvas.background(VisualBg); } nIter++; canvas.fill(VisualBg n(phasor_1_3.phase * TWO_PI * 8) + 1.0) / 2.0)); canvas.noStroke(); int lsSize = shapes_1_3.size(); for (int i = 0; i < lsSize; i++) { c loat) i / (float) lsSize + phasor_1_3.phase) * TWO_PI); canvas.translate(v.x, v.y); Shapes thisShape = (Shapes) shapes_1_3.get(i); dom(n/2.0, n); float y = random(n/2.0, n); float r1 = random(-1, 1); if (r1 < 0) { x *= -1; } float r2 = random(-1, 1); if (r2 < 0) { ft;//moving locations float cx, cy, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y;//variables used for lerp float[] n; float[] c; float l;//lerp sp PVector(_x2, _y2); sp2 = p2; p3 = new PVector(_x, _y); sp3 = p3; shift = rand(10); n = new float[12]; c = new float[12]; f = p2.x; p2y = p2.y; p3x = p3.x; p3y = p3.y; cx = shift.x; cy = shift.y; shift = rand(10); p1x = lerp(p1x, p1.x, l); p1y d update() { if (frameCount % 160 == 0) { shift = rand(10); } float r = random(1); if (r < 0.002 || frameCount % 80 == 0) {

bgColor = 0;//visual0_1int ramX;int ramY;int nIter = 0;int showNextText = 0;Random r = new Random();int formResolution = 15;int stepSize = ion];//visual0_2int nFrames = 32;float phasor = 0.0;float phasorInc = 1.0 / (float) nFrames;ArrayList circles;CirclesOnALine coal;//visual0_3PVe ables used for lerpfloat n;//used in bezier path calculationsfloat l;//lerp speed//visual1_1NavierStokesSolver fluidSolver;double visc, diff, andom rnd = new Random();//visual1_2int nFrames_1_2 = 512;ArrayList shapes;Phasor phasor_1_2;Phasor phasorAmp;Phasor phasorWidth;Phasor phasorHe /visual1_4Leaf[] leaf = new Leaf[24];float r_1_4 = 120;//radius of outer edges of leaves//visual2_1int maxCount = 5000; //max count of the cirlnew float[maxCount];float[] r_2_1 = new float[maxCount]; // radius//visual2_2int nFrames_2_2 = 512;ArrayList shapes_2_2;Phasor phasor_2_2;Phasor ng = 8; // How far apart should each horizontal location be spacedint w; // Width of entire wavefloat theta = 0.0f; // Star // Value for incrementing X, to be calculated as a function of period and xspacingfloat[] yvalues; // Using an array to store height = new ArrayList<PVector>();float h2;//=height/2float w2;//=width/2float d2;//=diagonal/2//visual3_2int nFrames_3_2 = 256;float phasor_3_2 = are num number of circlesint num = 512;// circles appear to be magnified by multiplication factor ratefloat rate = 1.05;//visual3_4float ATT_nter, scenter;ArrayList centrail;float zoom = 1.0;float ratio = 1.0;float l_3_4, r_3_4, t_3_4, b_3_4;Field field;PImage bck;//all_sameParticula2 ; // 2° segmentofloat raggio3 = 100; // 3° segmentofloat raggio4 = 100; // 4° segmento //velocità di rotazionefloat passoAngolo1 = PI/999; lor rosa = color(255, 206, 234);color fucsia = color(255, 0, 144);//int VisualBg; int rectBg;void setup() { size(1440,860,P3D); canvas = cre as.background(0); rectWidth = 100; canvas.textSize (50); font = loadFont("Serif-35.vlw"); canvas.textFont(font, 35); VisualBg = color radians(360/float(formResolution)); for (int i=0; i<formResolution; i++){ x[i] = cos(angle*i) * initRadius; y[i] = sin(angle*i) * initRa nCircles; float d = n * 256 + 1; float randomAngle = 0.25 * (1 - n); circles.add(new CirclesOnALine(new PVector(0.618 * width, n * ))); } //visual0_3 p0 = rand(width/2, height/2);//four random coordinates for the bezier p1 = rand(width/2, height/2); p2 = rand(width/2, x for shift cy = shift.y;//post-lerp y for shift shift = rand(20, 20);//reset shift so animation starts in motion p0x = p1x = p2x = p3x = p0 te at which the point traces the bezier //visual1_1 fluidSolver = new NavierStokesSolver(); frameRate(60); numParticles = 30000; particles r(0)); initParticles(); //visual1_2 shapes = new ArrayList(); phasor_1_2 = new Phasor(1.0 / (float) nFrames_1_2); phasorAmp = new Phasor(1. _2 * 1.3, 0.75); phasorColor = new Phasor(1.0 / (float) nFrames_1_2 * 4); int nShapes = 1024; for (int i = 0; i < nShapes; i++) { float idth, (float) i / (float) nShapes * TWO_PI * 3); shapes.add(new Ring(v.x, v.y, 3)); } //visual1_3 //shapes = new ArrayList(); shapes_1_3 8; for (int i = 0; i < nShapes; i++) { PVector v = getVCoordinates(width * 0.5, height * 0.5, width * 0.25, (float) i / (float) nShapes * ; i++) { float x = cos(angle*i)*r_1_4*2; float y = sin(angle*i)*r_1_4*2; float x2 = cos(angle*i)*r_1_4; float y2 = sin(angle*i)*r_1_ yList(); phasor_2_2 = new Phasor(1.0 / (float) nFrames_2_2); phasor_2_2Amp = new Phasor(1.0 / (float) nFrames_2_2 * 1.3, 0.5); phasor_2_2Widt (1.0 / (float) nFrames_2_2 / 1.5, 0.75); nShapes = 1024; for (int i = 0; i < nShapes; i++) { PVector v = getVCoordinates(width * 0.5, 16; dx = (TWO_PI / period) * xspacing; yvalues = new float[w/xspacing]; println(yvalues.length); //visual2_4 margin = width/20.0; padding new ArrayList(); float nLines = 64.0; for (int i = 0; i < (int) nLines; i++) { PVector v = getVCoordinates_3_2(width / 2, height / 2, width ector[num]; rad = new float[num]; for(int i=0;i<num;i++){ loc[i] = new PVector(); rad[i] = 0; } for(int i=0;i<num;i++){ getCircle ew ArrayList(); field = new Field(); for (int i = 0 ; i < 10;i++) p.add(new Particle_3_4(random(width), random(height))); //visual_same iter == 1) { canvas.background(255,240,255); canvas.fill(85,85,102); //text color canvas.text("Potato",textX, textY); if( (255,240,255); canvas.text("I will choose the latest dish in the Bandon store",textX, textY); canvas.text(",instead of the choose ); canvas.text("I eat my favorite dish in the last.",textX, textY+45); } else if (iter >= 4) { String sDiff = Arrays.toString(dif{ visual_same(); } else { visual0_1(); } } else if(sDiff.equals("[0, 1]")){ visual0_2(); [1, 0]")){ visual1_1(); } else if(sDiff.equals("[1, 1]")){ visual3_3(); } else if(sDiff.equals("[1, 2]")){ v e if(sDiff.equals("[2, 1]")){ visual2_5(); } else if(sDiff.equals("[2, 2]")){ visual2_3(); } else if(sDiff.equals("[ _1(); } else if(sDiff.equals("[3, 2]")){ visual1_2(); } else if(sDiff.equals("[3, 3]")){ visual1_4(); } roke(189,242,232); if( bgColor==0 && !sDiff.equals("[0, 0]")) { draw1(); } else if(bgColor==1) { draw2(); } r.sendImage(canvas); // keep draw() here to continue looping while waiting for keys}void keyPressed() { if(iter >= 4){ return; } if (prev str[0] = previousKey; str[1] = key; setDiff(str); iter = iter+1; previousKey = 'z'; return; } else key == 'd' || key == 'f') { str[0] = key; str[1] = previousKey; setDiff(str); iter = iter+1; previousKey = 'z'; har[] pStr) { String cStr = new String(pStr); int nDiff = 0; if(cStr.equals("ah") || cStr.equals("sj") || cStr.equals("dk") || cStr.equals quals("fk")) { nDiff = 1; } else if(cStr.equals("ak") || cStr.equals("sl") || cStr.equals("dh") || cStr.equals("fj")) { nDiff = 2; } els mousePressed() { rank = 0; previousKey = 'z'; iter = 1; nIter = 0; showNextText = 0; n_draw = 0; // counter}void draw1() { canvas.fill ); for (float y= -6; y<4; y+=0.15) { for (float x = -4; x<4; x+=0.1) { float z = sin(n_draw)*(x*x - y*y)/20 ; // sin(n) : moving anvas.point(px, py); } } n_draw+=0.1; // speed if (n_draw>6.28) { // 2*pi n_draw=0; }}void draw2() { canvas.fill(rect background(0); //canvas.stroke(255,210,135); for (float y= -3.2; y<3.2; y+=0.1) { for (float x = -3.2; x<3.2; x+=0.15) { float axis float py = (-z*120+y*30-200)*0.5-180; if(!((px+width/2-sin(n_draw/2)*40) > 500.0) && !((py+height/2+sin(n_draw)*40) > 300.0) { canvas.fill(rectBg); canvas.rect(0,0,500,300); canvas.translate(width/2-500, height/2-300); //background(0); //canvas.stroke / sin(2*n) : changes amplitude float px = (x*80+y*12*sin(n_draw))*0.8+20; // simulates rotation over x axis float py = (-z*200+sin { canvas.fill(rectBg); canvas.rect(0,0,500,300); canvas.translate(width/2-500, height/2-300); //canvas.stroke(255,210,135); for tude float px = x*90+y*12*sin(n_draw); // sin(n) : simulates rotation over x axis float py = -z*120+y*30; canvas.point(px(x*x+y*y) surface canvas.fill(rectBg); canvas.rect(0,0,500,300); canvas.translate(width/2-500, height/2-300); //canvas.stroke ); // sin(2*n) : changes amplitude float px = (x*90+y*8*sin(n_draw))*0.7+30; // sin(n) : simulates rotation over x axis float } n_draw+=0.05; // speed if (n_draw>6.28) { // 2*pi n_draw=0; }}void visual0_1() { if(nIter == 0) { canvas.background ards mouse position if (ramX != 0 || ramY != 0) { centerX += (ramX-centerX) * 0.01; centerY += (ramY-centerY) * 0.01; } // calculate ne i], 5, 5); } canvas.strokeWeight(2); canvas.noFill(); canvas.beginShape(); // start controlpoint canvas.curveVertex(x[formResolux[i]+centerX, y[i]+centerY); } canvas.curveVertex(x[0]+centerX, y[0]+centerY); // end controlpoint canvas.curveVertex(x[1]+centerX, 1$tM%1$tS", now); }void visual0_2(){ canvas.background(VisualBg); canvas.noStroke(); canvas.fill(255); int lsSize = circles.size(); for tor getVCoordinates(PVector v, float d, float a) { return new PVector(v.x + d * cos(a), v.y + d * sin(a)); }void updatePhasor() { phasor += OnALine(PVector v_, float r_, float d_, float a_) { v = v_; r = r_; d = d_; a = a_; } void draw() { PVector v1 = getVCoordid, a + PI); } do { canvas.fill(255, random(255), 0); canvas.ellipse(v1.x, v1.y, r, r); v1 = getVCoordinates(v1, d, a); = width && y > 0 && y < height);}void visual0_3() { canvas.background(VisualBg); canvas.translate(width/2+250, height/2); if (frameCount % 16 ually to their new positions p0y = lerp(p0y, p0.y, l);//I could probably lerp the PVectors directly but tried to limit p1x = lerp(p1x, p1.x, ); p3x = lerp(p3x, p3.x, l); p3y = lerp(p3y, p3.y, l); cx = lerp(cx, shift.x, l);//as well as the new shift cy = lerp(cy, shift.y, l); fo strokeWeight(2); canvas.bezier( //draw the beziers p0x, p0y, //the end point coordinates are the same p1x + cx*i, p1y + cy*i, p3 + t^3 *p4 the "bezier formula" (had to google it) float xe1 = pow((1-n), 3)*p0x;//broken into four parts cause it's a huge formula xe3 + xe4; float ye1 = pow((1-n), 3)*p0y;//solve the formula for both x and y float ye2 = 3*pow((1-n), 2)*n*(p1y + cy*i);//add the shift i s.stroke(200, 200); canvas.strokeWeight(5); canvas.point(x, y);//draw the points } if (n > 1) {//randomize bezier points when trace is = 0; } canvas.strokeWeight(2); n += 0.005;}PVector rand(float _x, float _y) {//a function to make random vectors easier float x = random(-_x ==0) { ramX = r.nextInt(width)+500; if(ramX > width) { ramX = width - r.nextInt(500) -500; } ramY = r.nextInt(height/10);}nIter++;int nStep tep);} else {ramY = ramY + r.nextInt(nStep);}canvas.stroke(0,0,0);canvas.point(ramX,ramY);canvas.loadPixels();for(int as.background(VisualBg); handleMouseMotion(); double dt = 1 / frameRate; fluidSolver.tick(dt, visc, diff); canvas.stroke(color(64)); ;} private void initParticles() { for (int i = 0; i < numParticles - 1; i++) { particles[i] = new Particle(); particles[i].x = float cellHeight = height / n; float cellWidth = width / n; int c = color(255); for (Particle p : particles) { if (p != null) { float dy = (float) fluidSolver.getDy(cellX, cellY); float lX = p.x - cellX * cellWidth - cellWidth / 2; float lY = p.y - cellY * v = Math.min(n, cellX - 1); vf = -1; } if (lY > 0) { h = Math.min(n, cellY + 1); hf = 1; (float) fluidSolver.getDx(cellX, h); float dxvh = (float) fluidSolver.getDx(v, h); float dyv = (float) fluidSolver.getDy(v, cellY) lWidth), lerp(dxh, dxvh, hf * lY / cellWidth), vf * lX / cellHeight); dy = lerp(lerp(dy, dyv, hf * lY / cellWidth), lerp(dyh, dyvh, hf * ndom(width); } if (p.y < 0 || p.y >= height) { p.y = random(height); } canvas.set((int) p.x, (int) p.y, .nextInt(height); } if(nIter==nextIter) { if(move) { nextIter = nIter+500; } else { nextIte NavierStokesSolver.N; float cellHeight = height / n; float cellWidth = width / n; double mouseDx = ramX - oldMouseX; double mouseDy ity) ? Math.signum(mouseDx) * limitVelocity : mouseDx; mouseDy = (abs((float) mouseDy) > limitVelocity) ? Math.signum(mouseDy) * ntMotionVector(float scale) { int n = NavierStokesSolver.N; float cellHeight = height / n; float cellWidth = width / n; for (int i = (i, j); float x = cellWidth / 2 + cellWidth * i; float y = cellHeight / 2 + cellHeight * j; dx *= scale; dy *= scale float cellWidth = width / n; for (int i = 1; i < n; i++) { canvas.line(0, cellHeight * i, width, cellHeight * i); canvas.line float phase = 0.0; float inc; Phasor(float inc_) { inc = inc_; } Phasor(float inc_, float phase_) { inc = inc_; phase = }class Ring extends Shapes { float r; // Radius Ring(float x, float y, float r_) { v.x = x; v.y = y; r = r_; } void update() }} PVector getVCoordinates(float x, float y, float d, float a) { return new PVector(x + d * cos(a), y + d * sin(a));}void visual1_2 (){ cankground(0); canvas.translate(200, 0); int lsSize = shapes.size(); float amp = 30.0 * ((cos(phasorAmp.phase * TWO_PI) + 1.0) / 2.0) + 40; for ize) * TWO_PI * 1) + 1.0) / 2.0); canvas.fill(c); PVector v = getVCoordinates(0, 0, amp, ((float) i / (float) lsSize + phasor_1_2.phase) * g) shapes.get(i); thisShape.update(); } phasor_1_2.update(); phasorAmp.update(); phasorWidth.update(); phasorHeight.update(); phasorCol g, 8); canvas.rect(0, 0, width, height); canvas.translate(200, 0); // Draw Shapes canvas.fill(lerpColor(color(64, 255, 0), color(0, 255, 64) canvas.pushMatrix(); float amp = 120.0 * ((cos(phasor_1_3Amp.phase * TWO_PI) + 1.0) / 2.0) + 60; PVector v = getVCoordinates(0, 0, amp, thisShape.update(); canvas.popMatrix(); } phasor_1_3.update(); phasor_1_3Amp.update();}//visual1_4PVector rand(float n) { float x = y *= -1; } PVector r = new PVector(x, y); return r;}class Leaf { PVector sp0, sp1, sp2, sp3;//static locations PVector p0, p1, p2, p3, peed Leaf(float _x, float _y, float _x2, float _y2) { p0 = new PVector(0, 0); sp0 = p0; p1 = new PVector(_x2, _y2); sp1 = p1; p2 for (int i = 0; i < n.length; i++) { n[i] = (1/(n.length*0.9))*i; c[i] = random(40, 80); } l = 0.04; p1x = p1.x; p1y = p1. y = lerp(p1y, p1.y, l); p2x = lerp(p2x, p2.x, l); p2y = lerp(p2y, p2.y, l); p3x = lerp(p3x, p3.x, l); p3y = lerp(p3y, p3.y, l); } PVector r1 = rand(20); PVector r2 = rand(20); PVector r3 = rand(20); p1 = PVector.add(sp1, r1); p2 = PVector.add(sp2, r2)

Open with Preview

for (float y= -6; y<4; y+=0.15) { for (float x = -4; x<4; x+=0.1) { float z = sin(n_draw)*(x*x - y*y)/20 ; // sin(n) : moving amplitude float px = (x*100+y*15*sin(n_draw))/2.2; // sin(n) : simulates rotation over x axis float py = (-z*130+y*30)/2.2; canvas.point(px, py);

The difference, I mean, the gap between me and another person is a mystery for me anytime. I think the reason why every single person is so unique is because of the choices we made. In other words, we are made up of our choices. Therefore, according the answer of the question, I calculate the differences.

This is another kind of questionnaire. I assign A,B,C and D as score 1,2,3 and 4 which represents the attitude to the statement. Score one represents disagreement and score four as agreement. There will be two subjects simultaneously answering the question. Their answers will minus each other. The bigger result they get, the more unlike they are.

The most important part is the specification the difference. The program will transform the number into motion graphics. The motion graphic will separate two parts. The first on is a regular mathematic model.The frequency of the vibration is decided by how much alien the two subjects are. If the two subjects make the choices almost the same, the mathematic model will wave simply and smoothly. Moreover, with showing the simple harmonic motion, I show the other motion graphics which are more complex and organic.

The first step displays several types of mathematic models. Here are these types. If the form is comparatively simple, the frequency of the wave will behave more slight. This slight moving refers to a metaphor which reveals the two subjects are a little bit similar in characters or behaviors since they make choices similarly. For example, the NO.4 model which was set as the most dissimilar result will shake itself hard even go beyond the boarder.

float y= -3.2; y<3.2; y+=0.1 x = -3.2; x<3.2; x+=0.15 z = sin(2*n_draw) * x*x; px = (x*90+y*12*sin(n_draw)-300)*0.5-310; py = (-z*120+y*30-200)*0.5-180; if(!((px+width/2-sin(n_draw/2)*40) > 500.0) && !((py+height/2+sin(n_draw)*40)

> 300.0)) {

canvas.point(px, py);

for (float y= -3.2; y<3.2; y+=0.1) { for (float x = -3.2; x<3.2; x+=0.2) { float z = sin(2*n_draw) * (sin(x)*4)/7; float px = (x*80+y*12*sin(n_draw))*0.8+20; float py = (-z*200+sin(y)*40)*0.8+10; canvas.point(px, py);

for (float y= -3.2; y<3.2; y+=0.2) { for (float x = -3.2; x<3.2; x+=0.02) { float z = sin(2*n_draw)*cos(x *y); float px = x*90+y*12*sin(n_draw); float py = -z*120+y*30; canvas.point(px*0.75+30, py*0.55+20);

“Have you ever looked at someone and wondered what is going on inside her head?”

The cone was printed with white paint, the projection will lay on the surface of the cone, which is the first part.

The second motion graphics are combined with fish’ s shadow. I would like to represent how people interact with others. We have to deal with various kinds of people. When we face different people, we will change how we act or how we talk. The fish can be referred as us. And the projection result from the questionnaire will display in the background. We would never see such background when we met or deal with someone. However, there is always a unique atmosphere around the space. This invisible difference is quite interesting to me. That is why I work on this installation.

The projection will go through the fish bowl and the cone.

CONDENSED IMAGE TEST JUST FOR FUN EXPERIMENT IMAGE

Initial Setting My points to my work changed totally after the presentation in the class.I set my pictures as a sequence. Trying to enhance the order, I assign their positions linearly. To begin with, the previous parts of the stream-like photograph I picked express significant geographic composition.They tend to display a easier way of seeing or reading by simple structures such as a hole, a rectangle or even a pattern laying on another object. These implicit geographic patterns attract our attention with no effort, since we, human beings, naturally recognize well to “good form” being a term referred by Gestalt principles. “Good form” refers to a shape being available to realize.

Gestalt Principles For example, we can accomplish a remarkable perceptual achievement of visual input in a few seconds. This marvelous ability indicates our preferences to good for m. That’ s why I order the pictures with more geographical construction at the beginging, regarding the geographical construction as “ground” and the other as ” figure.”

Second, the later parts of stream-like photograph, de-regularities daily scenes emerge. A spatial distribution of various colored and shaped objects consist the scene. My viewpoints have no directions implied in the scenes and feel unstable to the scenes. The contrast between these two groups is my main idea of this work. There always a question comes out in my mind: What if there does not exist bad photo? The category of bad photo exists is resulted from our inability to understand each photo. Therefore, I conducted a lear ning process of eye-attention by linear display. As I mentioned before, the order of pictures does matter in this work. i

From simple style to complicated, from specific meaning to abstract, and from easy access to ambiguous, the evolution of both our views and mind appear more organic than a seeing of a signal picture. This process may consider an experiment of behavioristic psychology showing our thinking is conditioned by previous stimulus. Recall my own question: What if there does not exist bad photo? Have I turned the vague and messy photo to more clear and specific one through my manipulation ?

Body Movement Rather than a work of images, I harbor the idea that my work is a kind of a sculpture. It is obvious that I permit everyone take a walk around my streamed photo. Instead of limitation angels or planes, global views make a flexible way of seeing just like a sculpture standing still and appealing people compassing. The body movements around the paper do augment the experience seeing this work. Typically, we pay abundant discussion on the interaction between the photograph and our spirits. However, we have less attention on our physical interaction with “printed photograph.”

set the back side free Besides, the classic approach of displaying photograph always hang on the wall.

The back side of the framed photograph seems have no choice but to be killed every time. Hence, I make an opportunity to “the back side” exposed at the exhibition. I think the addition of revealing of the bak is a critical fact influencing our aspect to photograph. For example, gazing at a landscape photograph which is rich in grass and a blue sky, we may enter the comfortable atmosphere and imagine. Nevertheless, if you move your step forward and mention the back side of the photograph, you may suddenly remind it is just a flat paper with a picture!

Most interesting is you can move your step spontaneously and feel the gap between “illusion” and “reality” . Body movements indicates the relationship within the spectators and the works.

After I finished the layout by Adobe Illustrator, I went to a print store. The most impressive experience is I have to make numerous decisions in the store, such as the margin, the paper type, and the membrane or not. After the shooting, I have just done the half process of the work. The image is fake till you print it on the paper.

Condense v.s expand

feedback

Another pivotal argument within my streamed photo is “Dimension.” Including 2 and 3 dimensions, we can find out diverse appearances in this work. The long length paper performed a “L” typeface itself making the area spliced into two cubes.

This is tree-dimension performance. Secondly, standing right of the middle of the long paper, we can watch each picture clearly. Undoubtedly, what we see is a plane graphic as a two-dimension.

Lastly, we can discover the edge of the paper , like a line which is the thickness of the paper. All the things we look at is condensed into a line. These various rotation-view have made my work distinctive.

Prof.Yu adjusted my paper cylinder placed at the beginning the streamed paper work to put it at the tail of the paper. A significant explanation said by him: “Here the cylinder at the end of your paper forms a hint to spectators that a circulation appears in the field.”

By this adjustment, I was reminded again the importance about the metaphor of objects. As a gleaming gem embed a stone, the metaphor can become the interesting connotation of a work.

WHAT DO YOU EXPECT ?

Trigger One’s Curiosity We are born to ask why. And no one will be careless about the answers.

Once you ask “WHY?” Then, what do you expect for the answer?

In the other words, how will you explain or even convince yourself to believe what you believe?

Thinking of paradoxical problems, human beings are always able to reverse the irrational facts into rational.

This is an installation to remind myself do not insist on answers.

INSTALL ATION PARADOX

>>>>>>>>>>>>>>>>>>

>>>>>>

>>>>>> >>>>> >>>>> >>

>>>>

XDDDDDDDDDDDDDDDDD DDDDDD DDDDDD DDDD DDDD D

OLOLOL O LOLOL O L O L OLO OLOLOL L O L LO OLO L O L O L LOLO

>

Louis Kahn

NATURE DOES NOT NEED US BUT WE NEED NATURE

RL

SOCIAL OBSERVATION NOTES TAIWAN PEOPLE,LOVELY

I would like to observe the public and think what everybody thinks.

I think Taiwan people are all lovely and our behaviers are quite interesting.

Here are two observations review by me.

Taiwan Driver Taiwan is a country which owns the world's first locomotive density. By the research, per 100 people has 67 locomotives in Taiwan. Hence, traffic lights play important roles in our lives.

I observe a quite interesting phenomena about the motorcycle drivers. When waiting the traffic light, the driversâ&#x20AC;&#x2122; attention will pay on the other traffic light which locate on the contrary side.

For example, when I wait for the traffic light turning into green, I would rather notice the opposite traffic light turning into red which means I can move toward now. This will make me a little faster than I just watch the traffic light in front of me.

I have no idea why drivers care about this tiny difference. I think this is a kind of cultural phenomena in Taiwan.

Reversed Elevator In normal situation, when sitting in front of the elevator, we put the up and down button intuitively. Going up , press ↑. Going down , press ↓. However, I find there is a special group which are different to the public. They might press the up button even where they want to go is the down floor. They concern the elevator which floor the elevator stayed and which floor they were are two indicators make this decision.

For example, if the elevator shows staying at the first floor and I am right at the fifth floor, wanting to go to the basement floor, I will press the ↑ button which meansI assign the elevator to come up to pick me up. I think this is an impressive and considerable expression.

To be more precise, I have to stand at the elevator’ s position and apply the elevator to pick me up. Not only changing My thinking process becoming complicated but involving the essentially different in attitude. When start to consider how the objects feel, we will behave in an entirely different way. It seems to personate everything and live with them not for serving us.

Therefore, this idea demonstrates its unique mostly at the first floor and the highest floor.

If I am at the highest floor in a building, I have the only choice : Press the ↑ button instead of ↓ and vice vera. I draw two illustrations to convey this amazing idea. I have made the wrong button in daily life after I figure out this issue.

D

E

3

6

C

5

H

A

B

A’

B’

B

A

F

E

G

C

I

H

J

D

G

O L o

404 ERROR

G