Public
Edited
Sep 14, 2023
Insert cell
Insert cell
guido = {
//const col_top = ['#cff','#fff','#09f','#009','#d0d','#f00','#f90','#f9f','#0c0','#ff0'];
const col_top = ['#fff','#ccc','#999','#666','#333','#000','#333','#666','#999','#ccc'];
//const col_top = ['#ccc','#fff','#999','#666','#333','#000','#333','#666','#999','#ccc'];
const col_down = ['#fff','#ccc','#999','#666','#333','#000','#333','#666','#999','#ccc'];
const shift_top = 2;
const shift_down = 2;
const u = 10; // unit
const wu = 320; // no. units on width
const hu = 320; // no. units on height
const width = wu*u;
const height = hu*u;
const margin = u*8;
const board_height = height/2.4 + 2*margin;
const board_width = width/2.4 + 2*margin;
const u_diamond = 0.71; // 0.7071
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; ++w) {
if(w < h){
new_top = 0;
new_down = 0;
} else {
r = data_top[h-1][w];
l = data_top[h-1][w-1];
new_top = alg_down(l, r);
r = data_down[h-1][w];
l = data_down[h-1][w-1];
new_down = alg_down(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; ++w) {
context.resetTransform();
///// TOP
//context.globalAlpha = 0.9;
digit_top = data_top[h][w];
if(w > h){
x = w*u - h*u/2 + u/2 + margin;
y = height/2 - h*u/2 - u/2 + margin;

context.translate(x, y);
context.rotate(Math.PI / 4);
context.translate(-1*x, -1*y);
digit_top = (digit_top + shift_top)%10;
context.fillStyle = col_top[digit_top];
context.fillRect(x, y, u*u_diamond, u*u_diamond);
context.resetTransform();
}
///// DOWN
//context.globalAlpha = 0.5;
digit_down = data_down[h][w];
if(w > h & h>0){
x = w*u - h*u/2 + u/2 + margin;
y = height/2 + h*u/2 - u/2 + margin;

context.translate(x, y);
context.rotate(Math.PI / 4);
context.translate(-1*x, -1*y);
digit_down = (digit_down + shift_down)%10;
context.fillStyle = col_down[digit_down];
context.fillRect(x, y, u*u_diamond, u*u_diamond);
context.resetTransform();
}
}
}
return canvas;
}
Insert cell
alg_top = (l, r) => {
let modulo = 10;
let new_d;
l = l +1;
r = r +1;
let diff = Math.abs(l-r);
if(diff == 0){
new_d = l;
} else {
new_d = diff;
if(l>1 & l>1){
let small = Math.min(l,r);
let big = Math.max(l,r);
let mod = big % small;
if(mod == 0){ new_d = small;}
else{ new_d = small + mod;}
}
}
return new_d % modulo;
}
Insert cell
alg_down = (l, r) => {
let diff = Math.abs(l-r);
let new_d;
if(diff == 0){
new_d = l-1;
} else {
new_d = diff;
if(l>1 & l>1){
let small = Math.min(l,r);// +1;
let big = Math.max(l,r);// -1;
let mod = big % small;
if(mod == 0){ new_d = big -1;}
//else{ new_d = big - mod;}
}
}
return new_d;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more