Final Project “Empower Me” by Yuhan

This post documents the whole process of how I made my “Empower Me” postcard generator. Empower Me is designed to allow non-artist users to create an artistic personalized postcard within one click. More detailed introduction regarding behind thoughts, rationales, and motivation can be found:

Proposal: http://ima.nyu.sh/documentation/2018/02/20/final-project-proposal-36/
Manifesto: http://ima.nyu.sh/documentation/2018/03/12/manifesto-writing-by-yuhan/


The following documentation contains :

I. Generated Personalized Postcard Examples
II. individual sessions for 8 generative arts visual functions
III. Integrate all codes together

Note: the inserted code in the individual sessions is selected from the whole sketch coding and is only for illustration purpose of the previous paragraph(s). So they can’t work on their own. Please refer to the link to my shared Google folder below or at the end to access and download all the code files, if you are interested 🙂

Link to the shared Google folder of code files:
https://drive.google.com/drive/folders/12rireUTbUMWhf14tQpJ1Abma32SNAXfG?usp=sharing

I. Generated Personalized Postcard Example

I asked my friends to give me three words that empower them and try my final project. The following images are the generated personalized postcards for them. But they are just a few possible outputs. The visual outputs that “Empower Me” could generate is much more than this.

II. Individual Sessions of 8 Generative Arts Visual Templates

Visual Template# 1: To Claude Monet

The first case “To Claude Monet” was inspired by one in-class coding example, which uses ellipses to manipulate images.

 

It reminds me the great artist Claude Monet, who is worldwide famous for his artwork Water Lilies. I saw one in MOMA and another one in the MET. Monet uses fast brush strokes to capture the light, which is completely different from Realism artists before. When I was in the MET collection of Monet’s artworks, I approached them as rectangles or points.  So I was thinking whether I could recreate Monet’s work.

https://www.moma.org/collection/works/80220

The first problem I met is how to constrain the brush strokes in the limited space. Otherwise, it would ruin the postcard. I first adjusted the coordinate values of points of PVentor function in the Brush Class. It turned out failed, the image is still messy.Then I found the stupidest but also the smartest way. I created a cover made by 4 rectangles to reframe the visual.  And it looks nice.

void draw(){
 base.loadPixels();
 for(int i=0;i<brush.length;i++){
 brush[i].run();
 }
 fill(255);
 noStroke();
 rect(0,0,width,40);
 rect(0,40,55,580);
 rect(567,40,55,580);
 rect(0,620,width,height-610);

......
}

 

Visual Template# 2: Thinking

Last Wednesday, when I finally got my textbook “Generative Arts”, I couldn’t wait to read. And I encountered the following image by Marius Watz.My first interpretation of this image is it has lines rotated with random length and use curves to connect. “It’s not difficult and doable! Let me try in processing to create!” I thought to myself.

And I did exactly what I thought before. The sketch always draws two random lines together and connects them with the Bezier curve. The coding didn’t take long.  You might be curious about why I make it draw 13 times, namely, 26 lines in total. I did play with the number. And 13 turns out to have the best visual result, which is neither over-simple or overwhelming.

......

if (i<13) {
 i+=1;
 translate(width/2, 40+290);
 strokeWeight(random(0.5, 6));
 stroke(random(0, 255));//,random(0,255),random(0,255));
 float x=random(-245, 245);
 float y=random(-280, 280);
 float A=random(-245, 245);
 float B=random(-280, 280);
 line(0, 0, x, y); 
 line(0, 0, A, B);
 noFill();
 float curve=random(0, 90);
 float curve2=random(0, 90);
 float curve3=random(0, 90);
 float curve4=random(0, 90);
 bezier(x, y, curve, curve2, curve3, curve4, A, B);
}

......

Two possible output:

Visual Template#3: Nature

Once, I was told by my colleague, who is a graphic designer, that nature is the best teacher for coloring. And the fabulous Panton Inc. who is famous for its color match system, also continuously gets inspiration from nature.


So my third visual relates to nature as well. Basically, you can upload any images you like, especially the one whose color you like. My codes work as picking the color of few pixels and apply that to color fill the rectangles.

class Rect{
float x,y,w,h;
PVector location;
Rect(){
location = new PVector(random(37.5,width-37.5),random(40,620));
}
 
void display(){
color c = swimmingpool.get(int(location.x),int(location.y));
stroke(c,50);
fill(c,random(100,200));
strokeWeight(random(0.5,3));
pushMatrix();
translate(location.x, location.y);
rotate(random(PI/8,PI));
rectMode(CENTER);
rect(x,y,width,height/4);
popMatrix();
}

......

The original image and two possible output:

Visual Template#4: Accumulation

The fourth case is a modified version of one of my weekly assignment before. It is recreated based on a poster series “World Design Captial Tapei”.

The original poster and my recreated version:
 

The trick here is how you constrain one the ellipses in the cycle space. The solution is actually primary school math.  Just use sin and cos function!

......

if (i_5<70) {
 i_5 +=1;
 ellipseMode(CENTER);
 noStroke();
 fill(0,random(0, 255), 0, random(85,100));
 a_5=random(37.5, width-37.5);
 b_5=random(40, 620);
 r_5=random(5, 25);
 ellipse(a_5, b_5, r_5, r_5);
 stroke(random(0, 255), random(0, 255), random(0, 255),random(900,1000));
 strokeWeight(2);
 angle_5 +=random(angle_5);
 float radius_5 = random(40, 100);
 float x_5 = a_5+radius_5 * cos(angle_5);
 float y_5 = b_5+radius_5 *sin(angle_5);
 line(a_5, b_5, x_5, y_5);
 }

......

For my final project, I change the color tone to blue on purpose, since it would make the visual result more harmonious.

One possible output:

Visual Template#5: Simplicity

The fifth case recreates the book cover of “Interaction of Color” by Josef Albers, who is an abstract painter utilize geometric forms. 

I made Processing draw 8 rectangles with different red colors and the space between each two as well as its position has a slight difference.

......

int i_6 =0;
 if (i_6 <8) {
 if (y_6 <=520) {
 pushMatrix();
 i_6 +=1;
 translate(width/2, 80);
 noStroke();
 fill(random(100, 160), 0,0,random(200,300));
 rectMode(CENTER);
 rotate(random(0, PI/80));
 float w = random(300, 380);
 rect(x_6, y_6, w, 70);
 float gap = random(10, 120);
 y_6 += gap*i_6;
 popMatrix();
 }

......

I tried both blue color tone and red ones. The red one looks nicer.  Also, I played around with the positioning. Staying relative in the middle, not too left or too right gives the best result.

In one user testing session, this simple visual template is surprisingly favorable by people.

Visual Template# 6: Femininity

This visual result was inspired by “Wave Clock” by Matt Pearson.

My first impression of this work is not a clock but bloom. When I looked into Pearson’s detailed code explanation, I know that he is using the Perlin noise function, which we also learned in class. I modified his “noise” code and create my own Sakura.

float x_6_1, y_6_1;
float radius_6 = 200;
float radiusNoise = random(10);
......

pushMatrix();
 translate(width/2, 330);
 strokeWeight(0.1);
 stroke(20, 50, 70);
 if (ang<=1440) {
 ang +=0.5;
 radiusNoise +=0.05;
 float thisRadius=radius_6+(noise(radiusNoise)*200)-100;
 float rad = radians(ang);
 x_6_1 = thisRadius*cos(rad);
 y_6_1 =thisRadius*sin(rad);
 stroke(232, 146, 164, random(120, 900));
 line (0, 0, x_6_1, y_6_1);
 }
 popMatrix();

......

Basically, there are 2880 lines in the whole process, with the same startpoint but different endpoints, due to the noise function. The reason why I choose if instead of for loop is because I personally value the process of creating a generative art more than the result.

Make it more understandable.  You could also consider it as connect two points, A and B. Point A would always be (0,0). As for point B, first, think about how you draw a cycle by using dots. You would code the x,y position value as the following:

x = centX+cos(ang)*radium;
y = centY+cos(ang)*radium;

If the radium is a constant, you would get a perfect cycle. Now we add noise function to it. The radium is not constant anymore but keeps changing.

float thisRadius=radius_6+(noise(radiusNoise)*200)-100;
 float rad = radians(ang);
x_6_1 = thisRadius*cos(rad);
y_6_1 =thisRadius*sin(rad);

One possible output:

This color turns to work the best. It has enough variation, and the color per se is not either too strong or too light, which is quite.

Visual Template#: (Dis)Organized

When I was out of ideas and looked through on the internet, I found the following image.

It even seems like a modern version of Jackson Pollock. It might because I visited Pollock’s artwork too many times in New York. I like the above image a lot and really want to recreate it. The ellipses are easy to create, while how to make the chaotic but beautiful background?

It reminds the spiral code with noise function.  Matt Person, in his book  “Generative Arts” demonstrates the result of draw 100 spirals with noise. It looks like below:

May I based on this to achieve the messy but beautiful background I want? So I tried to change the number is Pearson’s code again and again. Finally, I got a relative similar one.

if (number_7<1) {
 strokeWeight(0.5);
 smooth();
 for (int i_7 =0; i_7<10; i_7++) {
 pushMatrix();
 translate(120, 120);
 float lastx_7 = -999;
 float lasty_7 = -999;
 float radiusNoise_7 = random(10);
 float radius_7=60;
 stroke(random(20), random(50), random(70), 50);
 int startangle_7 = int(random(360));
 int endangle_7 = 1440+int(random(80));
 int anglestep_7= 5 +int(random(3));
 for (float ang_7 = startangle_7; ang_7 <=endangle_7; ang_7 +=anglestep_7) {
 radiusNoise_7 +=0.05;
 radius_7 +=0.5;
 float thisRadius_7=radius_7 +(noise(radiusNoise_7)*200)-100;
 float rad_7 = radians(ang_7);
 centX_7=random(50, 300);
 centY_7=random(100, 300);
 x_7 = centX_7+(thisRadius_7 * cos(rad_7));
 y_7 = centY_7+(thisRadius_7 * sin(rad_7+PI/8));

if (lastx_7>-999) {
 line(x_7, y_7, lastx_7, lasty_7);
 }
 lastx_7 =x_7;
 lasty_7=y_7;
 }
 popMatrix();
 }

for (int i_2 =0; i_2 <30; i_2++) {
 fill(0, random(30, 300));
 float R=random(3, 30);
 ellipse(random(37.5, width-37.5), random(40, 620), R, R);
 }
 number_7 +=1;
 }

Two possible output:

Visual Template#8: Spot Light

The last visual also is also based on one image I found on the Internet.

How I perceive this image is that it has a bundle of lines and rotate it to compose a cycle; then rotate the whole cycle for multiple times. Seems very doable. So I follow my initial idea and achieve a very similar result. But I changed the color since I feel pure black feels depressed.

 case 8:
 if (i_8<=10) {
 i_8++;
 pushMatrix();
 translate(width/2, 330);
 float radius_8 = random(80, 200);
 float aci=2*PI;
 rotate(random(PI));
 for (float Ang_8=0; Ang_8<=360; Ang_8 +=30) {
 stroke(89, random(112, 140), 170, 90);
 //Pink Color Tone
 //Stroke(220,115,130,90)
 strokeWeight(random(0.05, 4));
 rotate(random(aci/6, aci/12));
 for (float ang_8 =0; ang_8<=15; ang_8 +=1.5) {
 float x, y, x_2, y_2;
 float rad=radians(ang_8);
 x=(radius_8*cos(rad));
 y=(radius_8*sin(rad));
 float radius_2 =random(0, 200);//random(100,150);
 x_2=x+(radius_2*cos(rad));
 y_2=y+(radius_2*sin(rad));
 line(x, y, x_2, y_2);
 }
 }
 popMatrix();
 }
 break;

One possible output:

III. Integrate All Codes Together 

#Think Consistently

Since I coded separately for each visual function as the postcard templates, when integrated all function together, I have to rename all the variable names. The easiest way is inserting numbers into it.  For example:

//variable of Case 4
float r, r2, r3;
float x_3_1, x_3_2, x_3_3, x_3_4;
float y_3_1, y_3_2, y_3_3, y_3_4;
float angle, angle2, angle3;
float radius, radius3;
float number_4=0;
float i_4=0;

And I need to check all the sizes and make each template coherent.

#Insert Personalize Content

A personalized postcard has to have a personal connection with my users. I want them to be able to insert whatever content they what.

The typing function gets a reference to the “typing example” we learned in week 3. The problem I met here is how to center the text. Initially, the typing starts the top-left corner, while I prefer it to always be in the middle. So I set up two floats to ensure the position would always be in the middle.

......
 
 float a=width/2;
 float b=720;
 line(a+cursorPosition/2,b-40,a+cursorPosition/2,b+25);
 textAlign(CENTER);
 fill(0);
 font = createFont("BaskOldFace",10);
 textFont(font, 60);
 text(letters,a,b);

.......

void keyPressed() {
if (key == BACKSPACE) {
 if (letters. length()>0) {
 letters = letters. substring(0, letters. length()-1);
 }
 } else if (textWidth(letters+key)<width) {
 letters = letters +key;
 }
}

#Switch

There are a builtin switch and case functions in Processing, which allows you to have different individual functions to switch to. The structure of case function looks like below:

switch(){
case 1:
......
break;

case 2:
.....
break;
}

Once I forget to include the break. My sketch went crazy and run all the functions together, like this:

Afterward, as long as include both cases and break, it works perfectly.

Only the switch and case function cannot make the switching yet. I need other functions to do the switch. It occurred to me the keypressed function. Initially, I thought about using numbers to call on individual visual functions. Unfortunately, because I also have the typing function which records each time when a key is pressed. So it would show the unexpected number as well.

Thus, I turned to use arrow keys to call on the visual functions.

if (keyCode == UP) {
 if (drawMode >1) {
 drawMode -= 1;
 } else {
 drawMode =8;
 y_6 = 40;
 }

......

else if (keyCode == DOWN) {
 if (drawMode <8) {
 drawMode += 1;
 } else {
 drawMode =1;
 }

......

One issue worth to point out is since I included if condition multiple times to limit the number of shapes shown. After the first time showing the result, the if condition would not be satisfied anymore, so the templates become blank. My learning point here is when using the switch and case function, don’t forget to reset all the variable back to the initial setting. Namely, include what you originally have in setup session in the codes for calling on functions as well. For example:

if (keyCode == UP) {
 //background(255);
 if (drawMode >1) {
 drawMode -= 1;
 } else {
 drawMode =8;
 y_6 = 40;
 }
 if (drawMode == 2) {
 background(255);
 i = 0;
 } else if (drawMode ==1) {
 base = loadImage ("Lotus.jpg");
 base.resize(500, 620);
 image(base, 37.5, 40);
 } else if (drawMode ==3) {
 swimmingpool = loadImage ("Hockney.jpg");
 swimmingpool.resize(500, 580);
 image(swimmingpool, 37.5, 40);
 } else if (drawMode ==4) {
 background(255);
 i_4=0;
 } else if (drawMode == 5) {
 background(255);
 y_6 = 40;
 } else if (drawMode ==6) {
 background(255);
 ang=0;
 } else if (drawMode ==7) {
 background(255);
 centX_7 =250;
 centY_7 =150;
 number_7=0;
 } else if (drawMode ==8) {
 background(255);
 i_8=0;
 }
 }

#Refresh the Image

When I managed to switch templates and type, it occurred to me that since all the visual are generative arts, I need to allow my users to refresh the image and get a new visual output, if they like the template but not quite satisfied with the current output.

So I use the LEFT/RIGHT arrow key for my users to get new visual outputs. Also, I need to reset all the variables back to the initial setting as well.

if (keyCode == LEFT|| keyCode == RIGHT) {
 if (drawMode == 2) {
 background(255);
 i = 0;
 } else if (drawMode ==1) {
 base = loadImage ("Lotus.jpg");
 base.resize(500, 620);
 image(base, 37.5, 40);
 } else if (drawMode ==4) {
 background(255);
 i_4=0;
 } else if (drawMode ==5) {
 background(255);
 y_6 = 40;
 } else if (drawMode ==6) {
 background(255);
 ang=0;
 } else if (drawMode ==7) {
 background(255);
 centX_7 =250;
 centY_7 =150;
 number_7=0;
 } else if (drawMode ==8) {
 background(255);
 i_8=0;
 }
 }

 

Thanks for your interest in my project. If you want to access and download all the code files, please refer to the link below. All the above codes are selected and not completed

Link to the shared Google folder of code files:
https://drive.google.com/drive/folders/12rireUTbUMWhf14tQpJ1Abma32SNAXfG?usp=sharing

Manifesto Writing by Yuhan

#Embrace Changing

Life is Changing. No one has an exception. But is changing a bad thing?

Generative arts is an extreme epitome of life, which is unstable, uncertain, unpredictable at every single frame. The behind system with rules, programs or algorithms is like the living space of the physical world. Under the framework, people obey, design, write and create their own content. Although the creator is always familiar with the framework, he/she still can not fully control the result. It gives you unexpectedness more or less. But also surprise sooner or later. So is life.

#Find the Power

Technology is continuously developed. Never stopped. Is quick development a good thing?

Before, it takes months, even years to get one sentence or one letter seen. Now, it takes seconds to connect people at two opposite sides of the world. In this over-communicated society, we have all access to message and information, but rare time left to hear our heart. Who you want to be? What motivates and energizes you in the morning? What empowers you to go through all the difficulties?

#Make Something Simple but Meaningful

“Empower Me”
Let a non-artist draw and design.
Let people hear/say the words their heart say.
Let a personalized postcard evoke power and deliver happiness.

Embrace changing. Experience renewing. Empower You.

Weekly Assignment 5: To Claude Monet #致敬莫奈

I was quite impressed by the in-class coding example 4, which recreate an image purely using an ellipse.

 

The Original/Recreated Image of Ex4.

It reminds me the great artist Claude Monet, who is worldwide famous for his artwork Water Lilies. I saw one in MOMA and another one in the MET. Monet uses fast brush strokes to capture the light, which is completely different from Realism artists before. When I was in the MET collection of Monet’s artworks, I approached them as rectangles or points.  So I was thinking whether I could recreate Monet’s work.

https://www.moma.org/collection/works/80220

Since my final project would be a poster making system, I want to explore this weekly assignment as the experiment of making a postcard.

This first question occurred is how to constrain the ellipse in a specific area. I don’t want it to become messy on the card.

I first adjusted the positions of the point of PVentor function and add a constraint on the x, y positions, it turned out being stuck after seconds.

 Brush(){
 location = new PVector(random(55,567),random(30,610));
 }
....
 void update(){
 if (x>53){
 if(x<555){
 x +=random(-2,2);
 }

So I turned to a stupid but easy way. I create 4 rectangles to over the image to over the messy “brush strokes” over the image.

Then, I integrated the typing function we have learned in week 3. The problem I met here is how to center the text. Initially, the typing starts the top-left corner, while I prefer it to always be in the middle. So I set up two floats to ensure the position would always be in the middle.

 float a=width/2;
 float b=720;
 line(a+cursorPosition/2,b-40,a+cursorPosition/2,b+25);
 textAlign(CENTER);
 fill(0);
 font = createFont("BaskOldFace",10);
 textFont(font, 60);
 text(letters,a,b);

The final result turned to be:


(The shadow is not a part of the code. Just for distinguish the image from the white background)

(The original picture for recreation)

The unsolved problem is how to make the cursor disappear when finish typing and save the frame.

//import processing.pdf.*;
//boolean record;

PFont font;

String letters = "";
PImage base;
int x,y;

Brush [] brush = new Brush[1500];
void setup(){
  size(621,850);
  //beginRecord(PDF, "everything.pdf");
  frameRate(30);
  background(255);
  
  x =width/2;
  y = height/2;
  for(int i = 0; i<brush.length;i++){
    brush[i]=new Brush();
  }
  base = loadImage ("Lotus.jpg");
  base.resize(512,580);
  image(base, 55,40);
 
}


void draw(){
  //if (record) {
  //  beginRecord(PDF, "Monet-####.pdf"); 
  //}
  
  base.loadPixels();//and updatePiexles()
  
  for(int i=0;i<brush.length;i++){
    brush[i].run();
  }
  fill(255);
  noStroke();
  rect(0,0,width,40);
  rect(0,40,55,580);
  rect(567,40,55,580);
  rect(0,620,width,height-610);
  
  float cursorPosition = textWidth(letters);
  stroke(180);
  strokeWeight(4);
  float a=width/2;
  float b=720;
  line(a+cursorPosition/2,b-40,a+cursorPosition/2,b+25);
  textAlign(CENTER);
  fill(0);
  font = createFont("BaskOldFace",10);
  textFont(font, 60);
  text(letters,a,b);
  
  //if (record) {
  //  endRecord();
  //record = false;
  //}
}

void keyPressed(){
  if(key == BACKSPACE){
    if(letters. length()>0){
      letters = letters. substring(0, letters. length()-1);
    }
  }else if(textWidth(letters+key)<width){
    letters = letters +key;
  }
  
}

void mousePressed() {
  saveFrame("Monet-######.png"); 
}

class Brush{
  float x,y,w,h;
  PVector location;
  //this is a constraction function for this class
  Brush(){
    location = new PVector(random(55,567),random(30,610));
  }
  
  void display(){
    color c = base.get(int(location.x),int(location.y));
    stroke(c,50);
    strokeWeight(random(0.5,3));
    noFill();
    pushMatrix();
    translate(location.x, location.y);
    rotate(random(0,PI/8));
    rect(x,y,20,4);
    popMatrix();
  }
  void update(){
    x +=random(-2,2);
    y +=random(-2,2);
    w +=random(-2,2);
    h +=random(-2,2);
  }
  void run(){
    display();
    update();
  }
}

Weekly Assignment 4 by Yuhan

Long-distance Relationship is hard, but we survived. In the previous two years, my boyfriend and I stayed in different cities for more than one year. Until December 2017, my study away semester ends, we finally could no longer be afraid of next farewell. When I look back at the days, I got the idea to make a Love Tracker for the 641 days we have gone through.

COLLECTION: 
I check the dates of each flight which took me away and back to my boyfriend, with either flight order confirmation email and my posts on social media account.
Since my boyfriend keeps all the chat content we have from the first day we knew each other, I am curious about the mentioned times of some words. I list the 15 that first came into my mind, which I thought we mentioned a lot.

COMPUTATION:
I use an online days calculator to count the duration of days. And use the integrated content searching function of Wechat to find out the mentioned times during daily conversations.

VISUALIZATION:
I modified the in-class example 4 codes to load CSV data.

I divide the background into pink and blue. The pink represents the days when we stay together, while the blue represents the days we are separated. The text size is based on the formula: text size = (mention time/10)*1.5, in order to show the text being too big or too small. The text position is random.

Rect[] rects;
Table table;

void setup() {
  size(700, 380);
  background(255);
  loadData();
  fill(255);
  frameRate(1);
}

void draw() {
  translate(29.5, height/2);
  //Display all rect
  for (int i = 0; i < rects.length; i++) {
    rects[i].display();
  }
  
  fill(250,180,215);
  rect(43.5,0,87,height-20);
  
  fill(255);
  textAlign(LEFT);
  textSize(44.6*1.5);
  text("KISS",random(20,640),random(-170,170));
  textSize(34.7*1.5);
  text("HUG",random(20,640),random(-170,170));
  textSize(11.9*1.5);
  text("GO HOME",random(20,640),random(-170,170));
  textSize(14.5*1.5);
  text("MISS YOU",random(20,640),random(-170,170));
  textSize(10.8*1.5);
  text("I LOVE YOU",random(20,640),random(-170,170));
  textSize(14.8*1.5);
  text("TreeTree",random(20,640),random(-170,170));
  textSize(24.8*1.5);
  text("Good Night",random(20,640),random(-170,170));
  textSize(22.7*1.5);
  text("Facetime",random(20,640),random(-170,170));
  textSize(13.*1.5);
  text("Mua",random(20,640),random(-170,170));
  textSize(43.7*1.5);
  text("TOMORROW",random(20,640),random(-170,170));
  textSize(2.3*1.5);
  text("COMING",random(20,640),random(-170,170));
  textSize(36*1.5);
  text("SLEEP",random(20,640),random(-170,170));
  textSize(19.1*1.5);
  text("WEAK UP",random(20,640),random(-170,170));
  textSize(7.3*1.5);
  text("MORNING",random(20,640),random(-170,170));
  textSize(3.8*1.5);
  text("BonneLaine",random(20,640),random(-170,170));
  
  
  //textAlign(LEFT);
  //fill(0);
  //text("Click to add bubbles.", 10, height-10);
}


void loadData() {
  //// Load CSV file into a Table object
  //// "header" option indicates the file has a header row
  table = loadTable("Day_3.csv","header");
  rects = new Rect[table.getRowCount()];
  
  for (int i =0;i < table.getRowCount(); i++){
    TableRow row = table.getRow(i);
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("Duration");
    float h = row.getFloat("h");
    int r = row.getInt("r");
    int g = row.getInt("g");
    int b = row.getInt("b");
    //String w = row.getString("Word");
    //float s=row.getFloat("Times");
    rects[i]= new Rect(x,y,d,h,r,g,b);//,w,s);
    println(x,y,d,h,r,g,b);//,w,s);
  }
  }

//The following is Class Code
class Rect {
  float x,y,h;
  float Duration;
  int r,g,b;
  
    Rect(float x_, float y_,float Duration_,float h_,int r_, int g_, int b_){//,String Word_, float Times_){
    x = x_;
    y = y_;
    h = h_;
    Duration = Duration_;
    r= r_;
    g= g_;
    b= b_;
   
  }

  
  void display() {
    noStroke();
    rectMode(CENTER);
    rect(x,y,Duration,h);
    fill(r,g,b);
  }
  }

Reading Response 4 “You Say Data, I Say System” by Yuhan

Jer Thorp, in his essay “You Say Data, I Say System”, proposes that instead of looking merely at the collected and visualized data,  people should consider the whole data system. The difference between data and date system is that data is a manipulated result, while data system is a process which contains the three steps of collection, computation, and representation. Viewers often focus on the result, the data and its visualization, forgetting the decisions in the system that the creator, data collecter has made, forgetting to think about the “why not” questions: why the other date was not collected; why the data hasn’t be computed in the other ways; why the date is not shown in other visualizations but this format?

The uncovered decision points did lead me to consider the system, instead of a result. One of my friend, Sam Shiyun Chen, recently posted his discovering regarding his personal recorder of his time spending in the previous  18 months (a link to his post: http://t.cn/REU5HhJ). Before, I merely looked at the impressive visualizations while rarely thought about why. By relooking at his post, I believe the collected data has definitely been selected and categorized into three types: working, playing and default, based on his analysis to his daily activities. So that three categories, not more, not less, are just enough to cover all the activities and provide a simple and meaningful personally diagnose. And all the visualizations serves his personalized research purpose, some for being conscious of his time-spending, some for reminding to improve efficiency.


(The visualization images included in Sam’s post)

Sam’s data definitely reveals life-learnings for himself. His analysis, or his data, inspire the others to be more conscious about time-spending. While the most effective way of improving efficiency can only be gotten through the process, which is the personalized and self-designed data system.

The over-simplified understanding of data, the pure visualization, reminds me of quoting. A quotation is easy to manipulate, as long as we separate it from its original context. So is date. Quotations have to live with their context, while data has to stay along with the process.

Final Project Proposal by Yuhan Qian

  1. Work Title: Empower Me (Postcards Generating  System)
  2. Short Description:
    Get an artistic postcard with a customized one slogan with one click, with no art background required. Empower Me, based on Processing, is a coded system that creates visual with randomness, as well as an integrated typed sentence by the user.They modify the background template as well.
  3. Team Member: Yuhan Qian
  4. Narrative Description:
    a. Motivation: 
    When I was in high school, I wanted to prepare myself as an art major student in college, while my parents preferred me to learn business because of the family business. So I chose marketing as my major. But my love of arts never stopped. I learned photography and studio arts in school, which continuously develop my sense of aesthetic. However, I still don’t consider myself as an artist, since I can’t either draw or design well.There have been 6 years. But my memory regarding a Netherland artist never faded. That was the time when I participated in Poster-Crossing (postcorssing.com), which is a website that enables you to send postcards to and receives from strangers. One day, I got a hand-drawn postcard from the Netherland by an artist. He drew the seascape in front of him, with a sentence “I want to share the beautiful view with you”. How jealous I was to those who can draw and create happiness to the others.

    Fortunately, I get to know generative arts by using processing, which enables me to create beautiful visuals just based on few lines of code. In the previous weeks, I have been keeping exploring processing as a drawing tool. And it turned out to show some good result. I want to continue work on this topic, while scaling down the image format into postcards, because of my warm memories with postcards.

    I want to enable the non-artist users, who might not even have any art experience before, to create a personalized postcard for himself or herself within one click. The users could choose a template they most favorable and type below. Since all the templates are generative arts, which means they would difference every time it shows. So from a certain level of extent, the users already have numerous images choices.

    Because of the space limitation, the users couldn’t type a long sentence, but just a few words.  This recalls my memories with my roommate in New York. On the top right corner of her mirror, she always writes three words which could energize and motivate her. That’s where the project title comes from.

    I want the users to type something that means to him/her, which can empower them all the way along. Thus, the overall process, processing empowers me to finally become an artist. The personalized words typed by the users empower them as well. And I achieve my little dream to create happiness for the others.
    b. Inspiration
    Recently, I found a great book called “Shapes Geometric Forms in Graphic Design”, which collects masterpieces of Graphic Design focusing on using Geometric forms. And creating shapes within difference color is exactly doable in  Processing.
    So for my final project, I want to recreate graphic design artworks from both the wonderful book and internet.
       

    c. Possible Techniques
    1) I would first code separately for each template. By inserting “random” function or adding “noise”, is more than enough to create image-generated or geometric generative arts.
    2) When have different templates done, I would move to integrate the separated template codes into one single file based on the “Case” function.

    d. Output and Display
    The final project would run on a computer and presented on the screen. By clicking on the array keys, the users could look through all the different templates for personalization.

    The ideal way is connecting to a printer, and the users could get their personalized poster right after the customization. But due to the time limitation and no printer available, I would leave the printing process in the future. But hopefully, I would print several personalized postcards along with the “Empower Me” project.

  5. Visual Support:
    a. examples for recreationb.Postcard Example

Assignment 1 by Yuhan

There have been three years that I haven’t used Process at all. And this is my first time to refamiliarize myself with it. It did take me some time to re-understand, even the basic concepts.

I took a look at the book that Cici recommended in class, “Interaction of Color” by Josef Albers. One image (included below) reminds me the in-class exercise of the repetitive line (see below) we did. I think by adding the squares between the lines, I would be able to recreate Alber’s work.

(Artwork from Josef Albers, in Interaction of Color)

(Screenshot of In-class Exercise)

However, when I started, I was struggling with the “Mask” of the original image. A group of shapes including both lines and squares needs to be rotated within a mask, which means some parts of the shape group should be covered and unseen. While I failed to do that.

Instead, I inserted a “Random” function into the “Rotation”, which allows the computer to move the groups of shapes. But I prefer to only keep the line, which makes the image simple but aesthetic.

(Yuhan’s Version)

int gap = 20;

void setup(){
  size(380,600);
  strokeCap(ROUND);
  frameRate(0.5);//Specifies the number of frames to be displayed every second
}

void draw(){
  background(110,81,32);
  
  fill(191,89,84);
  noStroke();
  rect(50,60,280,240);

  fill(228,183,194);
  noStroke();
  rect(50,300,280,240);
  
  drawPattern(0);

}

void drawPattern(float angle){
  translate(width/4,height/4);
  rotate(random(0,PI));
  pushMatrix();
 int rowCount = 0;
 for(int x=60; x<=300; x+=gap*1.5){
   for(int y=65;y<=260; y+=gap*2.8){
     if(rowCount%2 == 0){
       fill(255);
       rect(x,y,8,40,7);
     }
   }
   rowCount++;
 }
 popMatrix();
}

Assignment 3 by Yuhan: Poster Making with Processing

Last weekend, when I tried to get some inspiration from a graphic design book, I encountered the poster from United Nations Climate Change Conference. The poster initially is inspired by a Canon Line and the concentric circles with different colours represents the climate change.

This reminds me that processing actually could be a great poster-making tool. So I modified the codes of changing-colour cycle and include the text to imitate the poster. The gradation changes with the mouse position. Because of the inserted formula for the “Colour Fill” function, there is a black hole in the centre. When the user moves the mouse, the size of the black hole changes as well. This changing is similar to an aperture of a camera lens, which is the original inspiration for the conference poster. So I change the text on purpose, from conference title to Canon’s slogan “Canon, Delight You Always”.

/*Yuhan Qian
The fllowing codes get inspiration from the in-class exercise in the second session, as well as the UN Climate Change Conference 2014 Poster 
*/


PFont F;
//PFont f;

void setup(){
  size(500,700);
  background(0);
  
  textAlign(CENTER);
  smooth(100);
}

void draw(){
  translate(width/2, height/3);
  for(int i=0; i<30;i++){
    fill(190-i*20, mouseX-i*30, mouseY-i*30);
    noStroke();
    ellipseMode(CENTER);
    ellipse(0, 0,300-i*10,300-i*10);
  }
  fill(255);
  //F=createFont("Baskerville",100);
  F=createFont("Helvetica",90);
  textFont(F,32);
  //text("LIMA COP20 | CMP 10", 0, 280);
  text("CANON, Delight You Always", 0, 280);
  //f=createFont("Helvetica-Light",80);
  //textFont(f,14);
  //text("UN CLIMATE CHANGE CONFERENCE 2014",0,320);
  //text("Delight You Always",0,308);
}

Reading Response 3: Experiments in Computer Poetry

In the Chapter “the Sinclair ZX81″,Charles O.Hartman begins with describing the behind thought and process of designing his computer program “Poetry Composer”. The program is able to randomly pick up words, phrases from input texts and integrated them following certain coded rules. He continues discussing the randomness of poetry composition into religions, philosophy, and psychology. Buddism treats every randomness events as the result of previous behaviors. Philosopher, like Freud, believes “unconscious motivations” which make “nothing occurs at random.” People try to reveal their faith through divination for psychological comfort. 

To see how randomness is welcome in the art world while avoided in the real life is interesting. For instance, generative art,  the fascination of the whole genre relies on randomness. Either the interaction between the viewer and creator for recreation or the randomness contained in the artwork per se delight both the creator and audience with surprise (though not all the time). Take one step even further. When Jackson Pollock innovates painting with drip painting, randomness came into play as well, since he can’t decide the exact position of each dripped ink spot.

As above, the randomness in art creation creates surprise and brings happy incidents. In real life, however, it seems more scaring and being avoided. Living with unknowing and uncertain is sacring. And people prefer certainty, which could be well-prepared. That’s why people try to connect events. Also, why Buddhism could leverage the proliferation to constraint and educate Buddhists’ behavior. The action of connecting events itself is a way to escape the uncertainty or randomness.

After realizing the different attitudes people have towards randomness in art and daily life, I more respect the first person to include randomness in art creation, who has not only creativity but also both courage.

Assignment 2 by Yuhan

Friday Night, I saw a poster series a competition called “World Design Captial Tapei”.

These two inserted posts remind me our coding exercise in class, which uses random lines to draw master artwork. Based on the “random” function, I created the first version. While with the long line but small spots, the image gets messy. So I further include a “if” loop, to constraint the amount of line within 50.

if(number<50){
number+=1;
stroke(random(0,255),random(0,255),random(0,255));
strokeWeight(2);
line(random(50,width-50),random(50,height-50),random(50,width-50),random(50,height-50));
}

The first Version

Continue Working. I noticed that there actually multiply line cross one single point and connect to each other. In order to imitate, I inserted another four parameters a, b, x, y, to ensure that center point and the start point of the line is the same.

void draw(){
ellipseMode(CENTER);
noStroke();
fill(random(0,255),random(0,255),random(0,255));
a=random(50,width-50);
b=random(50,height-50);
r=random(5,25);
ellipse(a,b,r,r);
stroke(random(0,255),random(0,255),random(0,255));
strokeWeight(2);
angle +=random(angle);
float radius = random(40,100);
float x = a+radius * cos(angle);
float y = b+radius *sin(angle);
line(a,b,x,y);}

the Second Version

The third version refers to the cycle at the bottom of the second post, trying to make all the spots with different size stay in the same cycle area. The initial idea was to use “Mask” function. I made an image with a white background and a transparent cycle in the middle. I uploaded into my codes, while it didn’t work. So I came up with the idea of using [“Sin”, “Cos” function * radius] to constrain the positions of all the elements, which is the same way we learn Sin and Cos in math.

The Third Version

r=random(9,18);
r2=random(5,15);
r3=random(15,23);
angle=random(0,PI);
angle2=random(0,TWO_PI);
angle3=random(QUARTER_PI,HALF_PI+QUARTER_PI);
radius=random(0,300);
radius3=random(150,300);
x=cos(angle)*radius;
y=sin(angle)*radius;
x2=cos(angle2)*radius3;
y2=sin(angle2)*radius3;
x3=cos(angle3)*radius3;
y3=sin(angle3)*radius3;
x4=cos(angle2)*radius;
y4=sin(angle2)*radius;

if(number<70){ //to contrain the number of biggest spot
number +=1;
ellipse(x3,y3,r3,r3);
}
ellipse(x,y,r,r);
ellipse(x2,y2,r2,r2);
ellipse(x4,y4,r2,r2);