Rendering two interesting parametric functions. Left: a Hypotrochoid; right: a more complex function. Both functions are rendered using 100k circles.
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="../common/style.css" type="text/css" />
<style type="text/css">
#main-canvas {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
}
</style>
<canvas id="main-canvas"></canvas>
<div class="fps"></div>
<div class="initializing"><p>Initializing...</p></div>
<script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
<script src="../common/utils.js" type="text/javascript"></script>
<script type="text/javascript">
var canvas = document.getElementById("main-canvas");
var width = 960;
var height = 500;
var margin = 10;
var marginLeft = 35;
var marginBottom = 20;
var platform = Stardust.platform("webgl-2d", canvas, width, height);
var circleMark = Stardust.mark.circle(8);
var data = [];
var N = 100000;
for (var i = 0; i < N; i++) {
data.push((i / N) * Math.PI * 2);
}
// Color based on phase
var scaleColor = Stardust.scale.custom(`hcl2rgb(Color(value + shift, 0.5, 0.5, 0.1))`);
scaleColor.attr("shift", 0);
var left = Stardust.mark.create(circleMark, platform);
var scaleLeft = Stardust.scale
.custom(
`
Vector2(
(R - r) * cos(value) + d * cos((R / r - 1) * value),
(R - r) * sin(value) - d * sin((R / r - 1) * value)
) * size + center
`
)
.attr("d", 2.19)
.attr("R", 5)
.attr("r", 5 * (18 / 41))
.attr("size", 45)
.attr("center", "Vector2", [-13.33 + 250, 250]);
left.attr("center", scaleLeft(d => d * 41));
left.attr("radius", 1);
left.attr("color", scaleColor(d => d * 41));
left.data(data);
var right = Stardust.mark.create(circleMark, platform);
var scaleRight = Stardust.scale
.custom(
`
Vector2(
cos(a * value) - cos(b * value) * cos(b * value) * cos(b * value),
sin(c * value) - sin(d * value) * sin(d * value) * sin(d * value)
) * size + center
`
)
.attr("a", 80)
.attr("b", 1)
.attr("c", 1)
.attr("d", 80)
.attr("size", 110)
.attr("center", "Vector2", [-13.33 * 2 + 1000 - 250, 250]);
right.attr("center", scaleRight(d => d));
right.attr("radius", 1);
right.attr("color", scaleColor(d => d));
right.data(data);
function render() {
left.render();
right.render();
}
var t0 = new Date().getTime();
var fps = new FPS();
d3.timer(function() {
var t = new Date().getTime() - t0;
scaleLeft.attr("d", 1.95 + Math.sin(t / 500) * 0.4);
scaleColor.attr("shift", (t / 250) % (Math.PI * 2));
render();
fps.update();
});
</script>