//by Anton Böhler window.onload = function() { can = document.getElementById("canvas"); c = can.getContext("2d"); can.width = 350; can.height = 350; c.fillStyle = "#FFFFFF"; c.fillRect(0,0,can.width,can.height); showTable(); } var can; var c; var width = 350; var height = 350; var inter = "off"; //interval toggle var points = 40; var times = 2; var ps = []; //array of Points var color={ r: 255, g: 0, b: 0, addR: 0, addG: 0, addB: 0, on: false, current: function(){ if(this.on){ return "rgba("+this.r+","+this.g+","+this.b+",1)"; }else{ return "#000000"; } }, switch: function(){ this.r += this.addR; this.g += this.addG; this.b += this.addB; if(this.b <= 0 && this.r >= 255 && this.g <= 0){ this.b = 0; this.r = 255; this.g = 0; this.addR = 0; this.addG = 1; this.addB = 0; } if(this.b <= 0 && this.r >= 255 && this.g >= 255){ this.b = 0; this.r = 255; this.g = 255; this.addR = -1; this.addG = 0; this.addB = 0; } if(this.r <= 0 && this.g >= 255 && this.b <= 0){ this.b = 0; this.r = 0; this.g = 255; this.addG = 0; this.addB = 1; this.addR = 0; } if(this.r <= 0 && this.g >= 255 && this.b >= 255){ this.b = 255; this.r = 0; this.g = 255; this.addG = -1; this.addB = 0; this.addR = 0; } if(this.r <= 0 && this.b >= 255 && this.g <= 0){ this.b = 255; this.r = 0; this.g = 0; this.addB = 0; this.addR = 1; this.addG = 0; } if(this.r >= 255 && this.b >= 255 && this.g <= 0){ this.b = 255; this.r = 255; this.g = 0; this.addB = -1; this.addR = 0; this.addG = 0; } }, onOff: function(){ this.on = document.getElementById("colorB").checked; showTable(); } } var Circle={ x: width/2, y: height/2, r: width/2- 10, show: function(){ c.strokeStyle = color.current(); c.beginPath(); c.arc(this.x, this.y, this.r, 0, 2 * Math.PI); c.stroke(); } } function Point(x, y, val){ this.x = x; this.y = y; this.val = val; this.show = function(){ c.strokeStyle = color.current() c.beginPath(); c.arc(this.x,this.y,3,0,2*Math.PI); c.stroke(); } } function valueChange(id, val){ if(isNaN(val) || val == "" || val < 0){ return } if(id == "pointsB"){ document.getElementById("points").innerHTML = "Points: " + val; document.getElementById(id).value = parseInt(val); points = parseInt(val); }else if(id == "timesB"){ document.getElementById(id).value = val; document.getElementById("times").innerHTML = "Times: " + val; times = parseFloat(val); } showTable(); } function placePoints(){ ps = [] var x; var y; for(var i = 0; i < points; i++){ x = Circle.r*Math.cos(i*2*Math.PI/points)*-1 + Circle.x; y = Circle.r*Math.sin(i*2*Math.PI/points)*-1 + Circle.y; ps.push(new Point(x, y, i)); } } function showTable(){ c.fillStyle = "#FFFFFF"; c.fillRect(0,0,can.width,can.height); Circle.show(); placePoints(); for(var i = 0; i < ps.length; i++){ ps[i].show(); c.beginPath(); c.moveTo(ps[i].x, ps[i].y); c.lineTo(ps[Math.round(Math.round(i*times)%points)].x, ps[Math.round(Math.round(i*times)%points)].y); c.stroke(); } } function toggle(){ if(inter == "off"){ inter = setInterval(function(){ for(var i = 0; i < 10; i++){ color.switch(); } times += 0.02; times = (times).toFixed(2); valueChange("timesB", times); }, 50); }else{ clearInterval(inter); inter = "off"; } }

Times Table