{"id":132,"date":"2020-08-15T14:15:21","date_gmt":"2020-08-15T14:15:21","guid":{"rendered":"https:\/\/www.zutopedia.com\/?page_id=132"},"modified":"2021-04-03T13:27:55","modified_gmt":"2021-04-03T13:27:55","slug":"logic-gates","status":"publish","type":"page","link":"https:\/\/www.zutopedia.com\/logic-gates\/","title":{"rendered":"Logic Gates"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"132\" class=\"elementor elementor-132\">\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-9329061 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9329061\" 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-137e79e\" data-id=\"137e79e\" 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-72b6efe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"72b6efe\" 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-8fd8ebd\" data-id=\"8fd8ebd\" 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-3fc4918 elementor-widget elementor-widget-image\" data-id=\"3fc4918\" 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-91b7c04\" data-id=\"91b7c04\" 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-23fe411 elementor-widget elementor-widget-text-editor\" data-id=\"23fe411\" 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-ff91689 elementor-widget elementor-widget-heading\" data-id=\"ff91689\" 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-1ba0bf8 elementor-widget elementor-widget-text-editor\" data-id=\"1ba0bf8\" 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-447b6dd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"447b6dd\" 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-09234ee\" data-id=\"09234ee\" 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-cadfe10 elementor-widget elementor-widget-text-editor\" data-id=\"cadfe10\" 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-42f6de2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"42f6de2\" 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-321d25d\" data-id=\"321d25d\" 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-884f45f elementor-widget elementor-widget-text-editor\" data-id=\"884f45f\" 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-0721886 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0721886\" 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-738c54b\" data-id=\"738c54b\" 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-cdea7d7 elementor-widget elementor-widget-heading\" data-id=\"cdea7d7\" 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\">Logic Gates<\/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-db4081a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"db4081a\" 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-671d5cf\" data-id=\"671d5cf\" 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-f5b35a9 elementor-widget elementor-widget-text-editor\" data-id=\"f5b35a9\" 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;\"><span style=\"font-size: 18px;\">After we explained about <a href=\"\/binary-and-hexadecimal-numbers\">binary numbers<\/a>, here&#8217;s how computers work with them.<\/span><\/span><\/p><p><span style=\"font-family: verdana;\"><span style=\"font-size: 18px;\">Inside a computer, a wire with electricity running through it represents the digit 1, and when there&#8217;s no electricity it represents the digit 0. A single such digit is called a bit.<\/span><\/span><\/p><p><span style=\"font-family: verdana;\"><span style=\"font-size: 18px;\">We can manipulate bits using logic gates.\u00a0<\/span><\/span><span style=\"font-size: 18px; font-family: verdana;\">Here are 3 examples. Click the orange switches to see them in action.<\/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-7c4770b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c4770b\" 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-0dccbd4\" data-id=\"0dccbd4\" 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-a4af85a elementor-widget elementor-widget-html\" data-id=\"a4af85a\" 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=\"myCanvas1\" width=\"320px\" height=\"360px\">\r\n<\/canvas>\r\n<\/center>\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-da53dc0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"da53dc0\" 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-7ce0a94\" data-id=\"7ce0a94\" 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-c3c538c elementor-widget elementor-widget-text-editor\" data-id=\"c3c538c\" 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 &#8220;And gate&#8221; outputs 1 if both its inputs are 1.<\/p><p>The &#8220;Or gate&#8221; outputs 1 if either of its inputs is 1.<\/p><p>The &#8220;Xor gate&#8221; outputs 1 if one of its inputs is 1, but not both.<\/p><p>Here&#8217;s how we can combine such gates to build an adding machine, or an Adder. Click the orange switches to see it work, and see explanation below.<\/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-32a08f9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"32a08f9\" 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-de970b6\" data-id=\"de970b6\" 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-dc6d206 elementor-widget elementor-widget-html\" data-id=\"dc6d206\" 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=\"myCanvas2\" width=\"320px\" height=\"420px\">\r\n<\/canvas>\r\n<\/center>\r\n\r\n<script type=\"text\/javascript\">\r\n\t\r\nvar gateColor=\"#0bd\",\r\n    scolor1=\"#d30\",\r\n\tscolor2=\"#F62\",\r\n\twireOnColor=\"#d30\",\r\n\tpanelColor=\"#AAA\";\r\n\r\n\r\nvar MyConnector=function(wws,iis) {\r\n   this.bit=0;   \r\n   this.watchers=[];   \r\n   if (wws) {\r\n     for (var i=0;i<wws.length;++i)\r\n\t    addWatcher(wws[i],iis[i]);\r\n   }\r\n}\r\n\r\nMyConnector.prototype.setBit=function(b) {\r\n   this.bit=b;\r\n   for(var i=0;i<this.watchers.length;++i)\r\n     this.watchers[i].noteWatcher();\r\n}\t \r\nMyConnector.prototype.addWatcher=function(o,ii) {\r\n  this.watchers.push(o);\r\n  o.inConnector[ii]=this;\r\n}\r\n\r\n\r\nvar sinkConnector=new MyConnector();\r\n\r\nfunction connectSink(obj,nn) {\r\n  obj.inConnector=[];\r\n  obj.outConnector=new MyConnector();\r\n  for (var i=0;i<nn;++i){\r\n    obj.inConnector.push(sinkConnector);\r\n  }\r\n}\r\n\r\nvar MyGate=function(ctx,tp,x,y,rot,sz) {\r\n  this.ctx=ctx;\r\n  this.tp=tp;\r\n  this.x=x;\r\n  this.y=y;      \r\n  this.sz=48;\r\n  if (sz)\r\n     this.sz=sz;\r\n  if (rot==\"R\") {\r\n     this.ax=1;\r\n\t this.ay=0;\r\n\t this.bx=0;\r\n\t this.by=1;\r\n  } else {\r\n     this.ax=0;\r\n\t this.ay=1;\r\n\t this.bx=-1;\r\n\t this.by=0;\r\n  }\r\n  \r\n  sz=this.sz;\r\n  sz2=sz\/2;  \r\n  sz4=sz\/4;\r\n  sz8=sz\/8;\r\n  ax=this.ax;\r\n  ay=this.ay;\r\n  bx=this.bx;\r\n  by=this.by;\r\n  this.in1=[x+ax*sz4+bx*sz8,y+ay*sz4+by*sz8];\r\n  this.in2=[x+ax*sz4+bx*(sz-sz8),y+ay*sz4+by*(sz-sz8)];\r\n  this.out=[x+ax*sz+bx*sz2-ax*sz4,y+ay*sz+by*sz2-ay*sz4];\r\n  this.ins=[this.in1,this.in2];\r\n  \r\n  connectSink(this,2);\r\n  \r\n}\r\n\r\nMyGate.prototype.draw=function() {\r\n\r\n  ctx=this.ctx;\r\n  \r\n  ctx.fillStyle   = gateColor;\r\n  ctx.strokeStyle = \"#000\";\r\n  ctx.lineWidth   = 3;\r\n  \r\n  ctx.beginPath();\r\n  x=this.x;\r\n  y=this.y;\r\n  ax=this.ax;\r\n  ay=this.ay;\r\n  bx=this.bx;\r\n  by=this.by;\r\n  sz=this.sz;\r\n  szx=this.sz*30\/48;\r\n  sz2=sz\/2;\r\n  sz3=sz\/3;\r\n  sz4=sz\/4;\r\n  sz8=sz\/8;\r\n  \r\n  if (this.tp==\"and\") {  \r\n    ctx.moveTo(x, y); \r\n    x+=szx*ax;\r\n\ty+=szx*ay;\r\n    ctx.lineTo(x,y);\r\n    ctx.arcTo(x+ax*sz2,y+ay*sz2,x+ax*sz2+bx*sz2,y+ay*sz2+by*sz2,sz2);\r\n    ctx.arcTo(x+ax*sz2+bx*sz,y+ay*sz2+by*sz,x+bx*sz,y+by*sz,sz\/2);\r\n\tx+=bx*sz-ax*szx;\r\n    y+=by*sz-ay*szx;      \r\n    ctx.lineTo(x, y);\r\n    ctx.closePath();\r\n    ctx.fill();\r\n    ctx.stroke(); \r\n  } else  if (this.tp==\"or\" || this.tp==\"xor\") {\r\n    ctx.moveTo(x, y); \r\n    x+=ax*szx;\r\n\ty+=ay*szx;\r\n    ctx.lineTo(x,y);\r\n\tctx.quadraticCurveTo(x+ax*sz3+bx*sz8,y+ay*sz3+by*sz8,x+ax*sz2+bx*sz2,y+ay*sz2+by*sz2);\r\n\ty+=by*sz;\r\n\tx+=bx*sz;\r\n\tctx.quadraticCurveTo(x+ax*sz3-bx*sz8,y-by*sz8+ay*sz3,x,y);\r\n\tx-=ax*szx;\r\n\ty-=ay*szx;\r\n\tctx.lineTo(x,y);\r\n\ty-=by*sz;\r\n\tx-=bx*sz;\r\n\tctx.quadraticCurveTo(x+ax*sz4+bx*sz2,y+ay*sz4+by*sz2,x,y);\r\n\t\r\n\tctx.closePath();\r\n    ctx.fill();\r\n    ctx.stroke();\r\n\t\r\n\tif (this.tp==\"xor\") {\r\n\t  ctx.beginPath();\r\n      x=this.x-ax*sz8;\r\n      y=this.y-ay*sz8;\r\n\t  ctx.moveTo(x, y); \r\n\t  y+=by*sz;\r\n\t  x+=bx*sz;\r\n\t  ctx.quadraticCurveTo(x+ax*sz4-bx*sz2,y+ay*sz4-by*sz2,x,y);\r\n\t  ctx.stroke();\r\n\t}\r\n  }\r\n}\r\n\r\n\r\nMyGate.prototype.noteWatcher=function() {\r\n  b1=this.inConnector[0].bit;\r\n  b2=this.inConnector[1].bit;\r\n  ob=0;\r\n  if (this.tp==\"and\") {\r\n    if (b1 && b2) ob=1;\r\n  } else if (this.tp==\"or\") {\r\n    if (b1 || b2) ob=1;\r\n  } else if (this.tp==\"xor\") {\r\n    if (b1!=b2) ob=1;\r\n  }\r\n  this.outConnector.setBit(ob);  \r\n}\r\n\r\nvar MyWire=function(ctx,x,y) {  \r\n  this.ctx=ctx;\r\n  this.x=x;\r\n  this.y=y;    \r\n  this.bit=0;\r\n  this.trans=1;\r\n  this.cols=[\"#000\",wireOnColor];\r\n  connectSink(this,1);\r\n}  \r\n\r\n\r\nMyWire.prototype.myStrokeWire=function() {\r\n var ctx=this.ctx;\r\n var len=this.x.length;\r\n ctx.beginPath();\r\n ctx.moveTo(this.x[0],this.y[0]); \r\n  \r\n for (var i=1;i<len;++i) {   \r\n   ctx.lineTo(this.x[i],this.y[i]);\r\n }\r\n ctx.stroke();\r\n}\r\n\r\nMyWire.prototype.draw=function() {  \r\n\r\n  ctx=this.ctx;  \r\n  if (this.trans==1) {\r\n    ctx.strokeStyle=this.cols[this.bit];\r\n  } else {\r\n    l=this.x.length-1;\r\n    var grd = ctx.createLinearGradient(this.x[0],this.y[0], this.x[l],this.y[l]);\r\n\tvar w1=Math.max(this.trans-0.1,0);\r\n\tvar w2=Math.min(this.trans+0.1,1);\r\n    grd.addColorStop(w1, this.cols[this.bit]);\r\n    grd.addColorStop(w2, this.cols[1-this.bit]);\r\n    ctx.strokeStyle=grd;  \r\n\tthis.trans=Math.min(this.trans+0.1,1);\t\r\n\tif (this.trans>=1) {\r\n\t  this.outConnector.setBit(this.bit);\t  \r\n\t}\r\n  }\r\n  ctx.lineWidth   = 4;   \r\n      \r\n  this.myStrokeWire();\r\n}\r\n\r\nMyWire.prototype.noteWatcher=function() {\r\n  bb=this.inConnector[0].bit;\r\n  if (this.bit==bb)\r\n     return;\r\n   this.bit=bb;\r\n   this.trans=0;\r\n}\r\n\r\n\r\nvar MyPanel=function(ctx,x,y) {  \r\n  this.ctx=ctx;\r\n  this.x=x;\r\n  this.y=y;\r\n  this.bit=0;\r\n  this.out=[x,y];  \r\n  this.ins=[this.out];\r\n  connectSink(this,1);\r\n}  \r\n\r\nMyPanel.prototype.noteWatcher=function() {\r\n   this.bit=this.inConnector[0].bit;\r\n   this.outConnector.setBit(this.bit);\r\n}\r\n\r\n\r\nMyPanel.prototype.draw=function() {\r\n\r\n  ctx=this.ctx;\r\n\r\n  ctx.fillStyle=panelColor;\r\n  sz=24;\r\n  sz2=sz\/2;\r\n  ctx.fillRect(this.x-sz2,this.y-sz2,sz,sz);  \r\n  \r\n  \r\n\r\n  ctx.strokeStyle = \"#000\";  \r\n  ctx.lineWidth = 3;\r\n  ctx.strokeRect(this.x-sz2,this.y-sz2,sz,sz);  \r\n  \r\n  ctx.textBaseline = \"middle\";\r\n  ctx.textAlign = \"center\";\r\n  ctx.fillStyle=\"#000\";\r\n  ctx.font = \"13pt Arial\";\r\n  ctx.fillText(\"\"+this.bit,this.x,this.y);\r\n  \r\n}\r\n\r\n\r\nvar MyLabel=function(ctx,ll,x,y) {  \r\n  this.ctx=ctx;\r\n  this.x=x;\r\n  this.y=y;  \r\n  this.text=ll;\r\n  this.inConnector=[]\r\n}  \r\n\r\n\r\nMyLabel.prototype.draw=function() {\r\n  ctx.textBaseline = \"middle\";\r\n  ctx.textAlign = \"center\";\r\n  ctx.fillStyle=\"#000\";\r\n  ctx.font = \"13pt Arial\";\r\n  ctx.fillText(this.text,this.x,this.y);\r\n}\r\n\r\nMyLabel.prototype.noteWatcher=function() {\r\n  var val=0;\r\n  var dd=1;\r\n  for (var i=0;i<this.inConnector.length;++i) {\r\n    val+=this.inConnector[i].bit*dd;\r\n\tdd*=2;\r\n  }\r\n  this.text=\"\"+val;  \r\n}\r\n\r\n\r\n\r\nvar MySwitch=function(ctx,x,y) {  \r\n  this.x=x;\r\n  this.y=y;\r\n  this.bit=0;  \r\n  this.ctx=ctx;\r\n  connectSink(this,1);\r\n}  \r\n\r\n\r\nMySwitch.prototype.draw=function() {\r\n  ctx=this.ctx;\r\n  ctx.fillStyle=\"#000\";\r\n  sz=24;\r\n  sz2=sz\/2;\r\n  ctx.fillRect(this.x-sz2,this.y-sz2,sz,sz);\r\n  \r\n  ctx.fillStyle=scolor1;\r\n  ctx.fillRect(this.x-sz2,this.y,sz,sz2);\r\n  ctx.fillStyle=scolor2;\r\n  ctx.fillRect(this.x-sz2,this.y-this.bit*sz2,sz,sz2);\r\n  \r\n  \r\n  ctx.strokeStyle = \"#000\";  \r\n  ctx.lineWidth = 3;\r\n  ctx.strokeRect(this.x-sz2,this.y-sz2,sz,sz);  \r\n    \r\n}\r\n\r\n\r\nMySwitch.prototype.myClicked=function(x,y) {\r\n   dx=Math.abs(x-this.x);\r\n   if (dx>13)\r\n     return;\r\n   dy=Math.abs(y-this.y);\r\n   if (dy>13)\r\n     return;\r\n   this.bit=1-this.bit;\t    \r\n   this.outConnector.setBit(this.bit);\r\n}\r\n\r\nvar MyAnimPanel=function(canName) {    \r\n   this.canName=canName;\r\n   this.canvas = document.getElementById(canName);      \r\n   this.ctx=this.canvas.getContext(\"2d\");\r\n   this.myObjs=[];\r\n   this.clickTargets=[];   \r\n   this.wires=[];\r\n}\r\n\r\n\r\nMyAnimPanel.prototype.addPanelAndSwitch=function(ctx,w,g,dir) {\r\n   xx=w.x[0];\r\n   yy=w.y[0];\r\n   p=this.addPanelAndSwitch2(ctx,xx,yy,dir,1);   \r\n   return p;\r\n}\r\n\r\nMyAnimPanel.prototype.addPanelAndSwitch2=function(ctx,xx,yy,dir,withSwitch) {\r\n   var p=new MyPanel(ctx,xx,yy);\r\n   var s;\r\n   if (withSwitch) {\r\n     s=new MySwitch(ctx,xx-21*(1-dir),yy-21*dir);     \r\n     this.clickTargets.push(s);\r\n     this.myObjs.push(s);\r\n\t s.outConnector.addWatcher(p,0);\r\n   }\t \r\n   this.myObjs.push(p);\r\n   return p;\r\n}\r\n\r\nMyAnimPanel.prototype.addDigitDisplay=function(x,y,dn,withSwitch,yo) {\r\n  var l=new MyLabel(this.ctx,\"0\",x+(dn-1)\/2.0*24,y+yo);\r\n  this.myObjs.push(l);\r\n  ps=[];\r\n  for (var i=0;i<dn;++i) {\r\n    p=this.addPanelAndSwitch2(this.ctx,x+24*i,y,1,withSwitch);\r\n\tl.inConnector.unshift(new MyConnector());\r\n\tp.outConnector.addWatcher(l,0);\r\n\tps.push(p);\r\n  }\t\t \r\n  return ps;\r\n}\r\n\r\nMyAnimPanel.prototype.addWire=function(s,d,ii) {  \r\n  var x1=s.out[0];\r\n  var y1=s.out[1];\r\n  var x2=d.ins[ii][0];  \r\n  var y2=d.ins[ii][1];\r\n  var dy=20;\r\n  w=new MyWire(this.ctx,[x1,x1,x2,x2],[y1,y1+dy,y2-dy,y2]);\r\n  this.wires.push(w);\r\n  this.connectWire(w,s,d,ii);  \r\n}\r\n\r\nMyAnimPanel.prototype.connectWire=function(w,s,d,ii) {    \r\n  s.outConnector.addWatcher(w,0);\r\n  w.outConnector.addWatcher(d,ii);\r\n}\r\n\r\nMyAnimPanel.prototype.myInit=function(tp) {   \r\n   mid=this.canvas.width\/2;\r\n   var x=mid-24;   \r\n   var x1=mid-80;\r\n   var x2=mid+80;\r\n   var x0=x1-24+3;\r\n   \r\n   var y=30;\r\n   if (tp==\"intro\") {      \r\n   \r\n     tps=[\"and\",\"or\",\"xor\"];\r\n\t titles=[\"And gate\",\"Or gate\",\"Xor gate\"];\r\n\t for (j=0;j<tps.length;++j) {\t \t \r\n       this.myObjs.push(new MyLabel(this.ctx,titles[j],mid,y));\r\n\t   y+=24;\t \r\n\t   g=new MyGate(this.ctx,tps[j],x,y,\"R\")\r\n       w1=new MyWire(this.ctx,[x1,g.in1[0]],[g.in1[1],g.in1[1]]);\r\n\t   w2=new MyWire(this.ctx,[x1,g.in2[0]],[g.in2[1],g.in2[1]]);\r\n\t   w3=new MyWire(this.ctx,[g.out[0],x2],[g.out[1],g.out[1]]);\r\n\t   this.myObjs.push(w1);\t   \r\n\t   this.myObjs.push(w2);\r\n\t   this.myObjs.push(w3);\r\n\t  \r\n\t   p1=this.addPanelAndSwitch(this.ctx,w1,g,0);\r\n\t   p2=this.addPanelAndSwitch(this.ctx,w2,g,0);\t   \r\n\t   p3=new MyPanel(this.ctx,x2,g.out[1]);\r\n\t   \t   \r\n\t   this.myObjs.push(p3);\r\n\t   this.myObjs.push(g);\t  \r\n       \t   \r\n\t   this.connectWire(w1,p1,g,0);\r\n\t   this.connectWire(w2,p2,g,1);\r\n\t   this.connectWire(w3,g,p3,0);\r\n\t   \r\n\t   y+=86;     \r\n\t }\r\n   } else if (tp==\"adder\") {\r\n      var x1=mid-80;   \r\n\t  var x2=mid-15;\r\n\t  var x3=mid+50;\r\n\t  var x4=mid+115;\r\n\t  var y0=60;\r\n\t  var y1=120;\r\n\t  var y2=200;\r\n\t  var y3=280;\r\n\t  var y4=370;\r\n\t  var gates=[\"and\",\"xor\",\"and\",\"xor\", \"and\",\"xor\",  \"xor\"];\r\n\t  var xs=[x1,x2,x3,x4, x2,x3, x2];\r\n\t  var ys=[y1,y1,y1,y1, y2,y2, y3];\r\n\t  \r\n\t  p1=this.addDigitDisplay(x1,y0,2,1,-46);\r\n\t  p2=this.addDigitDisplay(x3,y0,2,1,-46);\r\n\t  p3=this.addDigitDisplay(x2,y4,3,0,28);\r\n\t  \r\n\t  \r\n\t  var cgates=[];\r\n\t  for (var i=0;i<gates.length;++i) {\r\n\t    g=new MyGate(this.ctx,gates[i],xs[i],ys[i],\"D\",42);\r\n\t    this.myObjs.push(g);\r\n\t\tcgates.push(g);\r\n\t  }\r\n\t  this.addWire(p1[0],cgates[0],1);\r\n\t  this.addWire(p1[0],cgates[1],1);\r\n\t  this.addWire(p1[1],cgates[2],1);\r\n\t  this.addWire(p1[1],cgates[3],1);\r\n\t  this.addWire(p2[0],cgates[0],0);\r\n\t  this.addWire(p2[0],cgates[1],0);\r\n\t  this.addWire(p2[1],cgates[2],0);\r\n\t  this.addWire(p2[1],cgates[3],0);\r\n\t  \r\n\t  this.addWire(cgates[0],cgates[6],1);\r\n\t  this.addWire(cgates[1],cgates[4],1);\r\n\t  this.addWire(cgates[1],cgates[5],1);\r\n\t  this.addWire(cgates[2],cgates[4],0);\r\n\t  this.addWire(cgates[2],cgates[5],0);\r\n\t  this.addWire(cgates[3],p3[2],0);\r\n\t  \r\n\t  this.addWire(cgates[4],cgates[6],0);\r\n\t  this.addWire(cgates[5],p3[1],0);\r\n\t  this.addWire(cgates[6],p3[0],0);\r\n\t  \r\n\t  \r\n\t  \/\/this.addWire(p1[0],cgates[1],0);\r\n\t\r\n      \r\n   }\r\n   \r\n   this.myObjs=this.wires.concat(this.myObjs);\r\n   this.wires=[];\r\n   \r\n   var clickTargets=this.clickTargets;\r\n   this.canvas.onclick=function(e) {   \r\n     var r= this.getBoundingClientRect();\r\n     var x = e.clientX - r.left;\r\n     var y = e.clientY - r.top;\r\n     for (var i=0;i<clickTargets.length;++i)\r\n\t   clickTargets[i].myClicked(x,y);\r\n   }\r\n}  \r\n\r\n\r\n\r\n\r\nMyAnimPanel.prototype.drawMain=function() {\r\n  \r\n  backColor= \"#fff\";\r\n  ctx=this.ctx;\r\n  \r\n  ctx.fillStyle =backColor;\r\n  var xx=this.canvas.width;\r\n  var yy=this.canvas.height;\r\n  ctx.fillRect(0,0,xx,yy);    \r\n  partLen=this.myObjs.length;\r\n  for (var i=0;i<partLen;++i)\r\n    this.myObjs[i].draw();\r\n    \r\n}\r\n\r\n\r\nvar animPanels;\r\n\r\nfunction globalDrawMain() {  \r\n  for (var i=0;i<animPanels.length;++i)\r\n     animPanels[i].drawMain();\r\n}\r\n\r\nfunction myInitAnim() {   \r\n   animPanels=[];\r\n   var p=new MyAnimPanel(\"myCanvas1\");\r\n   p.myInit(\"intro\");\r\n   animPanels.push(p);\r\n   \r\n   p=new MyAnimPanel(\"myCanvas2\");\r\n   p.myInit(\"adder\");\r\n   animPanels.push(p);\r\n      \r\n   \r\n   setInterval(globalDrawMain,30); \r\n\r\n  \r\n}\r\n\r\n\r\nmyInitAnim();\r\n\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-d2063bd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d2063bd\" 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-e87754a\" data-id=\"e87754a\" 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-9dac4d4 elementor-widget elementor-widget-text-editor\" data-id=\"9dac4d4\" 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 input to the adder are two numbers, each represented using two bits, or having two binary digits. So they can store a maximal value of binary &#8220;11&#8221;, which is 3 in decimal. The decimal value appears above each input.<\/p>\n<p>These inputs are fed into a circuit of logic gates, which processes them according to the simple rules we defined above.<\/p>\n<p>The output is made of three bits, or binary digits. Its decimal translation is shown below. You can verify that the output always&nbsp;equals the sum of the two inputs. This is a real working adder!<\/p>\n<p>Next on our tour: some comments about <a href=\"\/bootstrapping\">bootstrapping<\/a> and where this is referred to in the book.<\/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-205c5f2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"205c5f2\" 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-317b08b\" data-id=\"317b08b\" 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-8835893 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8835893\" 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-6b6ef7a elementor-widget elementor-widget-text-editor\" data-id=\"6b6ef7a\" 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-63e6e50 elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons\" data-id=\"63e6e50\" 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-5aed34a elementor-widget elementor-widget-text-editor\" data-id=\"5aed34a\" 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 Logic Gates After we explained about binary numbers, here&#8217;s how computers work with them. Inside a computer, a wire with electricity running [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":149,"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\/132"}],"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=132"}],"version-history":[{"count":0,"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/pages\/132\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/media\/149"}],"wp:attachment":[{"href":"https:\/\/www.zutopedia.com\/wp-json\/wp\/v2\/media?parent=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}