$(document).ready(function(){ $("#butt").on("click",function(){ $("#output").html(""); var canv = $("

"); $("#output").append(canv); canv = $("#canv")[0]; var col2 = "#1a766c"; var c = canv.getContext("2d"); var x = 150, y = 50, s = 20; var l = parseInt($("#input").val()); var arr = [], arr2 = [], nums = tri(l); var once = true, plus = false; var fs = 15 var t1 = 0, t2 = 0; arr.length = l+1; arr2.length = l+1; var off1 = 0, off2 = 0, off3 = 0; var za = 1, zb = 0, zc = 1, zd = 2; var W = 40*l+100; var H = 40*l+100; canv.width = W; canv.height = H; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame; var rAF; function hex(x,y){ c.beginPath(); c.moveTo(x,y); c.lineTo(x + 17.5,y+10); c.lineTo(x + 17.5,y+30); c.lineTo(x,y+40); c.lineTo(x - 17.5,y+30); c.lineTo(x - 17.5,y+10); c.closePath(); c.strokeStyle = "black"; c.stroke(); } function colored(x,y,col){ c.beginPath(); c.moveTo(x,y); c.lineTo(x + 17.5,y+10); c.lineTo(x + 17.5,y+30); c.lineTo(x,y+40); c.lineTo(x - 17.5,y+30); c.lineTo(x - 17.5,y+10); c.closePath(); c.fillStyle = col; c.fill(); } function clear(){ c.fillStyle = "white"; c.fillRect(0,0,W,H); } function text(x,y,txt){ c.fillStyle = "black"; c.font = "15px sans-serif"; if(txt.length > 1){ c.fillText(txt,x-8,y+25); } else{ c.fillText(txt,x-5,y+25); } } function basic(){ c.lineWidth = 2; x = W/2, y = 50; for(var a1=0; a1<=l; a1++){ var x2 = x; arr[a1] = []; arr2[a1] = []; for(var a2=0; a2<=a1; a2++){ if(a2 == 0 || a2 == a1){ arr[a1].push({ ax: x2, ay: y, txt: "1", clr: "cyan"}); } else{ arr[a1].push({ ax: x2, ay: y, txt: "", clr: "white"}); } arr2[a1].push({ ax: x2, ay: y}); x2 += 35; } y += 30; x -= 17.5; } } function tri(len){ var arrt = []; var a = len; arrt.length = len+1; for(var b1=0; b1<=a; b1++){ arrt[b1] = []; for(var b2=0; b2 <= b1; b2++){ if(b1 == 0 || b2 == 0 || b2 == b1){ arrt[b1][b2] = 1; } else{ arrt[b1][b2] = arrt[b1-1][b2-1] + arrt[b1-1][b2]; } } } return arrt; } function add(xy1,xy2,add1,add2){ c.fillStyle = "black"; c.font = "900 " + fs + "px sans-serif"; c.fillText(add1,xy1.ax-5,xy1.ay+25); c.fillText(add2,xy2.ax-5,xy2.ay+25); } basic(); draw(); function draw(){ if(zd > l){ cancelAnimationFrame(rAF); return; } clear(); for(var d1=0; d1 10){ arr[z4][z3].clr = "lime"; arr[z1][z2].clr = "gold"; arr[z1][z3].clr = "gold"; off1 += 0.3; off2 += 1; if(z1 > 4){ off3 -= 0.3;} else{ off3 -= 0.1;} fs -= 0.2; } else{ plus = true; } } else{ t1++; arr[z4][z3].clr = "lime"; if(t1 < 15){ c.font = "7px"; c.fillStyle = "black"; c.fillText("+",arr[z4][z3].ax-4,arr[z4][z3].ay+22); } } if(t1 < 15){ add({ ax:arr2[z1][z2].ax+off1,ay:arr2[z1][z2].ay+off2 },{ ax:arr2[z1][z3].ax+off3,ay:arr2[z1][z3].ay+off2 },nums[z1][z2]+"",nums[z1][z3]+""); } else { arr[z4][z3].clr = "cyan"; arr[z1][z2].clr = "cyan"; arr[z1][z3].clr = "cyan"; arr[z4][z3].txt = nums[z4][z3]+""; if(t2 < 20){ t2++; } if(t2 == 20){ if(zc + 1 == arr[za].length){ za++; zd++; zb = 0; zc = 1; } else { zb++; zc++; } off1 = 0; off2 = 0; off3 = 0; t1 = 0; t2 = 0; fs = 15; plus = false; // update(z1,z2,z3,z4); } } } }) })

Pascal's Triangle