[프로세싱 예제] 화면 중심에서 멀어질수록 밝기가 달라지는 점들 그리기

화면 중심에서 멀어질수록 밝기가 달라지는 점들 그리기

Processing을 사용하여 화면에 중심에서 멀어질수록 밝기가 달라지는 점들을 그리는 프로그램입니다. 여기서는 픽셀 간의 거리와 밝기 변화를 계산하여 시각적인 패턴을 만들어냅니다.

float[][] distances;
float maxDistance;
int spacer;

void setup() {
  size(640, 360);
  maxDistance = dist(width/2, height/2, width, height);
  distances = 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;
    }
  }
  spacer = 10;
  strokeWeight(6);
  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) {
      stroke(distances[x][y]);
      point(x + spacer/2, y + spacer/2);
    }
  }
}

주요 코드 설명

1. 전역 변수 정의:
   • distances[][]: 각 픽셀의 중심으로부터의 상대적인 거리를 저장하는 2차원 배열입니다.
   • maxDistance: 화면 중앙과 화면의 가장 먼 점 간의 거리를 저장하여, 이를 기준으로 거리를 정규화합니다.
   • spacer: 그리기 간격을 결정하는 변수로, 값이 클수록 점이 간격을 두고 그려집니다.
2. setup() 함수:
   • 화면 크기를 640x360으로 설정하고, 중심에서부터의 최대 거리를 maxDistance 변수에 저장합니다.
   • 이중 루프를 통해 각 좌표 (x, y)에서 화면 중심 (width/2, height/2)까지의 거리를 계산하고, 이 거리를 최대 거리로 나누어 255 범위 내의 값으로 정규화하여 distances[x][y] 배열에 저장합니다. 이 값은 나중에 밝기를 결정하는 데 사용됩니다.
   • spacer 변수는 점 간격을 설정하고, strokeWeight(6)로 점의 두께를 설정합니다. 마지막으로 noLoop()로 draw 함수를 한 번만 실행하도록 설정합니다.
3. draw() 함수:
   • 화면 배경을 검은색으로 설정한 후, 이중 루프를 통해 각 좌표에서 거리에 따른 밝기를 지정하고 point() 함수로 점을 그립니다.
   • 이때, spacer 값을 이용해 좌표를 건너뛰며 점을 찍기 때문에, spacer 값이 클수록 점의 밀도가 낮아집니다. 점의 밝기는 stroke() 함수로 설정되며, 각 픽셀의 밝기는 미리 계산된 distances[x][y] 값에 의해 결정됩니다.

프로그램의 결과

이 코드는 화면 중심에서 멀어질수록 밝기가 낮아지는 점들로 구성된 패턴을 만듭니다. spacer 값을 조절하면 점의 밀도를 변경할 수 있으며, 이를 통해 더 조밀하거나 희박한 시각적 패턴을 생성할 수 있습니다.

프로그램 결과