2025年9月28日 星期日

week 5. 2D array & transform


review:
  draw a rotating shape in the center of screen.

  also use 'scale()' to change the size of the object.

using pushMatrix() and popMatrix()
using cos();


參考:
https://processing.org/examples/array2d.html

用 2D array 設定每個元素的顏色,旋轉速度,屬性。

float[][] distances;
float[][] rotateAngles;
float[][] rotateRates;
float maxDistance;
int spacer;

void setup() {
  size(640, 360);
  maxDistance = dist(width/2, height/2, width, height);
  distances = new float[width][height];
  rotateAngles = new float[width][height];
  rotateRates = new float[width][height];
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      float distance = dist(width/2, height/2, x, y);
      distances[x][y] = distance/maxDistance * 255;
      rotateAngles[x][y] = random(5.0);
      rotateRates[x][y] = random(5.0, 40.0);
    }
  }
  spacer = 30;
  strokeWeight(3);
  //noLoop();  // Run once and stop
}

void draw() {
  background(0);
  // This embedded loop skips over values in the arrays based on
  // the spacer variable, so there are more values in the array
  // than are drawn here. Change the value of the spacer variable
  // to change the density of the points
  for (int y = 0; y < height; y += spacer) {
    for (int x = 0; x < width; x += spacer) {
      pushMatrix();
      translate(x, y);
      rotate(frameCount/rotateRates[x][y]+rotateAngles[x][y]);
      rect(-spacer/2, -spacer/2, spacer, spacer);
      stroke(distances[x][y]);
      popMatrix();
    }
  }
}

transform example:

void setup(){
size(800, 600);
noFill();
stroke(255);
}
void draw() {
background(30);
pushMatrix();
translate(600, 400);
scale(cos(frameCount/60.0)*5.0);
rotate(frameCount/30.0);
rect(-32, -32, 64, 64);
popMatrix();
}


Practice:
Create an array of 3D shapes. 

https://processing.org/tutorials/p3d/


Project 1:
1. 選定一位(或多位)美學運算的藝術家
2. 與AI 對話分析作品美學特質
3. 用 processing 編碼產生方陣重複美學的作品 (自行加入變化),至少5件 
4. 截圖以上成果,製作成 pptx
5. pptx 與 原始碼,上傳到 google drive
6. 繳交日現場 demo
上傳到google drive (網址在 FB 公布)


Deadline: 10/17, 2025

2025年9月20日 星期六

week 4. structural programming & basic form

Global variables v.s. local variables
subroutine calls


https://collections.vam.ac.uk/item/O154610/p-197-print-mohr-manfred/


Manfred Mohr on Openprocessing
Manfred Mohr on DADA





The Recode Project (目前掛站)





Georg Nees  on Openprocessing
the
T



  • Control





  • Iteration
  • Embedded Iteration
  • Conditionals 1
  • Conditionals 2
  • Logical Operators





  • Cybernetic Serendipity (1968): A Walkthrough With Jasia Reichardt

    (模控巧遇)

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


    1. form: point, line, polygon, arc, eclipse, rect,...
    2. noLoop();  / redraw();

    void setup(){
      size(640, 360);
      background(0);
    }

    int gridSize = 40;

    void draw() {
    background(0); 
    stroke(200);
    noFill();
    for (int x = gridSize; x <= width - gridSize; x += gridSize) {
      for (int y = gridSize; y <= height - gridSize; y += gridSize) {
      
       rotateShape(x, y);
      
      }
    }

    }

    void rotateShape(int xloc, int yloc) {
      pushMatrix();
      translate(xloc, yloc);
     // rotate((frameCount / 8.0)+xloc+yloc+mouseX);
     rotate((mouseX/100)*frameCount / 8.0+xloc+yloc);
     rect(-10, -10, 20, 20);
     line(-10, -10, 10, 10);
      popMatrix();


    }


    References:
    https://processing.org/examples/star.html



    example #2:

    void setup(){
      size(640, 360);
      background(0);
    }

    int gridSize = 40;

    void draw() {
    background(0); 
    stroke(200);
    noFill();
    for (int x = gridSize; x <= width - gridSize; x += gridSize) {
      for (int y = gridSize; y <= height - gridSize; y += gridSize) {
       
       rotateShape(x, y);
       
      }
    }

    }

    void rotateShape(int xloc, int yloc) {
      pushMatrix();
      translate(xloc, yloc);
     rotate((frameCount / 8.0)+xloc+yloc);
     //rotate((mouseX/100)*frameCount / 8.0+xloc+yloc);
     beginShape();
    vertex(-10, -10);
    vertex(0, -10);
    vertex(0, 0);
    vertex(10, 0);
    vertex(10, 10);
    vertex(-10, 10);
    endShape(CLOSE);
     //rect(-10, -10, 20, 20);
    // line(-10, -10, 10, 10);
      popMatrix();


    }

    example #3:

    int gridSize = 100;
    void setup() {
    size(1000, 1000);
    stroke(255);
    background(0);
    frameRate(10);
    }
    void draw() {
    background(0);
    for (int i = 0; i <= width; i+= gridSize) {
    for (int j = 0; j <= height; j+= gridSize) {
    rect(i+gridSize/2 + random (40), j+gridSize/2, gridSize/4, gridSize/4);
    }
    }
    }

    example #4:

    int gridSize = 100;
    void setup() {
    size(1000, 1000);
    stroke(255);
    background(0);
    frameRate(5);
    noFill();
    }
    void draw() {
    background(0);
    for (int i = 0; i <= width; i+= gridSize) {
    for (int j = 0; j <= height; j+= gridSize) {
    drawGrid(i, j);
    }
    }
    }
    void drawGrid(int x, int y){
    int cellSize;
    for (int i = 0; i < 5; i++) {
    cellSize = (int) random(20, 60);
    rect(x+gridSize/2-cellSize/2, y+gridSize/2-cellSize/2, cellSize , cellSize, 6);
    }
    }









    2025年9月17日 星期三

    week 3. repeat

    參觀"何理互動"作品展

    Jacquard loom (1801)





    charles babbage analytical engine



    Arktura Ricami Stool



























    Bridget Riley


    Yaacov Agam




    Richard Anuszkiewicz



    Jesus Rafael Soto



    Victor Vasarely


    Martin Wattenberg, Shape of Song, 2002



    http://turbulence.org/Works/song/method/method.html


    Turbulence.org Commission: "The Shape of Song" by Martin Wattenberg v1 (2001) from Turbulence.org on Vimeo.

    Modell 5 - Granular Synthesis



    PSC 31, Mark Wilson



    Frieder Nake

    http://dada.compart-bremen.de/item/agent/68


    Vera Molnar


    https://www.surfacemag.com/articles/vera-molnar-in-thinking-machines-at-moma/

    https://www.openprocessing.org/browse/?q=Vera+Molnar&time=anytime&type=all#

    Manfred Mohr

    https://www.emohr.com/



    CODE Tutorials:

  • Structure


  • Statements and Comments
  • Coordinates
  • Width and Height
  • Setup and Draw
  • No Loop
  • Loop
  • Redraw
  • Functions
  • Recursion

  • Homework:
    1. 找一位 code artist 的作品,參考:

    Computer Artists in Database of Digital Art

    2. 搜尋這位 artist 的所有相關作品
     
    3. 如何以手繪,以及 code 來重現?



    2025年9月7日 星期日

    week 2. form and computer


    Ivan Sutherland (1963), Sketchpad


    Morisawa Posters, John Maeda, 1996




    Electronic abstraction, Ben Laposky, 1952.


    Entramado , Pablo Valbuena, 2008



    Volume, by United Visual Artists, 2006





    Cirrus 2008, Zaha Hadid



    Repeat

    0. 藝術新浪潮:當代數位媒體藝術, 公視
    1. ACG at MIT Media Lab.
    Aesthetic and computation Concept video
    Linz 電子藝術節
    ISAT (台灣科技藝術)

    2. for-loop
    if

    FORM+CODE examples

    Ex: Draw 10x10 (or 11X16) basic elements with some repetition