Wave Animation

Lab | June 4, 2017 | Comment

DEMO

GIT / SOURCE CODE

LICENSE

Copyright (c) 2017 Jongmin Kim
Licensed under the MIT license.

How to make a Prey on Animation

Lab | October 22, 2016 | 3 Comments

DEMO

GET CANVAS

First, you need to know the total size and half size of the drawing canvas. _sw, _sh is the stage size variable, and _cx, _cy is the half stage size variable. >> is a bit shift operator. X >> 1 is the same as Math.floor (x / 2) but faster.

DRAW MOUTH

kklw
I’m using quadraticCurveTo to draw the mouth animation. You can change the Y points (start point, end point, control point) while the animation is in progress, and use points to create animations that can close or open your mouth. I added an _guide object variable and added a tween to easily control the animation. Therefore, the _guide is changed from 0 to 1, 0 is the open mouse state, and 1 is the closed mouse state.
Each Y point is changed from the _open position to the _close position, so the getCurrent function is used to obtain the correct value. X = getCurrent (A, 10, 200); That is, when A changes from 0 to 1, X changes from 10 to 200. In this case, you can set the twin directly to the _points variable.

DRAW TOOTH

canvas-size
Draw a triangle for the tooth shape, and add grey color shadow area (1/4 width) to improve the detail.

DRAW TEETH

cc23
To draw a tooth, you need to know the position of the tooth on the curve. The getPointOnQuad function can be used to get the position, and the last p parameter can be set from 0 to 1. 0 is the first point, 1 is the last point, so 0.5 is the midpoint.
The important thing of the tooth drawing is that the total number should be even. We will draw both the upper teeth and the lower teeth, and the the upper teeth mesh with the lower teeth.
The drawing starts with 1, not 0, and draws up and down alternately. Please refer to the below figure for better understanding.
tott2
When i is odd, draw the upper teeth with variables y1 and c1, and the lower teeth with variables y2 and c2 when i is even.
i / _teethTotal is used to get the point of the tooth on the curve.
Drawing two-dimensional objects on the canvas shows quite good performance on devices. You do not even need to use WebGL. This animation works well on both desktop and mobile devices. You can download all the source code from all my my git.

USED LIBRARIES

  • TweenLite by GreenSock – for Open and Close animation
  • js-signals by Miller Medeiros – for the controller events dispatch

LICENSE

Copyright (c) 2016 Jongmin Kim
Licensed under the MIT license.

RELATED POSTS

  • +MON

[그냥 쓰는 글] 슬럼프에 빠질때

Lab | July 10, 2016 | Comment

작업을 하다 보면 간혹 슬럼프에 빠질 때가 있다.
더는 아무것도 하고 싶지 않고 늘어져 있고만 싶을 때가 있는데,
나 역시 하나의 프로젝트를 끝낼 때면 깊은 공허함과 함께 이런 기분을 느끼곤 한다.
그럴 때면 그냥 그 기분에 맞춰 2~3일 정도 늘어져 있곤 하는데, 만화책을 보거나 맛있는 요리를 해먹는 등 내가 평소에 좋아하는 일을 하며 충전을 하려는 편이다.

작업이 한창 바쁜 가운데 이런 기분이 들 때면 좀 난감하긴 하다.
책상에 앉아 마음을 다잡으며 (그때그때 기분에 따라 다른) 좋아하는 음악을 크게 틀어두고 작업을 하기도 한다.
이 방법은 단순 반복 작업에 아주 효과가 좋은데, 아무 생각 없이 큰소리의 음악을 들으며 작업을 하면 작업도 잘되고 속도도 굉장히 향상된다.

그래도 기분이 풀리지 않을 땐 내가 그동안 진행한 작업을 다시 살펴보곤 한다.
이런 작업을 만들 때의 기분과 완성 후 성취감들을 다시 한 번 상기시켜보는 것인데 이것 또한 상당히 효과적인 방법이다.
비슷한 예로 포트폴리오를 정리해보는 것도 좋은 방법일 수 있겠다.