Web developer and autodidact with an interest in creative coding.
dog = illo => {
const body = new Zdog.Shape({
addTo: illo,
stroke: 50,
path: [{ y: 0 }, { y: 30 }],
color: '#555',
});
const leftEye = new Zdog.Shape({
addTo: body,
translate: { x: -10, z: 20, y: 5 },
stroke: 10,
color: '#aff',
})
const rightEye = leftEye.copy({
translate: { x: 10, z: 20, y: 5 },
});
const PI = Math.PI;
const ah = Array(5).fill().map((_,i,arr) => {
const t = i/arr.length;
const c = `hsl(${t*360+30},100%,50%)`;
const a = axesHelper({stroke:3, size: 60, head: 30, x:c,y:c,z:c});
a.rotate.x += PI;
a.rotate.z += PI/4+.3;
a.rotate.y += t*PI*2;
a.translate.y += -25;
body.addChild(a);
return a;
});
const lerp = (a,b,t) => a + (b-a) * t, scos = a => Math.cos(a) * .5 + .5, rng = Math.random, PI2 = Math.PI * 2;
let bx = 0, by = 0, bz = 0;
return (frame, dogs) => {
if(!(frame % 60)) {
bx = lerp(-.4, .4, rng());
by = body.rotate.y + lerp(-3, 3, rng());
}
body.rotate.x = lerp(body.rotate.x, bx, .1);
body.rotate.y = lerp(body.rotate.y, by, .2);
const ft = frame * .1;
leftEye.stroke = lerp(5, 20, scos(ft+Math.PI));
rightEye.stroke = lerp(5, 20, scos(ft));
ah.map((a, i, arr) => {
const t = i/arr.length;
const s = Math.cos(t * PI2 + ft) * .5 + 1;
for(let c of a.children) {
const cs = c.children[0].scale;
cs.x = cs.y = cs.z = s;
}
});
}
}
Zdog = require('zdog@1/dist/zdog.dist.min.js')
import {axesHelper} with {Zdog} from '@mootari/zdog-helpers'
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.
