p5.js 연습 004. 스파이로그래프(Spirograph)

written by jjycjn   2017. 7. 7. 08:33

이번에는 위키피디아에 있는 공식을 참고하여 스파이로그래프(Spirograph)를 그려 보았다. 처음으로 어떤 강의도 보지 않고 처음부터 끝까지 혼자서 만든거라 개인적으로는 의미있는 코드이다.


코드를 다 짜고 나니 무언가 밋밋해 보여서 스파이로그래프의 곡선의 색을 바꾸기 위하여 인터넷을 찾아보니 색을 표현하는데는 크게 두가지 색상 체계가 있다고 한다. 이번에는 빨강(Red), 초록(Green), 파랑(Blue)의 세가지 색의 혼합으로 색을 나타내는 RGB 색상 체계가 아닌 HSB 색상 체계를 이용하였는데, HSB는 색도(Hue), 채도(Saturation), 명도(Brightness)로 색을 표시하며 그라데이션을 나타내는데 효과적이라 한다.


아래 슬라이더 중 $0 \leq k \leq 1$는 안쪽 작은 원과 바깥쪽 큰 원의 반지름의 길이의 비를 나타내고, $0 \leq l \leq l$은 작은 원의 중심에서 펜 까지의 거리와 작은 원의 반지름의 길이의 비를 나타낸다. 슬라이더를 움직인 후에는 꼭 왼쪽 아래에 Refresh 버튼을 눌러야 제대로 된 스파이로그래프를 볼 수 있다.




p5.js 코드 보기



  ::  
  • 공유하기  ::