{"id":5325,"date":"2016-10-22T20:12:57","date_gmt":"2016-10-23T03:12:57","guid":{"rendered":"http:\/\/blog.cmiscm.com\/?p=5325"},"modified":"2023-01-03T16:19:12","modified_gmt":"2023-01-04T00:19:12","slug":"how-to-build-a-prey-on-animation","status":"publish","type":"post","link":"http:\/\/blog.cmiscm.com\/?p=5325","title":{"rendered":"How to make a Prey on Animation"},"content":{"rendered":"<div class=\"cmpro\">\n<h3>DEMO<\/h3>\n<div class=\"cmvideo\" style=\"padding-bottom: 76.3%;\"><iframe loading=\"lazy\" src=\"\/\/cmiscm.github.io\/preyon\/\" width=\"100%\" height=\"100%\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\"><\/iframe><\/div>\n<\/div>\n<div class=\"cmpro noshadow\">\n<h3>GET CANVAS<\/h3>\n<div class=\"des\">\n<div class=\"write-eng\"><script src=\"https:\/\/gist.github.com\/cmiscm\/ef598a7beb1cd6ebee63d75e307cbd23.js\"><\/script><\/div>\n<\/div>\n<div class=\"des\" style=\"text-align:left;padding:10px 0 0 0;\">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. &gt;&gt; is a bit shift operator. X &gt;&gt; 1 is the same as Math.floor (x \/ 2) but faster.<\/div>\n<\/div>\n<div class=\"cmpro noshadow\">\n<h3>DRAW MOUTH<\/h3>\n<div class=\"des\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/kklw.gif\" alt=\"kklw\" width=\"1000\" height=\"650\" class=\"alignnone size-full wp-image-5360\"><\/div>\n<div class=\"des\">I&#8217;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.<\/div>\n<div class=\"des\">\n<script src=\"https:\/\/gist.github.com\/cmiscm\/9354f1a90c10a5a46e14683f713c7339.js\"><\/script><\/div>\n<div class=\"des\">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.<\/div>\n<div class=\"des\">\n<script src=\"https:\/\/gist.github.com\/cmiscm\/26d1151e124424621bcc220c7dbecd23.js\"><\/script><\/div>\n<\/div>\n<div class=\"cmpro noshadow\">\n<h3>DRAW TOOTH<\/h3>\n<div class=\"des\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/Canvas-Size.jpg\" alt=\"canvas-size\" width=\"1000\" height=\"260\" class=\"alignnone size-full wp-image-5357\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/Canvas-Size.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/Canvas-Size-300x78.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/Canvas-Size-768x200.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<div class=\"des\">Draw a triangle for the tooth shape, and add grey color shadow area (1\/4 width) to  improve the detail.<\/div>\n<div class=\"des\"><script src=\"https:\/\/gist.github.com\/cmiscm\/c355ea679b30c6814585fa1dccf2ef62.js\"><\/script><\/div>\n<\/div>\n<div class=\"cmpro noshadow\">\n<h3>DRAW TEETH<\/h3>\n<div class=\"des\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/cc23.jpg\" alt=\"cc23\" width=\"1000\" height=\"260\" class=\"alignnone size-full wp-image-5356\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/cc23.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/cc23-300x78.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/cc23-768x200.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<div class=\"des\">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.<\/div>\n<div class=\"des\"><script src=\"https:\/\/gist.github.com\/cmiscm\/74ce962bc3493e27002b657a22cd9812.js\"><\/script><\/div>\n<div class=\"des\">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.<br \/>\nThe drawing starts with 1, not 0, and draws up and down alternately. Please refer to the below figure for better understanding.<\/div>\n<div class=\"des\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/tott2.jpg\" alt=\"tott2\" width=\"1000\" height=\"300\" class=\"alignnone size-full wp-image-5359\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/tott2.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/tott2-300x90.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/10\/tott2-768x230.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<div class=\"des\">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.<br \/>\ni \/ _teethTotal is used to get the point of the tooth on the curve.<\/div>\n<div class=\"des\"><script src=\"https:\/\/gist.github.com\/cmiscm\/00fd6af048c52763725c54f718eeb1bf.js\"><\/script><\/div>\n<div class=\"des\">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 <a href=\"https:\/\/github.com\/cmiscm\/preyon\" target=\"_blank\" rel=\"noopener noreferrer\">my git<\/a>.<\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>USED LIBRARIES<\/h3>\n<ul>\n<li><i>\u2022<\/i><a href=\"https:\/\/greensock.com\/tweenlite\" target=\"_blank\" rel=\"noopener noreferrer\">TweenLite<\/a> by GreenSock <span>&#8211; for Open and Close animation<\/span><\/li>\n<li><i>\u2022<\/i><a href=\"http:\/\/millermedeiros.github.io\/js-signals\/\" target=\"_blank\" rel=\"noopener noreferrer\">js-signals<\/a> by Miller Medeiros <span>&#8211; for the controller events dispatch<\/span><\/li>\n<\/ul>\n<\/div>\n<div class=\"cmpro\">\n<h3>GIT \/ SOURCE CODE<\/h3>\n<div class=\"des\"><a href=\"https:\/\/github.com\/cmiscm\/preyon\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/cmiscm\/preyon<\/a><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>LICENSE<\/h3>\n<div class=\"des\">Copyright (c) 2016 Jongmin Kim<br \/>\nLicensed under the <a href=\"http:\/\/www.opensource.org\/licenses\/mit-license.php\" target=\"_blank\" rel=\"noopener noreferrer\">MIT license<\/a>.<\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>RELATED POSTS<\/h3>\n<ul>\n<li><i><a href=\"http:\/\/blog.cmiscm.com\/?p=5295\">+<\/a><\/i>MON<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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. &gt;&gt; is a bit shift operator. X &gt;&gt; 1 is the same as Math.floor (x \/ 2) but faster. DRAW MOUTH [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[352],"tags":[],"class_list":["post-5325","post","type-post","status-publish","format-standard","hentry","category-lab"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/posts\/5325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5325"}],"version-history":[{"count":0,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/posts\/5325\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5325"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}