[그냥 쓰는 글] 연휴에 코딩

Lab | December 29, 2016 | Comment

미국의 회사들은 연휴가 되면 사무실에 사람들이 거의 없다.
대부분 연휴에 맞춰 휴가를 가거나 고향에 머무르며 새해를 맞이하는데, 뉴욕의 퍼스트본에서도 그랬지만 실리콘 밸리의 구글은 더 사람들이 없는 것 같은 느낌이다.
나는 한국에 갈 일도 없고, 아기도 아직 어려 딱히 멀리 놀러 갈 일도 없어서 올해 연말은 집에서 가족들과 시간을 보내며 가끔 회사에 출근해서 코딩했다.

연휴 중간날 회사에 출근하니 우리 팀은 전멸이고 내가 일하는 빌딩의 한 층에 총 5명이 출근을 했다.
조용한 사무실에 앉아서 코딩에 집중했는데 평소보다 일이 잘되는 기분이다.
지금 하는 일은 내가 아이디어를 내고 코딩과 디자인을 맡아서 하는 프로젝트라서 상당히 공을 들이고 있는데 내년 초에는 꼭 오픈할 수 있기를 바라는 마음이다.

이렇게 연말에 회사에서 코딩하고 있으니 고등학교 시절 크리스마스에 봉사점수를 얻으려고 구청에서 하루 동안 일을 했던 것이 생각이 난다.
고등학교때 수능 외에 봉사점수라는 게 있었는데 사회에 필요한 봉사를 하며 일정 점수를 모아야 하는 제도였다.
평소에 친구들이랑 봉사점수를 주는 곳을 찾아가 하루 정도 간단한 일을 하곤 했었는데, 마침 크리스마스이브에 구청에서 하는 일이 있어서 친구와 같이 사무보조를 했었다.
일은 정말 간단한 일들이었고 구청 직원들도 잘해줘서 편하게 일을 했었는데, 일을 끝내고 봉사점수를 얻어서 나오는 크리스마스 이브 날 저녁 길에 묘한 기분을 느꼈던 적이 있다.
남들은 연휴라서 다들 신나게 노는데 나는 뭔가를 성취한 기분이랄까? 아마 그때부터 일에 대한 집착이 보이지 않았나 생각해본다.

How to make a Prey on Animation

Lab | October 22, 2016 | 3 Comments

DEMO

GET CANVAS

First of all, We need to know the full stage size and half stage size for the canvas drawing. So _sw, _sh is the stage size variable, and _cx, _cy is the half stage size variable. >> is a bitshift operator, x >> 1 is the same as Math.floor(x/2), but faster.

DRAW MOUTH

kklw
To draw the mouth animation, I’m using quadraticCurveTo for the mouth shape. During the animation, Y points (start, end, and control points) change, and we can make the mouth close/open animation using the points. For easy control of the animation, I made _guide object variable and added a tween to it. So _guide changes from 0 to 1, 0 is open mouse state, 1 is close mouse state.
Each Y points change from _open position to _close position, so using getCurrent function to get the right value. X = getCurrent(A, 10, 200); means, When A is changed 0 to 1, X changes from 10 to 200. You can set a tween to _points variable directly, in this case, I just wanted to control the animation both on Tween and mouse/finger move.
This is the code that set a tween to _points variable directly.

DRAW TOOTH

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

DRAW TEETH

cc23
To draw teeth, we need to know each position of tooth on the curved line. You can get the position using the getPointOnQuad function, set the last p parameter from 0 to 1, 0 is the first point, 1 is the last point, so 0.5 is the middle point.
One important thing of the teeth drawing, the total number should be even. We are going to draw both upper and lower teeth, and the upper teeth mesh with lower teeth.
The drawing starts from 1, not 0, and draw upper and lower by turns. See the below image for better understanding.
tott2
Draw upper teeth with y1 and c1 variables when i is an odd number, draw lower teeth with y2 and c2 variables when i is an even number.
i / _teethTotal is used to get the tooth position on the curved line.
Drawing 2d objects on Canvas shows quite good performance, you don’t even need to use WebGL. This animation works well both on desktop and mobile devices. You can download all source code at my git.
This article is a part of my new book – Code Animation : Build Animated Websites with HTML, CSS, and JavaScript. I’m writing the book these days, I hope it will be published soon.

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일 정도 늘어져 있곤 하는데, 만화책을 보거나 맛있는 요리를 해먹는 등 내가 평소에 좋아하는 일을 하며 충전을 하려는 편이다.

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

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