> Week 1. Twisted Squares

01. Info

100 days CSS - Twisted Pyramid

• 프로세싱으로 뭔가를 만들어 보는게 과제를 받았다.
• 나는 여기에 나온 CSS 애니메이션을 직접 구현해보고, 이를 N개로 확장하기로 마음 먹었다.

There are elements on the lattice points of the black background. Each element consists of squares with different sizes centered at a lattice point. Each square rotates 360 degrees back and forth with the same period. Its speed is slow at the beginning, fast in the middle, and slow again at the end. There is a time difference between squares so that squares in an element do not move simultaneously, forming a wavy movement.

그니깐 대충

• 하나의 요소에는 사각형이 여러개가 있는데, 이게 순서가 있게 회전을 함
  • 정사각형 차이에는 시간 차이가 있어서 동시에 움직이는 것이 아닌 물결 모양의 이동
• 이 회전하는 속도가 처음과 끝은 느리게, 그리고 중간은 빠르게 진행함
• 요소들이 여러개로 격자로 이루어지면서 검은색 배경에 있음.

02. Process!

1. Make a single element
   • Make an array that contains the position of time(시간의 위치) of the square
   • Initialize it with an arithmetic sequence(등차 수열)
   • Use rotate, translate, rect
   • Use easeInOutSine function from easings.net
2. Extends to a lot of elements
   • Use class for readability
   • Use settings() to use variables at size()

// number of squares
int square_size = 8;
// the number of squares in a row(col) 
int N = 4;
// 요소 사이의 거리
int distance = 200;
// 애니메이션 주기
int duration = 800;

• initial variables

class Square {
  Timer[] t;
 
  int x;
  int y;
  int sq_size;
 
  Square(int square_size, int duration, int nx, int ny) {
    t = new Timer[square_size];
    for (int i=0; i<square_size; i++) {
      // Initialize the position of time with an arithmetic sequence(등차 수열)
      t[i] = new Timer(((float)i / square_size) * ((float)duration / 4));
    }
    x = nx;
    y = ny;
    sq_size = square_size;
  }
 
  void display() {
    for (int i=0; i<sq_size; i++) {
      float angle = easeInOutSine(t[i].t/duration)*TWO_PI;
 
      translate(x*distance, y*distance);
      rotate(angle);
 
      rect(-(i+1)*8, -(i+1)*8, (i+1)*16, (i+1)*16);
 
      rotate(-angle);
      translate(-x*distance, -y*distance);
 
      t[i].advance();
    }
  }
}

• Square라고 요소 하나의 정보를 담고 있는 class를 만들었다
• t[i]: i번째 정사각형의 현재 시간의 위치(주기?로 보면 됩니다)
• 밑에 보면 translate(width/2, hight/2)를 draw()에 넣어서 가운데가 원점인 상황
  • for문 안에서 rotate(angle)와 translate(x, y)를 하고 롤백을 한 이유는 그렇게 하지 않으면 이미 회전과 위치 이동이 이루어진 상태에서 또 움직이게 되어서 원하는 대로 나오지 않는다;;
  • translate, rotate 순서 중요하다. 이렇게 안하면 원하는 대로 나오지 않는다.

// 0 ~ 1
float easeInOutSine(float x) {
  return -(cos(PI*x)-1)/2;
}
 
class Timer {
  float t;
 
  Timer(float init) {
    t = init;
  }
 
  void advance() {
    t += 2;
    if (t >= duration) t -= 2*duration;
  }
}

• 주기를 구하는 Timer 클래스를 만들었다.
• $-duration \le t \le duration$을 예측하고 짠 코드이다.
  • 보통 duration은 짝수로 두니...

Square[][] sq = new Square[N][N];
void settings() {
  size((N-1)*distance, (N-1)*distance);
}
 
void setup() {
  frameRate(200);
  noFill();
 
  for (int i=0; i<N; i++) {
    for (int j=0; j<N; j++) {
      sq[i][j] = new Square(square_size, duration, i, j);
    }
  }
}
 
void draw() {
  stroke(#ffffff);
  background(#222222);
  
  for (int i=0; i<N; i++) {
    for (int j=0; j<N; j++) {
      sq[i][j].display();
    }
  }
}

• size()에 변수를 넣기 위해서는 settings()함수 안에 넣어야 한다.
  • applying variable to screen size on processing 3
• N * N의 요소들을 두고 싶어서 Square를 2차원 배열로 두어서 진행했다.
• draw()마다 background를 넣어서 모양의 흔적을 없앴다.

03. 감사의 인사

• 디버깅에 도움을 주신 캬스타에게 감사를 표합니다 🙇