{"id":5672,"date":"2018-05-08T19:23:45","date_gmt":"2018-05-09T02:23:45","guid":{"rendered":"http:\/\/blog.cmiscm.com\/?p=5672"},"modified":"2023-01-08T13:22:01","modified_gmt":"2023-01-08T21:22:01","slug":"how-i-built-gooey-effect-for-chamoy-creative","status":"publish","type":"post","link":"http:\/\/blog.cmiscm.com\/?p=5672","title":{"rendered":"Gooey effect for Chamoy Creative"},"content":{"rendered":"<div class=\"bh\" style=\"box-shadow:none;\">\n<div class=\"bhvideo\" style=\"padding-bottom: 56.3%;\"><iframe loading=\"lazy\" width=\"100%\" height=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/jo8VGpJzQEE?rel=0&amp;controls=1&amp;showinfo=0\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe><\/div>\n<\/div>\n<div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"write-eng\">\n<p><a href=\"https:\/\/chamoycreative.com\/\" target=\"_blank\" rel=\"noopener\">Chamoy Creative<\/a> is a marketing agency that is located in Texas. <a href=\"https:\/\/www.youtube.com\/watch?v=Pas-TqjIikY\" target=\"_blank\" rel=\"noopener\">Chamoy<\/a>, which is where the name of the agency came from, refers to a variety of savory sauces and condiments in Mexican cuisine made from pickled fruit. Eating fruit or candy dipped in gooey Chamoy sauce is a Mexican tradition.<\/p>\n<p>&nbsp;<\/p>\n<p>For the visual of the brand, I created a gooey sauce effect for the website.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 64.2%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/DSC03426bb.jpg\" alt=\"\" width=\"1400\" height=\"900\" class=\"alignnone size-full wp-image-5674\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/DSC03426bb.jpg 1400w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/DSC03426bb-300x193.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/DSC03426bb-768x494.jpg 768w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/DSC03426bb-1024x658.jpg 1024w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">The brand identity<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 16.5%;\"><\/div>\n<div class=\"write-eng\">\n<h2>How I built&nbsp;it<\/h2>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 10.5%;\"><\/div>\n<div class=\"write-eng\">\n<h3 style=\"font-family: 'KoPubDotumPBA',sans-serif;\">1. Used Canvas&nbsp;Graphic<\/h3>\n<p>At first, I used an HTML5 Canvas drawing to make the drop shape. I wrote this code on a flight to Korea for a conference presentation I was giving. There aren&#8217;t many things to do on a flight, so it was great to focus on coding.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 56.3%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/work.cmiscm.com\/chamoy\/img\/ch1.gif\" alt=\"\" width=\"1000\" height=\"563\"><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Canvas points screen<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"write-eng\">\n<p>I put the coordinates of a random sized droplet on the screen and programmed it to drop down. I coded the shape of the sticky part and the shape of the falling drop.<\/p>\n<p>&nbsp;<\/p>\n<p>The visual was not bad and the next step was the gooey effect. Since the sauce is sticky, I started to make this visual effect using code.<\/p>\n<p>&nbsp;<\/p>\n<p>The easiest way to make a gooey effect is by using SVG filter. The advantage of SVG filter is that you can use HTML5 Canvas Graphic which is easy to use for drawing. The disadvantages are that it only works with some specific browsers and the performance is not that great.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 56.3%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/work.cmiscm.com\/chamoy\/img\/ch2.gif\" alt=\"\" width=\"1000\" height=\"563\"><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Gooey effect with SVG filter<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"write-eng\">\n<p>It looked cool but not with all browsers. So I decided to use WebGL for better performance and compatibility with all browsers.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 10.5%;\"><\/div>\n<div class=\"write-eng\">\n<h3 style=\"font-family: 'KoPubDotumPBA',sans-serif;\">2. Changed to&nbsp;WebGL<\/h3>\n<p>For the 2d WebGL drawing, I used <a href=\"http:\/\/www.pixijs.com\/\" target=\"_blank\" rel=\"noopener\">PIXI.js<\/a> which supports advanced features such as batch rendering and filters.<\/p>\n<p>&nbsp;<\/p>\n<p>First, I drew 500+ objects; then, I applied a blur effect to the entire screen; after that, I divided the screen into a portion to be drawn and not to be drawn according to the threshold value; this created a sticky area between the objects. In computer graphics, these are called <a href=\"https:\/\/en.wikipedia.org\/wiki\/Metaballs\" target=\"_blank\" rel=\"noopener\">Metaballs<\/a>.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 20.0%;text-align:center;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/Metaball_contact_sheet.jpg\" alt=\"\" width=\"1000\" height=\"200\" class=\"alignnone size-full wp-image-5678\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/Metaball_contact_sheet.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/Metaball_contact_sheet-300x60.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2018\/05\/Metaball_contact_sheet-768x154.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Metaballs\u200a-\u200aWikipedia<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 56.3%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/work.cmiscm.com\/chamoy\/img\/ch2a.gif\" alt=\"\" width=\"1000\" height=\"563\"><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Blur + Threshold = Metaballs<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"write-eng\">\n<p>Although, PIXI doesn&#8217;t support ThresholdFilter, we can easily build code to support the filter.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 3.5%;\"><\/div>\n<div class=\"write-eng\"><script src=\"https:\/\/gist.github.com\/cmiscm\/4dfeeb69f6d59a7a0b5bebab448a2dad.js\"><\/script><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">ThresholdFilter for PIXI.js<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"write-eng\">\n<p>Here is the Metaballs code for PIXI.js.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 3.5%;\"><\/div>\n<div class=\"write-eng\"><script src=\"https:\/\/gist.github.com\/cmiscm\/d8a206176c95b401b04c790a4d9450ab.js\"><\/script><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Metaballs for PIXI.js<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"write-eng\">\n<p>Now, all the problems have been solved. I think this is a good example of what I do: creating visual effects, interactions and animations with code, testing performance and finding the best way to solve problems.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 10.5%;\"><\/div>\n<div class=\"write-eng\">\n<h3 style=\"font-family: 'KoPubDotumPBA',sans-serif;\">3. Drops<\/h3>\n<p>The drops are actually made up of circles, a lot of circles. PIXI supports batch rendering, so the performance for drawing over 500 circles is 60fps. I placed large circles at regular intervals to create a wave at the top; then I randomly put a group of smaller circles in the wave to make the shape of a drop.<\/p>\n<p>&nbsp;<\/p>\n<p>Initially, the circles in the group are clumped together; then, they slowly start dropping down one after the other. When the first circle drops down to a certain length, the group of circles is divided into a falling part and a rising part to create a feeling of stickiness.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 56.3%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/work.cmiscm.com\/chamoy\/img\/ch3.gif\" alt=\"\" width=\"1000\" height=\"563\"><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Circles for drop<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 10.5%;\"><\/div>\n<div class=\"write-eng\">\n<h3 style=\"font-family: 'KoPubDotumPBA',sans-serif;\">4. Snacks<\/h3>\n<p>Eating snacks dipped in gooey Chamoy sauce is an important concept of the brand. So I created this user interaction.<\/p>\n<p>&nbsp;<\/p>\n<p>Users can grab a snack on the bottom of the screen, and cover it in sauce by sticking it under the sauce at the top of the screen, and\/or dragging it under a drop.<\/p>\n<p>&nbsp;<\/p>\n<p>If users do nothing, the sauce slowly drops and covers the logo in the middle of the screen.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 56.3%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/work.cmiscm.com\/chamoy\/img\/ch4.gif\" alt=\"\" width=\"1000\" height=\"563\"><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Dipped in gooey sauce<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"write-eng\">\n<p>For the splotch of sauce, I created an area on the snack (see the yellow circles); then, when this yellow area touches the sauce, a circle which represents the splotch of sauce is drawn at that position.<\/p>\n<p>&nbsp;<\/p>\n<p>The size of the circle depends on the length of time the area touches the sauce\u200a-\u200athe longer the time, the larger the size of the circle\/splotch.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 56.3%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/work.cmiscm.com\/chamoy\/img\/ch5.gif\" alt=\"\" width=\"1000\" height=\"563\"><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">The splotch of sauce effect<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 10.5%;\"><\/div>\n<div class=\"write-eng\">\n<h3 style=\"font-family: 'KoPubDotumPBA',sans-serif;\">5. Drop movements<\/h3>\n<p>I applied a physics law, inertia, to the gooey effect to show realistic movement. When the stain area touches the drop, the drop follows the snack, and after a certain distance, it swings back to its place. The stretched part of the drop swings a little also.<\/p>\n<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 56.3%;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/work.cmiscm.com\/chamoy\/img\/ch6.gif\" alt=\"\" width=\"1000\" height=\"563\"><\/div>\n<div style=\"text-align:center;font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px;\">Drop movements<\/div>\n<div class=\"bhimg\" style=\"padding-bottom: 10.5%;\"><\/div>\n<div class=\"write-eng\">\n<h3 style=\"font-family: 'KoPubDotumPBA',sans-serif;\">6. Mobile environment<\/h3>\n<p>This website works well on both desktop and mobile devices. Normally, the performance is not great on mobile, because of hardware spec. However, because WebGL now works on mobile, the performance has improved. In addition, I spent a lot of time optimizing my code for the best performance. For example, I used Bit Shift Operator instead of Math whenever possible, compared getElementById() to querySelector() and used the fastest one, and tested it on as many devices as possible, etc.<\/p>\n<\/div>\n<\/div>\n<div class=\"bh\" style=\"box-shadow:none;\">\n<div class=\"bhimg\" style=\"padding-bottom: 6.5%;\"><\/div>\n<div class=\"bhvideo\" style=\"padding-bottom: 56.2%;\"><iframe src=\"https:\/\/player.vimeo.com\/video\/268698802?background=1\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" class=\"embed-content\"><\/iframe><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>Technologies &amp; Tools<\/h3>\n<ul class=\"techtool\">\n<li>JavaScript<\/li>\n<li>WebGL<\/li>\n<li>Metaballs<\/li>\n<li>Interaction<\/li>\n<\/ul>\n<\/div>\n<div class=\"cmpro\">\n<h3>URL<\/h3>\n<ul class=\"list\">\n<li><a href=\"https:\/\/chamoycreative.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/chamoycreative.com\/<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Chamoy Creative is a marketing agency that is located in Texas. Chamoy, which is where the name of the agency came from, refers to a variety of savory sauces and condiments in Mexican cuisine made from pickled fruit. Eating fruit or candy dipped in gooey Chamoy sauce is a Mexican tradition. &nbsp; For the visual [&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-5672","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\/5672","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=5672"}],"version-history":[{"count":0,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/posts\/5672\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5672"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}