week 15. projection mapping

1. self-portrait demo
2. kick-off the final project : "projection mapping"
    Deadline: Jan. 11, 2016
    2 students at most in a team
    Processing + physical model + projector
 

references:
http://www.creativebloq.com/video/projection-mapping-912849
http://projection-mapping.org/
https://www.pinterest.com/nnnnnnadine/3d-mapping/

week 14. self portrait project

http://shanear.com/artworks/typoportrait

Typo Portraits

pointillism portraits

cubist portrait

Question:
 How to generate "typo portraits"?

self portrait in particles

Self Portrait Demo:
12/21, 2017

week 13. image

https://www.processing.org/examples/pointillism.html
https://www.processing.org/reference/PImage.html

week 12, array objects

example:

https://processing.org/examples/arrayobjects.html

Exercise:

1.
change 1-dimension array into 2-dimension

Module [] mods;    v.s. Module[][] mods;

2. change objects into 3D

3. Change update() to respond to mouseX, mouseY


Sample codes for 2D array of objects


---------------------------------------------------------

int unit = 40;
int count;
int wideCount;
int highCount;
Module[][] mods;

void setup() {
  size(640, 360, P3D);
  lights();
  //noStroke();
  wideCount = width / unit;
  highCount = height / unit;
  //count = wideCount * highCount;
  mods = new Module[highCount][wideCount];

//  int index = 0;
 
  for (int y = 0; y < highCount; y++) {
    for (int x = 0; x < wideCount; x++) {
      mods[y][x] = new Module(x*unit, y*unit, unit/2, unit/2, random(0.05, 0.8), unit);
    }
  }
}

void draw() {
  background(0);

  for (int y = 0; y < highCount; y++) {
    for (int x = 0; x < wideCount; x++) {
      mods[y][x].update();
      mods[y][x].display();
    }
  }

/*  for (Module mod : mods) {
    mod.update();
    mod.display();
  }
*/
}


class Module {
  int xOffset;
  int yOffset;
  float x, y;
  int unit;
  int xDirection = 1;
  int yDirection = 1;
  float speed;
 
  // Contructor
  Module(int xOffsetTemp, int yOffsetTemp, int xTemp, int yTemp, float speedTemp, int tempUnit) {
    xOffset = xOffsetTemp;
    yOffset = yOffsetTemp;
    x = xTemp;
    y = yTemp;
    speed = speedTemp;
    unit = tempUnit;
  }
 
  // Custom method for updating the variables
  void update() {
 
  }
 
  // Custom method for drawing the object
  void display() {
    fill(255);
    ellipse(xOffset + x, yOffset + y, 6, 6);
    pushMatrix();
    translate(xOffset, yOffset, -random(100));
    rotateY(1.25);
    rotateX(-0.4);
    box(30);
    popMatrix();
  }
}

week 11. object-oriented programming

https://processing.org/tutorials/objects/

week 9. abstract machine

Turing machine

abstract machine

infosthetic physical

dataisnature

ACG at MIT concept film: visual machine
curve


Q & A , review
abstract machine in Processing

Midterm :

3 pairs of abstract machine with contrasts
deadline Nov. 16, 2016


a pair of machine sample codes:

void setup()
{
 size(1200, 400);
 fill(0,0,0);
 rect(0,0,width/2, height);
 fill(128,128,128);
 rect(width/2, height, width, height);
}

void draw()
{
 
  if (mouseX< width/2)
  {
    machine1();
  }
  else
  {
    machine2();
  }
}

void machine1()
{
 
  if (mousePressed)
  {
  fill(0,0,0);
  rect(0,0,width/2, height);
  fill(255, 255,255);
  rect(mouseX, mouseY, 10, 10);
  }
}

void machine2()
{
  if (mousePressed)
  {  
    fill(128,128,128);
    rect(width/2, 0, width, height);
    fill(255, 255,255);
    ellipse(mouseX, mouseY, 20, 20);
  }
}

week 8. NTUST Logo

/**

 * Regular Polygon

 * 

 * What is your favorite? Pentagon? Hexagon? Heptagon? 

 * No? What about the icosagon? The polygon() function 

 * created for this example is capable of drawing any 

 * regular polygon. Try placing different numbers into the 

 * polygon() function calls within draw() to explore. 

 */

void setup() {

  size(1000, 800);

}

void draw() {

  background(255);

  ntust(width/2,height/2,0,102,179,frameCount / 200.0, map(mouseX,0,width,0,10));   

}

void polygon(float x, float y, float radius, int npoints) {

  float angle = TWO_PI / npoints;

  beginShape();

  for (float a = 0; a < TWO_PI; a += angle) {

    float sx = x + cos(a) * radius;

    float sy = y + sin(a) * radius;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

void ntust(float logoX, float logoY, float colorR, float colorG, float colorB, float rotate, float size )

{  

  pushMatrix();

  translate(logoX, logoY);

  rotate(rotate);

  strokeWeight(12*size);

  stroke(255);

  fill(colorR,colorG,colorB);

  ellipse(0,0,240*size,240*size);

  line(28*size,0,118*size,0);

  polygon(-52*size, 0, 80*size, 6);

  fill(255);

  ellipse(-52*size,0,68*size,68*size);

  

  popMatrix();

}

week 8. rotate

float radius;
int segment = 6;
float centerX;
float centerY;
int recursionLevel = 3;

void setup(){
 size(600,600);
 background(0);
 stroke(255);
 centerX = height/2;
 centerY = width/2;
}

void draw(){
  background(0);
 // radius = dist(centerX, centerY, mouseX, mouseY);
  radius  = 50;
 
  pushMatrix();
  translate(centerX, centerY);
  rotate(frameCount / 50.0);
  spiral(0,0,radius,segment, recursionLevel);
  popMatrix();
}
void spiral(float x_c,float y_c, float r, int seg,int level){
  level -= 1;
  noFill();
  ellipse(x_c,y_c,2*r,2*r);
    for(int i =0;i<=seg;i++){
      float x = x_c+cos(i*2*PI/seg)*r;
      float y = y_c+sin(i*2*PI/seg)*r;
      point(x,y);
      ellipse(x,y,2*r,2*r);
 
      if(level>0){
      spiral(x,y,r,seg, level);
      }
    }
}

week 8. rotate

float radius;
int segment = 6;
float centerX;
float centerY;
int recursionLevel = 3;
void setup(){
size(600,600);
background(0);
stroke(255);
centerX = height/2;
centerY = width/2;
}

void draw(){
background(0);
// radius = dist(centerX, centerY, mouseX, mouseY);
radius = 50;

pushMatrix();
translate(centerX-100, centerY);
rotate(frameCount / 50.0);
spiral(0,0,radius,segment, recursionLevel);
popMatrix();

}

void spiral(float x_c,float y_c, float r, int seg,int level){
level -= 1;
noFill();
ellipse(x_c,y_c,2*r,2*r);
for(int i =0;i {
float x = x_c+cos(i*2*PI/seg)*r;
float y = y_c+sin(i*2*PI/seg)*r;
point(x,y);
ellipse(x,y,2*r,2*r);

if(level>0){
spiral(x,y,r,seg, level);
}
}
}
see example: https://processing.org/examples/regularpolygon.html

EX: 創造一個陣列，讓每個物件旋轉。

week 8. rotate

float radius;
int segment = 6;
float centerX;
float centerY;
int recursionLevel = 3;

void setup(){
 size(600,600);
 background(0);
 stroke(255);
 centerX = height/2;
 centerY = width/2;
}

void draw(){
  background(0);
 // radius = dist(centerX, centerY, mouseX, mouseY);
  radius  = 50;
 
  pushMatrix();
  translate(centerX, centerY);
  rotate(frameCount / 50.0);
  spiral(0,0,radius,segment, recursionLevel);
  popMatrix();

}
void spiral(float x_c,float y_c, float r, int seg,int level){
  level -= 1;
  noFill();
  ellipse(x_c,y_c,2*r,2*r);
    for(int i =0; i{
      float x = x_c+cos(i*2*PI/seg)*r;
      float y = y_c+sin(i*2*PI/seg)*r;
      point(x,y);
      ellipse(x,y,2*r,2*r);
 
      if(level>0){
      spiral(x,y,r,seg, level);
      }
    }
}



see example: https://processing.org/examples/regularpolygon.html

EX: 創造一個陣列，讓每個物件旋轉。

week 8. rotate

float radius;
int segment = 6;
float centerX;
float centerY;
int recursionLevel = 3;

void setup(){
 size(600,600);
 background(0);
 stroke(255);
 centerX = height/2;
 centerY = width/2;
}

void draw(){
  background(0);
 // radius = dist(centerX, centerY, mouseX, mouseY);
  radius  = 50;
 
  pushMatrix();
  translate(centerX, centerY);
  rotate(frameCount / 50.0);
  spiral(0,0,radius,segment, recursionLevel);
  popMatrix();

}
void spiral(float x_c,float y_c, float r, int segm, int level){
  level -= 1;
  noFill();
  ellipse(x_c,y_c,2*r,2*r);
    for(int i =0; i < segm; i++)  
    {
      float x = x_c+cos(i*2*PI/segm)*r;
      float y = y_c+sin(i*2*PI/segm)*r;
      point(x,y);
      ellipse(x,y,2*r,2*r);
 
      if(level>0){
      spiral(x,y,r,segm, level);
      }
    }
}



see example: https://processing.org/examples/regularpolygon.html

EX: 創造一個陣列，讓每個物件旋轉。

week 8. rotate

float radius; int segment = 6; float centerX; float centerY;
int recursionLevel = 3;

void setup(){
size(600,600);
background(0);
stroke(255);
centerX = height/2;
centerY = width/2;
}

void draw(){
background(0);
// radius = dist(centerX, centerY, mouseX, mouseY);
radius = 50;

pushMatrix();
translate(centerX-100, centerY);
rotate(frameCount / 50.0);
spiral(0,0,radius,segment, recursionLevel);
popMatrix();

}
void spiral(float x_c,float y_c, float r, int seg,int level){
level -= 1;
noFill();
ellipse(x_c,y_c,2*r,2*r);
for(int i =0;i < seg;i++)
{
float x = x_c+cos(i*2*PI/seg)*r;
float y = y_c+sin(i*2*PI/seg)*r;
point(x,y);
ellipse(x,y,2*r,2*r);

if(level>0){
spiral(x,y,r,seg, level);
}
}
}

see example: https://processing.org/examples/regularpolygon.html

EX: 創造一個陣列，讓每個物件旋轉。

week 7. using Recursion

float radius;
int segment = 6;
float centerX;
float centerY;
int recursionLevel = 3;

void setup(){
 size(600,600);
 background(0);
 stroke(255);
 centerX = height/2;
 centerY = width/2;
}

void draw(){
  background(0);
  radius = dist(centerX, centerY, mouseX, mouseY);
  spiral(centerX,centerY,radius,segment, recursionLevel);
}
void spiral(float x_c,float y_c, float r, int seg,int level){
  level -= 1;
  noFill();
  ellipse(x_c,y_c,2*r,2*r);
    for(int i =0;i<seg;i++){
      float x = x_c+cos(i*2*PI/seg)*r;
      float y = y_c+sin(i*2*PI/seg)*r;
      point(x,y);
      ellipse(x,y,2*r,2*r);
   
      if(level>0){
      spiral(x,y,r,seg, level);
      }
    }
}

week 7. using sin(x)

sample codes:

float radius;
int segment = 10;
float centerX;
float centerY;

void setup(){
 size(600,600);
 background(0);
 stroke(255);
 centerX = height/2;
 centerY = width/2;
}

void draw(){
  background(0);
  radius = dist(centerX, centerY, mouseX, mouseY);
  spiral(centerX,centerY,radius,segment);
}
void spiral(float x_c,float y_c, float r, int seg){
    for(int i =0;i<=seg;i++){
      float x = x_c+cos(i*2*PI/seg)*r;  //算出x的位置
      float y = y_c+sin(i*2*PI/seg)*r;  //算出y的位置
      point(x,y);  // 畫出點，也能用其他形狀
    }
}



EX:
1. 每次點擊滑鼠，劃一個隨機半徑大小的圓。
2. draw flower of life (生命之花)

reference:
John Whitney
https://www.youtube.com/watch?v=BzB31mD4NmA

期中作業:
動態對照的練習，共6組。
deadline Nov. 23, 2017

week 6. 3D primitives & mouse

sample codes:

size(640, 360, P3D); 
background(0);
lights();

noStroke();
pushMatrix();
translate(130, height/2, 0);
rotateY(1.25);
rotateX(-0.4);
box(100);
popMatrix();

noFill();
stroke(255);
pushMatrix();
translate(500, height*0.35, -200);
sphere(280);
popMatrix();

week 5. structure programming

Global variables v.s. local variables
subroutine calls

EX:
  use subroutine call to perform 10 x 10 element-drawing.

week 4. statements and structure

1. ACG at MIT Media Lab.
Aesthetic and computation Concept video
2. for-loop
if

Ex: Draw 10x10 basic elements with some repetition

week 2. [活動]字體設計論壇研討會

【9/21字體設計論壇研討會 : 廖韡X曾國榕X仇寅】

9/21(三) 13:30~16:30 台灣科大國際大樓1F國際會議廳

字型範例:

PFont myFont;

void setup() {
  size(200, 200);
  // Uncomment the following two lines to see the available fonts 
  //String[] fontList = PFont.list();
  //printArray(fontList);
  myFont = createFont("Georgia", 32);
  textFont(myFont);
  textAlign(CENTER, CENTER);
  text("HELLO", width/2, height/2);
}

week 1. introduction

Aesthetic Computing: A Brief Tutorial
An Introduction to Aesthetic Computing by Paul Fishwick
booklist
conceptual art

computational aesthetics ?

Wassily Kandinsky
Victor Vasarely
Sol Lewitt

code artists:
Ben Laposky, 1914-2000

John Whitney Sr., 1918-1995

Herbert W. Franke, 1927-

Lillian Schwartz, 1927-

Harold Cohen, 1928-

Roman Verostko, 1929-

George Legrady, 1950-

Mark Napier, 1961-

John F. Simon Jr., 1963-

John Maeda, 1966-

Mary Flanagan, 1969-

Casey Reas, 1970-

Jared Tarbell, 1973-

Ben Fry, 1975-