steven2 = { const u = 1; // unit const wu = 300; // no. units on width const hu = 400; // no. units on height //const col = ['#fff','#999','#000','#933','#f60','#444','#f00','#666','#ff0','#09f']; const col = ['#fff','#444','#ff0','#933','#09f','#999','#f00','#666','#000','#f60']; const width = wu*u*2; // double the units to have spaces between squares const height = hu*u*2; // double the units to have bottom & top piangles const margin = 100; const { canvas, context } = createCanvas(); const pixelRatio = resize(canvas, width+margin, height-margin, ); const base = get_pi(wu+1); const window = 10**7; let data, new_d, r, l, diff, small, big, mod, x, y, digit, ray, cray; // Background context.globalAlpha = 1; context.scale(pixelRatio, pixelRatio); context.fillStyle = '#fff'; context.fillRect(0, 0, width+margin, height-margin); ///////////////// TOP ///////////////// data = [[]]; data[0] = base; for (let h = 1; h < hu; ++h){ data[h] = []; for (let w = 0; w < wu; ++w) { if(w > (wu-h)){ new_d = 0; } else{ r = data[h-1][w+1]; l = data[h-1][w]; diff = Math.abs(l-r); new_d = l*10 +r; if(diff == 0){ new_d = l; } else { if(l>1 & r>1){ small = Math.min(l,r); big = Math.max(l,r); mod = big % small; if(mod != 0){ new_d = small + mod;} } } } data[h][w] = new_d; } } //////////////////// DRAW //////////////// for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu; ++w) { digit = Math.abs(data[h][w])%10; if(digit != 0){ x = u*w*2 + h*u + margin/2; y = (hu-h)*u - margin/2; cray = gray(col[digit]); if(cray[0] == '#ff0'){ ray = cray[1]; context.fillStyle = cray[0]; context.beginPath(); context.moveTo(x + u, y); context.arc(x, y, u*ray, 0, 2 * Math.PI); context.fill(); } } } } context.save(); for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu; ++w) { digit = Math.abs(data[h][w])%10; if(digit != 0){ x = u*w*2 + h*u + margin/2; y = (hu-h)*u - margin/2; cray = gray(col[digit]); if(cray[0] != '#ff0'){ ray = cray[1]; context.fillStyle = cray[0]; context.beginPath(); context.moveTo(x + u, y); context.arc(x, y, u*ray, 0, 2 * Math.PI); context.fill(); } } } } //////////////////////// BOTTOM /////////////////////////// data = [[]]; data[0] = base; for (let h = 1; h < hu; ++h){ data[h] = []; for (let w = 0; w < wu; ++w) { if(w > (wu-h)){ new_d = 0; } else{ r = data[h-1][w+1]; l = data[h-1][w]; diff = Math.abs(l-r); new_d = l*10 +r; if(diff == 0){ new_d = l; } else { if(l>1 & r>1){ small = Math.min(l,r); big = Math.max(l,r); mod = big % small; if(mod != 0){ new_d = small + mod;} } } } data[h][w] = new_d %window; } } //////////////////// DRAW //////////////// for (let h = 1; h < hu; ++h){ for (let w = 0; w < wu; ++w) { digit = Math.abs(data[h][w])%10; if(digit != 0){ x = u*w*2 + h*u + margin/2; y = h*u - margin/2 + hu*u; cray = gray(col[digit]); if(cray[0] == '#ff0'){ ray = cray[1]; context.fillStyle = cray[0]; context.beginPath(); context.moveTo(x + u, y); context.arc(x, y, u*ray, 0, 2 * Math.PI); context.fill(); } } } } context.save(); for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu; ++w) { digit = Math.abs(data[h][w])%10; if(digit != 0){ x = u*w*2 + h*u + margin/2; y = h*u - margin/2 + hu*u; cray = gray(col[digit]); if(cray[0] != '#ff0'){ ray = cray[1]; context.fillStyle = cray[0]; context.beginPath(); context.moveTo(x + u, y); context.arc(x, y, u*ray, 0, 2 * Math.PI); context.fill(); } } } } return canvas; }