{"id":90,"date":"2020-08-08T14:31:38","date_gmt":"2020-08-08T14:31:38","guid":{"rendered":"https:\/\/www.zutopedia.com\/?page_id=90"},"modified":"2021-04-03T13:28:13","modified_gmt":"2021-04-03T13:28:13","slug":"binary-and-hexadecimal-numbers","status":"publish","type":"page","link":"https:\/\/www.zutopedia.com\/binary-and-hexadecimal-numbers\/","title":{"rendered":"Binary and hexadecimal numbers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"90\" class=\"elementor elementor-90\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a7141fa elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a7141fa\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fa1340f\" data-id=\"fa1340f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-3b33ccc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3b33ccc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b9750ef\" data-id=\"b9750ef\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-75f6b1e elementor-widget elementor-widget-image\" data-id=\"75f6b1e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"256\" height=\"373\" src=\"https:\/\/www.zutopedia.com\/wp-content\/uploads\/2020\/05\/chapter_1_small.jpg\" class=\"attachment-large size-large wp-image-27\" alt=\"Zuto: The Advenutres of a Computer Virus\" loading=\"lazy\" srcset=\"https:\/\/www.zutopedia.com\/wp-content\/uploads\/2020\/05\/chapter_1_small.jpg 256w, https:\/\/www.zutopedia.com\/wp-content\/uploads\/2020\/05\/chapter_1_small-206x300.jpg 206w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-5d5bcf2\" data-id=\"5d5bcf2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-655a549 elementor-widget elementor-widget-text-editor\" data-id=\"655a549\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Author: Udi Aharoni&nbsp; &nbsp; &nbsp; Illustrations: Gil Troitsa<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a323cd3 elementor-widget elementor-widget-heading\" data-id=\"a323cd3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"\/\">ZUTO: The Adventures of a Computer Virus<\/a><\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a93d9f elementor-widget elementor-widget-text-editor\" data-id=\"3a93d9f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>A book for computer-loving kids 9+<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6f9ccf2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6f9ccf2\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f32ef9d\" data-id=\"f32ef9d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ffacc8c elementor-widget elementor-widget-text-editor\" data-id=\"ffacc8c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>ZUTOPEDIA<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a73eb71 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a73eb71\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e40fac9\" data-id=\"e40fac9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8e39019 elementor-widget elementor-widget-text-editor\" data-id=\"8e39019\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><a href=\"\/\">Home<\/a> \u2022 <a href=\"\/binary-and-hexadecimal-numbers\">Binary and hexadecimal numbers<\/a> \u2022 <a href=\"\/logic-gates\">Logic gates<\/a> \u2022 <a href=\"\/bootstrapping\">Bootstrapping<\/a><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8464789 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8464789\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9d6b6f1\" data-id=\"9d6b6f1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-baddf34 elementor-widget elementor-widget-heading\" data-id=\"baddf34\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Binary and hexadecimal numbers<\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-68ba8d4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"68ba8d4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1cffbaa\" data-id=\"1cffbaa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4567006 elementor-widget elementor-widget-text-editor\" data-id=\"4567006\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><span style=\"font-family: verdana; font-size: 18px;\">Throughout the book the term &#8220;bit&#8221; is mentioned to refer to the digit 0 or 1. Here&#8217;s an interactive demo explaining how bits are used to represent numbers. Also, as the book&#8217;s characters drive around the hard drive in chapter 9, the driver mentions Hexadecimal numbers. We&#8217;ll explain them here too.<\/span><\/p>\n<p><span style=\"font-family: verdana; font-size: 18px;\">Here are four different kinds of counters. Click the + and &#8211; buttons below to experiment with them.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-afdbad1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"afdbad1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2371146\" data-id=\"2371146\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7e41f7e elementor-widget elementor-widget-html\" data-id=\"7e41f7e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<center>\r\n<canvas id=\"myCanvas\" width=\"320px\" height=\"380px\" style=\"\">\r\n<\/canvas><br\/>\r\n<button onclick=\"myAdd()\"  style=\"width:40px;height:40px;background-color:#008CBA;border:none;font-size:20px;border-radius:0px;color:black;\">+<\/button>\r\n<button onclick=\"mySub()\"  style=\"width:40px;height:40px;background-color:#008CBA;border:none;font-size:20px;border-radius:0px;color:black;\">-<\/button>\r\n<button class=\"myPrivate\"  onclick=\"myClear()\"  style=\"width:80px;height:40px;background-color:#008CBA;border:none;font-size:20px;border-radius:0px;color:black;\">Clear<\/button>\r\n<\/center>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nvar ctx,canvas,counters,counterLen,count,backColor,speed;\r\n\r\nvar MyCounter=function(base,x,y,dn,name) {\r\n  this.base=base;     \r\n  this.x=x;\r\n  this.y=y;\r\n  this.digitNum=dn;\r\n  \r\n  this.digits=[\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"A\",\"B\",\"C\",\"D\",\"E\",\"F\"];\r\n  \r\n  this.ds=32;\r\n  this.myWidth=(this.digitNum-1)*this.ds;\r\n  this.minX=this.x-this.myWidth\/2;\r\n  this.maxX=this.x+this.myWidth\/2;\r\n  this.marginX=this.ds\/2+4;\r\n  this.marginY=22;\r\n  this.marginYSmall=20;\r\n  this.spaceY=36;\r\n  this.offsetY=2;\r\n  \r\n  this.myGradient = ctx.createLinearGradient(this.x, this.y-this.marginY, this.x, this.y+this.marginY);\r\n  this.myGradient.addColorStop(0,\"#000\");\r\n  this.myGradient.addColorStop(0.3,\"#0000\");\r\n  this.myGradient.addColorStop(0.6,\"#0000\");\r\n  this.myGradient.addColorStop(1,\"#000\");\r\n  \r\n  this.name=name;\r\n  \r\n}\r\n\r\nMyCounter.prototype.draw=function() {\r\n  \r\n  ctx.font = \"bold 22pt Courier\";  \r\n  var cc=curCount;\r\n  var oy=0;\r\n  if (!Number.isInteger(cc)) {\r\n     cc=Math.floor(cc);\r\n\t oy=Math.floor((curCount-cc)*this.spaceY);\r\n  }\r\n   \r\n  ctx.fillStyle = \"#000\";\r\n  ctx.fillRect(this.minX-this.marginX,this.y-this.marginY,this.myWidth+this.marginX*2,this.marginY*2);  \r\n  \r\n  \/\/ctx.fillStyle = \"#000\";\t\r\n  \/\/ctx.fillText(\"Hello World\",10,this.y);\r\n  ctx.textAlign = \"center\";\r\n  ctx.textBaseline = \"middle\";\r\n  for (var i=0;i<this.digitNum;++i) {\r\n    d=cc%this.base;\t\r\n\tvar x=this.maxX-i*this.ds;\r\n\tctx.fillStyle = \"#fff\";\t\r\n\tctx.fillRect(x-10,this.y-this.marginYSmall,20,this.marginYSmall*2);  \t\r\n\tctx.fillStyle = \"#000\";\r\n\tif (oy==0) {\t\r\n\t   ctx.fillText(this.digits[d],x,this.y+this.offsetY);\t\r\n    } else {\t   \r\n\t   d2=(d+1)%this.base;       \t  \t   \r\n\t   ctx.fillText(this.digits[d],x,this.y-oy+this.offsetY);\t\r\n\t   ctx.fillText(this.digits[d2],x,this.y+this.spaceY-oy+this.offsetY);\t\r\n\t   if (d2!=0)\r\n\t     oy=0;\r\n\t}\t   \r\n\tcc=Math.floor(cc\/this.base);\r\n\t\r\n  }\r\n  ctx.fillStyle = this.myGradient;;\r\n  ctx.fillRect(this.minX-this.marginX,this.y-this.marginY,this.myWidth+this.marginX*2,this.marginY*2);  \r\n  \r\n\r\n  var cs=24;\r\n  ctx.fillStyle=backColor;\r\n  ctx.fillRect(this.minX-this.marginX,this.y-this.marginY-2-cs,this.myWidth+this.marginX*2,cs);  \r\n  ctx.fillRect(this.minX-this.marginX,this.y+this.marginY+2,this.myWidth+this.marginX*2,cs);  \r\n  \r\n\r\n  ctx.strokeStyle = \"#008CBA\";\r\n  var oo=1;\r\n  ctx.lineWidth = 3;\r\n  ctx.strokeRect(this.minX-this.marginX-oo,this.y-this.marginY-oo,\r\n                 this.myWidth+this.marginX*2+oo*2,this.marginY*2+oo*2);\r\n  \r\n  ctx.fillStyle=\"#000\";\r\n  ctx.font = \"13pt Arial\";\r\n  ctx.fillText(this.name,this.x,this.y-this.marginY-12);\r\n\r\n  \r\n}\r\n\r\nvar MyUnaryCounter=function(x,y,name) {  \r\n  this.x=x;    \r\n  this.y=y;\r\n  this.rows=8;\r\n  this.cols=32;\r\n  this.xx=6;\r\n  this.gap=2;\r\n  this.bgap=4;\r\n  this.myWidth=this.xx*this.cols+this.gap*(this.cols-1);\r\n  this.myHeight=this.xx*this.rows+this.gap*(this.rows-1);\r\n  this.minX=this.x-this.myWidth\/2;\r\n  this.maxX=this.x+this.myWidth\/2;       \r\n  this.name=name;\r\n  \r\n}\r\n\r\nMyUnaryCounter.prototype.draw=function() {\r\n    \r\n  var cc=count;  \r\n   \r\n  ctx.fillStyle = \"#000\";\r\n  ctx.fillRect(this.minX-this.bgap,this.y-this.bgap,this.myWidth+this.bgap*2,this.myHeight+this.bgap*2);\r\n  \r\n  ctx.fillStyle = \"#fff\";\t\r\n  for (var i=0;i<cc;++i) {\r\n    var x=i%this.cols;\t\r\n\tvar y=Math.floor(i\/this.cols);\r\n\t\/\/console.log('i',i);\r\n\tctx.fillRect(this.minX+x*(this.xx+this.gap),this.y+y*(this.xx+this.gap),this.xx,this.xx);\r\n  }\r\n    \r\n  ctx.fillStyle=\"#000\";\r\n  ctx.font = \"13pt Arial\";\r\n  ctx.textBaseline = \"middle\";\r\n  ctx.fillText(this.name,this.x,this.y-16);\r\n\r\n  ctx.strokeStyle = \"#008CBA\";\r\n  var oo=1;\r\n  ctx.lineWidth = 3;\r\n  ctx.strokeRect(this.minX-this.bgap-oo,this.y-this.bgap-oo,\r\n                 this.myWidth+this.bgap*2+oo*2,this.myHeight+this.bgap*2+oo*2);\r\n    \r\n  \r\n}\r\n\r\nfunction drawMain(x,midY,len) {  \r\n  if (curCount!=count) {\r\n     if (Math.abs(curCount-count)<speed)\r\n\t   curCount=count;\r\n\t else\r\n\t   curCount+=Math.sign(count-curCount)*speed;\r\n  }\r\n  backColor= \"#fff\";\r\n  \r\n  ctx.fillStyle =backColor;\r\n  var xx=canvas.width;\r\n  var yy=canvas.height;\r\n  ctx.fillRect(0,0,xx,yy);  \r\n  \r\n  ctx.font = \"16px Courier\";  \r\n  ctx.fillStyle = \"#000000\";  \r\n  for (var i=0;i<counterLen;++i)\r\n    counters[i].draw();\r\n\r\n}\r\n\r\n\r\nfunction myInitAnim() {   \r\n\r\n   speed=0.1;\r\n   canvas = document.getElementById(\"myCanvas\");   \r\n   ctx=canvas.getContext(\"2d\");\r\n   mid=canvas.width\/2;\r\n   counters=[];\r\n   var y=60,dy=80;\r\n   counters.push(new MyCounter(10,mid,60,3,\"Decimal Counter\"));\r\n   y+=dy;\r\n   counters.push(new MyCounter(2,mid,y,8,\"Binary Counter\"));\r\n   y+=dy;\r\n   counters.push(new MyCounter(16,mid,y,2,\"Hexadecimal Counter\"));   \r\n   y+=dy-16;\r\n   counters.push(new MyUnaryCounter(mid,y,\"Unary Counter\"));   \r\n   counterLen=counters.length;\r\n   count=0;\r\n   curCount=0;\r\n   setInterval(drawMain,30);     \r\n}\r\n\r\nmyInitAnim();\r\n\r\nfunction setSpeed() {\r\n   speed=Math.abs(curCount-count)\/10.0;\r\n}\r\n\r\nfunction myAdd() {  \r\n  count++;\r\n  if (count>255) count=255;\r\n  setSpeed();\r\n}\r\nfunction mySub() {\r\n  --count;\r\n  if (count<0)\r\n    count=0;\r\n  setSpeed();\t\r\n}\r\n\r\nfunction myClear() {\r\n  count=0;\r\n  curCount=0;\r\n  speed=0.1;  \r\n}\r\n\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-aedc6cb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"aedc6cb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9b368ae\" data-id=\"9b368ae\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-582318d elementor-widget elementor-widget-text-editor\" data-id=\"582318d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>The decimal counter should be pretty familiar. It simply shows the number of rectangles at the bottom panel in the usual fashion.<\/p><p>We designed it to look like a mechanical counter: it is made of 3 wheels, each one having the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. Here&#8217;s a picture of how one wheel looks like:<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6705e23 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6705e23\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a97f46c\" data-id=\"a97f46c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4541ab1 elementor-widget elementor-widget-image\" data-id=\"4541ab1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"120\" height=\"154\" src=\"https:\/\/www.zutopedia.com\/wp-content\/uploads\/2020\/08\/digit_wheel.jpg\" class=\"attachment-large size-large wp-image-98\" alt=\"Digit wheel of a mechanical decimal counter\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fb472f1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fb472f1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-577a1e3\" data-id=\"577a1e3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-45e5c9d elementor-widget elementor-widget-text-editor\" data-id=\"45e5c9d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Every time you click +, the first (right) wheel advances to the next digit: from 0 to 1, then from 1 to 2, etc. When the first wheel completes a whole round and returns to 0, the second wheel advances to the next digit, and so on.<\/p><p>The binary counter is very similar. The only difference is that each wheel has only two digits: 0 and 1. When you click + the first wheel rotates from 0 to 1. When you click again, the first wheel already completes a whole round and returns to 0, which means the second wheel now rotates from 0 to 1, and so on.<\/p><p>This counter too counts the number of rectangles in the bottom panel, but it shows this number in a different representation, called the a binary number, or base-2 numerals. When it shows &#8220;1 0&#8221; it doesn&#8217;t mean ten, as in the decimal counter, it means two.<\/p><p>Digital devices prefer to use binary numbers, since it&#8217;s easy to represent them using electrical wires, where current in a wire can be on (=1) or off (=0). When these devices display numbers on screen the usually convert them to decimal, so that humans will be able to read them more easily.<\/p><p>Sometimes though digital devices display numbers in hexadecimal representation, or base-16 numerals. The third counter above shows how they look like. Here every wheel has 16 digits: the usual ones, 0,1,2,3,4,5,6,7,8,9, then six more: A, B, C, D, E, F. The additional six use letter symbols, but they are still just digits. Any symbol can be used for the digits, it doesn&#8217;t matter.<\/p><p>The bottom panel which simply shows the number as a sequence of rectangles is called a unary counter. Using a single symbol to represent a number by simply repeating it over and over again is called the unary numeral system. It is not very convenient to use of course, since it requires a lot of writing when the numbers get large.<\/p><p>Next on our tour: how <a href=\"\/logic-gates\">logic gates<\/a> are used to manipulate binary numbers.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b768075 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b768075\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4418a08\" data-id=\"4418a08\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e57e842 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"e57e842\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4026e2 elementor-widget elementor-widget-text-editor\" data-id=\"b4026e2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Facebook:<br><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64d42a6 elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons\" data-id=\"64d42a6\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-7803d82\" href=\"https:\/\/www.facebook.com\/zuto11\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-facebook\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-629b576 elementor-widget elementor-widget-text-editor\" data-id=\"629b576\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\tOr visit <a  href=\"http:\/\/udiprod.com\/\">udiprod.com<\/a>\u00a0for the author&#8217;s home page with animated videos\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Author: Udi Aharoni&nbsp; &nbsp; &nbsp; Illustrations: Gil Troitsa ZUTO: The Adventures of a Computer Virus A book for computer-loving kids 9+ ZUTOPEDIA Home \u2022 Binary and hexadecimal numbers \u2022 Logic gates \u2022 Bootstrapping Binary and hexadecimal numbers Throughout the book the term &#8220;bit&#8221; is mentioned to refer to the digit 0 or 1. Here&#8217;s an [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":151,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":[],"_links":{"self":[{"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/pages\/90"}],"collection":[{"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":0,"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/media\/151"}],"wp:attachment":[{"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}