顯示具有 jazzliang 標籤的文章。 顯示所有文章
顯示具有 jazzliang 標籤的文章。 顯示所有文章

2020年12月18日 星期五

week 14. image

the previous week:  particle system


Exercise :
  modify the sample code to simulate "wind" vector

sample:

ParticleSystem ps;
ParticleSystem ps2;
Wind w;
void setup() {
size(640, 360);
ps = new ParticleSystem(new PVector(width/2, 50));
ps2 = new ParticleSystem(new PVector(width/3, 200));
w = new Wind();
}
void draw() {
background(0);
ps.addParticle();
ps.run();
ps2.addParticle();
ps2.run();
w.update();
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;
ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
}
void addParticle() {
particles.add(new Particle(origin));
}
void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
if (p.isDead()) {
particles.remove(i);
}
}
}
}
// A simple Particle class
class Particle {
PVector position;
PVector velocity;
PVector acceleration;
float lifespan;
Particle(PVector l) {
acceleration = new PVector(0, 0.05);
velocity = new PVector(random(-1, 1), random(-2, 0));
position = l.copy();
lifespan = 255.0;
}
void run() {
update();
display();
}
// Method to update position
void update() {
velocity.add(acceleration);
if (!w.isDead()) velocity.add(w.acceleration);
position.add(velocity);
lifespan -= 1.0;
}
// Method to display
void display() {
stroke(255, lifespan);
fill(255, lifespan);
ellipse(position.x, position.y, 8, 8);
}
// Is the particle still useful?
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}
class Wind {
PVector acceleration;
float lifespan = 200;
Wind() {
acceleration = new PVector(0.05, 0);
}
void update(){
lifespan -= 1.0;
}
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}

additional sample :

ParticleSystem ps;
ParticleSystem ps2;
Wind w;
void setup() {
size(640, 360);
ps = new ParticleSystem(new PVector(width/2, 50));
ps2 = new ParticleSystem(new PVector(width/3, 200));
w = new Wind();
}
void draw() {
background(0);
ps.addParticle();
ps.run();
ps2.addParticle();
ps2.run();
w.update();
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;
ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
}
void addParticle() {
particles.add(new Particle(origin));
}
void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
if (p.isDead()) {
particles.remove(i);
}
}
}
}
// A simple Particle class
class Particle {
PVector position;
PVector velocity;
PVector acceleration;
float lifespan;
Particle(PVector l) {
acceleration = new PVector(0, 0.05);
velocity = new PVector(random(-1, 1), random(-2, 0));
position = l.copy();
lifespan = 255.0;
}
void run() {
update();
display();
}
// Method to update position
void update() {
velocity.add(acceleration);
if (!w.isDead()) velocity.add(w.acceleration);
position.add(velocity);
lifespan -= 1.0;
}
// Method to display
void display() {
stroke(255, lifespan);
fill(255, lifespan);
ellipse(position.x, position.y, 8, 8);
}
// Is the particle still useful?
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}
class Wind {
PVector acceleration;
float lifespan = 200;
Wind() {
acceleration = new PVector(0.05, 0);
}
void update(){
lifespan -= 1.0;
}
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}

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

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

https://processing.org/tutorials/pixels/

Exercise:
Create a particle system with an image's color

2020年11月27日 星期五

week 11. drawing mandala


 
 
 

Basic sample 1:


float resolution;
float radius = 100;
float circleX;
float circleY;
float offset;

void setup() {
  size(700, 700);
  circleX = 0;
  circleY = 0;
}

void draw() {
  fill(0,0,0,25);
  rect(0,0,width,height);
  translate(width/2, height/2);
  fill(255);
  noStroke();
  offset++;

  resolution = map(sin(offset*0.005), -1, 1, 2, 20);
 // resolution = 20;



  for (int i = 0; i < resolution; i++) {
    float angle = map(i, 0, resolution, 0, TWO_PI);
//    float waveOffset = sin(angle*circles) * 200;
 

 
   float circleOffsetX = cos(angle) * (radius); //xposition
   float circleOffsetY = sin(angle) * (radius); //yposition
  //  float circleOffsetX = cos(angle) * (radius + waveOffset); //xposition
  //  float circleOffsetY = sin(angle) * (radius + waveOffset); //yposition
 

    float x = circleX + circleOffsetX;
    float y = circleY + circleOffsetY;
 
    ellipse(x, y, 10, 10);
 

  }
}

Sample 2:

float resolution;
float radius = 100;
float circleX;
float circleY;
float circles;
float circleW;
float circleH;
float offset;

void setup() {
  size(700, 700);
  circleX = 0;
  circleY = 0;
}

void draw() {
  fill(0,0,0,25);
  rect(0,0,width,height);
  translate(width/2, height/2);
  fill(255);
  noStroke();
  offset++;

  resolution = map(sin(offset*0.00025), -1, 1, 11, 13);
  //resolution = 50;
  circles = 400;

  circleW = map(sin(offset*0.05), -1, 1, 1, 8);
  circleH = map(sin(offset*0.05), -1, 1, 1, 8);

  for (int i = 0; i < resolution; i++) {

    float scale = 200;

    float waveAngle = map(i, 0, resolution, 0, TWO_PI * circles);
    float waveOffset = sin(waveAngle) * scale;  //scale the -1 to 1 up

    float angle = map(i, 0, resolution, 0, TWO_PI * 156); //multiply for weirdness

    float circleOffsetX = cos(angle) * (radius + waveOffset); //xposition
    float circleOffsetY = sin(angle) * (radius + waveOffset); //yposition

    float x = circleX + circleOffsetX;
    float y = circleY + circleOffsetY;
 
    ellipse(x, y, circleW, circleH);

  }

}

example 3:


float resolution;
float radius = 100;
float circleX;
float circleY;
float circles;
float offset;

void setup() {
  size(700, 700);
  circleX = 0;
  circleY = 0;
}

void draw() {
  fill(0,0,0,25);
  rect(0,0,width,height);
  translate(width/2, height/2);
  fill(255, 255, 0);
  noStroke();
  offset++;

  resolution = map(cos(offset*0.0002), -1, 1, 2, 200);
  circles = 100;


beginShape();
noFill();
  for (int i = 0; i < resolution; i++) {

    float scale = 400;

    float waveAngle = map(i, 0, resolution, 0, TWO_PI * circles);
    float waveOffset = sin(waveAngle) * scale;  //scale the -1 to 1 up

    float angle = map(i, 0, resolution, 0, TWO_PI * 156); //multiply for weirdness
 

    float circleOffsetX = cos(angle) * (radius + waveOffset); //xposition
    float circleOffsetY = sin(angle) * (radius + waveOffset); //yposition

    float x = circleX + circleOffsetX;
    float y = circleY + circleOffsetY;
 
    stroke(255);
    //line(x, y, 0, 0);
    vertex(x,y);
 

  }
  endShape(CLOSE);

}

reference:
search "mandala" on
https://www.openprocessing.org/

2020年11月19日 星期四

week 10. using recursion for Sacred Geometry

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);
      }
    }
}



example 2:

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);
}
}
}


example 3:
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,r*2,r*2);
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);
float r1= 2*r*map(sin(frameCount/50.0+i*PI/6.0), -1.0, 1.0, 0.01, 4.0);
ellipse(x,y,r1,r1);
if(level>0){
spiral(x,y,r,seg, level);
}
}
}

References:

The Illusions of Reality & The Basics of Sacred Geometry (The Patterns of Consciousness) 

https://www.youtube.com/watch?v=zoqTNpok6zw

project 2:

draw mandala or Sacred Geometry (tree of life)
4 compositions representing earth, water, fire, wind, (4 elements)
deadline  12/11, 2020

2020年11月13日 星期五

week 9. using sine

(時間往復變化) 
practice:
  用sine 控制一個物件之 
    (1) 大小  scale  (https://processing.org/examples/sine.html)
    (2) 位置  translation  (https://processing.org/examples/sinecosine.html)
    (3) 旋轉(自轉與他轉)  rotation


(空間切割) 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);  // 畫出點,也能用其他形狀
    }
}

( 空間切割範例)
https://processing.org/examples/star.html

using map
https://processing.org/examples/map.html


example :

void setup() {
size(800, 600);
noFill();
stroke(255, 255, 255);
}
void draw() {
float d;
background(0);
for (int i= 0; i<width; i+=50) {
pushMatrix();
translate(i, 0);
rotate(map(sin((i/40.0+frameCount)/30.0), -1.0, 1.0, -PI/4, PI/4));
line(0, 0, 0, 350);
translate(0, 350);
ellipse(0, 0, 50, 50);
popMatrix();
}
}


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

reference:

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

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

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


Processing Tutorial Sin & Cos


https://www.youtube.com/watch?v=s_KIrIJkLoE

2020年10月22日 星期四

week 6. 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/

2020年10月16日 星期五

week 5. structural programming & basic form

Global variables v.s. local variables
subroutine calls



Manfred Mohr



William Kolomyjec

Computer Graphics & Art, 1977





Georg Nees 
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);
    }
    }


    Project 1:
    1. 選定一位美學運算的藝術家
    2. 手繪模仿其作品
    3. 用 processing 編碼產生方陣重複美學的作品,至少5件
    上傳到google drive (網址在 FB 公布)


    Deadline: Nov. 6, 2020


    2020年9月24日 星期四

    week 2. 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 來重現?