아트웍 [Vanilla JS] 자라나는 나무 만들기 - 1 구현을 위해 큰 도화지를 하나 만들어야 한다. 도화지를 만들고 앱을 동작하기 위한 app.js를 만들고, 이 도화지 안에 여러 개의 나무가 그려지기 때문에 나무를 객체로 빼서 만들기 위한 tree.js를 만든다. 또한 각각의 나무(tree.js) 안에서 여러 개의 나뭇가지가 자라기 때문에 나뭇가지를 객체로 표현하기 위한 branch.js를 만든다. 우선 화면의 가운데에 나무를 하나 그려보자.... vanilla js아트웍vanilla js [Vanilla JS] 자라나는 나무 만들기 - 2 이번 편에선 클릭시 나무가 그려지는 이벤트와 아래에서부터 서서히 자라나는 효과를 구현해보자! 지금은 App에서 Tree 객체 하나가 자동으로 생성되면 Tree의 draw() 함수가 자동으로 실행되어 나무가 그려지게끔 동작하는데, 클릭 이벤트가 발생했을 때 App에서 Tree 객체가 생성되게 하면 된다. 화면을 클릭하면 클릭한 위치에 나무가 자라는 것을 볼 수 있다. 클릭시 나무가 자라는데, ... vanilla js아트웍vanilla js
[Vanilla JS] 자라나는 나무 만들기 - 1 구현을 위해 큰 도화지를 하나 만들어야 한다. 도화지를 만들고 앱을 동작하기 위한 app.js를 만들고, 이 도화지 안에 여러 개의 나무가 그려지기 때문에 나무를 객체로 빼서 만들기 위한 tree.js를 만든다. 또한 각각의 나무(tree.js) 안에서 여러 개의 나뭇가지가 자라기 때문에 나뭇가지를 객체로 표현하기 위한 branch.js를 만든다. 우선 화면의 가운데에 나무를 하나 그려보자.... vanilla js아트웍vanilla js [Vanilla JS] 자라나는 나무 만들기 - 2 이번 편에선 클릭시 나무가 그려지는 이벤트와 아래에서부터 서서히 자라나는 효과를 구현해보자! 지금은 App에서 Tree 객체 하나가 자동으로 생성되면 Tree의 draw() 함수가 자동으로 실행되어 나무가 그려지게끔 동작하는데, 클릭 이벤트가 발생했을 때 App에서 Tree 객체가 생성되게 하면 된다. 화면을 클릭하면 클릭한 위치에 나무가 자라는 것을 볼 수 있다. 클릭시 나무가 자라는데, ... vanilla js아트웍vanilla js