2b:null 2c:["$","title",null,{"children":"Piangle Basics | emma-ba | Observable"}] 31:Ta9a,base_0 = { const algo = (l, r) => { let modulo = 10; let cap = 10; return (Math.min((l+r),cap) % modulo); } let purp = ['#fff','#ccc','#999','#666','#333','#00f','#63c','#c6c','#aaf','#eef']; let green = ['#fff','#ccc','#999','#666','#333','#9c6','#fb3','#0d0','#ffb','#bf0']; //let pg = ['#fff','#0f0','#9f3','#6c6','#333','#00f','#63c','#c6c','#99c','#ccf']; let col_down = purp; let col_top = green; const u = 1; // unit const wu = 1090; // no. units on width const hu = 1090; // no. units on height const u_diamond = 0.71; // 0.7071 const margin = u * 10; const board_height = hu*u/2 + 2*margin; const board_width = wu*u/2 + 2*margin; let data_top, data_down, new_top, new_down, r, l, x, y, digit_top, digit_down, tx, ty; // Background const { canvas, context } = createCanvas(board_width, board_height); const pixelRatio = resize(canvas, board_width, board_height, ); context.scale(pixelRatio, pixelRatio); context.globalAlpha = 1; context.fillStyle = '#fff'; context.fillRect(0, 0, board_width, board_height); ///////////////// DATA ///////////////// const base = get_pi_txt(wu+1); data_top = [[]]; data_down = [[]]; data_top[0] = base; data_down[0] = base; for (let h = 1; h < hu; ++h){ data_top[h] = []; data_down[h] = []; for (let w = 0; w < wu-h; ++w) { l = data_top[h-1][w]; r = data_top[h-1][w+1]; new_top = algo(l, r); l = data_down[h-1][w]; r = data_down[h-1][w+1]; new_down = algo(l, r); data_top[h][w] = new_top; data_down[h][w] = new_down; } } //////////////////// DRAW //////////////// for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu-h; ++w) { context.resetTransform(); ///// TOP digit_top = data_top[h][w]; x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 - h*u/2 - u/2 + margin; context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_top[digit_top]; context.fillRect(x, y, u*u_diamond, u*u_diamond); context.resetTransform(); ///// DOWN digit_down = data_down[h][w]; if(h > 0){ x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 + h*u/2 - u/2 + margin; let ratio = 1; // digit_down * 0.1 context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_down[digit_down]; context.fillRect(x, y, u*u_diamond*ratio, u*u_diamond*ratio); context.resetTransform(); } } } return canvas; }32:Tafc,base_0_rand = { const algo = (l, r) => { let modulo = 10; let cap = 10; let res = 0; res = l + r; res = Math.min(res, cap); res = res % modulo; return (res); } let purp = ['#fff','#ccc','#999','#666','#333','#00f','#63c','#c6c','#aaf','#eef']; let green = ['#fff','#ccc','#999','#666','#333','#9c6','#fb3','#0d0','#ffb','#bf0']; //let pg = ['#fff','#0f0','#9f3','#6c6','#333','#00f','#63c','#c6c','#99c','#ccf']; let col_down = purp; let col_top = green; const u = 1; // unit const wu = 1090; // no. units on width const hu = 1090; // no. units on height const u_diamond = 0.71; // 0.7071 const margin = u * 10; const board_height = hu*u/2 + 2*margin; const board_width = wu*u/2 + 2*margin; let data_top, data_down, new_top, new_down, r, l, x, y, digit_top, digit_down, tx, ty; // Background const { canvas, context } = createCanvas(board_width, board_height); const pixelRatio = resize(canvas, board_width, board_height, ); context.scale(pixelRatio, pixelRatio); context.globalAlpha = 1; context.fillStyle = '#fff'; context.fillRect(0, 0, board_width, board_height); ///////////////// DATA ///////////////// const base = get_rand(wu+1); //get_pi_txt(wu+1); data_top = [[]]; data_down = [[]]; data_top[0] = base; data_down[0] = base; for (let h = 1; h < hu; ++h){ data_top[h] = []; data_down[h] = []; for (let w = 0; w < wu-h; ++w) { l = data_top[h-1][w]; r = data_top[h-1][w+1]; new_top = algo(l, r, h); l = data_down[h-1][w]; r = data_down[h-1][w+1]; new_down = algo(l, r, h); data_top[h][w] = new_top; data_down[h][w] = new_down; } } //////////////////// DRAW //////////////// for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu-h; ++w) { context.resetTransform(); ///// TOP digit_top = data_top[h][w]; x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 - h*u/2 - u/2 + margin; context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_top[digit_top]; context.fillRect(x, y, u*u_diamond, u*u_diamond); context.resetTransform(); ///// DOWN digit_down = data_down[h][w]; if(h > 0){ x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 + h*u/2 - u/2 + margin; let ratio = 1; // digit_down * 0.1 context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_down[digit_down]; context.fillRect(x, y, u*u_diamond*ratio, u*u_diamond*ratio); context.resetTransform(); } } } return canvas; }33:Tbf0,base_ = { const algo = (l, r, h) => { let modulo = 10; let cap_high = 10; let cap_low = 0; let res = 0; h = h % modulo; res = l + r; //res = res + h; //res = res - h; res = Math.min(res, cap_high); res = Math.max(res, cap_low); res = res % modulo; //res = l - r; res = res - h; res = Math.min(res, cap_high); res = Math.max(res, -1*res); res = res % modulo; return (res); } let purp = ['#fff','#ccc','#999','#666','#333','#00f','#63c','#c6c','#aaf','#eef']; let green = ['#fff','#ccc','#999','#666','#333','#9c6','#fb3','#0d0','#ffb','#bf0']; //let pg = ['#fff','#0f0','#9f3','#6c6','#333','#00f','#63c','#c6c','#99c','#ccf']; let col_down = purp; let col_top = green; const u = 0.5; // unit const wu = 2000; // no. units on width const hu = 2000; // no. units on height const u_diamond = 0.71; // 0.7071 const margin = u * 10; const board_height = hu*u/2 + 2*margin; const board_width = wu*u/2 + 2*margin; let data_top, data_down, new_top, new_down, r, l, x, y, digit_top, digit_down, tx, ty; // Background const { canvas, context } = createCanvas(board_width, board_height); const pixelRatio = resize(canvas, board_width, board_height, ); context.scale(pixelRatio, pixelRatio); context.globalAlpha = 1; context.fillStyle = '#fff'; context.fillRect(0, 0, board_width, board_height); ///////////////// DATA ///////////////// const base = get_pi_txt(wu+1); data_top = [[]]; data_down = [[]]; data_top[0] = base; data_down[0] = base; for (let h = 1; h < hu; ++h){ data_top[h] = []; data_down[h] = []; for (let w = 0; w < wu-h; ++w) { l = data_top[h-1][w]; r = data_top[h-1][w+1]; new_top = algo(l, r, h); l = data_down[h-1][w]; r = data_down[h-1][w+1]; new_down = algo(l, r, h); data_top[h][w] = new_top; data_down[h][w] = new_down; } } //////////////////// DRAW //////////////// for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu-h; ++w) { context.resetTransform(); ///// TOP digit_top = data_top[h][w]; x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 - h*u/2 - u/2 + margin; context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_top[digit_top]; context.fillRect(x, y, u*u_diamond, u*u_diamond); context.resetTransform(); ///// DOWN digit_down = data_down[h][w]; if(h > 0){ x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 + h*u/2 - u/2 + margin; let ratio = 1; // digit_down * 0.1 context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_down[digit_down]; context.fillRect(x, y, u*u_diamond*ratio, u*u_diamond*ratio); context.resetTransform(); } } } return canvas; }34:Tb9c,base_2 = { const algo = (l, r, h) => { let modulo = 10; let cap_high = 10; let cap_low = 0; let res = 0; h = h % modulo; res = l + r; //res = res + h; //res = res - h; res = Math.min(res, cap_high); res = Math.max(res, cap_low); res = res % modulo; //res = l - r; res = res - h; res = Math.min(res, cap_high); res = Math.max(res, -1*res); res = res % modulo; return (res); } let purp = ['#fff','#ccc','#999','#666','#333','#00f','#63c','#c6c','#aaf','#eef']; let green = ['#fff','#ccc','#999','#666','#333','#9c6','#fb3','#0d0','#ffb','#bf0']; let col_down = purp; let col_top = green; const u = 5; // unit const wu = 500; // no. units on width const hu = 500; // no. units on height const u_diamond = 0.71; // 0.7071 const margin = u * 0; const board_height = hu*u/1.76 + 2*margin; const board_width = wu*u/1.76 + 2*margin; let data_top, data_down, new_top, new_down, r, l, x, y, digit_top, digit_down, tx, ty; // Background const { canvas, context } = createCanvas(board_width, board_height); const pixelRatio = resize(canvas, board_width, board_height, ); context.scale(pixelRatio, pixelRatio); context.globalAlpha = 1; context.fillStyle = '#fff'; context.fillRect(0, 0, board_width, board_height); ///////////////// DATA ///////////////// const base = get_pi_txt(wu+1); data_top = [[]]; data_down = [[]]; data_top[0] = base; data_down[0] = base; for (let h = 1; h < hu; ++h){ data_top[h] = []; data_down[h] = []; for (let w = 0; w < wu-h; ++w) { l = data_top[h-1][w]; r = data_top[h-1][w+1]; new_top = algo(l, r, h); l = data_down[h-1][w]; r = data_down[h-1][w+1]; new_down = algo(l, r, h); data_top[h][w] = new_top; data_down[h][w] = new_down; } } //////////////////// DRAW //////////////// for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu-h; ++w) { context.resetTransform(); ///// TOP digit_top = data_top[h][w]; x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 - h*u/2 - u/2 + margin; context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_top[digit_top]; context.fillRect(x, y, u*u_diamond, u*u_diamond); context.resetTransform(); ///// DOWN digit_down = data_down[h][w]; if(h > 0){ x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 + h*u/2 - u/2 + margin; let ratio = 1; // digit_down * 0.1 context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_down[digit_down]; context.fillRect(x, y, u*u_diamond*ratio, u*u_diamond*ratio); context.resetTransform(); } } } return canvas; }35:Tb65,base_power = { const algo = (l, r) => { let power = 3 let thresold = 6**power; let cap = 0; let floor = 0; let new_d = (l**power) - (r**power); if(new_d == 0){new_d = l;} if(new_d > thresold){new_d = cap;} if(new_d < -1*thresold){new_d = floor;} return ( Math.abs(new_d) % 10); } let purp = ['#fff','#ccc','#999','#666','#333','#00f','#63c','#c6c','#aaf','#eef']; let green = ['#fff','#ccc','#999','#666','#333','#9c6','#fb3','#0d0','#ffb','#bf0']; //let pg = ['#fff','#0f0','#9f3','#6c6','#333','#00f','#63c','#c6c','#99c','#ccf']; let col_down = purp; let col_top = green; const u = 2; // unit const wu = 1400; // no. units on width const hu = 1400; // no. units on height const u_diamond = 0.71; // 0.7071 const margin = u * 10; const board_height = hu*u/1.7 + 2*margin; const board_width = wu*u/1.7 + 2*margin; let data_top, data_down, new_top, new_down, r, l, x, y, digit_top, digit_down, tx, ty; // Background const { canvas, context } = createCanvas(board_width, board_height); const pixelRatio = resize(canvas, board_width, board_height); context.scale(pixelRatio, pixelRatio); context.globalAlpha = 1; context.fillStyle = '#fff'; context.fillRect(0, 0, board_width, board_height); ///////////////// DATA ///////////////// const base = get_pi_txt(wu+1); data_top = [[]]; data_down = [[]]; data_top[0] = base; data_down[0] = base; for (let h = 1; h < hu; ++h){ data_top[h] = []; data_down[h] = []; for (let w = 0; w < wu-h; ++w) { l = data_top[h-1][w]; r = data_top[h-1][w+1]; new_top = algo(l, r); l = data_down[h-1][w]; r = data_down[h-1][w+1]; new_down = algo(l, r); data_top[h][w] = new_top; data_down[h][w] = new_down; } } //////////////////// DRAW //////////////// for (let h = 0; h < hu; ++h){ for (let w = 0; w < wu-h; ++w) { context.resetTransform(); ///// TOP digit_top = data_top[h][w]; x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 - h*u/2 - u/2 + margin; context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_top[digit_top]; context.fillRect(x, y, u*u_diamond, u*u_diamond); context.resetTransform(); ///// DOWN digit_down = data_down[h][w]; if(h > 0){ x = w*u + h*u/2 + u/2 + margin; y = hu*u/2 + h*u/2 - u/2 + margin; let ratio = 1; // digit_down * 0.1 context.translate(x, y); context.rotate(Math.PI / 4); context.translate(-1*x, -1*y); context.fillStyle = col_down[digit_down]; context.fillRect(x, y, u*u_diamond*ratio, u*u_diamond*ratio); context.resetTransform(); } } } return canvas; }36:[{"id":"34efc5064cab74f4007753420692ed31b5de2e67ff7f15f3bdf9787c825e6f5127db64a8063d75bad051c3f5a893b391e1a2f4a5f71c04dfd95d50994915f7d2","href":"https://static.observableusercontent.com/files/34efc5064cab74f4007753420692ed31b5de2e67ff7f15f3bdf9787c825e6f5127db64a8063d75bad051c3f5a893b391e1a2f4a5f71c04dfd95d50994915f7d2","name":"pi.txt","type":"text/plain","lastModified":1704315057002.266,"size":1000002}] 2f:{"id":"85b4fa83ed1ad61d","slug":null,"title":"Piangle Basics","thumbnail":"61f54f39d0bc41ee8b29a7b2e4f1994c4a54623951516b71c71a5fba5db18418","access_level":"public","create_time":"$D2024-01-03T20:50:57.002Z","update_time":"$D2026-03-15T21:43:30.603Z","view_time":null,"first_public_time":"$D2024-01-03T20:50:57.002Z","fork":{"id":"96c959207fd89916","slug":null,"title":"Piangle for Emma (diamond squared)","owner":{"id":"5d9b00b2cdcd8028","login":"emma-ba","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"5d9b00b2cdcd8028","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":"starter_2024"},"version":1830,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null}],"members":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"eb707ad90c7cf937","slug":"piangles","title":"Piangles","owner":{"id":"5d9b00b2cdcd8028","login":"emma-ba","name":""}},"type":"notebook","body":{"title":"Piangle Basics","cells":[{"id":0,"value":"# Piangle Basics\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1703,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"createCanvas = () => {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n return { canvas, context };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"resize = (canvas, width, height) => {\n // Desired width and height in pixels\n //const width = 1000;\n //const height = 500;\n \n // Device screen density, e.g. MacBook Pro is @2x\n const pixelRatio = window.devicePixelRatio;\n \n // Scale it up by pixel ratio for higher density screens\n canvas.width = width * pixelRatio;\n canvas.height = height * pixelRatio;\n \n // Set the style to the desired size so that it scales back down\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n return pixelRatio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"get_pi = (length) => {\n const D = Decimal.clone({precision: length+1});\n const one = D(1), four = D(4);\n const a = four.times(arctan(one.div(5)));\n const b = arctan(one.div(239));\n const pi = four.times(a.minus(b));\n const p = pi.toFixed(length); \n \n const digits = [3];\n for (let i = 1; i < length; ++i) {digits[i] = p[i+1]*1;}\n return digits;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function arctan(x) {\n const x2 = x.times(x);\n let k = 1, y0, y1 = x;\n do {\n y0 = y1;\n if (k & 2) y1 = y0.plus((x = x.times(x2)).div(k += 2));\n else y1 = y0.minus((x = x.times(x2)).div(k += 2));\n } while (!y1.equals(y0));\n return y1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Decimal = require(\"decimal.js-light@2/decimal.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"pi_txt = FileAttachment(\"pi.txt\").csv({array: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"get_pi_txt = (length) => {\n let pi = pi_txt[0][0];\n let digits = [];\n for (let i = 0; i < length; ++i) {digits[i] = pi[i]*1;}\n return digits;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1799,"value":"get_rand = (length) => {\n let digits = [];\n for (let i = 0; i < length; ++i) {\n digits[i] = Math.round(Math.random()*10);\n }\n return digits;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"