The Pain in the Spring - another version (processing)

안녕하세요 JK 입니다

이번에 ArtSynergy  with JK 코너를 새로 개설하였습니다. 

 "예술"+"시너지" 의 결합으로  개별 요소의 합보다 더 큰 전체 효과를 생성하는 요소의 상호 작용을 의미.

;예술과 기술을 결합하여 새롭고 혁신적인 경험을 체험하기 위함입니다 

 

위와 같이 , 취지는 많은 분들의 동참으로  상호 아트 시너지 효과를 내기 위함이오니

완성하신 분들은  결과물들 올려주시고  많이  뽐내셨으면  좋겠습니다.  

NFT등록과 관련해서  자세한 건   수갤러리 작가님이나  따능 작가님의   포스팅과 강의를  추천드리오니,

개인적으로  따로  등록을  해두시면   좋을것 같습니다.

 

항상 열린 마인드로   차후에  작품이 많이 모이면   

다른  그룹장분들과  함께  꼴라보  형태로의   가상 전시 가능성도  구상해 봅니다.  

 

 

-----------------------------------------------

 

 

프로세싱 작업이  어려우신 분들은  여기에 원본 이미지 올려주세요. 

너무 많으시면  제가 다 소화를 못하니까     5 분 정도로만    한정해서  프로세싱이  구현되는  순간을 

영상으로   녹화  제작후 올려 드리겠습니다.

 

 

 

원본 영상 >>

https://youtu.be/dDjpy7Ya-Hc

 

 

 

1. 사용한 AI Tools
Image: Midjourney
Coding: ChatGPT// Processing
AI Voice by Vrew 한국어//elevenlabs.io 영어
AI Music by mubert.com (www.mubert.com/Ambassador License)
Video Editing :Clipchamp

 

 

 

2.작업 과정전 안내

 여러분들은  필요에  따라  마음에 드시는  음성이나   배경음악 등을  넣으시면 되니,

 저의 설명은 프로세싱의  코드를 알려드리는데에  중점을 두어 작성 합니다.

 글 하단에, 제가  따라하기 참조한  영상 링크도 같이 남겨놓을테니, 

 ChatGPT 를 사용하는 상세한 과정이 궁금하시면  꼭 보시길 추천드려요.

 

 

 

3. 제공하는 코드 2 가지 

-화면 전체적으로  퍼지며  그리는  코드 - 속도(5,8) , 원형파티클 크기 4

-중심에서 양쪽으로 갈라지며  그리는 코드 - 속도(5,8) ,원형파티클 크기 4

>> 속도와 원형파티클의 사이즈를  조정해서  변화를 줄 수있어요.

 

-size(1536, 1024);

>> 실행하고자하는  이미지화일과 같은 사이즈로 맞추어야 하니, 이미지  속성을  확인하고 코드에 변경한다

 

-background(255);

>> 실행하고자하는  이미지를 어떤  바탕에 그릴 것인가  결정합니다 

(255 )는 흰색입니다.

(0)은  검정 

background (0~255, 0~225, 0~225 ) 3자리 숫자값을  각각 0~255 사이에서 고르면  다른 칼라를 만들수 있다.

마우스를 background 위에 올려놓으면 칼라시트가 뜨고,  마우스를 조정해서 칼라를 선택하면  된다.

 

 

 

4. 작업 과정 소개

1. 새폴더를  만든다 (폴더명 예시-미드져니_프로세싱실행)
2. 원하는 jpg 이미지 준비한다 > 이름을 portrait.jpg 로 변경한다 > 새폴더에 넣어둔다 (폴더명 예시-미드져니_프로세싱실행)
3. 실행하고자하는 이미지화일과 같은 사이즈로 맞추어야 하니, 이미지 속성을 확인하고
4. 실행하고자하는 이미지화일과 같은 사이즈로 코드에 변경한다 . size(1536, 1024);
5. 프로세싱 페이지로 간다   https://processing.org/
6. 프로세싱 다운로드 (윈도우즈,맥, 리루스 등 컴퓨터에 맞게 )
7. 다운로드한 폴더 열어서 압축 푼다 
8. 또는 내컴퓨터 다운로드로 가서   압축된 폴더  찾고   압축 푼다
9. 필요에 따라  재현그룹장님의  강의보고 이해한다.
10. 설치된 프로세싱 바로가기를  클릭 > 프로세싱 실행
11.  스케치 창이 열린다 
12. 프로세싱 스케치 창에  복사한 코드를 붙힌다.> 다른이름으로 저장하기  클릭  > 아까 (폴더명 예시-미드져니_프로세싱실행) 에  코드이름을 정해서 저장한다 > 플레이 버튼 클릭
13. 프로세싱화일과  프로세싱이  읽을  이미지가 같은 폴더에  잘 들어가있으면   1000개의 원형 파티클이  이미지를  생성해준다.

 

 

새폴더를 만든다 (폴더명 예시- 미드져니_프로세싱실행 )

 

 

원하는 이미지를 준비한다 > 이름을   portrait.jpg  로 변경한다  >새폴더에 넣어둔다(폴더명 예시-미드져니_프로세싱실행)

 

 

실행하고자하는  이미지화일과 같은 사이즈로 맞추어야 하니, 이미지  속성을  확인하고 ,

 

 

 

>> 실행하고자하는  이미지화일과 같은 사이즈로  코드에 변경한다 . size(1536, 1024);

 

 

 

프로세싱 페이지로 간다    https://processing.org/

 

 

프로세싱 다운로드 (윈도우즈,맥, 리루스 등 컴퓨터 버젼에 맞게 )

 

 

 

다운로드한 폴더 열어서 압축 푼다

 

 

또는, 내컴퓨터 다운로드로 가서   압축된 폴더  찾고   압축 푼다

 

 

설치된 프로세싱 바로가기를  클릭  > 프로세싱 실행

 

 

프로세싱 스케치 창에  복사한 코드를 붙힌다.프로세싱 스케치 창에  복사한 코드를 붙힌다.> 다른이름으로 저장하기  클릭  > 아까 (폴더명 예시-미드져니_프로세싱실행) 에  코드이름을 정해서 저장한다 > 플레이 버튼 클릭

 

 

 

복사해서 실행할 코드 1 >>

화면 전체적으로  퍼지며  그리는  코드 - 속도(5,8) 파티클 4>>

PImage portrait;
ArrayList<Particle> particles = new ArrayList<Particle>();
int numParticles = 1000;
int centerX = 768;
int centerY = 512;

void setup() {
  size(1536, 1024);
  portrait = loadImage("portrait.jpg");
  portrait.resize(width, height);
  portrait.loadPixels();
  
  for (int i = 0; i < numParticles; i++) {
    float x = centerX + random(-width/2, width/2);
    float y = centerY + random(-height/2, height/2);
    particles.add(new Particle(x, y, 2));
  }
  background(255);
}

void draw() {
  for (Particle p : particles) {
    int px = int(constrain(p.x, 0, width - 1));
    int py = int(constrain(p.y, 0, height - 1));    
    int pixelColor = portrait.pixels[py * width + px];
    float brightness = brightness(pixelColor);
    p.update(brightness, pixelColor);
    p.display();
  }
}

class Particle {
  float x, y;
  float speed;
  float angle;
  float size;
  color col;
  
  Particle (float x, float y, float size) {
    this.x = x;
    this.y = y;
    this.size = size;
    speed = random(5, 8);
    angle = random(TWO_PI);
  }
  
  void update(float brightness, color pixelColor) {
    speed = random(5, 8);
    angle += map(brightness, 0, 255, -0.1, 0.1) * random(0.9, 1.1);
    x += speed * cos(angle);
    y += speed * sin(angle);
    col = pixelColor;
    
    if (x > width) {
      x = 0;
    }  
  }
  
  void display() {
    fill(col);
    noStroke();
    ellipse(x, y, size*4, size*4);
  }
}

 

---------------------------------------------------------

 

 

 

실행할 코드 2 >>

중심에서 양쪽으로 갈라지며  그리는 코드 - 속도(5,8) 파티클 4>>

PImage portrait;
ArrayList<Particle> particles = new ArrayList<Particle>();
int numParticles = 1000;

void setup() {
  size(1536, 1024);
  portrait = loadImage("portrait.jpg");
  portrait.resize(width, height);
  portrait.loadPixels();
  
  float centerX = width/2.0; // set centerX to the center of the canvas
  
  for (int i=0; i < numParticles; i++){
    float y = map(i, 0, numParticles, 0, height);
    particles.add(new Particle(centerX, y, 2));
  }
  background(255);
}

void draw() {
  for (Particle p : particles) {
    int px = int(constrain(p.x, 0, width - 1));
    int py = int(constrain(p.y, 0, height - 1));    
    int pixelColor = portrait.pixels[py * width + px];
    float brightness = brightness(pixelColor);
    p.update(brightness, pixelColor);
    p.display();
  }
}

class Particle {
  float x, y;
  float speed;
  float angle;
  float size;
  color col;
  
  Particle (float x, float y, float size) {
    this.x = x;
    this.y = y;
    this.size = size;
    speed = random(5, 8);
    angle = random(TWO_PI);
  }
  
  void update(float brightness, color pixelColor) {
    speed = random(5,8);
    angle += map(brightness, 0, 255, -0.1, 0.1) * random(0.9, 1.1);
    x += speed * cos(angle);
    y += speed * sin(angle);
    col = pixelColor;
    
    if (x > width) {
      x = 0;
    }  
  }
  
  void display() {
    fill(col);
    noStroke();
    ellipse(x, y, size*4, size*4);
  }
}

 

 

 

 

--------------------------------------------------------------------------

 

추가로 참고할 영상 >>

재현 그룹장님의  코드강의 

https://app.aikoreacommunity.com/spaces/11050578/content

 

 

처음에 보고 따라한 초기 버젼의 원본 영상

https://youtu.be/Oc4SnBkbysg

 

 

JK의 재현 그룹장님  코드 강의 따라하기

https://jk2023.tistory.com/56

AI chatgpt와 프로세싱으로 AI 개발자님 HUB 코딩 따라하기

 

 

JK의 티스토리 

https://jk2023.tistory.com/category/Code%20%2C%20Low%20Code%20%2C%20No%20Code%20%20with%20%20ChatGPT

'Code , Low Code , No Code with ChatGPT' 카테고리의 글 목록

 

 

 

 

이상입니다

좋은 작품 많이 올려주시고  즐감 하세요