carole = {
let col_down = ['#003','#fff','#cdf','#f0f','#c9c','#0ff','#ff0','#0f0','#666','#333'];
let col_top = ['#003','#fff','#cdf','#0c0','#666','#f96','#000','#f00','#ff6','#f60'];
col_top = col_down;
//col_top = col_down =['#fff', '#fff', '#bbb', '#e00','#000','#900','#f66','#f66','#900','#000'];
col_top = col_down =['#fff', '#fff', '#edd', '#06f','#fff','#666','#333','#999','#f66','#000'];
const u = 1.5; // unit
const wu = 500; // no. units on width
const hu = 500; // no. units on height
const margin = 80;
const board_height = hu*u + 2*margin;
const board_width = wu*u + 2*margin;
let data_top, data_down, new_top, new_down, r, l, x, y, digit_top, digit_down;
// 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_height, board_width);
///////////////// 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, 10);
//l = data_down[h-1][w];
//r = data_down[h-1][w+1];
//new_down = algo(l, r, 10);
data_top[h][w] = new_top;
data_down[h][w] = new_top;
}
}
//////////////////// DRAW ////////////////
for (let h = 0; h < hu; ++h){
for (let w = 0; w < wu-h; ++w) {
///// TOP
digit_top = data_top[h][w];
x = w*u + margin;
y = w*u + h*u + margin;
context.fillStyle = col_top[digit_top];
context.fillRect(x, y, u, u);
///// DOWN
if(h!=0){
digit_down = data_down[h][w];
x = w*u + h*u + margin;
y = w*u + margin;
context.fillStyle = col_down[digit_down];
context.fillRect(x, y, u, u);
}
}
}
return canvas;
}
algo = (l, r) => {
let modulo = 10;
let start = 8;
let thres_s = 10;
let thres_d = 2;
let diff = Math.abs(l - r);
let sum = l + r;
let new_d = start;
if(l == r){new_d = r;}
else if(l%r == 0){new_d = r;}
else if(r%l == 0){new_d = l;}
if(sum > thres_s){ new_d = sum ;}
if(diff > thres_d){ new_d = diff ;}
return new_d % modulo;
}
get_pi_txt(10)
12%1
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.
