I mix two fundamental disciplines, Graphic Design and Computer Programming, to make stuff.
Published
Edited
Sep 27, 2022
3 stars
{
var two = new Two({
type: Two.Types.canvas,
width: width,
height: 300,
autostart: true
});
var signum = two.interpret(svg.querySelector('svg')).children[0];
var rect;
function setup() {
rect = signum.getBoundingClientRect(true);
for (var i = 0; i < signum.vertices.length; i++) {
var v = signum.vertices[i];
v.x -= rect.left + rect.width / 2;
v.y -= rect.top + rect.height / 2;
v.origin = new Two.Vector(v.x, v.y);
}
two.add(signum);
two.bind('resize', resize);
two.bind('update', update);
resize();
}
function resize() {
two.scene.translation.set(two.width / 2, two.height / 2);
}
function update(frameCount, timeDelta) {
var tick = (250 + frameCount) / 60;
tick += Math.sin(Math.PI * 0.125 * frameCount / 15) * 0.15;
tick += Math.sin(Math.PI * 0.001 * frameCount / 15) * 0.33;
for (var i = 0; i < signum.vertices.length; i++) {
var pct = i / (signum.vertices.length - 1);
var v = signum.vertices[i];
var xpct = v.origin.x / rect.width + tick;
var ypct = v.origin.y / rect.height + tick;
v.x = v.origin.x + 25 * fieldX(ypct * 0.33);
v.y = v.origin.y + 25 * fieldY(xpct * 1.25);
}
}
function fieldX(v) {
return Math.sin(v * Math.PI);
}
function fieldY(v) {
return Math.sin(v * Math.PI);
}
setup();
return two.renderer.domElement;
}
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.
