챗GPT와 함께하는 프로세싱 인터랙티브 미디어 아트 코딩

1. 챗GPT와 함께하는 프로세싱 인터랙티브 미디어 아트 코딩입니다. 

인터랙티브 미디어 아트란 무엇인가 챗GPT에 물어보았습니다. 몇가지 주요한 요소들이 보이는데, 관람객 참여, 상호작용, 기술, 센서, 프로그래밍, 예술과 공학의 융합된 현대 미술의 형태. 개인적으로 AI 아트가 가졌으면 하는 요소들 입니다.

 

 

개인적으로 Brownian motion과 같이 이런 예측 불가능한 자연속의 Random 요소를 좋아합니다.예시로 이러한 이미지가 관객의 소리, 관객의 움직임 등에 따라 움직임이 반응하고 방향이 바뀐다면 인터렉티브한 기술적 요소는 갖춘셈.

Brownian motion 알고리즘, 액체나 기체 속에서 미소입자들이 불규칙하게 운동하는 현상

2. 프로세싱이란 무엇인가?

챗GPT에게 물어보았습니다. 역시 저보다 잘 설명해 주는군요. 프로세싱은 MIT Media Lab에서 자바 기반으로 만들어졌고 교육용, 인터랙티브 미디어 아트 코딩하는 분들이 많이 사용하는 언어와 개발 환경입니다.

> 다운받기, https://processing.org/

 

프로세싱이란 무엇인가?

3. 챗GPT에 사전 예열 작업을 합니다.
> 앞으로 Stackoverflow 개발자 처럼 답변해줘

4. Processing 으로 간단한 코드를 요청해봅니다.

> Processing 으로 동작하는 모션 그래픽 코드를 작성해줘

 

5. 에러 없는 완성된 코드가 나왔습니다.

우측 상단의 [Copy code]를 클릭하여 코드를 복사 후 프로세싱에서 돌려봅니다.

에러 업이 완성된 코드

 

6. 결과는 아래 화면

중력 값을 조금은 단조로운 화면이 나왔습니다.

다소 단조로운 실행 화면

7. 이번에는 좀 더 인터랙티브

마우스에 반응 하는 코드를 요청해 보았습니다. 파티클 시뮬레이션이라는 전문용어도 넣어 봅니다. 혹시나 전문용어는 영어로 작성하는게 인식을 좀 더 잘 할까 싶어 영어로 주문합니다.

> Processing 에서 동작하는 마우스 클릭에 반응하며 터지는 particle simulation 코드로 작성해줘.

 

8. NullPointerException 에러

코드는 잘 나왔고 넣어서 실행해보니 무시무시한 NullPointerException 에러가 나는군요. 한줄 한줄 에러를 잡아보려고 코드를 보다가.

 

9. 에러도 잡아줘

이렇게 간단한 코드도 에러가 나니? 한마디 해주고, NullPointerExeption 에러도 잡아보라고 시켜봅니다. 그랬더니 수정된 코드를 주는군요. 처음부터 이렇게 짜줄 것이지.

10. 만족

철저하게 보스 모드로 이것 저것 주의를 줍니다.

> 다음부턴 NullPointerException 에러가 나지 않게 코드를 작성해줘

 

11. 좀 더 가보기로 합니다

> Processing 으로 동작하는 화려한 모션 그래픽 코드를 작성해줘

이제 좀 쓸만한 코드가 나온 것 같습니다. 예전에 이걸 생으로 짜려고 벡터, 인력, 척력, 중력 뭐 이런걸 공부해던 추억이 새록새록 납니다. 정확하게는 군체 움직임을 위한 Boids flocking 알고리즘이었어요. 프로세싱 코드는 첨부하였습니다.

마우스로 드래그 하면 Force 가 적용되어 움직이는 공들

 

xyz-interactive-art-code_eg01.zip

0.00MB

 

 

[1] 챗GPT가 처음 질문에 답변해준 코드

// 설정값
float x, y; // 원의 좌표
float dx, dy; // 원의 속도
float radius = 50; // 원의 반지름
color ballColor = color(0, 0, 255); // 원의 색상
float gravity = 0.1; // 중력
float damping = 0.7; // 마찰력
float wallThickness = 20; // 벽의 두께

void setup() {
  size(640, 480); // 창 크기
  x = width / 2; // 원의 초기 위치
  y = height / 2;
  dx = random(-5, 5); // 원의 초기 속도
  dy = random(-5, 5);
  strokeWeight(wallThickness); // 벽 두께 설정
}

void draw() {
  background(255); // 배경색 지정
  drawWalls(); // 벽 그리기
  moveBall(); // 원 이동
  drawBall(); // 원 그리기
}

// 벽 그리기
void drawWalls() {
  stroke(0); // 벽 색상
  line(wallThickness / 2, wallThickness / 2, width - wallThickness / 2, wallThickness / 2); // 상단
  line(wallThickness / 2, height - wallThickness / 2, width - wallThickness / 2, height - wallThickness / 2); // 하단
  line(wallThickness / 2, wallThickness / 2, wallThickness / 2, height - wallThickness / 2); // 좌측
  line(width - wallThickness / 2, wallThickness / 2, width - wallThickness / 2, height - wallThickness / 2); // 우측
}

// 원 이동
void moveBall() {
  x += dx; // 원 좌표 이동
  y += dy;
  dy += gravity; // 중력 적용
  // 벽에 부딪치면 반사
  if (x - radius < wallThickness / 2 || x + radius > width - wallThickness / 2) {
    dx *= -1;
    dx *= damping;
  }
  if (y - radius < wallThickness / 2 || y + radius > height - wallThickness / 2) {
    dy *= -1;
    dy *= damping;
  }
}

// 원 그리기
void drawBall() {
  noStroke(); // 선 없음
  fill(ballColor); // 원 색상
  ellipse(x, y, radius * 2, radius * 2); // 원 그리기
}