2023年5月28日 星期日

week 15. images

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

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

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



Final presentations:
experience of using  AI tools sharing
10 mins PPT presentations about using AI tools to do the final project
including:
tools, steps, results, discussion and reflection, suggestion
what-we-learned, 

Final Project:
using AI tools (chatGPT, Midjouney, Stable Diffusion....)  to do Self Portrait:
At least 1 processing code (最少有一種用 processing  程式碼)
最少三種
例如,Andy Warhol 風格,字型風格,拼貼風格,動態曼陀羅風格,...
參考: https://aestheticcomputing2010.blogspot.com/2020/12/week-15-self-portrait.html

6. 6 2023

2023年5月14日 星期日

2023年5月7日 星期日

week 12. mandala drawing II

example 1:

float cX;
float cY;
int nSegment = 24;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;
stroke(200);
noFill();

}

void draw() {
float x;
float y;
float angle;
float r = 200.0;

background(0);

for (int i= 0; i < nSegment; i++) {
angle = i*(PI*2.0)/nSegment;
x = cX+ r*cos(angle);
y = cY+ r*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle);
ellipse(0, 0, 40, 20);
popMatrix();

}

}


example 2:

structured :

float cX;

float cY;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;
stroke(200);
noFill();
noLoop();

}

void draw() {

background(0);
for (int i= 0; i< 4; i++)
drawLayer();

}

void drawLayer() {
float x;
float y;
float angle;
float r = 200.0;
int nSegment = 24;

r = random (60, 260);
nSegment = (int) random (8, 36);

for (int i= 0; i < nSegment; i++) {
angle = i*(PI*2.0)/nSegment;
x = cX+ r*cos(angle);
y = cY+ r*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle);
ellipse(0, 0, 60, 30);
popMatrix();

}

}


example 3:
 array:

float cX;
float cY;


int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;

r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];

for (int i = 0; i< nLayer; i++) {
r[i] = random(60, 260);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);

}

stroke(200);
noFill();
// noLoop();

}

void draw() {

background(0);
for (int i= 0; i< nLayer; i++)
drawLayer(i);

}

void drawLayer(int nth) {
float x;
float y;
float angle;

stroke(brightness[nth], brightness[nth], 100);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = cX+ r[nth]*cos(angle);
y = cY+ r[nth]*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
popMatrix();

}

}


example 4:
centered rotate:

float cX;
float cY;


int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;

r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];

for (int i = 0; i< nLayer; i++) {
r[i] = random(20, 260);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);

}

stroke(200);
noFill();
// noLoop();

}

void draw() {

background(0);
translate(cX, cY);
rotate(frameCount/150.0);
for (int i= 0; i< nLayer; i++)
drawLayer(i);

}

void drawLayer(int nth) {
float x;
float y;
float angle;

stroke(brightness[nth], brightness[nth], 100);
fill(0, brightness[nth], brightness[nth], 25);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = r[nth]*cos(angle);
y = r[nth]*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
popMatrix();

}
}

example 5:

float cX;
float cY;


int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;

r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];

for (int i = 0; i< nLayer; i++) {
r[i] = random(10, 300);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);

}

stroke(200);
noFill();
// noLoop();

}

void draw() {

background(0);
translate(cX, cY);
rotate(frameCount/map(sin(frameCount/60.0), -1.0, 1.0, -100.0, 100.0));
for (int i= 0; i< nLayer; i++)
drawLayer(i);

}

void drawLayer(int nth) {
float x;
float y;
float angle;

stroke(brightness[nth], brightness[nth], 100);
fill(0, brightness[nth], brightness[nth], 25);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = r[nth]*cos(angle);
y = r[nth]*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
//rect(-10, -10, 20, 20);

popMatrix();

}
} 

example 6:

float cX;
float cY;
int nSegment = 60;
void setup() {
size(600, 600);
cX = width/2.0;
cY = height/2.0;
stroke(200);
noFill();
background(0);
}
void draw() {
fill(0, 10);
rect(0, 0, width, height);
for (int i= 0; i< 4; i++) {
drawLeaves(18*(i+1), 80*i+sin(frameCount/40.0)*30.0);
}
}
void drawLeaves(int n, float r)
{
float angle;
float x;
float y;
for (int i= 0; i < n; i++) {
angle = i*(PI*2.0)/n;
x = cX+ r*cos(angle);
y = cY+ r*sin(angle);
pushMatrix();
translate(x, y);
rotate(angle);
ellipse(0, 0, 40, 20);
popMatrix();
}
}

example 7:
float cX;
float cY;
int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;
void setup() {
size(600, 600);
cX = width/2.0;
cY = height/2.0;
r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];
for (int i = 0; i< nLayer; i++) {
r[i] = random(60, 260);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);
}
stroke(200);
noFill();
// noLoop();
}
void draw() {
background(0);
pushMatrix();
translate(width/2, height/2);
rotate(frameCount/50.0);
translate(-width/2, -height/2);
for (int i= 0; i< nLayer; i++)
drawLayer(i);
popMatrix();
}
void drawLayer(int nth) {
float x;
float y;
float angle;
stroke(brightness[nth], brightness[nth], 100);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = cX+ r[nth]*cos(angle);
y = cY+ r[nth]*sin(angle);
pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
popMatrix();
}
}

2023年4月30日 星期日

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/

also 

2023年4月23日 星期日

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  5/16, 2023

2023年4月16日 星期日

week 9. using sine & AI

1. AI special topics by Tutor 

(時間往復變化) 
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=ehT7d9JPulQ

2023年3月25日 星期六

week 6. 3D primitives and array

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

example2:

int gridSize = 50;
void setup(){
  size(640,360,P3D);
  
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, 0);
 //   rotateY(frameCount/5);
    rotateX(frameCount/7);
    noStroke();
    box(20);
    popMatrix();
  }
}

Example3, cube rotation + 2D array 
float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(2.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, 0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

Examples 4:

float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(5.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, sin(frameCount/20.0)*20.0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}
example 5: using sin
float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(5.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, sin((frameCount/10.0)%width+i)*50.0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

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

2023年3月19日 星期日

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();
}
---------------------Step by step 2D rect variation---------------------
example 1:
float[][] xDiv;
int gridSize = 40;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
xDiv = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
xDiv[i][j] = random(gridSize/2.0);
}
}
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}

example 2:

float[][] xDiv;
int gridSize = 20;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
xDiv = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
xDiv[i][j] = random(gridSize/2.0);
}
}
frameRate(20);
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
xDiv[i][j]+=random(-4.0, 4.0);
translate(xDiv[i][j], 0);
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}

example 3:

float[][] xDiv;
int gridSize = 40;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
xDiv = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
xDiv[i][j] = random(gridSize/2.0);
}
}
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
scale(map(sin(frameCount/20.0), -1.0, 1.0, 0.2, 4.0));
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}

example 4:

float[][] scaleRate;
int gridSize = 40;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
scaleRate = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
scaleRate[i][j] = random(10.0, 40.0);
}
}
noFill();
stroke(255);
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
scale(map(sin(frameCount/scaleRate[i][j]), -1.0, 1.0, 0.2, 4.0));
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}


Practice:
Create an array of 3D shapes. 

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