'Others/Processing'에 해당되는 글 9건

p5.js 연습 009. $n$을 법으로 하는 곱셈 테이블
자연수 $2 \leq n \leq 150$에 대하여 $n$을 법으로 하는 곱셈 테이블이 아래에 주어져 있다. 테이블의 $(i,\,j)$-칸의 값은 $ij \pmod{n}$이며, 시각적 효과를 더하기 위해서 곱셈의 결과가 $0$에 가까울수록 노란색, $n-1$에 가까울 수록 파란색을 나타내도록 하였다. 단, 테이블에서 $0$이 곱해지는 첫번째 행과 첫번째 열은 제외하였다. 오른쪽 아래의 슬라이더를 움직이면 $n$의 값을 늘리거나 줄일 수 있다. p5.js 코드 보기
Others/Processing  |  2017. 10. 27. 05:17
p5.js 연습 008. 리사주 곡선(Lissajous curve)
이번에는 리사주 곡선(Lissajous curve)으로 불리는 곡선족을 그려 보았다. 리사주곡선은 다음과 같은 매개변수 방정식으로 나타낼 수 있다.\begin{align*} x &= A \sin(at+d) \\ y &= B \sin(bt) \end{align*} $a$와 $b$가 서로소이면, 이 두 숫자는 곡선에서 몇 개의 돌출부(lobe)가 있는지를 나타낸다고 한다. 아래 그림에서 $a=5$이므로, 세로로 다섯개의 돌출부가, $b=4$이므로 가로로는 네개의 돌출부가 그려짐을 확인할 수 있다. $a$와 $b$가 서로소가 아니면 최대공약수로 약분을 해 주었을 때의 값으로 돌출부의 개수는 판단할 수 있다. 또한 이 곡선을 3차원의 곡선으로 생각할 수 있는데, 이 때, $d$의 값은 이 곡선을 얼만큼 회전하여..
Others/Processing  |  2017. 7. 21. 05:07
p5.js 연습 007. 장미 곡선(Rose curve)
이번에는 장미 곡선(Rose curve)으로 불리는 곡선족을 그려 보았다. 장미 곡선은 다음가 같은 매개변수 방정식으로 나타낼 수 있다.\begin{align*} x &= R \cos \left( \tfrac{n}{d} t \right) \cos(t) \\ y &= R \sin \left( \tfrac{n}{d} t \right) \sin(t) \end{align*} $k = \tfrac{n}{d}$라 할 때, $k$가 짝수이면 $2k$개의 꽃잎이, $k$가 홀수이면 $k$개의 꽃잎이 그려지는 모습을 확인할 수 있다. 또한 $k$가 유리수이면 이 곡선은 닫힌 곡선이 되고, $k$가 무리수이면 이 곡선은 절대 다시 시작점으로 돌아가지 않아 원 $x^2 + y^2 = R^2$을 가득 채우게 된다. 슬라이더를..
Others/Processing  |  2017. 7. 21. 04:52
p5.js 연습 006. 프랙탈 스파이로그래프(fractal spirograph)
이번에는 $n$개의 원에 의해서 그려지는 프랙탈 스파이로그래프(fractal spirograph)를 코딩해 보았다. 이 그림에 대한 아이디어는 아래 두 곳에서 얻었다. https://youtu.be/0dwJ-bkJwDI http://benice-equation.blogspot.ca/2012/01/fractal-spirograph.html 주어진 정수 $k$에 대하여, $n$번째 원이 회전하는 속도는 $k^n$에 비례한다. 따라서 $k$ 값이 양수일때는 모든 원들이 같은 방향으로 회전하고, $k$ 값이 음수일 때는 각각의 원들이 주변 인접원들과 서로 반대방향으로 회전함을 확인할 수 있다. 또한 원의 수 $n$이 증가함에 따라서 점점 프랙탈 형상이 생기는 모습 또한 관찰할 수 있다. 아래 슬라이더를 움직여서..
Others/Processing  |  2017. 7. 14. 08:08
p5.js 연습 005. 에피사이클로이드(epicycloid)
이번에는 위키피디아에 있는 공식을 참고하여 에피사이클로이드(epicycloid)를 그려 보았다. 에피사이클로이드는 검은색 원이 파란색 원에 외접하면서 주위를 회전할 때, 검은색 원의 한 고정점이 나타내는 자취를 말한다. 에피사이클로이드의 자취를 각 $\theta$에 대한 매개방정식(parametric equation)으로 나타낼 수 있는데, 이는 다음과 같다.\begin{align*} x(\theta) &= (R+r)\cos \theta - d\cos \left({\frac {R+r}{r}}\theta \right) \\ y(\theta ) &= (R+r)\sin \theta - d\sin \left({\frac {R+r}{r}}\theta \right) \end{align*}단, 이 경우 $d = r ..
Others/Processing  |  2017. 7. 9. 09:38
p5.js 연습 004. 스파이로그래프(Spirograph)
이번에는 위키피디아에 있는 공식을 참고하여 스파이로그래프(Spirograph)를 그려 보았다. 처음으로 어떤 강의도 보지 않고 처음부터 끝까지 혼자서 만든거라 개인적으로는 의미있는 코드이다. 코드를 다 짜고 나니 무언가 밋밋해 보여서 스파이로그래프의 곡선의 색을 바꾸기 위하여 인터넷을 찾아보니 색을 표현하는데는 크게 두가지 색상 체계가 있다고 한다. 이번에는 빨강(Red), 초록(Green), 파랑(Blue)의 세가지 색의 혼합으로 색을 나타내는 RGB 색상 체계가 아닌 HSB 색상 체계를 이용하였는데, HSB는 색도(Hue), 채도(Saturation), 명도(Brightness)로 색을 표시하며 그라데이션을 나타내는데 효과적이라 한다. 아래 슬라이더 중 $0 \leq k \leq 1$는 안쪽 작은 원..
Others/Processing  |  2017. 7. 7. 08:33
p5.js 연습 003. L-시스템을 이용한 시어핀스키 삼각형 그리기
L-시스템(L-system)은 1986년 린덴마이어(Lindenmayer)가 생태계의 성장 모형, 특히 나무의 분기 모형을 연구하는 목적으로 고안하였다. L-시스템은 세가지 요소 $(S,\, \omega,\, P)$로 이루어지는데, 이 시스템의 각 요소들에 대하여 $S$는 시스템을 구성하는 문장들의 집합, (이를 다시 세분화 하여 매 단계마다 치환규칙에 의해 변하는 변수들의 집합과, 변하지 않는 상수들의 집합으로 나누기도 한다), $\omega$는 $S$의 문장들로 구성된 시스템의 초기 상태, $P$는 시스템의 현 단계에서 다음 단계로 변환시키는 치환 규칙 을 나타낸다. 예를 들어 어떤 L-시스템이 다음와 같은 규칙으로 생성된다고 하자. \[ S = \{A,\, B\}, \quad \omega = A, ..
Others/Processing  |  2017. 7. 7. 06:01
p5.js 연습 002. 프랙탈 나무
함수 내에서 자기 자신을 호출하는 재귀함수(Recursive Function)를 이용하여 그린 프랙탈 나무. angle 바를 움직이면 나뭇가지가 뻗어 나가는 각도를 조절할 수 있고 ($0^\circ$부터 $180^\circ$까지), length 바를 움직이면 나뭇가지의 길이가 줄어드는 비율을 조절할 수 있다 ($0$부터 $0.75$까지). p5.js 코드 보기
Others/Processing  |  2017. 7. 5. 02:18
p5.js 연습 001
현재 마우스 커서의 위치에 따라 주변 원들의 반지름이 결정되고 (마우스 커서와 가까울수록 반지름이 작아짐) 마우스를 클릭 시 전체 원의 반지름이 두배로 커지는 (반지름이 무한히 커지는 것을 방지하기 위해 반지름이 일정 이상 커지면 다시 원상태로 돌아감) 코드 p5.js 코드 보기
Others/Processing  |  2017. 7. 4. 00:18

티스토리툴바