크리에이티브 코딩(creative coding)은 코드로 이미지, 소리, 움직임, 상호작용을 만들며 표현을 탐색하는 작업이다. 화면에 놓을 원 하나를 그리는 데서 시작해, 원의 위치를 바꾸는 규칙 자체를 작업할 수도 있다.
- 한 번 그리기: p5.js의
setup()에 원을 그리면 시작할 때 한 번 실행된다. 정지 이미지도 코딩으로 만드는 작업에 포함된다. (p5.js: setup()) - 다시 그리기:
draw()는 반복 실행된다. 원의 위치를 조금씩 바꾸면 움직임이 되고, 매번 배경을 지울지 남길지에 따라 같은 이동이 궤적을 남기기도 한다. (p5.js: draw()) - 입력을 받기: 원의 가로 위치를
mouseX로 정하면 포인터가 움직이는 곳에 원이 따라간다. 시간에 따라 변하는 그림과 관람자의 입력으로 변하는 그림은 다른 방식으로 작동한다. (p5.js: mouseX) - 규칙과 결과: 일정한 간격, 반복 횟수, 난수의 범위를 바꾸면 하나의 코드에서 여러 구성이 나온다. 난수 시드를 고정하는 것은 우연히 나온 결과를 다시 만들 때 쓸 수 있는 방법이다. (p5.js: randomSeed())
- 도구와 범위: 프로세싱과 p5.js는 이런 작업을 시작할 수 있는 도구다. 생성형 인공지능을 사용한 작업과 겹칠 수 있지만, 정해진 규칙으로 선을 반복해서 그리는 데 학습된 모델이 필요한 것은 아니다.