p5.js로 만드는 알고리즘 아트

Generative Art

인스타그램으로 작품들을 많이 접한다. P5.js로 인스타그램에서 Generative art를 찾아서 Code clone 해보려고 한다. 이번에 작성한 코드는 @fondazionemarcellomorandini 에서 영감을 받았다.

결과물

그리기 위한 조건들

• 흰색과 검은색 사각형을 번갈아 가면서 그리기
• 첫 사각형은 언제나 흰색.
• 행이 바뀌면 사각형의 너비는 반으로 준다.
• 이전의 행보다 사각형의 개수는 2배 많아진다.
• 사각형의 높이는 사용자 창 크기에 그리는 행의 개수를 나눈다.

 

 

핵심 코드

for (let i = 0 ; i < count; i++ ) {
        // console.log(i+"번째 행입니다.");
        for (let j = 0; j < play; j++) {
            if (color){
                fill(255);
                color = false;
            } else {
                fill(20);
                color = true;
            }
            
            //console.log(i+1+"열",j+1+"번째 사각형",color,"너비"+w, "높이"+h, "y좌표"+y, "x좌표"+x);
            rect(x,y,w,h);
            x += w*2-w;
        }
        x = 0;
        play *= 2;
        color = true;
        w /= 2;
        y += height/count;
    }
}

 

1. nested loop를 만들어서 행과 각 행에 사각형을 얼마나 그릴지 반복해준다. (편의를 위해 변수 i를 사용하는 반복문은 행 반복문, j를 사용하는 반복문은 열 반복문이라고 하겠다.)

 

2. count 변수는 그릴 행의 개수를 의미한다. play는 첫번째 반복문이 끝날때마다 2를 곱해주어 행 반복문의 횟수를 2배씩 늘리기 위해 만든 변수다.

 

3. 열 반복문 안에 color라는 이름의 변수를 생성하여 토글이 가능한 조건문을 만든다. (사각형은 흰, 검, 흰, 검 진행되므로) 행이 시작할때는 무조건 흰색이어야하므로, 행 반복문이 끝날때 color를 참으로 만들어준다.

 

4. 배열을 만들고, 그 안에 몇 행의 몇 번째 사각형인지 정보를 넣을까 생각했지만 배열에 x, y, w, h값을 할당해서 배열의 길이 횟수만큼 그리는 것만 더 하면 돼서 굳이 배열은 만들지 않았다.