SMALL
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값을 할당해서 배열의 길이 횟수만큼 그리는 것만 더 하면 돼서 굳이 배열은 만들지 않았다.
LIST
'IT 지식' 카테고리의 다른 글
apache, php 연동 in windows 10 (0) | 2021.07.15 |
---|---|
Figma, 전체적인 기능을 소개합니다. (Figma 강의 1편) (0) | 2021.04.16 |
Heuristic evaluation of user interfaces: CHI 90 Procee&qs April 1990 (0) | 2021.03.24 |
텍스트만 주면 작품을 만드는 인공지능 DALL·E의 무궁무진함 (0) | 2021.01.08 |
구름 ide(goormide) 리액트 npm start가 안될때 (0) | 2020.07.19 |