lkarch.org/tools/mathisfun/www.mathsisfun.com/numbers/images/mean-machine.js

var w,h,el,g,my={}
function meanmachineMain(mode){let version='0.62';typ=typeof mode!=='undefined'?mode:'longitudinal';w=440;h=280;radius=150;var sample="3, 5, 10, 0, 1, -5, 7";my.queue=[];var descr='To find the Mean (or Average) divide the <br>Sum of the numbers by the Count of the numbers';var s='';s+='<style>'
s+='.btn { display: inline-block; position: relative; text-align: center; margin: 2px; text-decoration: none; font: bold 14px/25px Arial, sans-serif; color: #268; border: 1px solid #88aaff; border-radius: 10px;cursor: pointer; background: linear-gradient(to top right, rgba(170,190,255,1) 0%, rgba(255,255,255,1) 100%); outline-style:none;}'
s+='.btn:hover { background: linear-gradient(to top, rgba(255,255,0,1) 0%, rgba(255,255,255,1) 100%); }'
s+='.yy { border: solid 2px #eeeeaa; background: linear-gradient(to top, rgba(255,220,130,1) 0%, rgba(255,255,255,1) 100%);  }'
s+='.hi { border: solid 2px #eeeeaa; background: linear-gradient(to top, rgba(130,220,255,1) 0%, rgba(255,255,255,1) 100%); box-shadow: 2px 2px 6px #66a; }'
s+='.lo { border: solid 1px #888888; background: linear-gradient(to top, rgba(170,170,170,1) 0%, rgba(205,205,205,1) 100%);  }'
s+='</style>'
s+='<div id="main" style="position:relative; width:'+w+'px; min-height:'+h+'px;  margin:auto; display:block; border-radius: 20px; ">';s+='<div style="position:relative;">';s+='<canvas id="can1" style="position: absolute; width:'+w+'px; height:'+w+'px; left: 0px; top: 0px; border: none;"></canvas>';s+='</div>';s+='<div style="position:absolute; left:270px; top:50px; width: 160px; text-align: center;font: 14px Arial;  ">'+descr+'</div>';s+='<div style="position:absolute; left:5px; top:2px; ">';s+='<span style=" font: 16px Arial;">&nbsp;Numbers: </span>';s+='<input type="text" id="nums" style="color: #0000ff; text-align:center; font: 18px Arial; width:300px; border-radius: 10px; background-color: white; z-index:2;" value="'+sample+'" />';s+='<button id="go" style="font: 14px Arial; height:30px; vertical-align:middle; z-index: 10;" class="btn" onclick="go()" >Go</button>';s+='</div>';countClr='#00f';countBGClr='#def';sumClr='#f00';sumBGClr='#ffe';resultClr='#444';resultBGClr='#eee';s+='<div id="num" style="position:absolute; left:5px; top:2px; font: bold 20px Arial;transition: opacity 0.2s ease-in-out;"></div>';s+='<div id="count1" style="position:absolute; left:32px; top:122px; width:114px; font: bold 18px Arial; text-align: center; background-color:'+countClr+'; color: white;border-radius: 20px;">0</div>';s+='<div id="sum" style="position:absolute; left:133px; top:207px; width:114px; font: bold 18px Arial; text-align: center; background-color:'+sumClr+'; color: white;border-radius: 20px;">0</div>';s+='<div id="count2" style="position:absolute; left:133px; top:242px; width:114px; font: bold 18px Arial; text-align: center;  background-color:'+countClr+'; color: white;border-radius: 20px;">0</div>';s+='<div id="result" style="position:absolute; left:260px; top:224px; width:180px; font: bold 18px Arial; text-align: center;background-color:'+resultClr+';  color: white;border-radius: 20px;">0</div>';var bgClr='#bdf';let bdrClr='#acf'
s+=`<div id="bg" style="position:absolute; left:0px; top:0px; width:${w}px; height:${h}px; z-index: -2;background: linear-gradient(to bottom, white 0%, ${bgClr} 25%, ${bgClr} 50%, ${bgClr} 80%, ${bdrClr} 100%); border-radius: 20px; border: 3px solid  ${bdrClr};"></div>`
s+='<div id="count1Lbl" style="position:absolute; left:25px; top:100px; width:220px; height:50px; font: bold 20px Arial; text-align: left; z-index: -1; background-color:'+countBGClr+';color:'+countClr+';border-radius: 20px;">&nbsp;Count</div>';s+='<div id="sumLbl" style="position:absolute; left:50px; top:187px; width:200px; height:50px; font: bold 20px Arial; text-align: left; z-index: -1; background-color:'+sumBGClr+'; color:'+sumClr+';border-radius: 20px;">&nbsp;Sum</div>';s+='<div id="count2Lbl" style="position:absolute; left:50px; top:240px; width:200px; height:26px; font: bold 20px Arial; text-align: left;z-index: -1; background-color:'+countBGClr+';color:'+countClr+';border-radius: 20px;">&nbsp;Count</div>';s+='<div id="resultLbl" style="position:absolute; left:260px; top:195px; width:180px; height: 65px; font: bold 20px Arial; text-align: center; z-index: -1; background-color:'+resultBGClr+'; color:'+resultClr+';border-radius: 20px;">Divide</div>';s+='<div style="position:absolute; left:130px; top:235px; width:120px; height: 3px; z-index: -1; background-color: black;"></div>';s+='<div style="position:absolute; left:30px; top:140px; width:10px; height: 110px; z-index: -1; background-color:'+countBGClr+';"></div>';s+='<div style="position:absolute; left:30px; top:250px; width:25px; height: 10px; z-index: -1; background-color:'+countBGClr+';"></div>';s+='<div style="position: absolute; right: 10px; bottom: 0px; font: 10px Arial; color: white; ">&copy; 2020 MathsIsFun.com  v'+version+'</div>';s+='</div>';document.write(s);el=document.getElementById('can1');ratio=3;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);this.clrs=[["Blue",'#0000FF'],["Red",'#FF0000'],["Black",'#000000'],["Green",'#00cc00'],["Orange",'#FFA500'],["Slate Blue",'#6A5ACD'],["Lime",'#00FF00'],["Spring Green",'#00FF7F'],["Teal",'#008080'],["Gold",'#ffd700'],["Med Purple",'#aa00aa'],["Light Blue",'#ADD8E6'],["Navy",'#000080'],["Purple",'#800080'],["Dark SeaGreen",'#8FBC8F']];clrNum=0;my.animID=null;console.log("typ",typ);frameNo=0;frameTot=150;count=0;sum=0;beltY=36;vx=0;vy=0;currX=0;currY=0;drot=0;paddleAng=0;paddleLen=50;for(var i=0;i<3;i++){drawCog(20+i*45,beltY+36,12,10,6,i);}
drawMe();}
function go(){numStr=document.getElementById('nums').value;my.queue=numStr.split(/[ ,]+/);count=0;sum=0;frameNo=0;currX=0;currY=beltY;vx=1.6;vy=0;document.getElementById('sum').innerHTML=sum;document.getElementById('count1').innerHTML=count;document.getElementById('count2').innerHTML=count;document.getElementById('result').innerHTML='= 0';cancelAnimationFrame(my.animID)
animate();}
function animate(){doFrame();frameNo=(++frameNo)%frameTot;if(my.queue.length==0&&frameNo==0){}else{my.animID=requestAnimationFrame(animate);}}
function doFrame(){drawMe();var numDiv=document.getElementById('num');if(frameNo==0){currX=0;currY=beltY;currNum=my.queue.shift();numDiv.innerHTML=currNum;numDiv.style.left='20px';numDiv.style.top=beltY+'px';numDiv.style.opacity=1;console.log("doFrame",frameNo,currNum,my.queue);}
if(frameNo>0&&frameNo<60){currX+=vx;numDiv.style.left=currX+'px';numDiv.style.top=currY+'px';}
if(frameNo==60){vy=0;}
if(frameNo>=60&&frameNo<119){currX+=vx;currY+=vy;vy+=0.1;numDiv.style.left=currX+'px';numDiv.style.top=currY+'px';}
if(frameNo==100){count++;sum+=Number(currNum);document.getElementById('count1').innerHTML=count;}
var paddleFrame=92;if(frameNo==paddleFrame){paddleAng=0;}
if(frameNo>=paddleFrame&&frameNo<paddleFrame+20){paddleAng+=0.05;}
if(frameNo>=paddleFrame+20&&frameNo<paddleFrame+40){paddleAng-=0.05;}
if(frameNo==113){numDiv.style.opacity=0;}
if(frameNo==119){document.getElementById('sum').innerHTML=fmt(sum,12);document.getElementById('count2').innerHTML=fmt(count,12);var result=fmt(sum/count,12);document.getElementById('result').innerHTML='= '+result;}}
function drawMe(){g.clearRect(0,0,el.width,el.height);drot+=0.04;if(drot>2*Math.PI)drot-=2*Math.PI;for(var i=0;i<3;i++){drawCog(18+i*43,beltY+39,14,10,6,i+drot);}
var beltTp=beltY+22+Math.sin(drot*8)*0.5;var beltBt=beltY+56+Math.cos(drot*6)*0.5;g.beginPath();g.strokeStyle='orange';g.lineWidth=3;g.moveTo(-2,beltTp);g.arc(105,(beltTp+beltBt)/2,(beltBt-beltTp)/2,-Math.PI/2,Math.PI/2);g.lineTo(-2,beltBt);g.closePath();g.stroke();var dx=paddleLen*Math.cos(paddleAng);var dy=paddleLen*Math.sin(paddleAng);var paddleLt=130;var paddleTp=125;g.strokeStyle=countClr;g.lineWidth=5;g.beginPath();g.moveTo(paddleLt,paddleTp);g.lineTo(paddleLt+dx,paddleTp+dy);g.closePath();g.stroke();g.beginPath();g.moveTo(paddleLt+100,paddleTp);g.lineTo(paddleLt+100-dx,paddleTp+dy);g.closePath();g.stroke();var hopperLt=140;var hopperTp=190;g.strokeStyle=sumClr;g.beginPath();g.moveTo(hopperLt-15,hopperTp);g.lineTo(hopperLt+5,hopperTp+20);g.stroke();g.beginPath();g.moveTo(hopperLt+100+15,hopperTp);g.lineTo(hopperLt+100-5,hopperTp+20);g.stroke();}
function drawCog(cx,cy,radiusO,radiusI,radiusH,rot){var notches=7,taperO=50,taperI=30,pi2=2*Math.PI,angle=pi2/(notches*2),taperAI=angle*taperI*0.005,taperAO=angle*taperO*0.005,a=angle,toggle=false;g.beginPath();g.moveTo(cx+radiusO*Math.cos(rot+taperAO),cy+radiusO*Math.sin(rot+taperAO));for(;a<=pi2;a+=angle){var arot=a+rot;if(toggle){g.lineTo(cx+radiusI*Math.cos(arot-taperAI),cy+radiusI*Math.sin(arot-taperAI));g.lineTo(cx+radiusO*Math.cos(arot+taperAO),cy+radiusO*Math.sin(arot+taperAO));}
else{g.lineTo(cx+radiusO*Math.cos(arot-taperAO),cy+radiusO*Math.sin(arot-taperAO));g.lineTo(cx+radiusI*Math.cos(arot+taperAI),cy+radiusI*Math.sin(arot+taperAI));}
toggle=!toggle;}
g.closePath();g.fillStyle='#aaa';g.fill();g.lineWidth=2;g.strokeStyle='#000';g.stroke();g.beginPath();g.globalCompositeOperation='destination-out';g.moveTo(cx+radiusH,cy);g.arc(cx,cy,radiusH,0,pi2);g.closePath();g.fill();g.globalCompositeOperation='source-over';g.stroke();}
function fmt(num,digits){if(num==Number.POSITIVE_INFINITY)
return "undefined";if(num==Number.NEGATIVE_INFINITY)
return "undefined";num=num.toPrecision(digits);num=num.replace(/0+$/,"");if(num.charAt(num.length-1)==".")num=num.substr(0,num.length-1);if(Math.abs(num)<1e-15)num=0;return num;}