I’ve been having fun trying out David DeSandro‘s ace javascript pseudo-3D animation library Zdog.
<canvas style="display: block; margin: 40px auto;" class="zdog-canvas" width="480" height="480"></canvas>
// create illo
const illo = new Zdog.Illustration({
// set canvas with selector
element: '.zdog-canvas',
scale: 2.5,
});
const faceGroup = new Zdog.Group({
addTo: illo
});
// face
const face = new Zdog.Hemisphere({
addTo: faceGroup,
diameter: 180,
color: '#ee3',
fill: true,
});
const face2 = new Zdog.Hemisphere({
addTo: faceGroup,
diameter: 180,
scale: { z: -1 },
color: '#ff5',
fill: true,
});
// left eye
const eyeLeft = new Zdog.Ellipse({
addTo: faceGroup,
diameter: 30,
translate: { x: 40, y: -10, z: 50 },
rotate: { y: -0.5 },
scale: { x: 0.65 },
color: '#333',
fill: true,
});
// right eye
const eyeRight = eyeLeft.copy({
translate: { x: -40, y: -10, z: 50 },
rotate: { y: 0.5 },
});
// mouth
const mouth = eyeLeft.copy({
diameter: 30,
// stroke: 10,
translate: { y: 40, z: 40 },
rotate: { x: -0.5 },
scale: { x: 3 },
color: '#333',
// fill: false,
});
// update & render
// illo.updateRenderGraph();
let i = 0.1,
y = 0.005;
function animate() {
// rotate illo each frame
// illo.rotate.x = Math.sin(i) * 4.5;
i += 0.05;
illo.rotate.y = Math.sin(i);
illo.rotate.z = Math.cos(i) * 0.5;
illo.rotate.x = Math.cos(y+=0.005) * 1.2;
illo.updateRenderGraph();
mouth.scale.y = Math.cos(i);
// animate next frame
requestAnimationFrame( animate );
}
// start animation
animate(); I was thinking of those transparent bouncy balls with things inside them.
Also I used CodePen’s prefill embed feature to embed the pen here and it worked a treat!