here to learn
CindyJS = {
const CindyJS = window.CindyJS = await require('https://cindyjs.org/dist/latest/Cindy.js').catch(() => window.CindyJS);
await require('https://cindyjs.org/dist/latest/CindyGL.js').catch(() => {});
return CindyJS;
}
CindyJScss = html`<link rel="stylesheet" href="https://cindyjs.org/dist/latest/CindyJS.css" />`
cdy = id => (strings, ...exps) =>
html`<script id="${id}" type="text/cindyscript">${String.raw(
strings,
...exps
)}</script>`
juliaCindy = {
// the following lines mark those cells as dependencies of this one in the Observable runtime
cdyJuliaInit;
cdyJuliaDraw;
juliaCanvas;
const gslp = [];
const cdy = CindyJS({
scripts: "julia*",
geometry: gslp,
animation: { autoplay: true },
ports: [
{
id: "JuliaCanvas",
width: width,
height: Math.floor(width / 2),
transform: [{ visibleRect: [-1.5, -1.5, 6, 1.5] }]
}
]
});
cdy.startup();
invalidation.then(() => cdy.shutdown());
return cdy;
}
cdyJuliaInit = cdy`juliainit``
use("CindyGL");
f(z, c) := z*z+c;
fp(c) := (1-sqrt(1-c*4))/2; //Fixpoint of f
createimage("juliaconj", ${width}, ${Math.floor(width / 2)});
createimage("julia", ${Math.floor(width / 2)}, ${Math.floor(width / 2)});
L = [-2*pi, -pi];
R = [2*pi,- pi];`
cdyJuliaDraw = cdy`juliadraw``
c = sin(1.5*mouse().x)/1.5 + i*sin(1.5*mouse().y)/1.5;
d = fp(c);
//min(continious escape time, 1)
cesc(z) := (
l0 = abs(z);
l1 = abs(f(z,c));
if(l0<4,
if(l1 < 4,
1,
re(log(3/l0))/re(log(l1/l0))
), 0
)
);
color(z) := (
z = exp(z)+d;
r = log(f(z, c) - d);
if(abs(z)<4, if(re(r) > L.x+.01, imagergb(L, R, "juliaconj", r) + cesc(z)/120*(1,2,3), (1,.7,0)), (0,0,0));
);
colorplot(L, R, "juliaconj", (color(complex(#))));
drawimage([1.5,-1.5], [7.5,-1.5], "juliaconj");
colorplot([-1.5,-1.5], [1.5,-1.5], "julia", imagergb(L, R, "juliaconj", log(if( # * (re(d), im(d)) > 0, complex(#), complex(-#))-d)));
drawimage([-1.5,-1.5], [1.5,-1.5], "julia");
draw([1.5,-1.5],[1.5,1.5], color->(1,1,1));`
viewof juliaToggle = {
const jumpback = '<a href=#juliaCanvas>(jump back to JuliaCanvas)</a>';
const tog = toggle(
{ title: 'Return to Julia set of f(z,c)=z<sup>2</sup>+c. '+jumpback,
title_off: 'Change to Julia set of f(z,c)=z<sup>4</sup>+c. '+jumpback,
value:false });
tog.addEventListener('input', event => {
if (tog.value) juliaCindy.evokeCS(
`f(z,c) := z*z*z*z+c;
fp(c) := ( // fixed point of z^4 + c
sq = (9-sqrt(768*c*c*c))^(1/3);
num = sqrt((8*3^(1/3)*c+2^(1/3)*sq*sq)/sq);
num/(2*6^(1/3))-sqrt(-4*(2/3)^(1/3)*c/sq-sq/(2^(1/3)*3^(2/3))-2*6^(1/3)/num)/2
);
forcerecompile();`);
else juliaCindy.evokeCS('f(z,c) := z*z+c; fp(c) := (1-sqrt(1-c*4))/2; forcerecompile();');
});
return tog;
}
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.
