Public
Edited
Sep 23, 2024
Fork of Piangle
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
test16 = {
const u = 2; // unit
const wu = 500; // no. units on width
const hu = 150; // no. units on height
const width = wu*u*2; // double the units to have spaces between squares
const height = hu*u;

// const col = ['#00f','#000','#666','#900','#0f0','#f00','#0f0','#900','#0f0','#0f0'];
const col = ['#00f','#000','#c00','#0f0','#f0f','#09f','#666','#fff','#999','#f60'];
const start = 0;
const rep = 0;
const thres = 5;
const D = Decimal.clone({precision: wu*2+1});
const one = D(1), four = D(4);
const a = four.times(arctan(one.div(5)));
const b = arctan(one.div(239));
const pi = four.times(a.minus(b));
const p = pi.toFixed(wu*3);
let data = [[]];
const base = [3];
for (let i = 1; i < wu*3; ++i) {base[i] = p[i+1]*1;}
data[0] = base;
for (let h = 1; h < hu; ++h){
data[h] = [];
for (let w = 0; w < wu*3; ++w) {
if(w < h){ data[h][w] = 0; } else {
let l = data[h-1][w];
let r = data[h-1][w-1];
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;}
//else if(l>r){new_d = l%r;}
//else if(r>l){new_d = r%l;}
if(diff > thres){ new_d = diff ;}
if(sum > thres){ new_d = sum ;}
data[h][w] = new_d % 10;
}
}
}

const { canvas, context } = createCanvas();
const pixelRatio = resize(canvas, width, height, );
context.globalAlpha = 1;
context.scale(pixelRatio, pixelRatio);
context.fillStyle = 'black';
context.fillRect(0, 0, width, height);

let x, y, digit;
for (let h = 0; h < hu; ++h){
for (let w = 0; w < wu; ++w) {
if(w >= h){
digit = data[h][w]*1;
x = u*w*2 -h*u;
y = (hu-h-1)*u;
context.fillStyle = col[digit];
context.fillRect(x, y, u, u);
// context.fillStyle = "#f00";
// context.fillText(digit, x , y +u );
}
}
}
return canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
testttt4 = {
const u = 2; // unit
const wu = 500; // no. units on width
const hu = 150; // no. units on height

const col = ['#000','#009','#09f','#666','#900','#f00','#f90','#ddd','#060','#0c0'];
const start = 0;

const base = get_pi(wu*2);
let data = [[]];
data[0] = base;
for (let h = 1; h < hu; ++h){
data[h] = [];
for (let w = 0; w < wu*2; ++w) {
let r = data[h-1][w+1];// +1;
let l = data[h-1][w];// +1;
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 = small +1;}
else{ new_d = small + mod;}
}
}
data[h][w] = new_d;// % 10;
}
}

const width = wu*u*2; // double the units to have spaces between squares
const height = hu*u;
const { canvas, context } = createCanvas();
const pixelRatio = resize(canvas, width, height, );
context.globalAlpha = 1;
context.scale(pixelRatio, pixelRatio);
context.fillStyle = 'black';
context.fillRect(0, 0, width, height);

let x, y, digit;
for (let h = 0; h < hu; ++h){
for (let w = 0; w < wu; ++w) {
digit = data[h][w]*1;
x = u*w*2 + h*u;
y = (hu-h-1)*u;
context.fillStyle = col[digit];
context.fillRect(x, y, u, u);
}
}
return canvas;
}
Insert cell
Insert cell
Insert cell
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