{"id":41471,"date":"2018-10-25T03:01:09","date_gmt":"2018-10-24T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=41471"},"modified":"2018-10-25T08:51:29","modified_gmt":"2018-10-24T22:51:29","slug":"animation-via-requestanimationframe-event-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animation-via-requestanimationframe-event-tutorial\/","title":{"rendered":"Animation via RequestAnimationFrame Event Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animation via RequestAnimationFrame Event Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf_event.jpg\" title=\"Animation via RequestAnimationFrame Event Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animation via RequestAnimationFrame Event Tutorial<\/p><\/div>\n<p>Still within the &#8220;Proof of Concept&#8221; realms, today we add onto yesterday&#8217;s <a title='Animation via RequestAnimationFrame Primer Tutorial' href='#arafpt'>Animation via RequestAnimationFrame Primer Tutorial<\/a> &#8220;colouring in&#8221; background pixels with a mouse and touch event driven additional functionality &#8220;set&#8221; allowing for &#8230;<\/p>\n<ul>\n<li>when user clicks first &#8220;in the middle of nowhere&#8221; within the web application&#8217;s webpage some new <i>onclick<\/i> (and mobile device <i>ontouchstart<\/i>) event logic controls &#8230;<\/li>\n<li>foreground &#8220;pixels&#8221; at the position of click\/touch can have their background-color be controlled by the user, along with automated control of &#8220;overlay usual suspects&#8221; &#8230;\n<ol>\n<li>z-index<\/li>\n<li>position:absolute<\/li>\n<\/ol>\n<p> &#8230; and from then (all the time until the user clicks into one of the colour pickers we have) &#8230;\n<\/li>\n<li><i>onmousemove<\/i> (and mobile device <i>ontouchmove<\/i>) event logic continuing on with that individual foreground pixellating (<font size=1>ahhhhhhhlll drink to that!<\/font>) &#8230; all the while (slowing down, sometimes, but not discontinuing) &#8230;<\/li>\n<li>background <a target=_blank title='requestAnimationFrame information ... thanks' href='https:\/\/www.paulirish.com\/2011\/requestanimationframe-for-smart-animating\/'>requestAnimationFrame<\/a> logic continues &#8230; and in fact it is within its &#8220;draw&#8221; function that foregound &#8220;pixellating&#8221; takes place as well as the alternative &#8220;action&#8221; &#8230; hence the &#8220;slowing down&#8221; effect to background &#8220;colouring in&#8221; when the user does a lot of foreground &#8220;pixellating&#8221; &#8230; <font size=1>this can be practiced in front of a mirror with the adequate glass of beverage<\/font><\/li>\n<\/ul>\n<p>What is of interest to say about the setting up of the event logic to this foreground &#8220;pixellating&#8221;?  <strike>No, nothing to see here.<\/strike> <font size=1>Down Nala &#8230; walkies later!<\/font>  Well, we first thought we could use an <i>addEventListener<\/i> function to <i>document.body<\/i> or <i>document<\/i> or <i>window<\/i> without the addition of any more webpage elements, but then realized after also trying inline HTML <i>onclick=&#8221;oc(event);&#8221;<\/i>  ideas unsuccessfully, we needed to append to document.body a <b>div background &#8220;spacer&#8221; click\/touch\/move event controller<\/b> and <i>tab to input type=text element (deliberately) offscreen that negates that annoying &#8220;tab focus goes to web browser address bar&#8221; problem<\/i> &#8230;<\/p>\n<p><code><br \/>\n<b>&lt;div ontouchmove=\"oc(event,0);\" onmousemove=\"oc(event,0);\" ontouchstart=\"oc(event,1);\" onclick=\"oc(event,1);\" id=bdiv style='z-index:-5;background-color:transparent;width:100%;height:100vh;position:absolute;top:0px;left:0px;'&gt;&lt;\/div&gt;<\/b><br \/>\n<i>&lt;input type=\"text\" style=\"position:absolute;top:-300px;left:-300px;\" value=\"\"&gt;&lt;\/input&gt;<\/i><br \/>\n<\/code><\/p>\n<p> &#8230; that calls on the new event logic (Javascript) function &#8230;<\/p>\n<p><code><br \/>\nvar yellow='yellow', pink='#ff69b4', x=0, y=0, mtl='', itdepends=0;<br \/>\nfunction oc(event, depends) {<br \/>\n       if (depends == 1) { itdepends = 1; }<br \/>\n       if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX;<br \/>\n       y = event.clientY;<br \/>\n       if (itdepends == 1) {<br \/>\n       mtl='background-color:' + pink + ';z-index:12;position:absolute;top:' + y + 'px;left:' + x + 'px;';<br \/>\n       }<br \/>\n       } else {<br \/>\n       x = event.pageX;<br \/>\n       y = event.pageY;<br \/>\n       if (itdepends == 1) {<br \/>\n       mtl='background-color:' + pink + ';z-index:12;position:absolute;top:' + y + 'px;left:' + x + 'px;';<br \/>\n       }<br \/>\n       }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; that augments <b>the changed<\/b> requestAnimationFrame &#8220;draw&#8221; (Javascript) function &#8230;<\/p>\n<p><code><br \/>\nfunction draw() {<br \/>\n    \/\/ Put your code here<br \/>\n    <b>if (mtl != '') {<br \/>\n    document.getElementById('daddto').innerHTML+='&lt;div class=dpixel style=\"' + mtl + '\"&gt;&lt;\/div&gt;';<br \/>\n    } else {<\/b><br \/>\n    document.getElementById('daddto').innerHTML+='&lt;div class=dpixel style=\"background-color:' + yellow + ';\"&gt;&lt;\/div&gt;';<br \/>\n    <b>}<br \/>\n    mtl='';<\/b><br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to achieve this &#8220;dual thinking&#8221; animation work in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.html-GETME\" title=\"raf.html\">raf.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.html\" title=\"Click picture\">proof of concept<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.html-GETME\" title=\"raf.html\">changed code<\/a>.<\/p>\n<hr>\n<p id='arafpt'>Previous relevant <a target=_blank title='Animation via RequestAnimationFrame Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animation-via-requestanimationframe-primer-tutorial\/'>Animation via RequestAnimationFrame Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animation via RequestAnimationFrame Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.jpg\" title=\"Animation via RequestAnimationFrame Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animation via RequestAnimationFrame Primer Tutorial<\/p><\/div>\n<p>Have you set up some animation using the Javascript setTimeout and\/or setInterval timer functions, and found yourself disappointed with a lack of smoothness of animation?  You are not alone.<\/p>\n<p>Have you tried (the good advice of) <a target=_blank title='requestAnimationFrame information ... thanks' href='https:\/\/www.paulirish.com\/2011\/requestanimationframe-for-smart-animating\/'>requestAnimationFrame<\/a> event logic in Javascript?  We&#8217;ve pieced together a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.html_GETME\" title=\"raf.html\">raf.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/raf.html\" title=\"Click picture\">proof of concept<\/a> that &#8220;colours in&#8221; the background of an initially white (with some headings and a colour picker in foreground) webpage.<\/p>\n<p>Hopefully this uses a smoother means of animation on your web browser too?!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d41456' onclick='var dv=document.getElementById(\"d41456\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41456' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d41471' onclick='var dv=document.getElementById(\"d41471\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41471' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Still within the &#8220;Proof of Concept&#8221; realms, today we add onto yesterday&#8217;s Animation via RequestAnimationFrame Primer Tutorial &#8220;colouring in&#8221; background pixels with a mouse and touch event driven additional functionality &#8220;set&#8221; allowing for &#8230; when user clicks first &#8220;in the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animation-via-requestanimationframe-event-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,14,37],"tags":[84,2720,400,2722,576,652,861,2219,2723,873,2721,997,2719,1125,1126,1319],"class_list":["post-41471","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-backgrout","tag-event","tag-foregound","tag-html","tag-javascript","tag-onclick","tag-onmousemove","tag-ontouchmove","tag-ontouchstart","tag-pixellate","tag-programming","tag-requestanimationframe","tag-setinterval","tag-settimeout","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41471"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=41471"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41471\/revisions"}],"predecessor-version":[{"id":41479,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41471\/revisions\/41479"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=41471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=41471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=41471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}