mutable it = ""
mutable illo = "undefined"
illo02 = {
var illo = new Zdog.Illustration({
element: DOM.canvas(width, 340),
dragRotate: true,
zoom: 2
});
illo.element.style.backgroundColor = "#FFF";
var TAU = Zdog.TAU;
const makeSpiral = () => {
let pathHelix = [];
let v, r;
for (let i = -310; i <= 310; i++) {
v = (4.0 * Math.PI * i) / 30;
r = 24;
// r = 20 - i / 72;
let x = r * Math.cos(v);
let y = i / 2;
let z = r * Math.sin(v);
let Cur = { x: x, y: y, z: z };
pathHelix.push(Cur);
}
return pathHelix;
};
const spir = new Zdog.Shape({
addTo: illo,
translate: { x: 0 },
rotate: { y: TAU / 4 },
path: makeSpiral(),
closed: false,
fill: false,
stroke: 0.3,
color: "#777"
});
let lastP = spir.path.length - 1;
let position = spir.path[lastP];
console.log(position);
/*
let partyHat = new Zdog.Cone({
addTo: spir,
translate: position,
diameter: 10,
length: 20,
rotate: { y: TAU / 2 },
stroke: false,
color: "#555",
backface: "#333"
});
*/
var sharik = new Zdog.Shape({
addTo: spir,
stroke: 6,
color: "cyan",
translate: spir.path[0]
});
spir.path.map((item, i) => {
if (Math.abs(i % 2) == 1) {
console.log(item);
let sharik2 = sharik.copy({
translate: item,
stroke: Math.abs(i % 3) == 1 ? 3 : 4 + 2 / i,
color:
Math.abs(i % 3) == 1
? "#ccc"
: Math.abs(i % 4) == 1
? "red"
: Math.abs(i % 7) == 1
? "#ccc"
: "#ccc"
});
}
});
sharik.visible = false;
illo.rotate.z = TAU / -4;
function animate() {
// rotate illo each frame
illo.zoom = zoom;
illo.rotate.x -= speed;
illo.rotate.z -= Math.cos(speed) / 10000;
illo.updateRenderGraph();
// animate next frame
requestAnimationFrame(animate);
}
// start animation
animate();
while (true) {
illo.updateRenderGraph();
yield illo.element;
}
}
import {ForceGraph} from "@d3/force-directed-graph"
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.
