Processing이란?

인터랙티브 아트와 작품에 능숙하며 종종 미디어 아트에 사용되는 언어와 IDE

특징

아주 쉽게 움직이는 작품을 만들 수 있습니다

프로토 타입이 잘

환경 구축이 죽을수록 편하게

매우 재미있는 언어로, 나는이 언어로 프로그래밍 늪에 빠졌다.
예를 들어 어떤 것이 만들 수 있을까 하면 (gifExport라는 라이브러리도 있지만, 거동이 이상하기 때문에 화면 캡처하고 있습니다)



마우스의 움직임에 따라 주위의 원이 회전하고 있습니다. 프레임 레이트 빌어 먹을 때문에 전혀 깨끗하게 보이지 않는다.

소스 코드

소스 코드는 이런 식으로 간결합니다. (코드를 쓰는 사람이 빌어 먹기 때문에 더럽습니다)
처음에 한 번만 발생하는 이벤트를 setup에 반복하고 싶은 것을 draw에 씁니다.
자바 기반이므로 즉시 익숙해질 수 있습니다.void setup()그리고void draw()
에 함수를 알 수 있는 성질상 글로벌 변수가 많아지는 경향이 있습니다.

kurukuru.pde

float[] x, y, pX, pY;
float[] distance;
float[] gapTheata;
color[] c;

final int n = 200;

void setup(){
  size(1000, 1000);
  background(255);
  colorMode(HSB);

  x = new float[n];
  y = new float[n];
  pX = new float[n];
  pY = new float[n];
  distance = new float[n];
  gapTheata = new float[n];
  c = new color[n];

  for(int i = 0; i < n; i++){
    x[i] = y[i] = pX[i] = pY[i] = 30;
    distance[i] = random(15, 150);
    gapTheata[i] = random(-PI, PI);
    c[i] = color(random(255), 255, 255, random(255));
  }

}

void draw(){
  background(255);
  noStroke();
  colorMode(HSB);

  for(int i = 0; i < n; i++){
    fill(c[i]);
    float theata = radians(frameCount*5.0) + gapTheata[i];
    float dist =distance[i] + 90.0*noise(theata/1.0, frameCount/100.0, i);
    x[i] = (mouseX + dist*cos(theata) + pX[i])/2.0;
    y[i] = (mouseY + dist*sin(theata) + pY[i])/2.0;
    pushMatrix();
    translate(x[i], y[i]);
    ellipse(0, 0, 20, 20);
    popMatrix();
    pX[i] = x[i]; pY[i] = y[i];
  }

  colorMode(RGB);
  fill(0);
  ellipse(mouseX, mouseY, 40, 40);
}

자세한 설명은 생략합니다.

재미있는 것

noise(w, x, y, z)

0 ~ 1 의 값을 돌려줍니다.

w 이외는 임의입니다.

연속을 유지한 채 파와 같은 noise 표현이 더해진다고 하는 생각으로 좋다고 생각합니다(random에서는 불연속, noise는 연속적)

고정 값을 주면 고정 값이 반환됩니다.

값을 단번에 변화시키면, 전 프레임과 전혀 다른 값이 나옵니다.

pushMatrix() popMatrix()

현재 좌표 상태를 저장하거나 되돌립니다.

colorMode()

HSB 와 RGB 를 바꿀 수 있습니다 (이외는 사용하고 있는 곳을 본 적이 없다). 그 밖에도 인수를 주어, 값의 상한을 바꾸거나 할 수 있습니다.

color

색을 보관 유지하는 형태입니다, 상기의 칼라 모드로 선언한 색을 사용할 수 있습니다. α 채널을 추가 할 수도 있습니다

frameCount

지금의 프레임수를 가져 줍니다. 연속적으로 변화하는 것을 만들고 싶을 때 사용할 수 있습니다. 왠지 대입할 수도 있습니다.

웹에 이식하고 싶습니다.

그럼 이것을 웹에 이식하고 싶을 때
p5.js를 사용할 수 있습니다.

이것을 웹에 이식해 봅시다. (다음 기사에서)