jongmin kim blog

DEMO

GET CANVAS

/**
* Get screen Size
*/
_sw = window.innerWidth;
_sh = window.innerHeight;

/**
* Get the half size of screen
* x >> 1 is a Bitshift Operator, it's same as Math.floor(x/2), but faster
*/
_cx = _sw >> 1;
_cy = _sh >> 1;

$canvas = document.getElementsByTagName('canvas')[0];
$canvas.width = _sw;
$canvas.height = _sh;
_ctx = $canvas.getContext('2d');

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/**

* Get screen Size

*/

_sw = window.innerWidth;

_sh = window.innerHeight;

/**

* Get the half size of screen

* x >> 1 is a Bitshift Operator, it's same as Math.floor(x/2), but faster

*/

_cx = _sw >> 1;

_cy = _sh >> 1;

$canvas = document.getElementsByTagName('canvas')[0];

$canvas.width = _sw;

$canvas.height = _sh;

_ctx = $canvas.getContext('2d');

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

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.

/**
* Set variables
* y1 and c1 are for the upper lip, y2 and c2 are for the lower lip.
* _guide is a variables for an animation, it is from 0 to 1
*/
_close = {y1:_cy, y2:_cy, c1:_cy, c2:_cy};
_open = {y1:0, y2:_sh, c1:-_cy, c2:_sh + _cy};
_points = {y1:0, y2:_sh, c1:-_cy, c2:_sh + _cy};
_guide = {y:0};

/**
* requestAnimationFrame
*/
function animate() {
    _raf = window.requestAnimationFrame(animate);
    _ctx.clearRect(0, 0, _sw, _sh);
    loop();
}

/**
* get the Y position value
*/
function loop() {
    _points.y1 = getCurrent(_guide.y, _open.y1, _close.y1);
    _points.y2 = getCurrent(_guide.y, _open.y2, _close.y2);
    _points.c1 = getCurrent(_guide.y, _open.c1, _close.c1);
    _points.c2 = getCurrent(_guide.y, _open.c2, _close.c2);

    drawMouth();
}

function drawMouth() {
    _ctx.fillStyle = '#113063';

    // upper lip
    _ctx.beginPath();
    _ctx.moveTo(0, 0);
    _ctx.lineTo(_sw, 0);
    _ctx.lineTo(_sw, _points.y1);
    _ctx.quadraticCurveTo(_cx, _points.c1, 0, _points.y1);
    _ctx.lineTo(0, 0);
    _ctx.closePath();
    _ctx.fill();

    // lower lip
    _ctx.beginPath();
    _ctx.moveTo(0, _sh);
    _ctx.lineTo(_sw, _sh);
    _ctx.lineTo(_sw, _points.y2);
    _ctx.quadraticCurveTo(_cx, _points.c2, 0, _points.y2);
    _ctx.lineTo(0, _sh);
    _ctx.closePath();
    _ctx.fill();
}

function getCurrent(cur, min, max) {
    return (max - min) * cur + min;
}

/**
* Animation
*/
function closeMouth() {
    TweenLite.to(_guide, 1.2, {
        y:1,
        ease: Expo.easeInOut
    });
}

function openMouth() {
    TweenLite.to(_guide, 1.2, {
        y:0,
        ease: Expo.easeInOut
    });
}

closeMouth();
animate();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

/**

* Set variables

* y1 and c1 are for the upper lip, y2 and c2 are for the lower lip.

* _guide is a variables for an animation, it is from 0 to 1

*/

_close = {y1:_cy, y2:_cy, c1:_cy, c2:_cy};

_open = {y1:0, y2:_sh, c1:-_cy, c2:_sh + _cy};

_points = {y1:0, y2:_sh, c1:-_cy, c2:_sh + _cy};

_guide = {y:0};

/**

* requestAnimationFrame

*/

function animate() {

_raf = window.requestAnimationFrame(animate);

_ctx.clearRect(0, 0, _sw, _sh);

loop();

}

/**

* get the Y position value

*/

function loop() {

_points.y1 = getCurrent(_guide.y, _open.y1, _close.y1);

_points.y2 = getCurrent(_guide.y, _open.y2, _close.y2);

_points.c1 = getCurrent(_guide.y, _open.c1, _close.c1);

_points.c2 = getCurrent(_guide.y, _open.c2, _close.c2);

drawMouth();

}

function drawMouth() {

_ctx.fillStyle = '#113063';

// upper lip

_ctx.beginPath();

_ctx.moveTo(0, 0);

_ctx.lineTo(_sw, 0);

_ctx.lineTo(_sw, _points.y1);

_ctx.quadraticCurveTo(_cx, _points.c1, 0, _points.y1);

_ctx.lineTo(0, 0);

_ctx.closePath();

_ctx.fill();

// lower lip

_ctx.beginPath();

_ctx.moveTo(0, _sh);

_ctx.lineTo(_sw, _sh);

_ctx.lineTo(_sw, _points.y2);

_ctx.quadraticCurveTo(_cx, _points.c2, 0, _points.y2);

_ctx.lineTo(0, _sh);

_ctx.closePath();

_ctx.fill();

}

function getCurrent(cur, min, max) {

return (max - min) * cur + min;

}

/**

* Animation

*/

function closeMouth() {

TweenLite.to(_guide, 1.2, {

y:1,

ease: Expo.easeInOut

});

}

function openMouth() {

TweenLite.to(_guide, 1.2, {

y:0,

ease: Expo.easeInOut

});

}

closeMouth();

animate();

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.

function closeMouth() {
    TweenLite.to(_points, 1.2, {
        y1:_close.y1,
        y2:_close.y2,
        c1:_close.c1,
        c2:_close.c2,
        ease: Expo.easeInOut
    });
}

function openMouth() {
    TweenLite.to(_points, 1.2, {
        y1:_open.y1,
        y2:_open.y2,
        c1:_open.c1,
        c2:_open.c2,
        ease: Expo.easeInOut
    });
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function closeMouth() {

TweenLite.to(_points, 1.2, {

y1:_close.y1,

y2:_close.y2,

c1:_close.c1,

c2:_close.c2,

ease: Expo.easeInOut

});

}

function openMouth() {

TweenLite.to(_points, 1.2, {

y1:_open.y1,

y2:_open.y2,

c1:_open.c1,

c2:_open.c2,

ease: Expo.easeInOut

});

}

DRAW TOOTH

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

_toothW = 100; // tooth width
_toothH = 200; // tooth height
_toothW2 = _toothW >> 1; // tooth width / 2

/*
 * tx, ty is the tooth position
 */
_ctx.fillStyle = '#fff';
_ctx.beginPath();
_ctx.moveTo(tx, ty);
_ctx.lineTo(tx + _toothW2, ty);
_ctx.lineTo(tx, ty + _toothH);
_ctx.lineTo(tx - _toothW2, ty);
_ctx.closePath();
_ctx.fill();

_ctx.fillStyle = '#ccc';
_ctx.beginPath();
_ctx.moveTo(tx + (_toothW2 >> 1), ty);
_ctx.lineTo(tx + _toothW2, ty);
_ctx.lineTo(tx, ty + _toothH);
_ctx.closePath();
_ctx.fill();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

_toothW = 100; // tooth width

_toothH = 200; // tooth height

_toothW2 = _toothW >> 1; // tooth width / 2

/*

* tx, ty is the tooth position

*/

_ctx.fillStyle = '#fff';

_ctx.beginPath();

_ctx.moveTo(tx, ty);

_ctx.lineTo(tx + _toothW2, ty);

_ctx.lineTo(tx, ty + _toothH);

_ctx.lineTo(tx - _toothW2, ty);

_ctx.closePath();

_ctx.fill();

_ctx.fillStyle = '#ccc';

_ctx.beginPath();

_ctx.moveTo(tx + (_toothW2 >> 1), ty);

_ctx.lineTo(tx + _toothW2, ty);

_ctx.lineTo(tx, ty + _toothH);

_ctx.closePath();

_ctx.fill();

DRAW TEETH

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.

/*
 * Get point on curved line
 * p1: start point
 * p2: control point
 * p3: end point
 * p: p = 0 is the start of the curve, p = 0.5 is middle and p = 1 is end
 */
function getPointOnQuad(p1, p2, p3, p) {
    var x1 = (p2.x - p1.x) * p + p1.x,
        y1 = (p2.y - p1.y) * p + p1.y,
        x2 = (p3.x - p2.x) * p + p2.x,
        y2 = (p3.y - p2.y) * p + p2.y,
        point = {x:(x2 - x1) * p + x1, y:(y2 - y1) * p + y1};
    return point;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/*

* Get point on curved line

* p1: start point

* p2: control point

* p3: end point

* p: p = 0 is the start of the curve, p = 0.5 is middle and p = 1 is end

*/

function getPointOnQuad(p1, p2, p3, p) {

var x1 = (p2.x - p1.x) * p + p1.x,

y1 = (p2.y - p1.y) * p + p1.y,

x2 = (p3.x - p2.x) * p + p2.x,

y2 = (p3.y - p2.y) * p + p2.y,

point = {x:(x2 - x1) * p + x1, y:(y2 - y1) * p + y1};

return point;

}

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.

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.

var i, point, no;
for (i=1; i<_teethTotal; i++) {
    no = i % 2;
    if (no == 1) {
        // upper tooth
        point = getPointOnQuad({x:0, y:_points.y1}, {x:_cx, y:_points.c1}, {x:_sw, y:_points.y1}, i / _teethTotal);
    } else {
        // lower tooth
        point = getPointOnQuad({x:0, y:_points.y2}, {x:_cx, y:_points.c2}, {x:_sw, y:_points.y2}, i / _teethTotal);
    }
    drawTooth(point, no);
}

function drawTooth(pos, isUp) {
    var tx = pos.x, tx3 = tx + (_toothW2 >> 1),
        ty, toothH;
    if (isUp) {
        ty = pos.y - 80;
        toothH = _toothH;
    } else {
        ty = pos.y + 80;
        toothH = -_toothH;
    }

    _ctx.fillStyle = '#fff';
    _ctx.beginPath();
    _ctx.moveTo(tx, ty);
    _ctx.lineTo(tx + _toothW2, ty);
    _ctx.lineTo(tx, ty + toothH);
    _ctx.lineTo(tx - _toothW2, ty);
    _ctx.closePath();
    _ctx.fill();

    _ctx.fillStyle = '#ccc';
    _ctx.beginPath();
    _ctx.moveTo(tx3, ty);
    _ctx.lineTo(tx + _toothW2, ty);
    _ctx.lineTo(tx, ty + toothH);
    _ctx.closePath();
    _ctx.fill();
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

var i, point, no;

for (i=1; i<_teethTotal; i++) {

no = i % 2;

if (no == 1) {

// upper tooth

point = getPointOnQuad({x:0, y:_points.y1}, {x:_cx, y:_points.c1}, {x:_sw, y:_points.y1}, i / _teethTotal);

} else {

// lower tooth

point = getPointOnQuad({x:0, y:_points.y2}, {x:_cx, y:_points.c2}, {x:_sw, y:_points.y2}, i / _teethTotal);

}

drawTooth(point, no);

}

function drawTooth(pos, isUp) {

var tx = pos.x, tx3 = tx + (_toothW2 >> 1),

ty, toothH;

if (isUp) {

ty = pos.y - 80;

toothH = _toothH;

} else {

ty = pos.y + 80;

toothH = -_toothH;

}

_ctx.fillStyle = '#fff';

_ctx.beginPath();

_ctx.moveTo(tx, ty);

_ctx.lineTo(tx + _toothW2, ty);

_ctx.lineTo(tx, ty + toothH);

_ctx.lineTo(tx - _toothW2, ty);

_ctx.closePath();

_ctx.fill();

_ctx.fillStyle = '#ccc';

_ctx.beginPath();

_ctx.moveTo(tx3, ty);

_ctx.lineTo(tx + _toothW2, ty);

_ctx.lineTo(tx, ty + toothH);

_ctx.closePath();

_ctx.fill();

}

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

GIT / SOURCE CODE

https://github.com/cmiscm/preyon

Tokyo

IDG UX World 2016 Fall

How to make a Prey on Animation

DEMO

GET CANVAS

DRAW MOUTH

DRAW TOOTH

DRAW TEETH

USED LIBRARIES

GIT / SOURCE CODE

LICENSE

RELATED POSTS