Creative coder working at the intersection of computation and creativity.
Published
Edited
May 24, 2021
2 stars
goodgraphics(
{
height: 600,
width: 600,
attributes: {
fill: "none",
style: "background: #fff",
stroke: "none"
}
},
(svg) => {
const numberOfCircles = 6;
const circlesPerSegment = numberOfCircles / 3;
const cyan = "#00FFFF";
const magenta = "#FF00FF";
const yellow = "#FFFF00";
svg.times(numberOfCircles, (circleIndex) => {
const rotateAmt = svg.map(circleIndex, 0, numberOfCircles, 0, 360);
// what two colors are we between
const cmykRange = circleIndex / numberOfCircles;
// how far between the colors are we
const lerpPercent = (circleIndex % circlesPerSegment) / circlesPerSegment;
let startColor = "";
let endColor = "";
if (cmykRange < 1 / 3) {
startColor = cyan;
endColor = magenta;
} else if (cmykRange < 2 / 3) {
startColor = magenta;
endColor = yellow;
} else {
startColor = yellow;
endColor = cyan;
}
svg.circle(svg.width / 2, svg.height * 0.3, svg.width * 0.25, {
fill: svg.lerpColor(startColor, endColor, lerpPercent),
style: "opacity: .9; mix-blend-mode: multiply;",
transform: `rotate(${rotateAmt} ${svg.width / 2} ${svg.height / 2})`
});
});
svg.draw();
}
)
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.
