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/

沒有留言:

張貼留言