그래도 직진

     CodePen을 돌아다니다가 tim의 Image-Rasterizer 작품을 보고 안 따라 할 수가 없었다.

     정말 친절하시게 tutorial까지 올려 주셔서 쉽게 따라 해 볼 수 있었다.

     Processing은 컴퓨터 프로그래밍의 본질을 시각적 개념으로 프로그래머가 아닌 사람들에게 교육할 목적으로

     뉴 미디어 아트, 시각 디자인 공동체를 위해 개발된 오픈 소스 프로그래밍 언어이자 통합 개발 환경이다.

     여기 들어가서 Processing을 다운받았다. (현재는 Processing 4.0.1 버전까지 나옴)

     다운 받고 Processing - 3.5.4 (뒤에 3.5.4버전을 의미함) 폴더에 들어가면 processing.exe 파일이 보인다.

     processing.exe 누르면 바로 실행이 되면서 밑에 처럼 흰 창이 뜬다. 

     이 창에 원하는 코드를 넣어서 실행시키면 된다. 나는 Tim의 코드를 작성해서 넣었다.

     img에는 비너스 사진을 직접 다운받아서 'venus.jpg' 로 저장하여 사용하였다. (사진 경로 다 적어주어야 한다.)

int age = 34;
PImage img; 

void setup() {
  size(800,800);
  img = loadImage("venus.jpg"); 
  img.resize(800,800);

}

void draw() {
  background(255);
  
  fill(0);
  noStroke();

  
  float tiles = mouseX/10;
  float tileSize = width/tiles;
  
  translate(tileSize/2, tileSize/2);
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float size = map(brightness(c),0,255,20,0);
      
      ellipse(x*tileSize, y*tileSize,size,size);

    }
  }
}

     좌측 상단에 있는 실행 버튼▶을 누르면 짜잔!!!

     마우스를 움직일때마다 그림이 바뀐다. 너무 멋지지 않은가!!

     <참조>

    https://www.youtube.com/watch?v=XO8u0Y75FRk 

    https://tester188.tistory.com/m/25