[processing 3.0] Class Study 조금씩 다른 [얼굴들] 한꺼번에 생성하기 JavaScript

오늘 예제는 얼굴들.


오브젝트 오리엔트 프로그래밍의 단계는,
각각의 데이터의 값을 일일이 지정하는 것이 아니라,
데이터 '군'을 하나의 오브젝트로 취급하여 관리하는 추상화 개념을 사용하는 것.
p5js의 array개념과 유사하다.

//A type

int row = 5; // 가로열만 지정하는 array
Face [] faces = new Face [row]; // Face라는 Class 이용하는 것이지만, 그 클래스에 속한 각각의 개체는 다른 얼굴들이므로.

void setup() { 
  background(random(255), random(255), random(255)); //캔버스 바탕색
  size(800, 800); // 캔버스 사이즈
  for (int i= 0; i < row; i++) { // 변수 i 를 이용하여 array를 한 번 적용해준다. 가로열의 각각의 얼굴들은 다른 개체값으로 표현된다.
      faces[i]= new Face(i*100+100, j*100+100, random(70)+20, random(30), random(10));
      faces[i].display(); //화면에 출력
    }
  }
}

//A' type : 세로열도 같이 지정해줘야 하므로 컬럼 int를 추가해준다
int row = 5;
int col = 6;
Face [][] faces = new Face [row][col];

void setup() {
  background(random(255), random(255), random(255));
  size(800, 800);
  for (int i= 0; i < row; i++) {
    for (int j=0; j < col; j++) { 
      faces[i][j]= new Face(i*100+100, j*100+100, random(70)+20, random(30), random(10));
      faces[i][j].display();
    }
  }
}
void draw() {
}

class Face {
  float x, y;
  float fSize, eSize, mSize;

  Face (float tx, float ty, float tfSize, float teSize, float tmSize) { // t?
    x= tx;
    y = ty;
    fSize = tfSize;
    eSize = teSize;
    mSize = tmSize ;
  }


  void display() {