반응형

사람들에게 나무를 그려보라고 하면,

그리는 사람에 따라 정말 다양한 나무 그림이 나올 것이다.

HTML5를 통해 나무를 그리는 것 역시, 다양한 결과물이 나온다.

 

DEMO

 

WaysToDrawTree

Demonstration of various ways to draw tree in HTML5

truemaxdh.github.io

SOURCE

 

truemaxdh/WaysToDrawTree

Demonstration of various ways to draw tree in HTML5 - truemaxdh/WaysToDrawTree

github.com

1. 겨울나무

 

https://truemaxdh.github.io/WaysToDrawTree/Tree1.html

 

truemaxdh.github.io

2. 여름나무

 

https://truemaxdh.github.io/WaysToDrawTree/Tree2.html

 

truemaxdh.github.io

3. 조금 더 그럴싸한 여름나무

 

https://truemaxdh.github.io/WaysToDrawTree/Tree3.html

 

truemaxdh.github.io

4. 조금 더 그럴싸한 여름나무2

 

https://truemaxdh.github.io/WaysToDrawTree/Tree4.html

 

truemaxdh.github.io

 

그밖에 참고할 만한 링크

https://gist.github.com/gsluthra/3401766

 

Fractal Tree Generation using HTML5 Canvas and Random Numbers

Fractal Tree Generation using HTML5 Canvas and Random Numbers - tree_html5.html

gist.github.com

https://www.codediesel.com/javascript/drawing-trees-in-canvas/

 

Drawing Trees in Canvas - codediesel

Lately I’ve been experimenting with the new HTML5 Canvas element, and the best way to learn some new technology is to create something in it. For some time I’ve been dabbling in Processing and thought of porting some algorithms there in Canvas. Rather than

www.codediesel.com

https://github.com/PavlyukVadim

 

PavlyukVadim - Overview

PavlyukVadim has 37 repositories available. Follow their code on GitHub.

github.com

 

그리고, 이것도 있다.

FFF(Form Follows Function) - Plant Tree

 

Form Follows Function

FFF is a collection of interactive experiences. Each experience has its own unique design and functionality.

fff.cmiscm.com

HTML5로 나무를 그리는 방법은, 

기본적으로는 CANVAS 및 재귀함수를 사용하여 그린다는 공통점이 있다.

하지만, 여기에 각자의 차이점들이 더해지면서,

실로 다양한 그림이 나올 수 있다는 것을 느꼈다.

그 차이점은, 프로그래밍 지식이나 스타일에 국한되지 않고,

사물에 대한 지식, 미적 감각, 관찰력, 상상력 및 창의성 등 다양한 분야에서 드러난다.

단순히 나무를 그리는 작업도, 생각보다 재밌는 놀이가 될 수 있다.

'놀이'(Play)라는 관점으로 접근하면, 많은 일들이 재밌어질 수 있을 것이다.

 

반응형

+ Recent posts