[프로세싱 예제] 코사인 함수 값 기반 그라데이션 생성

코사인 함수 값 기반 그라데이션 생성

Processing을 사용하여 화면에 코사인 함수의 값을 기반으로 그라데이션을 생성하는 프로그램입니다.

프로세싱 예제

float[] coswave; 

void setup() {
  size(640, 360);
  coswave = new float[width];
  for (int i = 0; i < width; i++) {
    float amount = map(i, 0, width, 0, PI);
    coswave[i] = abs(cos(amount));
  }
  background(255);
  noLoop();
}

void draw() {

  int y1 = 0;
  int y2 = height/3;
  for (int i = 0; i < width; i++) {
    stroke(coswave[i]*255);
    line(i, y1, i, y2);
  }

  y1 = y2;
  y2 = y1 + y1;
  for (int i = 0; i < width; i++) {
    stroke(coswave[i]*255 / 4);
    line(i, y1, i, y2);
  }
  
  y1 = y2;
  y2 = height;
  for (int i = 0; i < width; i++) {
    stroke(255 - coswave[i]*255);
    line(i, y1, i, y2);
  }
  
}

설명

1. 코사인 값 배열 생성 (setup 함수):
   • coswave라는 배열을 생성하여 width 크기만큼의 공간을 확보합니다. width는 창의 너비(640픽셀)와 동일합니다.
   • 각 배열 요소에는 코사인 값의 절대값을 저장합니다. 이때 i 값을 창 너비에 맞춰 0부터 PI까지 매핑한 후, 그 값을 cos() 함수에 넣고 절대값을 취한 값을 배열에 저장합니다.
2. 화면에 그리기 (draw 함수):
   • 화면은 세 개의 구간으로 나뉩니다.
   • 첫 번째 구간은 상단 3분의 1 (y1 = 0, y2 = height / 3), 코사인 값을 255로 곱하여 밝기를 조절한 색상으로 세로선을 그립니다.
   • 두 번째 구간은 중간 부분 (y1 = height / 3, y2 = height / 3 * 2), 이전과 비슷하지만, 색상을 4로 나누어 더 어둡게 만듭니다.
   • 마지막 구간은 하단 부분 (y1 = height / 3 * 2, y2 = height), 코사인 값을 255에서 뺀 값으로 밝기를 반전시켜 세로선을 그립니다.

이 프로그램은 각 구간마다 서로 다른 밝기의 그라데이션을 생성하여 시각적으로 흥미로운 결과물을 제공합니다.

실행 결과

 

정리

프로세싱 프로그램에는 예제 프로그램이 수록되어 있습니다. 예제 프로그램은 크게 네 개의 범주로 나눠져 있습니다. 'Basics', 'Topics', 'Demos', 'Libraries'가 그것입니다.

프로세싱 예제

 

각각의 예제 프로그램을 하나씩 살펴보도록 하겠습니다. 오늘은 그중 첫 번째 예제였습니다.