anna = { // Fractal pine trees on a mountain lake
const col = ['#00f','#000','#606','#666','#0f0','#09f','#930','#f60','#f0f','#fff'];
const col_down = ['#00f','#090','#c0c','#ccc','#0f0','#09f','#c60','#f93','#f0f','#fff'];
const u = 1.5; // unit
const wu = 400; // no. units on width
const hu = 400; // no. units on height
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 = 2*20;
const board_height = height; //1000*5.5;
const board_width = width; //1414*5.5;
let data_top, data_down, new_top, new_down, r, l, x, y, digit_top, digit_down;
let ray = 0.7;
let trans_x = (board_width - width)/2;
let trans_y = (board_height - height)/2;
// Background
const { canvas, context } = createCanvas();
const pixelRatio = resize(canvas, board_width + 2*margin, board_height + 2*margin, );
context.globalAlpha = 1;
context.scale(pixelRatio, pixelRatio);
context.fillStyle = '#000';
context.fillRect(0, 0, board_width+2*margin, board_height+2*margin);
///////////////// 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 = 1; w < wu; ++w) {
if(w > (wu-h)){
new_top = 0;
new_down = 0;
} else {
r = data_top[h-1][w+1];
l = data_top[h-1][w];
new_top = alg_paon(l, r, 2, 10); //thres, modulo
r = data_down[h-1][w+1];
l = data_down[h-1][w];
new_down = alg_paon(l, r, 2, 20);
}
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) {
///// TOP
digit_top = data_top[h][w];
if(digit_top != 0){
x = u*w*2 + h*u + margin/2 + trans_x;
y = (hu-h)*u + margin/2 + trans_y;
context.fillStyle = col[digit_top];
context.fillRect(x, y, u, u);
}
///// DOWN
digit_down = Math.round(data_down[h][w])%10;
if(digit_down != 0){
if(digit_top == digit_down) {
//context.globalAlpha = 1;
//context.fillStyle = col[digit_down];
} else if(digit_top == 4 | digit_top == 9 | digit_top == digit_down){
context.globalAlpha = 1;
context.fillStyle = col_down[digit_down];
} else {
context.globalAlpha = 0.4;
context.fillStyle = col[digit_down];
}
x = u*w*2 + h*u + margin/2 + trans_x;
y = h*u + margin/2 + hu*u + trans_y;
context.fillRect(x, y, u, u);
}
context.globalAlpha = 1;
}
}
return canvas;
}
alg_paon = (l, r, thres, modulo) => {
let diff = Math.abs(l - r);
let sum = l + r;
let new_d = 0;
if(l == r){new_d = r;}
else if(l%r == 0){new_d = r;}
else if(r%l == 0){new_d = l;}
if(diff < thres){ new_d = sum ;}
return new_d % modulo;
}
get_pi_txt(10)
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.
