igor_best = {
const col_top = [
'#f0f', // mountain
'#ff5', // tree (pastel green D5ED9F)
'#f90', // diag + middle tri
'#f36', // center line only FFF8DC F3FDE8
'#c33', // low mountain
'#09f',
'#0d3', // diag (brown b14F1E) (dark purple 910A67) (orangy-brown BB371A)
'#9f0', // diag + small tri (light brown DC6B19) (grey rose F28585)
'#dfc',
'#fff' // diag + tiny tri (lighter brown DEAC80)
//'#97d5c4' // (pink)
]; // diag + tiny mountain
const col_bottom = ['#00f', // diag center
'#6cf', // diag
'#0ff', // diag ext 1
'#fff', // diag ext 2
'#FFc996', // taupe diag ext 5 + surface 2 (light pink EED3D9) (dark pink 910A67) (orig EF9C66)
'#f9c', // diag ext 3 + surface 1
'#d17', //diag ext 4 // (drak blue grey 3876BF)
'#FFDBB5', // diag ext 6 + surface 3 (pink E90074) (orig FFB996)
'#FFE9D0', // diag ext 7 (orig FFDBB5)
'#fff']; // brown
const u = 2; // unit
const wu = 516; // no. units on width
const hu = 516; // no. units on height
const margin = 60;
const board_height = hu*u + 2*margin;
const board_width = wu*u + 2*margin;
let data_top, new_top, r, l, x, y, digit_top;
// 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_top[0] = base;
for (let h = 1; h < hu; ++h){
data_top[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_igor(l, r);
data_top[h][w] = new_top;
}
}
//////////////////// DRAW ////////////////
for (let h = 0; h < hu; ++h){
for (let w = 0; w < wu-h; ++w) {
///// BOTTOM
digit_top = data_top[h][w];
x = w*u + margin;
y = w*u + h*u + margin;
context.fillStyle = col_bottom[digit_top];
context.fillRect(x, y, u, u);
}
}
for (let h = 0; h < hu; ++h){
for (let w = 0; w < wu-h; ++w) {
///// TOP
if(h!=0){
digit_top = data_top[h][w];
x = w*u + h*u + margin;
y = w*u + margin;
context.fillStyle = col_top[digit_top];
context.fillRect(x, y, u, u);
}
}
}
return canvas;
}
silvia = {
const col_top = ['#fff', // center line only FFF8DC F3FDE8
'#910A67', // diag (brown b14F1E)
'#F28585', // diag + small tri (light brown DC6B19)
'#FFCF96', // diag + tiny tri (lighter brown DEAC80)
'#F7DCB9', // diag + middle tri
'#d8f8e0', // (pink)
'#50B020', // mountain
'#D5ED9F', // tree
'#FfFfF9', // low mountain
'#DCFFB7' //'#393' //'#DCFFB7'
]; // diag + tiny mountain
const col_bottom = ['#000', // diag center
'#3ABEF9', // diag
'#A7E6FF', // diag ext 1
'#A7f0a6', // diag ext 2
'#FFD18E', // diag ext 3 + surface 1
'#E92074', //diag ext 4 // (drak blue grey 3876BF)
'#FFB096', // diag ext 6 + surface 3 (pink E90074)
'#ee9070', // taupe diag ext 5 + surface 2 (light pink EED3D9) (dark pink 910A67)
'#FFDBB5', // diag ext 7
'#fff']; // brown
const u = 1; // unit
const wu = 1000; // no. units on width
const hu = 1000; // no. units on height
const margin = 10;
const board_height = hu*u + 2*margin;
const board_width = wu*u + 2*margin;
let data_top, new_top, r, l, x, y, digit_top;
// 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_top[0] = base;
for (let h = 1; h < hu; ++h){
data_top[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_silvia(l, r);
data_top[h][w] = new_top;
}
}
//////////////////// DRAW ////////////////
for (let h = 0; h < hu; ++h){
for (let w = 0; w < wu-h; ++w) {
///// BOTTOM
digit_top = data_top[h][w];
x = w*u + margin;
y = w*u + h*u + margin;
context.fillStyle = col_bottom[digit_top];
context.fillRect(x, y, u, u);
}
}
for (let h = 0; h < hu; ++h){
for (let w = 0; w < wu-h; ++w) {
///// TOP
if(h!=0){
digit_top = data_top[h][w];
x = w*u + h*u + margin;
y = w*u + margin;
context.fillStyle = col_top[digit_top];
context.fillRect(x, y, u, u);
}
}
}
return canvas;
}
algo_igor = (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 & r>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;
}
algo_silvia = (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 & r>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;
}
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.
