t="c=documt.body.childr[0d=c.getContext('2d'Yc.width=900;c.addEvtListe'click',DaQif(Bt=='q'>-8<B9)=!;},0Yf={xG(!)||(!)W'333',Yf.o.d(3H_,aGW,V_,oG`||Wl(,7HYl(7H,U+5Y_,q:{c:Da,iAi.z ,wG` };s='qqxxaaow';m=[{x:2Z1JI4H:2JI4Z3JI6Z4 6Z6 4Z7JI11Z5J4,5I8Z9J3]}fok=1;k<8;k++)foi<8;i++y={x:Bk*66H:By,j:[]}@ y.=B+k*8;my)}m[3m[4[2Q{Bt=s[i%8B*=1.3;}r=DxH,sFRect(xH,10)};ll2Yg=(e)/2NgH)Ng,rfunction $(Q{Bg=[]@{l2(O7,Oy,Oz?'0f0':-4,By+(j-1)*3+1YBgOzY} = c(Bg,m[i]Yd(,By,_";k="].j=|j[j]|i=0;|V,|Bz|Bx|r(|];|en|0,1|`&&|){|f[Bt].|.push(| J2,-2I| Kf00'_|l(U+5,|U-5|$(Y|x+|MoveTo(xH|a[1]|)Ne,rYF()};|&&a.clientX|_)}}|@;for(j in Bj)|`a[0]|Z0H:|Y);|W},d:DxH){|V'000'|Ux-4H|Qfor(i in m)|Om[Bj[j]].|N;d.lineTo(|M=DxH,s,e,r){d.beginPath();d.m|K},d:DxH,v){r(x-4H-5,v?'0f0':'|J0,j:[|I]},{x:|H,y|G:{c:Da){A|Fd.strokeStyle='#'+s;d.stroke|Dfunction(|Bm[i].|Areturn ".split('|');for(a in k){b=k[a][0];while(t.search(b)>-1)t=t.replace(b,k[a].substring(1))}eval(t)
// setup canvas
c=document.body.children[0];
d=c.getContext('2d');
c.width=900; // height should be fine left alone
c.addEventListener('click',function(a){
for(i in m)
if(m[i].t=='q'&&a.clientX-c.offsetLeft>m[i].x-4&&a.clientX-c.offsetLeft<m[i].x+6) // y value got cut when searching for spare bytes
m[i].z=!m[i].z;
$();$(); // redraw graph
},0);
// logic gate definitions, c: calculation function, d: draw function
f={
x:{ // xor
c:function(a){return (!a[0]&&a[1])||(a[0]&&!a[1])},
d:function(x,y){l(x-4,y+5,'333',x-4,y-5);f.o.d(x+3,y)}
},
a:{ // and
c:function(a){return a[0]&&a[1]},
d:function(x,y){r(x-4,y-5,'000')}
},
o:{ // or
c:function(a){return a[0]||a[1]},
d:function(x,y){l(x-4,y-5,'000',x+7,y);l(x+7,y,'000',x-4,y+5);l(x-4,y+5,'000',x-4,y-5)}
},
q:{ // input node
c:function(a,i){return i.z},
d:function(x,y,v){r(x-4,y-5,v?'0f0':'f00')}
},
w:{ // output node
c:function(a){return a[0]},
d:function(x,y,v){r(x-4,y-5,v?'0f0':'f00')}
}
};
s='qqxxaaow'; // these types are inserted into the graph later
// full adder graph. the design for a one bit full adder
m=[
{x:20,y:10,j:[]},
{x:10,y:20,j:[]},
{x:40,y:30,j:[0,1]},
{x:60,y:40,j:[2,-2]},
{x:60,y:60,j:[2,-2]},
{x:40,y:70,j:[0,1]},
{x:110,y:50,j:[4,5]},
{x:80,y:90,j:[3]}
];
for(k=1;k<8;k++) // replicate adder 7 more X
for(i=0;i<8;i++){ // copy each gate changing certain properties accordingly
y={
x:m[i].x+k*66,
y:m[i].y,
j:[]
};
for(j in m[i].j)
y.j[j]=m[i].j[j]+k*8;
m.push(y)
}
m[3].j=m[4].j=[2];// some finishes on the first adder
// loop through and initilize some operational properties
for(i in m){
m[i].t=s[i%8];
m[i].i=0;
m[i].x*=1.32;
}
// drawing functions
r=function(x,y,s){d.strokeStyle='#'+s;d.strokeRect(x,y,10,10)};
l=function(x,y,s,e,r){d.beginPath();d.moveTo(x,y);d.lineTo(e,r);d.strokeStyle='#'+s;d.stroke()};
l2=function(x,y,s,e,r){d.beginPath();d.moveTo(x,y);g=(x+e)/2;d.lineTo(g,y);d.lineTo(g,r);d.lineTo(e,r);d.strokeStyle='#'+s;d.stroke()};
// function that renders gates and edges
function $(){
for(i in m){
m[i].g=[];
for(j in m[i].j){
l2(m[m[i].j[j]].x+7,m[m[i].j[j]].y,m[m[i].j[j]].z?'0f0':'000',m[i].x-4,m[i].y+(j-1)*3+1); // draw edge
m[i].g.push(m[m[i].j[j]].z); // create array of incoming values
}
m[i].z = f[m[i].t].c(m[i].g,m[i]); // determine value of node from inputs
f[m[i].t].d(m[i].x,m[i].y,m[i].z) // draw node
}
}
$();$(); // draw initial graph
