{"id":53176,"date":"2021-09-05T03:01:50","date_gmt":"2021-09-04T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53176"},"modified":"2021-09-04T11:04:02","modified_gmt":"2021-09-04T01:04:02","slug":"prime-numbers-fractional-favicon-canvas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-fractional-favicon-canvas-tutorial\/","title":{"rendered":"Prime Numbers Fractional Favicon Canvas Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Prime Numbers Fractional Favicon Canvas Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/favicon_animated_canvas.gif\" title=\"Prime Numbers Fractional Favicon Canvas Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Prime Numbers Fractional Favicon Canvas Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Prime Numbers Fractional Favicon Tutorial' href='#pnfft'>Prime Numbers Fractional Favicon Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\nWhat&#8217;s the HTML<font size=1>5<\/font> <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'><b>canvas<\/b><\/a> element got to do with web browser tab icon <i>&#8220;favicon&#8221;<\/i> graphic content?\n<\/p><\/blockquote>\n<p>Well, as per the <a target=_blank title='Excellent advice ideas' href='https:\/\/www.geeksforgeeks.org\/how-to-use-animation-on-favicon-image\/'>excellent advice ideas on this webpage<\/a>, thanks, we can use the <b>canvas<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;canvas id=\"canvas\" width=32 height=32 style=\"display:none;\"&gt;&lt;\/canvas&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; (static HTML, as above) element as a conduit to &#8230;<\/p>\n<ul>\n<li>[canvasContent].clearRect(0,0,32,32);<\/li>\n<li>[canvasContent].drawImage([imgObject],0,0,32,32);   \/\/ via <font color=green>saved away data URI as per [canvas].toDataURL(&#8220;image\/png&#8221;)<\/font> &#8230; to a global internal Javascript array &#8230;<\/li>\n<li>enhance that content with some <font color=purple>(canvas graphics, slightly everchanging) line work<\/font> &#8230;<br \/>\n<code><br \/>\nvar datauris=[];<br \/>\nvar img=null;<br \/>\nvar canvas=null;<br \/>\nvar context=null;<br \/>\nvar ioffset=0, ifactor=1;<br \/>\nvar rldone='';<br \/>\n<br \/>\nfunction arsthen() {<br \/>\n      var ij=0;<br \/>\n      if (document.getElementById('myicon')) {<br \/>\n      if (rldone != '') {<br \/>\n      ij=eval(-1 + eval(-1 * eval('' + rldone<font color=blue>.trim()<\/font>)));<br \/>\n      }<br \/>\n      if (eval('' + datauris.length) &lt; 6) {<br \/>\n        img = new Image();<br \/>\n        img.onload = function() {<br \/>\n          <font color=purple>context.clearRect(0,0,32,32);<br \/>\n          context.drawImage(img, 0, 0, 32, 32);<\/font><br \/>\n          <font color=green>datauris.push(canvas.toDataURL('image\/png'));<\/font><br \/>\n        };<br \/>\n        img.src='\/favicon' + rldone<font color=blue>.trim()<\/font> + '.ico';<br \/>\n        document.getElementById('myicon').href='\/favicon' + rldone<font color=blue>.trim()<\/font> + '.ico';<br \/>\n      } else {<br \/>\n        if (1 == 1) {<br \/>\n        img = new Image();<br \/>\n        img.onload = function() {<br \/>\n          <font color=purple>context.clearRect(0,0,32,32);<br \/>\n          context.drawImage(img, 0, 0, 32, 32);<br \/>\n          var zz=0;<br \/>\n          var tt=32;<br \/>\n          zz=Math.abs(ioffset);<br \/>\n          tt=eval(32 - Math.abs(ioffset));<br \/>\n<br \/> <br \/>\n          if (ifactor == 1) {<br \/>\n            ioffset++;<br \/>\n            if (ioffset &gt;= 14) {<br \/>\n              ifactor=-1;<br \/>\n            }<br \/>\n          } else {<br \/>\n            ioffset--;<br \/>\n            if (ioffset &lt;= 1) {<br \/>\n              ifactor=1;<br \/>\n            }<br \/>\n          }<br \/>\n<br \/> <br \/>\n          console.log('zz=' + zz + ' and tt=' + tt + ' and ioffset=' + ioffset);<br \/>\n          \/\/ Thanks to https:\/\/www.geeksforgeeks.org\/how-to-use-animation-on-favicon-image\/<br \/>\n          var linerGradient = context.createLinearGradient(zz, zz, tt, tt);<br \/>\n          linerGradient.addColorStop(0, '#8be8a7');<br \/>\n          linerGradient.addColorStop(1, '#297d4c');<br \/>\n          context.strokeStyle = linerGradient;<br \/>\n          context.lineWidth = 4;<br \/>\n          context.beginPath();<br \/>\n          context.moveTo(zz, zz);<br \/>\n          context.lineTo(tt, zz);<br \/>\n          context.moveTo(tt, zz);<br \/>\n          context.lineTo(tt, tt);<br \/>\n          context.moveTo(tt, tt);<br \/>\n          context.lineTo(zz, tt);<br \/>\n          context.moveTo(zz, tt);<br \/>\n          context.lineTo(zz, zz);<br \/>\n          context.stroke();<br \/>\n          document.getElementById('myicon').href=canvas.toDataURL('image\/png'); \/\/datauris[ij];<\/font><br \/>\n        };<br \/>\n        img.src=<font color=green>datauris[ij]<\/font>;<br \/>\n        } else {<br \/>\n        document.getElementById('myicon').href=<font color=green>datauris[ij]<\/font>;<br \/>\n        }<br \/>\n        console.log('ij=' + ij + ' and datauris length is ' + datauris[ij].length);<br \/>\n      }<br \/>\n      if (rldone == '') {<br \/>\n      rldone='-2';<br \/>\n      <font color=blue>} else if (rldone != rldone.trim()) {<br \/>\n      rldone='' + eval(1 + eval('' + rldone.trim())) + ' ';<br \/>\n      if (rldone == '-1 ') { rldone=''; }<br \/>\n      }<\/font> else {<br \/>\n      rldone='' + eval(-1 + eval('' + rldone <font color=blue>.trim()<\/font>));<br \/>\n      if (rldone == '-7') { rldone=<font color=blue>'-5 '<\/font>; }<br \/>\n      }<br \/>\n      } else {<br \/>\n      var fi=document.createElement('link');<br \/>\n      fi.rel='icon';<br \/>\n      fi.id='myicon';<br \/>\n      if (rldone == '') {<br \/>\n      if (datauris.length == 0) {<br \/>\n        img = new Image();<br \/>\n        img.onload = function() {<br \/>\n          <font color=purple>context.clearRect(0,0,32,32);<br \/>\n          context.drawImage(img, 0, 0, 32, 32);<\/font><br \/>\n          <font color=green>datauris.push(canvas.toDataURL('image\/png'));<\/font><br \/>\n        };<br \/>\n        img.src='\/favicon' + rldone.trim() + '.ico';<br \/>\n      }<br \/>\n      fi.href='\/favicon' + rldone.trim() + '.ico';<br \/>\n      rldone='-2';<br \/>\n      } else {<br \/>\n      if (eval('' + datauris.length) &lt; 6) {<br \/>\n        img = new Image();<br \/>\n        img.onload = function() {<br \/>\n          <font color=purple>context.clearRect(0,0,32,32);<br \/>\n          context.drawImage(img, 0, 0, 32, 32);<\/font><br \/>\n          <font color=green>datauris.push(canvas.toDataURL('image\/png'))<\/font>;<br \/>\n        };<br \/>\n        img.src='\/favicon' + rldone <font color=blue>.trim()<\/font> + '.ico';<br \/>\n      }<br \/>\n      fi.href='\/favicon' + rldone <font color=blue>.trim()<\/font> + '.ico';<br \/>\n      rldone='' + eval(-1 + eval('' + rldone <font color=blue>.trim()<\/font>));<br \/>\n      if (rldone == '-7') { rldone=''; }<br \/>\n      }<br \/>\n      document.head.appendChild(fi);<br \/>\n      }<br \/>\n      setTimeout(arsthen, 1000);<br \/>\n}<br \/>\n<br \/>\nsetTimeout(arsthen, 1000);<br \/>\n<\/code><br \/>\n &#8230; while we are at it, <font color=blue>reordering so that a white &#8220;favicon&#8221; no longer suddenly becomes an original &#8220;favicon&#8221;<\/font> <font color=blue size=1>(a new paradigm part introduced, today, for the blog you are reading, also)<\/font>\n<\/li>\n<li>[link].href=[canvas].toDataURL(&#8220;image\/png&#8221;);<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-fractional-favicon-canvas-tutorial\/'>New Prime Numbers Fractional Favicon Canvas Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pnfft'>Previous relevant <a target=_blank title='Prime Numbers Fractional Favicon Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-fractional-favicon-tutorial\/'>Prime Numbers Fractional Favicon 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\/fractional_prime.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Prime Numbers Fractional Favicon Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/favicon_animated.gif\" title=\"Prime Numbers Fractional Favicon Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Prime Numbers Fractional Favicon Tutorial<\/p><\/div>\n<p>So what&#8217;s the &#8220;favicon&#8221; in today&#8217;s blog posting title?  If none the wiser, what about the (pretty much standalone Javascript) code below?<\/p>\n<p><code><br \/>\nvar rldone='';<br \/>\n<br \/>\nfunction arsthen() {<br \/>\n      if (document.getElementById('myicon')) {<br \/>\n      document.getElementById('myicon').href='\/favicon' + rldone + '.ico';<br \/>\n      if (rldone == '') {<br \/>\n      rldone='-2';<br \/>\n      } else {<br \/>\n      rldone='' + eval(-1 + eval('' + rldone));<br \/>\n      if (rldone == '-7') { rldone=''; }<br \/>\n      }<br \/>\n      } else {<br \/>\n      var fi=document.createElement('link');<br \/>\n      fi.rel='icon';<br \/>\n      fi.id='myicon';<br \/>\n      if (rldone == '') {<br \/>\n      fi.href='\/favicon' + rldone + '.ico';<br \/>\n      rldone='-2';<br \/>\n      } else {<br \/>\n      fi.href='\/favicon' + rldone + '.ico';<br \/>\n      rldone='' + eval(-1 + eval('' + rldone));<br \/>\n      if (rldone == '-7') { rldone=''; }<br \/>\n      }<br \/>\n      document.head.appendChild(fi);<br \/>\n      }<br \/>\n      setTimeout(arsthen, 1000);<br \/>\n}<br \/>\n<br \/>\nsetTimeout(arsthen, 1000);<br \/>\n<\/code><\/p>\n<p>If you&#8217;ve guessed &#8220;is it something to do with that little icon to the left of the web browser tabs?&#8221; you&#8217;d be <strike>right<\/strike>correct.  In fact, we&#8217;re trying to apply some rudimentary animation to it today &#8230;<\/p>\n<ul>\n<li>not by involving any animated GIF files (though that may work) &#8230; but &#8230; and this is not the only way &#8230; and this does not work everywhere, but &#8230;<\/li>\n<li>use Javascript DOM to periodically change the graphic content of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html---GETME\" title=\"fractional_prime.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html---GETME\" title=\"fractional_prime.html\">&#8220;proof of concept&#8221; fractional_prime.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html\" title=\"Click picture\">live run<\/a> link on top of yesterday&#8217;s <a title='Variety of Prime Numbers Fractional Forms Tutorial' href='#vpnfft'>Variety of Prime Numbers Fractional Forms Tutorial<\/a>&#8216;s progress<\/li>\n<\/ul>\n<p>In fact, it&#8217;s a bit obscure, perhaps, but we image edited &#8230;<\/p>\n<table>\n<tr>\n<th>Started with favicon.ico &#8230;<\/th>\n<th> &#8230; then created favicon-2.ico &#8230;<\/th>\n<th> &#8230; then created  favicon-3.ico &#8230;<\/th>\n<th> &#8230; then created favicon-4.ico &#8230;<\/th>\n<th> &#8230; then created favicon-5.ico &#8230;<\/th>\n<th> &#8230; then created favicon-6.ico &#8230;<\/th>\n<\/tr>\n<tr>\n<td><img src='\/\/www.rjmprogramming.com.au\/favicon.ico'><\/img><\/td>\n<td><img src='\/\/www.rjmprogramming.com.au\/favicon-2.ico'><\/img><\/td>\n<td><img src='\/\/www.rjmprogramming.com.au\/favicon-3.ico'><\/img><\/td>\n<td><img src='\/\/www.rjmprogramming.com.au\/favicon-4.ico'><\/img><\/td>\n<td><img src='\/\/www.rjmprogramming.com.au\/favicon-5.ico'><\/img><\/td>\n<td><img src='\/\/www.rjmprogramming.com.au\/favicon-6.ico'><\/img><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; not with the <a target=_blank title='Inkscape' href='https:\/\/inkscape.org'>Inkscape<\/a> (vector) image editor <a target=_blank title='Link to Inkscape work' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/inkscape-vector-image-editor-logo-tutorial\/'>we created favicon.ico with<\/a>, but, good ol&#8217; <a target=_blank title='Gimp' href='https:\/\/gimp.org'>Gimp<\/a>, because all the &#8220;then created&#8221; bits just involved &#8220;whiting&#8221; some non-white pixels from a previous incarnation via Gimp &#8230;<\/p>\n<ul>\n<li>zoom in a lot &#8230;<\/li>\n<li>set foreground and background colours to white &#8230;<\/li>\n<li>set the  &#8220;Bucket Fill Tool&#8221; &#8230; then &#8230;<\/li>\n<li>click on the next non-white area of image to whiten via a &#8220;Bucket Fill Tool&#8221; click (causing contiguous pixels of that same non-white colour to become white)<\/li>\n<li>File -&gt; Export As -&gt; Icon Details &#8230; 4pp, 1-bit aplha, 16-slot pallette &#8230; to that new name of image file (as mentioned above)<\/li>\n<\/ul>\n<p> &#8230; as you can see a bit of with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/favicon_animated.gif\" title=\"Tutorial picture\">animated GIF presentation tutorial picture<\/a>.<\/p>\n<p>We also applied that Javascript DOM way of doing this to the blog you are reading, and RJM Programming&#8217;s <a target=_blank title='Landing Page' href='\/\/www.rjmprogramming.com.au\/'>Landing Page<\/a> (and friends).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-fractional-favicon-tutorial\/'>Prime Numbers Fractional Favicon Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vpnfft'>Previous relevant <a target=_blank title='Variety of Prime Numbers Fractional Forms Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/variety-of-prime-numbers-fractional-forms-tutorial\/'>Variety of Prime Numbers Fractional Forms 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\/fractional_prime.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Variety of Prime Numbers Fractional Forms Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime_twin_co.jpg\" title=\"Variety of Prime Numbers Fractional Forms Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Variety of Prime Numbers Fractional Forms Tutorial<\/p><\/div>\n<p>Previous work of <a title='Prime Numbers Fractional Forms Tutorial' href='#pnfft'>Prime Numbers Fractional Forms Tutorial<\/a> and preceeding dealt with &#8230;<\/p>\n<ul>\n<li><font size=1>your garden variety<\/font> prime number &#8230; but then we read this <a target=_blank title='Various Types of Numbers' href='https:\/\/www.math-only-math.com\/various-types-of-numbers.html'>Various Types of Numbers<\/a> which set us straight at categorizing also &#8230;<\/li>\n<li>even numbers (only 2 out of all the even positive counting numbers, is a prime number) &#8230; but <strike>even<\/strike>odd<font size=1>ly<\/font> &#8230;<\/li>\n<li>odd numbers &#8230; and back to prime number interest &#8230;<\/li>\n<li>composite numbers (ie. not a prime number) &#8230;<\/li>\n<li>co-prime numbers &#8230;<br \/>\n<blockquote cite='https:\/\/www.math-only-math.com\/various-types-of-numbers.html'><p>\nCo-prime Numbers<br \/>\n<br \/>\nTwo numbers are said to be co-prime if they do not have a common factor other than 1 or two numbers whose HCF is 1 called co-prime numbers.\n<\/p><\/blockquote>\n<p> &#8230; which by that definition do not necessarily have to be prime numbers themselves, <strike>even<font size=1>tual<\/font><\/strike>odd<font size=1>ly<\/font>\n<\/li>\n<li>twin prime numbers &#8230;<br \/>\n<blockquote cite='https:\/\/www.math-only-math.com\/various-types-of-numbers.html'><p>\nTwin Prime Numbers<br \/>\n<br \/>\nTwin prime numbers are the two prime numbers whose difference is 2.\n<\/p><\/blockquote>\n<p> &#8230; the (coding) solution for which centres around the use of HTML iframe elements &#8230;<br \/>\n<code><br \/>\n&lt;iframe id=iupper style='display:none;' <font color=blue>onload='fupper(this);'<\/font> src='.\/fractional_prime.html'&gt;&lt;\/iframe&gt;<br \/>\n&lt;iframe id=ilower style='display:none;' <font color=blue>onload='flower(this);'<\/font> src='.\/fractional_prime.html'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; and their <font color=blue>onload<\/font> event Javascript logics &#8230;<br \/>\n<code><br \/>\nvar first=0, acontou=null, acontoi=null;<br \/>\n<br \/>\nfunction fupper(iois) {<br \/>\n       if (first &gt;= 2) {<br \/>\n       acontou = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (acontou != null) {<br \/>\n       if (acontou.document) { acontou = acontou.document; }<br \/>\n       if (acontou.body != null) {<br \/>\n         if (acontou.body.innerHTML.indexOf(' is a ' + 'prim' + 'e ') != -1) {<br \/>\n           document.getElementById('shuh').innerHTML+='  It has a &lt;a target=_blank href=https:\/\/www.math-only-math.com\/various-types-of-numbers.html&gt;twin prime number&lt;\/a&gt; ' + decodeURIComponent(iois.src.split('number=')[1].split('&')[0].split('#')[0]).split('.')[0] + '. ';<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       first++;<br \/>\n}<br \/>\n<br \/>\nfunction flower(iois) {<br \/>\n       if (first &gt;= 2) {<br \/>\n       acontoi = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (acontoi != null) {<br \/>\n       if (acontoi.document) { acontoi = acontoi.document; }<br \/>\n       if (acontoi.body != null) {<br \/>\n         if (acontoi.body.innerHTML.indexOf(' is a ' + 'prim' + 'e ') != -1) {<br \/>\n           document.getElementById('shuh').innerHTML+='  It has a &lt;a target=_blank href=https:\/\/www.math-only-math.com\/various-types-of-numbers.html&gt;twin prime number&lt;\/a&gt; ' + decodeURIComponent(iois.src.split('number=')[1].split('&')[0].split('#')[0]).split('.')[0] + '. ';<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       first++;<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>If you are curious here, try out <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html--GETME\" title=\"fractional_prime.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html--GETME\" title=\"fractional_prime.html\">&#8220;proof of concept&#8221; fractional_prime.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/variety-of-prime-numbers-fractional-forms-tutorial\/'>Variety of Prime Numbers Fractional Forms Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pnfft'>Previous relevant <a target=_blank title='Prime Numbers Fractional Forms Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-fractional-forms-tutorial\/'>Prime Numbers Fractional Forms 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\/fractional_prime.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Prime Numbers Fractional Forms Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime_fmodes.jpg\" title=\"Prime Numbers Fractional Forms Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Prime Numbers Fractional Forms Tutorial<\/p><\/div>\n<p>Onto the recent <a title='Prime Numbers Primer Tutorial' href='#pnpt'>Prime Numbers Primer Tutorial<\/a> we introduce some ideas regarding representing a fraction on a webpage, some a bit on the whimsical side, when it comes to matching emojis to ancient concepts, so that you can represent the fractional parts of our prime numbers web application in the following ways &#8230;<\/p>\n<table>\n<tr>\n<th>Options<\/th>\n<th>Display<\/th>\n<\/tr>\n<tr>\n<td>supsub<\/td>\n<td>sup numerator and sub denominator<\/td>\n<\/tr>\n<tr>\n<td>boring<\/td>\n<td>no sup nor sub nor i nor b<\/td>\n<\/tr>\n<tr>\n<td>sup<\/td>\n<td>sup numerator only<\/td>\n<\/tr>\n<tr>\n<td>sub<\/td>\n<td>sub denominator only<\/td>\n<\/tr>\n<tr>\n<td>ib<\/td>\n<td>italic numerator and bold denominator<\/td>\n<\/tr>\n<tr>\n<td>bi<\/td>\n<td>bold numerator and italic denominator<\/td>\n<\/tr>\n<tr>\n<td>emoji<\/td>\n<td>emoji<\/td>\n<\/tr>\n<tr>\n<td>roman<\/td>\n<td>roman numerals (thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/9083037\/convert-a-number-into-a-roman-numeral-in-javascript\/9083076' href='https:\/\/stackoverflow.com\/questions\/9083037\/convert-a-number-into-a-roman-numeral-in-javascript\/9083076'>https:\/\/stackoverflow.com\/questions\/9083037\/convert-a-number-into-a-roman-numeral-in-javascript\/9083076<\/a>)<\/td>\n<\/tr>\n<tr>\n<td>egyptian<\/td>\n<td>egyptian (thanks to <a target=_blank title='https:\/\/www.dummies.com\/education\/math\/pre-algebra\/10-alternative-numeral-and-number-systems\/' href='https:\/\/www.dummies.com\/education\/math\/pre-algebra\/10-alternative-numeral-and-number-systems\/'>https:\/\/www.dummies.com\/education\/math\/pre-algebra\/10-alternative-numeral-and-number-systems\/<\/a>)<\/td>\n<\/tr>\n<tr>\n<td>hexadecimal<\/td>\n<td>hexadecimal (featuring the [number].<a target=_blank title='Javascript toString m,ethod information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_tostring_number.asp'>toString<\/a>(16) idea)<\/td>\n<\/tr>\n<\/table>\n<p>We chose this tutorial and its associated web application to give an airing to some of those &#8220;little&#8221; (but often very useful) textual HTML elements &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sup.asp'>sup<\/a> superscript<\/li>\n<li><a target=_blank title='HTML sub tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sub.asp'>sub<\/a> subscript<\/li>\n<li><a target=_blank title='HTML italic tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_i.asp'>i<\/a> italic<\/li>\n<li><a target=_blank title='HTML bold tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_b.asp'>b<\/a> bold (or these days perhaps you should be moving to <a target=_blank title='HTML strong tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_strong.asp'>strong<\/a>)<\/li>\n<\/ul>\n<p> &#8230; the top two of which we think are very apt applied, optionally, but as the default arrangement, for the fractional values shown in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html-GETME\" title=\"fractional_prime.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html-GETME\" title=\"fractional_prime.html\">&#8220;proof of concept&#8221; fractional_prime.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-fractional-forms-tutorial\/'>Prime Numbers Fractional Forms Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pnpt'>Previous relevant <a target=_blank title='Prime Numbers Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-primer-tutorial\/'>Prime Numbers 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\/fractional_prime.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Prime Numbers Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.jpg\" title=\"Prime Numbers Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Prime Numbers Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve been itching to do a &#8220;Prime Numbers Primer Tutorial&#8221; but haven&#8217;t found an interesting enough &#8220;in&#8221;.  But I had occasion to want to count down an hour long period of time the other day, and wondered at the number patterns, or not, as the case may be that thinking about the positive integers involved, and whether they represent a <a target=_blank title='Prime number information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Prime_number'>prime number<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Prime_number'><p>\nA prime number (or a prime) is a natural number greater than 1 that is not a product of two smaller natural numbers. A natural number greater than 1 that is not prime is called a composite number. For example, 5 is prime because the only ways of writing it as a product, 1 \u00d7 5 or 5 \u00d7 1, involve 5 itself. However, 4 is composite because it is a product (2 \u00d7 2) in which both numbers are smaller than 4. Primes are central in number theory because of the fundamental theorem of arithmetic: every natural number greater than 1 is either a prime itself or can be factorized as a product of primes that is unique up to their order.Prime Numbers Primer Tutorial\n<\/p><\/blockquote>\n<p> &#8230; or not.  That whiled away that hour and made me think to involve fractions as well as these &#8220;prime number&#8221; considerations might make for a slightly interesting &#8220;take&#8221; on this &#8220;well worn&#8221; subject <font size=1>(or the uncharitable might say &#8230; &#8220;looking for patterns where there are none&#8221;)<\/font>.  Our major Javascript function goes like &#8230;<\/p>\n<p><code><br \/>\nfunction fcalc() {<br \/>\n  var assessment=' is a prime number.';<br \/>\n  var innards='', facline='&lt;tr id=tr2>&lt;\/tr>', divline='&lt;tr id=tr3>&lt;\/tr>', diffsline='&lt;tr id=tr4>&lt;td colspan=' + divisors.length + '>&lt;table style=\"width:100%;text-align:center;\" border=1>&lt;tr>&lt;td id=td0>&lt;\/td>&lt;\/TR>&lt;\/table>&lt;\/td>&lt;\/tr>';<br \/>\n  var lastii=-1;<br \/>\n  var huhti=1, rect=null, lastrect=null;<br \/>\n  for (var ii=mynum; ii>=1; ii--) {<br \/>\n    if (('' + eval(mynum \/ ii)).indexOf('.') == -1) {<br \/>\n      divisors.push(ii);<br \/>\n      if (eval('' + divisors.length) > 2) { assessment=' is not a prime number.'; }<br \/>\n      facline=facline.replace('&lt;\/tr>', '&lt;td>1\/' + ii + '&lt;\/td>&lt;\/tr>');<br \/>\n      divline=divline.replace('&lt;\/tr>', '&lt;td id=dt' + divisors.length + '>' + eval(mynum \/ ii) + '&lt;\/td>&lt;\/tr>');<br \/>\n      if (('' + lastii).indexOf('-') != -1) {<br \/>\n        lastii=eval(mynum \/ ii);<br \/>\n      } else {<br \/>\n        diffs.push(eval(eval(mynum \/ ii) - lastii));<br \/>\n        diffsline=diffsline.replace('&lt;\/TR>', '&lt;td id=td' + diffs.length + '>' + eval(eval(mynum \/ ii) - lastii) + '&lt;\/td>&lt;\/TR>');<br \/>\n        lastii=eval(mynum \/ ii);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  innards+='&lt;tr id=tr1>&lt;td colspan=' + divisors.length + '>&lt;a onclick=ask(); style=\"cursor:pointer;text-decoration:underline;\">' + mynum + '&lt;\/a>&lt;span id=shuh>' + assessment + '&lt;\/span>&lt;\/td>&lt;\/tr>' + facline + divline + diffsline.replace(' colspan=0', ' colspan=' + divisors.length).replace('&lt;\/TR>','&lt;td id=xxx>&lt;\/td>&lt;\/tr>');<br \/>\n  document.getElementById('mytable').innerHTML=innards;<br \/>\n  while (document.getElementById('dt' + huhti)) {<br \/>\n    rect=document.getElementById('dt' + huhti).getBoundingClientRect();<br \/>\n    if (huhti == 1) {<br \/>\n      document.getElementById('td0').style.width='' + eval(eval('' + rect.width) \/ 2) + 'px';<br \/>\n      document.getElementById('xxx').style.width='' + eval(eval('' + rect.width) \/ 2) + 'px';<br \/>\n    }<br \/>\n    if (document.getElementById('dt' + eval(1 + huhti))) {<br \/>\n    if (lastrect) {<br \/>\n      \/\/alert( eval(eval(eval('' + rect.x) - eval('' + lastrect.x)) \/ 2));<br \/>\n      \/\/document.getElementById('td' + huhti).style.left='' + eval(eval(eval('' + rect.left) - eval('' + lastrect.left)) \/ 2) + 'px';<br \/>\n      document.getElementById('td' + huhti).style.width='' + lastrect.width + 'px';<br \/>\n    } else {<br \/>\n      document.getElementById('td' + huhti).style.width='' + rect.width + 'px';<br \/>\n    }<br \/>\n    }<br \/>\n    lastrect=rect;<br \/>\n    huhti++;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; for a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html_GETME\" title=\"fractional_prime.html\">&#8220;proof of concept&#8221; fractional_prime.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fractional_prime.html\" title=\"Click picture\">live run<\/a> link for you to try, should you be curious.<\/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='#d53098' onclick='var dv=document.getElementById(\"d53098\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53098' 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='#d53141' onclick='var dv=document.getElementById(\"d53141\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/fraction\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53141' 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='#d53146' onclick='var dv=document.getElementById(\"d53146\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/composite\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53146' 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='#d53169' onclick='var dv=document.getElementById(\"d53169\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/favicon\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53169' 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='#d53176' onclick='var dv=document.getElementById(\"d53176\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53176' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Further to yesterday&#8217;s Prime Numbers Fractional Favicon Tutorial &#8230; What&#8217;s the HTML5 canvas element got to do with web browser tab icon &#8220;favicon&#8221; graphic content? Well, as per the excellent advice ideas on this webpage, thanks, we can use the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/prime-numbers-fractional-favicon-canvas-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,184,2318,341,354,3757,3760,1518,491,576,584,587,652,752,3756,870,3740,3741,997,3754,3753,1238,2324,1319,3758,2257],"class_list":["post-53176","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-canvas","tag-composite","tag-display","tag-dom","tag-even","tag-favicon","tag-fraction","tag-gimp","tag-html","tag-icon","tag-iframe","tag-javascript","tag-mathematics","tag-odd","tag-onload","tag-prime","tag-prime-number","tag-programming","tag-sub","tag-sup","tag-table","tag-todataurl","tag-tutorial","tag-twin","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53176"}],"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=53176"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53176\/revisions"}],"predecessor-version":[{"id":53193,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53176\/revisions\/53193"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}