API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 24th, 2015
216
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.29 KB | None | 0 0
raw download clone embed print report
  1. {
  2. "cells": [
  3. {
  4. "cell_type": "code",
  5. "execution_count": 14,
  6. "metadata": {
  7. "collapsed": false
  8. },
  9. "outputs": [
  10. {
  11. "data": {
  12. "text/html": [
  13. "<canvas id=\"c00\">\n",
  14. "<script>\n",
  15. " var c00 = document.querySelector('#c00');\n",
  16. " c00.width = 200;\n",
  17. " c00.height = 200;\n",
  18. "</script>"
  19. ],
  20. "text/plain": [
  21. "<IPython.core.display.HTML object>"
  22. ]
  23. },
  24. "metadata": {},
  25. "output_type": "display_data"
  26. }
  27. ],
  28. "source": [
  29. "%%html\n",
  30. "<canvas id=\"c00\">\n",
  31. "<script>\n",
  32. " var c00 = document.querySelector('#c00');\n",
  33. " c00.width = 200;\n",
  34. " c00.height = 200;\n",
  35. "</script>"
  36. ]
  37. },
  38. {
  39. "cell_type": "code",
  40. "execution_count": 15,
  41. "metadata": {
  42. "collapsed": false
  43. },
  44. "outputs": [
  45. {
  46. "data": {
  47. "application/javascript": [
  48. "var g00 = c00.getContext('2d');\n",
  49. "g00.fillStyle = \"rgb(56, 56, 56)\";\n",
  50. "g00.fillRect(0, 0, g00.canvas.width, g00.canvas.height);\n",
  51. "g00.strokeStyle = \"rgb(255, 255, 255)\";\n",
  52. "g00.beginPath();\n",
  53. "g00.arc(g00.canvas.width/2, g00.canvas.height/2, 20, 0, 2*Math.PI);\n",
  54. "g00.stroke();"
  55. ],
  56. "text/plain": [
  57. "<IPython.core.display.Javascript object>"
  58. ]
  59. },
  60. "metadata": {},
  61. "output_type": "display_data"
  62. }
  63. ],
  64. "source": [
  65. "%%javascript\n",
  66. "var g00 = c00.getContext('2d');\n",
  67. "g00.fillStyle = \"rgb(56, 56, 56)\";\n",
  68. "g00.fillRect(0, 0, g00.canvas.width, g00.canvas.height);\n",
  69. "g00.strokeStyle = \"rgb(255, 255, 255)\";\n",
  70. "g00.beginPath();\n",
  71. "g00.arc(g00.canvas.width/2, g00.canvas.height/2, 20, 0, 2*Math.PI);\n",
  72. "g00.stroke();"
  73. ]
  74. },
  75. {
  76. "cell_type": "code",
  77. "execution_count": 16,
  78. "metadata": {
  79. "collapsed": false
  80. },
  81. "outputs": [
  82. {
  83. "data": {
  84. "text/html": [
  85. "<canvas id=\"c01\">\n",
  86. "<script>\n",
  87. " var c01 = document.querySelector('#c01');\n",
  88. " c01.width = 200;\n",
  89. " c01.height = 200;\n",
  90. " var g01 = c01.getContext('2d');\n",
  91. " g01.fillStyle = \"rgb(56, 56, 56)\";\n",
  92. " g01.fillRect(0, 0, g01.canvas.width, g01.canvas.height);\n",
  93. " g01.strokeStyle = \"rgb(255, 255, 255)\";\n",
  94. " \n",
  95. " function drawCircle(ctx, tx, ty, r) {\n",
  96. " ctx.save();\n",
  97. " ctx.translate(tx, ty);\n",
  98. " ctx.beginPath();\n",
  99. " ctx.arc(0, 0, r, 0, 2*Math.PI);\n",
  100. " ctx.stroke();\n",
  101. " ctx.restore();\n",
  102. " }\n",
  103. " function rotMtx(v, deg) {\n",
  104. " var rad = deg*Math.PI/180;\n",
  105. " var cos = Math.cos(rad);\n",
  106. " var sin = Math.sin(rad);\n",
  107. " return [cos * v[0] - sin * v[1], sin * v[0] + cos * v[1]];\n",
  108. " }\n",
  109. " var c = [g01.canvas.width/2, g01.canvas.height/2];\n",
  110. " var r = 20;\n",
  111. " drawCircle(g01, c[0], c[1], r);\n",
  112. " var v = [0, r];\n",
  113. " for(var i = 0; i < 6; i++) {\n",
  114. " var vi = rotMtx(v, 60*i);\n",
  115. " drawCircle(g01, c[0]+vi[0], c[1]+vi[1], r);\n",
  116. " }\n",
  117. "\n",
  118. "\n",
  119. "</script>"
  120. ],
  121. "text/plain": [
  122. "<IPython.core.display.HTML object>"
  123. ]
  124. },
  125. "metadata": {},
  126. "output_type": "display_data"
  127. }
  128. ],
  129. "source": [
  130. "%%html\n",
  131. "<canvas id=\"c01\">\n",
  132. "<script>\n",
  133. " var c01 = document.querySelector('#c01');\n",
  134. " c01.width = 200;\n",
  135. " c01.height = 200;\n",
  136. " var g01 = c01.getContext('2d');\n",
  137. " g01.fillStyle = \"rgb(56, 56, 56)\";\n",
  138. " g01.fillRect(0, 0, g01.canvas.width, g01.canvas.height);\n",
  139. " g01.strokeStyle = \"rgb(255, 255, 255)\";\n",
  140. " \n",
  141. " function drawCircle(ctx, tx, ty, r) {\n",
  142. " ctx.save();\n",
  143. " ctx.translate(tx, ty);\n",
  144. " ctx.beginPath();\n",
  145. " ctx.arc(0, 0, r, 0, 2*Math.PI);\n",
  146. " ctx.stroke();\n",
  147. " ctx.restore();\n",
  148. " }\n",
  149. " function rotMtx(v, deg) {\n",
  150. " var rad = deg*Math.PI/180;\n",
  151. " var cos = Math.cos(rad);\n",
  152. " var sin = Math.sin(rad);\n",
  153. " return [cos * v[0] - sin * v[1], sin * v[0] + cos * v[1]];\n",
  154. " }\n",
  155. " var c = [g01.canvas.width/2, g01.canvas.height/2];\n",
  156. " var r = 20;\n",
  157. " drawCircle(g01, c[0], c[1], r);\n",
  158. " var v = [0, r];\n",
  159. " for(var i = 0; i < 6; i++) {\n",
  160. " var vi = rotMtx(v, 60*i);\n",
  161. " drawCircle(g01, c[0]+vi[0], c[1]+vi[1], r);\n",
  162. " }\n",
  163. "\n",
  164. "\n",
  165. "</script>"
  166. ]
  167. },
  168. {
  169. "cell_type": "code",
  170. "execution_count": 17,
  171. "metadata": {
  172. "collapsed": false
  173. },
  174. "outputs": [
  175. {
  176. "data": {
  177. "text/html": [
  178. "<canvas id=\"c02\">\n",
  179. "<script>\n",
  180. " var g02;\n",
  181. " function drawCircle(ctx, t) {\n",
  182. " ctx.save();\n",
  183. " ctx.translate(t[0], t[1]);\n",
  184. " ctx.beginPath();\n",
  185. " ctx.arc(0, 0, 20, 0, 2*Math.PI);\n",
  186. " ctx.strokeStyle = \"rgb(255, 255, 255)\";\n",
  187. " ctx.stroke();\n",
  188. " ctx.restore();\n",
  189. " }\n",
  190. " function rotMtx(v, deg) {\n",
  191. " var rad = deg*Math.PI/180;\n",
  192. " var cos = Math.cos(rad);\n",
  193. " var sin = Math.sin(rad);\n",
  194. " return [cos * v[0] - sin * v[1], sin * v[0] + cos * v[1]];\n",
  195. " }\n",
  196. " function seven(ctx, c) {\n",
  197. " drawCircle(ctx, c);\n",
  198. " var v = [0, 20];\n",
  199. " for(var i = 0; i < 6; i++) {\n",
  200. " var vi = rotMtx(v, 60*i);\n",
  201. " drawCircle(ctx, [c[0]+vi[0], c[1]+vi[1]]);\n",
  202. " }\n",
  203. " }\n",
  204. " function setup(width, height) {\n",
  205. " g02 = document.querySelector('#c02').getContext('2d');\n",
  206. " g02.canvas.width = width;\n",
  207. " g02.canvas.height = height;\n",
  208. " g02.fillStyle = \"rgb(56, 56, 56)\";\n",
  209. " g02.fillRect(0, 0, width, height);\n",
  210. " }\n",
  211. " function draw() {\n",
  212. " var c = [g02.canvas.width/2, g02.canvas.height/2];\n",
  213. " seven(g02, c);\n",
  214. " var v = [0, 100];\n",
  215. " for(var i = 0; i < 6; i++) {\n",
  216. " var vi = rotMtx(v, 60*i);\n",
  217. " seven(g02, [c[0]+vi[0], c[1]+vi[1]]);\n",
  218. " }\n",
  219. " }\n",
  220. " /*\n",
  221. " function repeat(ctx, c, r, fn) {\n",
  222. " fn(ctx, c);\n",
  223. " var v = [0, r];\n",
  224. " for(var i = 0; i < 6; i++) {\n",
  225. " var vi = rotMtx(v, 60*i);\n",
  226. " fn(ctx, [c[0]+vi[0], c[1]+vi[1]]);\n",
  227. " }\n",
  228. " }\n",
  229. " */\n",
  230. " setup(300, 300);\n",
  231. " draw();\n",
  232. "</script>"
  233. ],
  234. "text/plain": [
  235. "<IPython.core.display.HTML object>"
  236. ]
  237. },
  238. "metadata": {},
  239. "output_type": "display_data"
  240. }
  241. ],
  242. "source": [
  243. "%%html\n",
  244. "<canvas id=\"c02\">\n",
  245. "<script>\n",
  246. " var g02;\n",
  247. " function drawCircle(ctx, t) {\n",
  248. " ctx.save();\n",
  249. " ctx.translate(t[0], t[1]);\n",
  250. " ctx.beginPath();\n",
  251. " ctx.arc(0, 0, 20, 0, 2*Math.PI);\n",
  252. " ctx.strokeStyle = \"rgb(255, 255, 255)\";\n",
  253. " ctx.stroke();\n",
  254. " ctx.restore();\n",
  255. " }\n",
  256. " function rotMtx(v, deg) {\n",
  257. " var rad = deg*Math.PI/180;\n",
  258. " var cos = Math.cos(rad);\n",
  259. " var sin = Math.sin(rad);\n",
  260. " return [cos * v[0] - sin * v[1], sin * v[0] + cos * v[1]];\n",
  261. " }\n",
  262. " function seven(ctx, c) {\n",
  263. " drawCircle(ctx, c);\n",
  264. " var v = [0, 20];\n",
  265. " for(var i = 0; i < 6; i++) {\n",
  266. " var vi = rotMtx(v, 60*i);\n",
  267. " drawCircle(ctx, [c[0]+vi[0], c[1]+vi[1]]);\n",
  268. " }\n",
  269. " }\n",
  270. " function setup(width, height) {\n",
  271. " g02 = document.querySelector('#c02').getContext('2d');\n",
  272. " g02.canvas.width = width;\n",
  273. " g02.canvas.height = height;\n",
  274. " g02.fillStyle = \"rgb(56, 56, 56)\";\n",
  275. " g02.fillRect(0, 0, width, height);\n",
  276. " }\n",
  277. " function draw() {\n",
  278. " var c = [g02.canvas.width/2, g02.canvas.height/2];\n",
  279. " seven(g02, c);\n",
  280. " var v = [0, 100];\n",
  281. " for(var i = 0; i < 6; i++) {\n",
  282. " var vi = rotMtx(v, 60*i);\n",
  283. " seven(g02, [c[0]+vi[0], c[1]+vi[1]]);\n",
  284. " }\n",
  285. " }\n",
  286. " /*\n",
  287. " function repeat(ctx, c, r, fn) {\n",
  288. " fn(ctx, c);\n",
  289. " var v = [0, r];\n",
  290. " for(var i = 0; i < 6; i++) {\n",
  291. " var vi = rotMtx(v, 60*i);\n",
  292. " fn(ctx, [c[0]+vi[0], c[1]+vi[1]]);\n",
  293. " }\n",
  294. " }\n",
  295. " */\n",
  296. " setup(300, 300);\n",
  297. " draw();\n",
  298. "</script>"
  299. ]
  300. },
  301. {
  302. "cell_type": "markdown",
  303. "metadata": {},
  304. "source": [
  305. "반복되는 패턴이 보인다.\n",
  306. "1. 반지름 r 이 주어진다.\n",
  307. "2. 7개의 중심좌표를 계산한다.\n",
  308. "3. 좌표마다 원을 그린다.\n",
  309. "4. 원하는 만큼 1,2,3을 반복한다.\n",
  310. "\n",
  311. "일단 7개의 중심좌표를 구하는 것부터 해볼까."
  312. ]
  313. },
  314. {
  315. "cell_type": "code",
  316. "execution_count": 18,
  317. "metadata": {
  318. "collapsed": false
  319. },
  320. "outputs": [
  321. {
  322. "data": {
  323. "text/html": [
  324. "<canvas id=\"c03\">\n",
  325. "<script>\n",
  326. " var g03;\n",
  327. " function rot (startPoint, degree) {\n",
  328. " var x = startPoint[0];\n",
  329. " var y = startPoint[1];\n",
  330. " var r = startPoint[2];\n",
  331. " var rad = degree * Math.PI/180;\n",
  332. " var c = Math.cos(rad);\n",
  333. " var s = Math.sin(rad);\n",
  334. " return [c * x - s * y, s * x + c * y, r];\n",
  335. " }\n",
  336. "\n",
  337. " function make_seven (radius) {\n",
  338. " var s0 = [0, 0, radius];\n",
  339. " var s1 = [0, radius, radius];\n",
  340. " var s2 = rot(s1, 60);\n",
  341. " var s3 = rot(s2, 60);\n",
  342. " var s4 = rot(s3, 60);\n",
  343. " var s5 = rot(s4, 60);\n",
  344. " var s6 = rot(s5, 60);\n",
  345. " return [s0, s1, s2, s3, s4, s5, s6];\n",
  346. " }\n",
  347. "\n",
  348. " function setup(width, height) {\n",
  349. " g03 = document.querySelector('#c03').getContext('2d');\n",
  350. " g03.canvas.width = width;\n",
  351. " g03.canvas.height = height;\n",
  352. " g03.fillStyle = \"rgb(56, 56, 56)\";\n",
  353. " g03.fillRect(0, 0, width, height);\n",
  354. " }\n",
  355. " function drawCircle(ctx, x, y, r) {\n",
  356. " ctx.save();\n",
  357. " ctx.beginPath();\n",
  358. " ctx.arc(x, y, r, 0, 2*Math.PI);\n",
  359. " ctx.strokeStyle = \"rgb(255, 255, 255)\";\n",
  360. " ctx.stroke();\n",
  361. " ctx.restore();\n",
  362. " }\n",
  363. " \n",
  364. " setup(300, 300);\n",
  365. " var s = [g03.canvas.width/2, g03.canvas.height/2];\n",
  366. " \n",
  367. " // 반지름 r 이 주어진다.\n",
  368. " var sr = 20;\n",
  369. " \n",
  370. " // 7개의 중심좌표를 계산하고 각 좌표마다 원을 그린다.\n",
  371. " g03.save();\n",
  372. " g03.translate(s[0], s[1] + 0*sr);\n",
  373. " make_seven(sr).forEach(function(element, index, array) {\n",
  374. " drawCircle(g03, element[0], element[1], element[2]);\n",
  375. " })\n",
  376. " g03.restore();\n",
  377. " \n",
  378. " g03.save();\n",
  379. " g03.translate(s[0], s[1] - 4*sr);\n",
  380. " make_seven(sr).forEach(function(element, index, array) {\n",
  381. " drawCircle(g03, element[0], element[1], element[2]);\n",
  382. " })\n",
  383. " g03.restore();\n",
  384. "</script>"
  385. ],
  386. "text/plain": [
  387. "<IPython.core.display.HTML object>"
  388. ]
  389. },
  390. "metadata": {},
  391. "output_type": "display_data"
  392. }
  393. ],
  394. "source": [
  395. "%%html\n",
  396. "<canvas id=\"c03\">\n",
  397. "<script>\n",
  398. " var g03;\n",
  399. " function rot (startPoint, degree) {\n",
  400. " var x = startPoint[0];\n",
  401. " var y = startPoint[1];\n",
  402. " var r = startPoint[2];\n",
  403. " var rad = degree * Math.PI/180;\n",
  404. " var c = Math.cos(rad);\n",
  405. " var s = Math.sin(rad);\n",
  406. " return [c * x - s * y, s * x + c * y, r];\n",
  407. " }\n",
  408. "\n",
  409. " function make_seven (radius) {\n",
  410. " var s0 = [0, 0, radius];\n",
  411. " var s1 = [0, radius, radius];\n",
  412. " var s2 = rot(s1, 60);\n",
  413. " var s3 = rot(s2, 60);\n",
  414. " var s4 = rot(s3, 60);\n",
  415. " var s5 = rot(s4, 60);\n",
  416. " var s6 = rot(s5, 60);\n",
  417. " return [s0, s1, s2, s3, s4, s5, s6];\n",
  418. " }\n",
  419. "\n",
  420. " function setup(width, height) {\n",
  421. " g03 = document.querySelector('#c03').getContext('2d');\n",
  422. " g03.canvas.width = width;\n",
  423. " g03.canvas.height = height;\n",
  424. " g03.fillStyle = \"rgb(56, 56, 56)\";\n",
  425. " g03.fillRect(0, 0, width, height);\n",
  426. " }\n",
  427. " function drawCircle(ctx, x, y, r) {\n",
  428. " ctx.save();\n",
  429. " ctx.beginPath();\n",
  430. " ctx.arc(x, y, r, 0, 2*Math.PI);\n",
  431. " ctx.strokeStyle = \"rgb(255, 255, 255)\";\n",
  432. " ctx.stroke();\n",
  433. " ctx.restore();\n",
  434. " }\n",
  435. " \n",
  436. " setup(300, 300);\n",
  437. " var s = [g03.canvas.width/2, g03.canvas.height/2];\n",
  438. " \n",
  439. " // 반지름 r 이 주어진다.\n",
  440. " var sr = 20;\n",
  441. " \n",
  442. " // 7개의 중심좌표를 계산하고 각 좌표마다 원을 그린다.\n",
  443. " g03.save();\n",
  444. " g03.translate(s[0], s[1] + 0*sr);\n",
  445. " make_seven(sr).forEach(function(element, index, array) {\n",
  446. " drawCircle(g03, element[0], element[1], element[2]);\n",
  447. " })\n",
  448. " g03.restore();\n",
  449. " \n",
  450. " g03.save();\n",
  451. " g03.translate(s[0], s[1] - 4*sr);\n",
  452. " make_seven(sr).forEach(function(element, index, array) {\n",
  453. " drawCircle(g03, element[0], element[1], element[2]);\n",
  454. " })\n",
  455. " g03.restore();\n",
  456. "</script>"
  457. ]
  458. },
  459. {
  460. "cell_type": "markdown",
  461. "metadata": {
  462. "collapsed": true
  463. },
  464. "source": [
  465. "아 안되네. \n",
  466. "재귀호출의 형태가 잡히지 않는다. \n",
  467. "현재 순서는 다음과 같다. \n",
  468. "* canvas 의 중심으로 translate.\n",
  469. "* 7개의 좌표를 구한다.\n",
  470. "* 반지름 r 인 7개의 원을 그린다.\n",
  471. "\n",
  472. "이러면 안되겠다. \n",
  473. "* 중심으로 이동\n",
  474. "* 반지름 r 인 원을 그리지\n",
  475. "\n",
  476. "여기서 부터 반복이 필요한가? \n",
  477. "* 현재 중심에서 위로 d 만큼 이동(현재 중심의 y 좌표에 -d 만큼 더해야 한다.)\n",
  478. "* 이동한 중심에서 반지름 r 인 원을 그리지\n",
  479. "* 다시 원래 중심으로 좌표계 이동\n",
  480. "* 좌표계를 오른쪽으로 60만큼 회전\n",
  481. "\n",
  482. "근데 위의 방법은 가장 마지막에 해보고 싶다. \n",
  483. "현재 내가 하고 싶은 방법은 뭐지.. \n",
  484. "솔직히 이동도 필요없다. \n",
  485. "모두 좌표로 계산하면 될 듯한데. "
  486. ]
  487. },
  488. {
  489. "cell_type": "markdown",
  490. "metadata": {
  491. "collapsed": true
  492. },
  493. "source": [
  494. "## L-system rule 로 표현 할 수 있을까?\n",
  495. "* l-system 에서는 하나의 무언가를 같거나, 다른 무언가로 대체한다. 세대(genenration)별로. 루프를 돈다.\n",
  496. "* 원을 반복적으로 그리는 것도 그런 것으로 바꿀 수 있을까?\n",
  497. "* 약간 다른 느낌이 든다.\n",
  498. "* l-system 은 이렇게 하면 어떤 것이 나오나 보자 이고. 내가 하는 것은 이렇게 하면 이런 것이 나오는 건 아는데 어떻게 재귀적으로 할까 라는 측면이고.\n",
  499. "* 거꾸로 rule 을 만드려니 어거지로 끼워맞추고 있다는 생각도 들고.\n",
  500. "* 핵심은 parent, child, parent ... 로 이어지는 루프다. \n",
  501. "\n",
  502. "* A: 현재 좌표에서 반지름r 인 원을 그린다.\n",
  503. "* B: Y축으로 d 만큼 이동한다.(d 는 + 일수도 - 일수도)\n",
  504. "* C: Y축으로 -d 만큼 이동한다.\n",
  505. "* +: 현재 좌표에서 60도만큼 왼쪽으로 회전한다.\n",
  506. "\n",
  507. "\n",
  508. "* A\n",
  509. "* B A C + B A C + B A C + B A C + B A C + B A C +\n",
  510. "\n",
  511. "* B B\n",
  512. "* B A C + B A C + B A C + B A C + B A C + B A C +\n",
  513. "* C C\n",
  514. "* +\n",
  515. "* B B\n",
  516. "* B A C + B A C + B A C + B A C + B A C + B A C +\n",
  517. "* C C\n",
  518. "* +\n",
  519. "* B B\n",
  520. "* B A C + B A C + B A C + B A C + B A C + B A C +\n",
  521. "* C C\n",
  522. "* +\n",
  523. "* B B\n",
  524. "* B A C + B A C + B A C + B A C + B A C + B A C +\n",
  525. "* C C\n",
  526. "* +\n",
  527. "* B B\n",
  528. "* B A C + B A C + B A C + B A C + B A C + B A C +\n",
  529. "* C C\n",
  530. "* +\n",
  531. "* B B\n",
  532. "* B A C + B A C + B A C + B A C + B A C + B A C +\n",
  533. "* C C\n",
  534. "* +\n",
  535. "\n",
  536. "뭔가 이상하다. 멈추고. 생각해보자. \n",
  537. "l-system 에서는 문자를 대체하는 룰뿐이다. \n",
  538. "다른 것으로 대체하지 않고 +, - 처럼 자기 자신을 그대로 다음 세대에 전달할 수도 있다. \n",
  539. "A 라는 것이 명확하지 않다. \n",
  540. "아니다 명확하다. 나중에 drawCircle 이라는 rule 로 대체할 수 있다. \n",
  541. "그렇다면 오히려 B가 불명확한건가. \n",
  542. "B 는 moveByMinusYOffset 이라고 할까 "
  543. ]
  544. },
  545. {
  546. "cell_type": "markdown",
  547. "metadata": {},
  548. "source": [
  549. "## 0406\n",
  550. "마침내 찾았다 패턴을!\n",
  551. "\n",
  552. "`A` 의 다음 세대는 확실히 `BAC+BAC+BAC+BAC+BAC+BAC+` 이다. \n",
  553. "그런데 이것을 한 줄로 표시하면 다음 패턴을 발견하기 어렵다. \n",
  554. "이것을 다음과 같이 여러 줄로 나눠서 표시했더니 패턴을 발견할 수 있었다.\n",
  555. "```\n",
  556. "`B`\n",
  557. "`A`\n",
  558. "`C`\n",
  559. "`+`\n",
  560. "`B`\n",
  561. "`A`\n",
  562. "`C`\n",
  563. "`+`\n",
  564. "`B`\n",
  565. "`A`\n",
  566. "`C`\n",
  567. "```\n",
  568. "\n",
  569. "이런 식으로 `BAC+`가 6번 나오는 패턴이다. \n",
  570. "즉 다음과 같은 l-system rule 을 만들 수 있다.\n",
  571. "```\n",
  572. "`A`: `BAC+BAC+BAC+BAC+BAC+BAC+`\n",
  573. "`B`: `BB`\n",
  574. "`+`: `+`\n",
  575. "`C`: `CC`\n",
  576. "```\n",
  577. "\n",
  578. "그리고 drawing rule 은 다음과 같이 정의할 수 있다.\n",
  579. "```\n",
  580. "`A`: 중심은 현재 좌표이고 반지름 r 인 원을 그린다.\n",
  581. "`B`: Y축으로 d 만큼 이동한다.(d 는 + 일수도 - 일수도)\n",
  582. "`C`: Y축으로 -d 만큼 이동한다.\n",
  583. "`+`: 현재 좌표에서 60도만큼 왼쪽으로 회전한다.\n",
  584. "```"
  585. ]
  586. },
  587. {
  588. "cell_type": "markdown",
  589. "metadata": {
  590. "collapsed": true
  591. },
  592. "source": [
  593. "## 구현\n",
  594. "\n",
  595. "일단 Brackets 를 이용해서 작성했던 lsystem 코딩을 가져오자.\n",
  596. "우선 lsystemrule object 부터."
  597. ]
  598. },
  599. {
  600. "cell_type": "code",
  601. "execution_count": 19,
  602. "metadata": {
  603. "collapsed": false
  604. },
  605. "outputs": [
  606. {
  607. "data": {
  608. "text/html": [
  609. "<div id=\"t04\"></div>\n",
  610. "<canvas id=\"c04\">\n",
  611. "<script>\n",
  612. " var t04;\n",
  613. " var g04;\n",
  614. " var lsystemRule = {\n",
  615. " 'A': 'ABAC+BAC+BAC+BAC+BAC+BAC+',\n",
  616. " 'B': 'BB',\n",
  617. " 'C': 'CC',\n",
  618. " '+': '+'\n",
  619. " };\n",
  620. " var drawRule = {\n",
  621. " 'A': function() {\n",
  622. " drawCircle();\n",
  623. " },\n",
  624. " 'B': function() {\n",
  625. " moveUpByd();\n",
  626. " },\n",
  627. " 'C': function() {\n",
  628. " moveDownByd();\n",
  629. " },\n",
  630. " '+': function() {\n",
  631. " rotateUpLeftBydeg();\n",
  632. " }\n",
  633. " };\n",
  634. " var p = [0, 0];\n",
  635. " var r = 20;\n",
  636. " var d = -20;\n",
  637. " var deg = 60;\n",
  638. " var up = [0, 1];\n",
  639. " var lsystemIteration = 3;\n",
  640. " function lsystem(parent) {\n",
  641. " for (var i = 0; i < lsystemIteration; i++) {\n",
  642. " var child = '';\n",
  643. " for (var j = 0; j < parent.length; j++) {\n",
  644. " child += lsystemRule[parent[j]];\n",
  645. " }\n",
  646. " parent = child;\n",
  647. " }\n",
  648. " t04.textContent += parent;\n",
  649. " return parent;\n",
  650. " }\n",
  651. " function moveUpByd() {\n",
  652. " p[0] = p[0] + d * up[0];\n",
  653. " p[1] = p[1] + d * up[1];\n",
  654. " /*\n",
  655. " t04.textContent += '\\n';\n",
  656. " t04.textContent += p[0];\n",
  657. " t04.textContent += '\\n';\n",
  658. " t04.textContent += p[1];\n",
  659. " t04.textContent += '\\n';\n",
  660. " */\n",
  661. " }\n",
  662. " function moveDownByd() {\n",
  663. " p[0] = p[0] + d * -up[0];\n",
  664. " p[1] = p[1] + d * -up[1];\n",
  665. " /*\n",
  666. " t04.textContent += '\\n';\n",
  667. " t04.textContent += p[0];\n",
  668. " t04.textContent += '\\n';\n",
  669. " t04.textContent += p[1];\n",
  670. " t04.textContent += '\\n';\n",
  671. " */\n",
  672. " }\n",
  673. " function rotateUpLeftBydeg() {\n",
  674. " var rad = deg*Math.PI/180;\n",
  675. " var cos = Math.cos(rad);\n",
  676. " var sin = Math.sin(rad);\n",
  677. " var u = [];\n",
  678. " u[0] = up[0];\n",
  679. " u[1] = up[1];\n",
  680. " up[0] = cos*u[0] - sin*u[1];\n",
  681. " up[1] = sin*u[0] + cos*u[1];\n",
  682. " /*\n",
  683. " t04.textContent += '\\n';\n",
  684. " t04.textContent += u[0];\n",
  685. " t04.textContent += '\\n';\n",
  686. " t04.textContent += u[1];\n",
  687. " t04.textContent += '\\n';\n",
  688. " t04.textContent += up[0];\n",
  689. " t04.textContent += '\\n';\n",
  690. " t04.textContent += up[1];\n",
  691. " t04.textContent += '\\n';\n",
  692. " */\n",
  693. " }\n",
  694. " function drawCircle() {\n",
  695. " g04.save();\n",
  696. " g04.beginPath();\n",
  697. " g04.arc(p[0], p[1], r, 0, 2*Math.PI);\n",
  698. " g04.strokeStyle = \"rgb(255, 255, 255)\";\n",
  699. " g04.stroke();\n",
  700. " g04.restore();\n",
  701. " }\n",
  702. " function draw(lsystemResult) {\n",
  703. " for (var i = 0; i < lsystemResult.length; i++) {\n",
  704. " drawRule[lsystemResult[i]]();\n",
  705. " }\n",
  706. " }\n",
  707. " function setup(width, height) {\n",
  708. " t04 = document.getElementById(\"t04\");\n",
  709. " g04 = document.querySelector('#c04').getContext('2d');\n",
  710. " g04.canvas.width = width;\n",
  711. " g04.canvas.height = height;\n",
  712. " g04.fillStyle = \"rgb(56, 56, 56)\";\n",
  713. " g04.fillRect(0, 0, width, height);\n",
  714. " p[0] = width/2;\n",
  715. " p[1] = height/2;\n",
  716. " }\n",
  717. " setup(400, 400);\n",
  718. " draw(lsystem('A'));\n",
  719. "</script>"
  720. ],
  721. "text/plain": [
  722. "<IPython.core.display.HTML object>"
  723. ]
  724. },
  725. "metadata": {},
  726. "output_type": "display_data"
  727. }
  728. ],
  729. "source": [
  730. "%%html\n",
  731. "<div id=\"t04\"></div>\n",
  732. "<canvas id=\"c04\">\n",
  733. "<script>\n",
  734. " var t04;\n",
  735. " var g04;\n",
  736. " var lsystemRule = {\n",
  737. " 'A': 'ABAC+BAC+BAC+BAC+BAC+BAC+',\n",
  738. " 'B': 'BB',\n",
  739. " 'C': 'CC',\n",
  740. " '+': '+'\n",
  741. " };\n",
  742. " var drawRule = {\n",
  743. " 'A': function() {\n",
  744. " drawCircle();\n",
  745. " },\n",
  746. " 'B': function() {\n",
  747. " moveUpByd();\n",
  748. " },\n",
  749. " 'C': function() {\n",
  750. " moveDownByd();\n",
  751. " },\n",
  752. " '+': function() {\n",
  753. " rotateUpLeftBydeg();\n",
  754. " }\n",
  755. " };\n",
  756. " var p = [0, 0];\n",
  757. " var r = 20;\n",
  758. " var d = -20;\n",
  759. " var deg = 60;\n",
  760. " var up = [0, 1];\n",
  761. " var lsystemIteration = 3;\n",
  762. " function lsystem(parent) {\n",
  763. " for (var i = 0; i < lsystemIteration; i++) {\n",
  764. " var child = '';\n",
  765. " for (var j = 0; j < parent.length; j++) {\n",
  766. " child += lsystemRule[parent[j]];\n",
  767. " }\n",
  768. " parent = child;\n",
  769. " }\n",
  770. " t04.textContent += parent;\n",
  771. " return parent;\n",
  772. " }\n",
  773. " function moveUpByd() {\n",
  774. " p[0] = p[0] + d * up[0];\n",
  775. " p[1] = p[1] + d * up[1];\n",
  776. " /*\n",
  777. " t04.textContent += '\\n';\n",
  778. " t04.textContent += p[0];\n",
  779. " t04.textContent += '\\n';\n",
  780. " t04.textContent += p[1];\n",
  781. " t04.textContent += '\\n';\n",
  782. " */\n",
  783. " }\n",
  784. " function moveDownByd() {\n",
  785. " p[0] = p[0] + d * -up[0];\n",
  786. " p[1] = p[1] + d * -up[1];\n",
  787. " /*\n",
  788. " t04.textContent += '\\n';\n",
  789. " t04.textContent += p[0];\n",
  790. " t04.textContent += '\\n';\n",
  791. " t04.textContent += p[1];\n",
  792. " t04.textContent += '\\n';\n",
  793. " */\n",
  794. " }\n",
  795. " function rotateUpLeftBydeg() {\n",
  796. " var rad = deg*Math.PI/180;\n",
  797. " var cos = Math.cos(rad);\n",
  798. " var sin = Math.sin(rad);\n",
  799. " var u = [];\n",
  800. " u[0] = up[0];\n",
  801. " u[1] = up[1];\n",
  802. " up[0] = cos*u[0] - sin*u[1];\n",
  803. " up[1] = sin*u[0] + cos*u[1];\n",
  804. " /*\n",
  805. " t04.textContent += '\\n';\n",
  806. " t04.textContent += u[0];\n",
  807. " t04.textContent += '\\n';\n",
  808. " t04.textContent += u[1];\n",
  809. " t04.textContent += '\\n';\n",
  810. " t04.textContent += up[0];\n",
  811. " t04.textContent += '\\n';\n",
  812. " t04.textContent += up[1];\n",
  813. " t04.textContent += '\\n';\n",
  814. " */\n",
  815. " }\n",
  816. " function drawCircle() {\n",
  817. " g04.save();\n",
  818. " g04.beginPath();\n",
  819. " g04.arc(p[0], p[1], r, 0, 2*Math.PI);\n",
  820. " g04.strokeStyle = \"rgb(255, 255, 255)\";\n",
  821. " g04.stroke();\n",
  822. " g04.restore();\n",
  823. " }\n",
  824. " function draw(lsystemResult) {\n",
  825. " for (var i = 0; i < lsystemResult.length; i++) {\n",
  826. " drawRule[lsystemResult[i]]();\n",
  827. " }\n",
  828. " }\n",
  829. " function setup(width, height) {\n",
  830. " t04 = document.getElementById(\"t04\");\n",
  831. " g04 = document.querySelector('#c04').getContext('2d');\n",
  832. " g04.canvas.width = width;\n",
  833. " g04.canvas.height = height;\n",
  834. " g04.fillStyle = \"rgb(56, 56, 56)\";\n",
  835. " g04.fillRect(0, 0, width, height);\n",
  836. " p[0] = width/2;\n",
  837. " p[1] = height/2;\n",
  838. " }\n",
  839. " setup(400, 400);\n",
  840. " draw(lsystem('A'));\n",
  841. "</script>"
  842. ]
  843. },
  844. {
  845. "cell_type": "markdown",
  846. "metadata": {
  847. "collapsed": true
  848. },
  849. "source": [
  850. "내가 원하는 결과가 아니다. ㅠㅠ \n",
  851. "\n",
  852. "아니다. 문제가 있는 듯 했지만 `BB`를 `BBBB`등으로 바꿔봤더니, 가운데 원 하나가 그려지지 않고 있다는 것을 알게 되었다. \n",
  853. "\n",
  854. "이를 해결하기 위해서는 `A` 에 대한 lsystem rule 을 `ABAC+BAC+BAC+BAC+BAC+BAC+`으로 바꿔야 한다는 것을 알게 되었다.\n",
  855. "\n",
  856. "더불어 tmpparent 넣었던 것을 다시 제거하고 원래대로 `parent = child;`의 형태로 수정."
  857. ]
  858. },
  859. {
  860. "cell_type": "markdown",
  861. "metadata": {
  862. "collapsed": true
  863. },
  864. "source": [
  865. "# 이제 애니메이션으로!\n",
  866. "\n",
  867. "아래 코드를 작성하다보니, `<script>`태그 안에 있는 내용은 이 노트북의 위 셀들에 있는 `<script>`태그와 겹친다는 생각을 하게 되었다. 순서상 더 아래 나온 녀석이 위에 있는 녀석을 대치(Replace)할 것으로 추정은 되지만, 신경쓰인다. 유니티 C#스크립트처럼 하나의 클래스안에 머물도록 하려면, 하나의 함수안에 모두 넣어야 할 것 같다. 내가 하나의 함수 안에 넣는 것을 하지 못하는 이유는, 자주 안 해 봤기에 어떻게 하는 지 잘 모른다는 생각을 갖고 있기 때문이다. 음... 그냥 무턱대고 해볼까.\n",
  868. "\n",
  869. "`drawCircleAni`라는 함수로 만들어 기존 코드를 감싸보았다. 쩝. -> 느려진다! 왜 그럴까?"
  870. ]
  871. },
  872. {
  873. "cell_type": "code",
  874. "execution_count": 20,
  875. "metadata": {
  876. "collapsed": false
  877. },
  878. "outputs": [
  879. {
  880. "data": {
  881. "text/html": [
  882. "<div id=\"t05\"></div>\n",
  883. "<canvas id=\"c05\"></canvas>\n",
  884. "<script>\n",
  885. "function drawCircleAni() {\n",
  886. " var t05;\n",
  887. " var g05;\n",
  888. " var frameCnt = 0;\n",
  889. " var time = 0;\n",
  890. " var p = [];\n",
  891. " var r = 20;\n",
  892. " var sr = 0;\n",
  893. " var er = 2*Math.PI;\n",
  894. " var d = -20;\n",
  895. " var deg = 60;\n",
  896. " var up = [0, 1];\n",
  897. " var lsystemResult = '';\n",
  898. " var cnt = 0;\n",
  899. " var rule;\n",
  900. " var lsystemRule = {\n",
  901. " 'A': 'ABAC+BAC+BAC+BAC+BAC+BAC+',\n",
  902. " 'B': 'BBBB',\n",
  903. " 'C': 'CCCC',\n",
  904. " '+': '+'\n",
  905. " };\n",
  906. " var drawingRule = {\n",
  907. " 'A': function() {\n",
  908. " drawCircle();\n",
  909. " },\n",
  910. " 'B': function() {\n",
  911. " moveUpByd();\n",
  912. " },\n",
  913. " 'C': function() {\n",
  914. " moveDownByd();\n",
  915. " },\n",
  916. " '+': function() {\n",
  917. " rotateUpLeftByDeg();\n",
  918. " }\n",
  919. " };\n",
  920. " function lsystem(parent, N) {\n",
  921. " var child = '';\n",
  922. " for(var i = 0; i < N; i++) {\n",
  923. " child = '';\n",
  924. " for(var j = 0; j < parent.length; j++) {\n",
  925. " child += lsystemRule[parent[j]];\n",
  926. " }\n",
  927. " parent = child;\n",
  928. " }\n",
  929. " return parent;\n",
  930. " }\n",
  931. " function moveUpByd() {\n",
  932. " p[0] = p[0] + d * up[0];\n",
  933. " p[1] = p[1] + d * up[1];\n",
  934. " }\n",
  935. " function moveDownByd() {\n",
  936. " p[0] = p[0] + d * -up[0];\n",
  937. " p[1] = p[1] + d * -up[1];\n",
  938. " }\n",
  939. " function rotateUpLeftByDeg() {\n",
  940. " var rad = deg * Math.PI/180;\n",
  941. " var cos = Math.cos(rad);\n",
  942. " var sin = Math.sin(rad);\n",
  943. " var u = [];\n",
  944. " u[0] = up[0];\n",
  945. " u[1] = up[1];\n",
  946. " up[0] = cos * u[0] - sin * u[1];\n",
  947. " up[1] = sin * u[0] + cos * u[1];\n",
  948. " }\n",
  949. " function drawCircle() {\n",
  950. " g05.save();\n",
  951. " g05.beginPath();\n",
  952. " g05.arc(p[0], p[1], r, sr, er/*2*Math.PI*/);\n",
  953. " g05.strokeStyle = 'rgb(255, 255, 255)';\n",
  954. " g05.stroke();\n",
  955. " g05.restore();\n",
  956. " }\n",
  957. " function drawlsystemResult() {\n",
  958. " for(var i = 0; i < lsystemResult.length; i++) {\n",
  959. " drawingRule[lsystemResult[i]]();\n",
  960. " }\n",
  961. " }\n",
  962. " function setup(width, height) {\n",
  963. " t05 = document.getElementById('t05');\n",
  964. " g05 = document.getElementById('c05').getContext('2d');\n",
  965. " g05.canvas.width = width;\n",
  966. " g05.canvas.height = height;\n",
  967. " g05.fillStyle = 'rgb(56, 56, 56)';\n",
  968. " g05.fillRect(0, 0, width, height);\n",
  969. " p[0] = width/2;\n",
  970. " p[1] = height/2;\n",
  971. " }\n",
  972. " function update() {\n",
  973. " frameCnt++;\n",
  974. " time = frameCnt/480;\n",
  975. " r = 20*(Math.sin(time) + 1)/2;\n",
  976. " er += 0.01;\n",
  977. " //rule = lsystemResult[cnt];\n",
  978. " //cnt = (cnt > lsystemResult.length) ? 0 : cnt+1;\n",
  979. " d = -20*(Math.cos(time) + 1)/2;\n",
  980. " //deg = 60*(Math.cos(time) + 1)/2;\n",
  981. " }\n",
  982. " function draw() {\n",
  983. " g05.fillRect(0, 0, g05.canvas.width, g05.canvas.height);\n",
  984. " //drawCircle();\n",
  985. " //drawingRule[rule]();\n",
  986. " //draw(lsystemResult);\n",
  987. " drawlsystemResult();\n",
  988. " }\n",
  989. " function loop() {\n",
  990. " update();\n",
  991. " draw();\n",
  992. " requestAnimationFrame(loop);\n",
  993. " }\n",
  994. " setup(400, 400);\n",
  995. " //t05.textContent = lsystem('A', 2);\n",
  996. " lsystemResult = lsystem('A', 2);\n",
  997. " //drawingRule['A']();\n",
  998. " loop();\n",
  999. "}\n",
  1000. "drawCircleAni();\n",
  1001. "</script>"
  1002. ],
  1003. "text/plain": [
  1004. "<IPython.core.display.HTML object>"
  1005. ]
  1006. },
  1007. "metadata": {},
  1008. "output_type": "display_data"
  1009. }
  1010. ],
  1011. "source": [
  1012. "%%html\n",
  1013. "<div id=\"t05\"></div>\n",
  1014. "<canvas id=\"c05\"></canvas>\n",
  1015. "<script>\n",
  1016. "function drawCircleAni() {\n",
  1017. " var t05;\n",
  1018. " var g05;\n",
  1019. " var frameCnt = 0;\n",
  1020. " var time = 0;\n",
  1021. " var p = [];\n",
  1022. " var r = 20;\n",
  1023. " var sr = 0;\n",
  1024. " var er = 2*Math.PI;\n",
  1025. " var d = -20;\n",
  1026. " var deg = 60;\n",
  1027. " var up = [0, 1];\n",
  1028. " var lsystemResult = '';\n",
  1029. " var cnt = 0;\n",
  1030. " var rule;\n",
  1031. " var lsystemRule = {\n",
  1032. " 'A': 'ABAC+BAC+BAC+BAC+BAC+BAC+',\n",
  1033. " 'B': 'BBBB',\n",
  1034. " 'C': 'CCCC',\n",
  1035. " '+': '+'\n",
  1036. " };\n",
  1037. " var drawingRule = {\n",
  1038. " 'A': function() {\n",
  1039. " drawCircle();\n",
  1040. " },\n",
  1041. " 'B': function() {\n",
  1042. " moveUpByd();\n",
  1043. " },\n",
  1044. " 'C': function() {\n",
  1045. " moveDownByd();\n",
  1046. " },\n",
  1047. " '+': function() {\n",
  1048. " rotateUpLeftByDeg();\n",
  1049. " }\n",
  1050. " };\n",
  1051. " function lsystem(parent, N) {\n",
  1052. " var child = '';\n",
  1053. " for(var i = 0; i < N; i++) {\n",
  1054. " child = '';\n",
  1055. " for(var j = 0; j < parent.length; j++) {\n",
  1056. " child += lsystemRule[parent[j]];\n",
  1057. " }\n",
  1058. " parent = child;\n",
  1059. " }\n",
  1060. " return parent;\n",
  1061. " }\n",
  1062. " function moveUpByd() {\n",
  1063. " p[0] = p[0] + d * up[0];\n",
  1064. " p[1] = p[1] + d * up[1];\n",
  1065. " }\n",
  1066. " function moveDownByd() {\n",
  1067. " p[0] = p[0] + d * -up[0];\n",
  1068. " p[1] = p[1] + d * -up[1];\n",
  1069. " }\n",
  1070. " function rotateUpLeftByDeg() {\n",
  1071. " var rad = deg * Math.PI/180;\n",
  1072. " var cos = Math.cos(rad);\n",
  1073. " var sin = Math.sin(rad);\n",
  1074. " var u = [];\n",
  1075. " u[0] = up[0];\n",
  1076. " u[1] = up[1];\n",
  1077. " up[0] = cos * u[0] - sin * u[1];\n",
  1078. " up[1] = sin * u[0] + cos * u[1];\n",
  1079. " }\n",
  1080. " function drawCircle() {\n",
  1081. " g05.save();\n",
  1082. " g05.beginPath();\n",
  1083. " g05.arc(p[0], p[1], r, sr, er/*2*Math.PI*/);\n",
  1084. " g05.strokeStyle = 'rgb(255, 255, 255)';\n",
  1085. " g05.stroke();\n",
  1086. " g05.restore();\n",
  1087. " }\n",
  1088. " function drawlsystemResult() {\n",
  1089. " for(var i = 0; i < lsystemResult.length; i++) {\n",
  1090. " drawingRule[lsystemResult[i]]();\n",
  1091. " }\n",
  1092. " }\n",
  1093. " function setup(width, height) {\n",
  1094. " t05 = document.getElementById('t05');\n",
  1095. " g05 = document.getElementById('c05').getContext('2d');\n",
  1096. " g05.canvas.width = width;\n",
  1097. " g05.canvas.height = height;\n",
  1098. " g05.fillStyle = 'rgb(56, 56, 56)';\n",
  1099. " g05.fillRect(0, 0, width, height);\n",
  1100. " p[0] = width/2;\n",
  1101. " p[1] = height/2;\n",
  1102. " }\n",
  1103. " function update() {\n",
  1104. " frameCnt++;\n",
  1105. " time = frameCnt/480;\n",
  1106. " r = 20*(Math.sin(time) + 1)/2;\n",
  1107. " er += 0.01;\n",
  1108. " //rule = lsystemResult[cnt];\n",
  1109. " //cnt = (cnt > lsystemResult.length) ? 0 : cnt+1;\n",
  1110. " d = -20*(Math.cos(time) + 1)/2;\n",
  1111. " //deg = 60*(Math.cos(time) + 1)/2;\n",
  1112. " }\n",
  1113. " function draw() {\n",
  1114. " g05.fillRect(0, 0, g05.canvas.width, g05.canvas.height);\n",
  1115. " //drawCircle();\n",
  1116. " //drawingRule[rule]();\n",
  1117. " //draw(lsystemResult);\n",
  1118. " drawlsystemResult();\n",
  1119. " }\n",
  1120. " function loop() {\n",
  1121. " update();\n",
  1122. " draw();\n",
  1123. " requestAnimationFrame(loop);\n",
  1124. " }\n",
  1125. " setup(400, 400);\n",
  1126. " //t05.textContent = lsystem('A', 2);\n",
  1127. " lsystemResult = lsystem('A', 2);\n",
  1128. " //drawingRule['A']();\n",
  1129. " loop();\n",
  1130. "}\n",
  1131. "drawCircleAni();\n",
  1132. "</script>"
  1133. ]
  1134. },
  1135. {
  1136. "cell_type": "markdown",
  1137. "metadata": {},
  1138. "source": [
  1139. "drawRule['A']()를 그릴 때, 점진적으로 원이 그려지려면, start angle 은 0 으로 두고, end angle 을 0.005 정도씩 증가시켜야 한다. 이 증가시키는 작업은 매 프레임마다 해야 하는데, 이는 reqeuestAnimationFrame()을 통해 구현 가능하다.\n",
  1140. "\n",
  1141. "문제는 원 하나가 다 그려지면 그 원은 더 이상 start angle 이나 end angle 값을 바꾸지 않고 그대로 두고, 다음 원을 start angle 은 0 으로 두고, end angle 을 0.005 씩 증가시키고 싶은 것인데.\n",
  1142. "\n",
  1143. "이런 작업은 반복되는 것이므로 drawCircle 안에서 처리하면 좋은데, 그러러면... \n",
  1144. "어떤 조건이 만족되면 다음 rule 로 바뀌도록 하면 될 듯. "
  1145. ]
  1146. },
  1147. {
  1148. "cell_type": "code",
  1149. "execution_count": 8,
  1150. "metadata": {
  1151. "collapsed": false
  1152. },
  1153. "outputs": [
  1154. {
  1155. "data": {
  1156. "text/html": [
  1157. "<div id=\"t06\"></div>\n",
  1158. "<canvas id=\"c06\"></canvas>\n",
  1159. "<script>\n",
  1160. " var t06;\n",
  1161. " var g06;\n",
  1162. " var frameCnt = 0;\n",
  1163. " var time = 0;\n",
  1164. " var p = [];\n",
  1165. " var r = 10;\n",
  1166. " var sr = 0;\n",
  1167. " var er = 0;\n",
  1168. " var d = -10;\n",
  1169. " var deg = 60;\n",
  1170. " var up = [0, 1];\n",
  1171. " var lsystemResult = '';\n",
  1172. " var cnt = 0;\n",
  1173. " var rule;\n",
  1174. " var ret = false;\n",
  1175. " var lsystemRule = {\n",
  1176. " 'A': 'ABAC+BAC+BAC+BAC+BAC+BAC+',\n",
  1177. " 'B': 'BBB',\n",
  1178. " 'C': 'CCC',\n",
  1179. " '+': '+'\n",
  1180. " };\n",
  1181. " var drawingRule = {\n",
  1182. " 'A': function() {\n",
  1183. " return drawCircle();\n",
  1184. " },\n",
  1185. " 'B': function() {\n",
  1186. " moveUpByd();\n",
  1187. " return true;\n",
  1188. " },\n",
  1189. " 'C': function() {\n",
  1190. " moveDownByd();\n",
  1191. " return true\n",
  1192. " },\n",
  1193. " '+': function() {\n",
  1194. " rotateUpLeftByDeg();\n",
  1195. " return true;\n",
  1196. " }\n",
  1197. " };\n",
  1198. " function lsystem(parent, N) {\n",
  1199. " var child = '';\n",
  1200. " for(var i = 0; i < N; i++) {\n",
  1201. " child = '';\n",
  1202. " for(var j = 0; j < parent.length; j++) {\n",
  1203. " child += lsystemRule[parent[j]];\n",
  1204. " }\n",
  1205. " parent = child;\n",
  1206. " }\n",
  1207. " return parent;\n",
  1208. " }\n",
  1209. " function moveUpByd() {\n",
  1210. " p[0] = p[0] + d * up[0];\n",
  1211. " p[1] = p[1] + d * up[1];\n",
  1212. " }\n",
  1213. " function moveDownByd() {\n",
  1214. " p[0] = p[0] + d * -up[0];\n",
  1215. " p[1] = p[1] + d * -up[1];\n",
  1216. " }\n",
  1217. " function rotateUpLeftByDeg() {\n",
  1218. " var rad = deg * Math.PI/180;\n",
  1219. " var cos = Math.cos(rad);\n",
  1220. " var sin = Math.sin(rad);\n",
  1221. " var u = [];\n",
  1222. " u[0] = up[0];\n",
  1223. " u[1] = up[1];\n",
  1224. " up[0] = cos * u[0] - sin * u[1];\n",
  1225. " up[1] = sin * u[0] + cos * u[1];\n",
  1226. " }\n",
  1227. " function drawCircle() {\n",
  1228. " //g06.save();\n",
  1229. " g06.beginPath();\n",
  1230. " er += 0.1;// * (Math.sin(time) + 1)/2;\n",
  1231. " g06.arc(p[0], p[1], r, sr, er);\n",
  1232. " sr += 0.1;// * (Math.sin(time) + 1)/2;\n",
  1233. " g06.lineWidth = 0.5 * (Math.sin(20*time) + 1)/2;\n",
  1234. " g06.strokeStyle = 'rgb(255, 255, 255)';\n",
  1235. " g06.stroke();\n",
  1236. " //g06.restore();\n",
  1237. " if(er > 2 * Math.PI) {\n",
  1238. " sr = 0;\n",
  1239. " er = 0;\n",
  1240. " return true;\n",
  1241. " }\n",
  1242. " else\n",
  1243. " return false;\n",
  1244. " }\n",
  1245. " function drawlsystemResult() {\n",
  1246. " for(var i = 0; i < lsystemResult.length; i++) {\n",
  1247. " drawingRule[lsystemResult[i]]();\n",
  1248. " }\n",
  1249. " }\n",
  1250. " function setup(width, height) {\n",
  1251. " t06 = document.getElementById('t06');\n",
  1252. " g06 = document.getElementById('c06').getContext('2d');\n",
  1253. " g06.canvas.width = width;\n",
  1254. " g06.canvas.height = height;\n",
  1255. " g06.fillStyle = 'rgb(56, 56, 56)';\n",
  1256. " g06.fillRect(0, 0, width, height);\n",
  1257. " p[0] = width/2;\n",
  1258. " p[1] = height/2;\n",
  1259. " }\n",
  1260. " function update() {\n",
  1261. " frameCnt++;\n",
  1262. " time = frameCnt/60;\n",
  1263. " //r = 15*(Math.sin(time) + 1)/2;\n",
  1264. " //d = -10*(Math.cos(time) + 1)/2;\n",
  1265. " }\n",
  1266. " function draw() {\n",
  1267. " //g06.fillRect(0, 0, g06.canvas.width, g06.canvas.height);\n",
  1268. " if(drawingRule[rule]() === true) {\n",
  1269. " cnt += 1;\n",
  1270. " rule = lsystemResult[cnt];\n",
  1271. " }\n",
  1272. " if(cnt >= lsystemResult.length) {\n",
  1273. " cnt = 0;\n",
  1274. " rule = lsystemResult[cnt];\n",
  1275. " g06.fillRect(0, 0, g06.canvas.width, g06.canvas.height);\n",
  1276. " }\n",
  1277. " }\n",
  1278. " function loop() {\n",
  1279. " update();\n",
  1280. " draw();\n",
  1281. " requestAnimationFrame(loop);\n",
  1282. " }\n",
  1283. " setup(400, 400);\n",
  1284. " //t06.textContent = lsystem('A', 2);\n",
  1285. " lsystemResult = lsystem('A', 3);\n",
  1286. " rule = lsystemResult[cnt];\n",
  1287. " loop();\n",
  1288. "</script>"
  1289. ],
  1290. "text/plain": [
  1291. "<IPython.core.display.HTML object>"
  1292. ]
  1293. },
  1294. "metadata": {},
  1295. "output_type": "display_data"
  1296. }
  1297. ],
  1298. "source": [
  1299. "%%html\n",
  1300. "<div id=\"t06\"></div>\n",
  1301. "<canvas id=\"c06\"></canvas>\n",
  1302. "<script>\n",
  1303. " var t06;\n",
  1304. " var g06;\n",
  1305. " var frameCnt = 0;\n",
  1306. " var time = 0;\n",
  1307. " var p = [];\n",
  1308. " var r = 10;\n",
  1309. " var sr = 0;\n",
  1310. " var er = 0;\n",
  1311. " var d = -10;\n",
  1312. " var deg = 60;\n",
  1313. " var up = [0, 1];\n",
  1314. " var lsystemResult = '';\n",
  1315. " var cnt = 0;\n",
  1316. " var rule;\n",
  1317. " var ret = false;\n",
  1318. " var lsystemRule = {\n",
  1319. " 'A': 'ABAC+BAC+BAC+BAC+BAC+BAC+',\n",
  1320. " 'B': 'BBB',\n",
  1321. " 'C': 'CCC',\n",
  1322. " '+': '+'\n",
  1323. " };\n",
  1324. " var drawingRule = {\n",
  1325. " 'A': function() {\n",
  1326. " return drawCircle();\n",
  1327. " },\n",
  1328. " 'B': function() {\n",
  1329. " moveUpByd();\n",
  1330. " return true;\n",
  1331. " },\n",
  1332. " 'C': function() {\n",
  1333. " moveDownByd();\n",
  1334. " return true\n",
  1335. " },\n",
  1336. " '+': function() {\n",
  1337. " rotateUpLeftByDeg();\n",
  1338. " return true;\n",
  1339. " }\n",
  1340. " };\n",
  1341. " function lsystem(parent, N) {\n",
  1342. " var child = '';\n",
  1343. " for(var i = 0; i < N; i++) {\n",
  1344. " child = '';\n",
  1345. " for(var j = 0; j < parent.length; j++) {\n",
  1346. " child += lsystemRule[parent[j]];\n",
  1347. " }\n",
  1348. " parent = child;\n",
  1349. " }\n",
  1350. " return parent;\n",
  1351. " }\n",
  1352. " function moveUpByd() {\n",
  1353. " p[0] = p[0] + d * up[0];\n",
  1354. " p[1] = p[1] + d * up[1];\n",
  1355. " }\n",
  1356. " function moveDownByd() {\n",
  1357. " p[0] = p[0] + d * -up[0];\n",
  1358. " p[1] = p[1] + d * -up[1];\n",
  1359. " }\n",
  1360. " function rotateUpLeftByDeg() {\n",
  1361. " var rad = deg * Math.PI/180;\n",
  1362. " var cos = Math.cos(rad);\n",
  1363. " var sin = Math.sin(rad);\n",
  1364. " var u = [];\n",
  1365. " u[0] = up[0];\n",
  1366. " u[1] = up[1];\n",
  1367. " up[0] = cos * u[0] - sin * u[1];\n",
  1368. " up[1] = sin * u[0] + cos * u[1];\n",
  1369. " }\n",
  1370. " function drawCircle() {\n",
  1371. " //g06.save();\n",
  1372. " g06.beginPath();\n",
  1373. " er += 0.1;// * (Math.sin(time) + 1)/2;\n",
  1374. " g06.arc(p[0], p[1], r, sr, er);\n",
  1375. " sr += 0.1;// * (Math.sin(time) + 1)/2;\n",
  1376. " g06.lineWidth = 0.5 * (Math.sin(20*time) + 1)/2;\n",
  1377. " g06.strokeStyle = 'rgb(255, 255, 255)';\n",
  1378. " g06.stroke();\n",
  1379. " //g06.restore();\n",
  1380. " if(er > 2 * Math.PI) {\n",
  1381. " sr = 0;\n",
  1382. " er = 0;\n",
  1383. " return true;\n",
  1384. " }\n",
  1385. " else\n",
  1386. " return false;\n",
  1387. " }\n",
  1388. " function drawlsystemResult() {\n",
  1389. " for(var i = 0; i < lsystemResult.length; i++) {\n",
  1390. " drawingRule[lsystemResult[i]]();\n",
  1391. " }\n",
  1392. " }\n",
  1393. " function setup(width, height) {\n",
  1394. " t06 = document.getElementById('t06');\n",
  1395. " g06 = document.getElementById('c06').getContext('2d');\n",
  1396. " g06.canvas.width = width;\n",
  1397. " g06.canvas.height = height;\n",
  1398. " g06.fillStyle = 'rgb(56, 56, 56)';\n",
  1399. " g06.fillRect(0, 0, width, height);\n",
  1400. " p[0] = width/2;\n",
  1401. " p[1] = height/2;\n",
  1402. " }\n",
  1403. " function update() {\n",
  1404. " frameCnt++;\n",
  1405. " time = frameCnt/60;\n",
  1406. " //r = 15*(Math.sin(time) + 1)/2;\n",
  1407. " //d = -10*(Math.cos(time) + 1)/2;\n",
  1408. " }\n",
  1409. " function draw() {\n",
  1410. " //g06.fillRect(0, 0, g06.canvas.width, g06.canvas.height);\n",
  1411. " if(drawingRule[rule]() === true) {\n",
  1412. " cnt += 1;\n",
  1413. " rule = lsystemResult[cnt];\n",
  1414. " }\n",
  1415. " if(cnt >= lsystemResult.length) {\n",
  1416. " cnt = 0;\n",
  1417. " rule = lsystemResult[cnt];\n",
  1418. " g06.fillRect(0, 0, g06.canvas.width, g06.canvas.height);\n",
  1419. " }\n",
  1420. " }\n",
  1421. " function loop() {\n",
  1422. " update();\n",
  1423. " draw();\n",
  1424. " requestAnimationFrame(loop);\n",
  1425. " }\n",
  1426. " setup(400, 400);\n",
  1427. " //t06.textContent = lsystem('A', 2);\n",
  1428. " lsystemResult = lsystem('A', 3);\n",
  1429. " rule = lsystemResult[cnt];\n",
  1430. " loop();\n",
  1431. "</script>"
  1432. ]
  1433. },
  1434. {
  1435. "cell_type": "code",
  1436. "execution_count": null,
  1437. "metadata": {
  1438. "collapsed": true
  1439. },
  1440. "outputs": [],
  1441. "source": []
  1442. }
  1443. ],
  1444. "metadata": {
  1445. "kernelspec": {
  1446. "display_name": "Python 3",
  1447. "language": "python",
  1448. "name": "python3"
  1449. },
  1450. "language_info": {
  1451. "codemirror_mode": {
  1452. "name": "ipython",
  1453. "version": 3
  1454. },
  1455. "file_extension": ".py",
  1456. "mimetype": "text/x-python",
  1457. "name": "python",
  1458. "nbconvert_exporter": "python",
  1459. "pygments_lexer": "ipython3",
  1460. "version": "3.4.3"
  1461. }
  1462. },
  1463. "nbformat": 4,
  1464. "nbformat_minor": 0
  1465. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!