Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active January 3, 2024 15:41
Show Gist options
  • Save mbostock/1021103 to your computer and use it in GitHub Desktop.
Save mbostock/1021103 to your computer and use it in GitHub Desktop.
Download ZIP
Superformula Explorer
Raw
.block
license: gpl-3.0
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Superformula</title>
<style>
path {
stroke-width: 1.5px;
stroke: #666;
fill: #ddd;
}
#controls {
position: absolute;
width: 240px;
font: 10px sans-serif;
}
#controls span,
#controls label {
position: relative;
top: -5px;
padding: 5px;
display: inline-block;
width: 20px;
}
#controls button {
font: 10px sans-serif;
padding: 5px;
width: 70px;
}
</style>
<div id="controls"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="superformula.js"></script>
<script>
var types = {
asterisk: {m: 12, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
bean: {m: 2, n1: 1, n2: 4, n3: 8, a: 1, b: 1},
butterfly: {m: 3, n1: 1, n2: 6, n3: 2, a: .6, b: 1},
circle: {m: 4, n1: 2, n2: 2, n3: 2, a: 1, b: 1},
clover: {m: 6, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
cloverFour: {m: 8, n1: 10, n2: -1, n3: -8, a: 1, b: 1},
cross: {m: 8, n1: 1.3, n2: .01, n3: 8, a: 1, b: 1},
diamond: {m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1},
drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1},
ellipse: {m: 4, n1: 2, n2: 2, n3: 2, a: 9, b: 6},
gear: {m: 19, n1: 100, n2: 50, n3: 50, a: 1, b: 1},
heart: {m: 1, n1: .8, n2: 1, n3: -8, a: 1, b: .18},
heptagon: {m: 7, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
hexagon: {m: 6, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
malteseCross: {m: 8, n1: .9, n2: .1, n3: 100, a: 1, b: 1},
pentagon: {m: 5, n1: 1000, n2: 600, n3: 600, a: 1, b: 1},
rectangle: {m: 4, n1: 100, n2: 100, n3: 100, a: 2, b: 1},
roundedStar: {m: 5, n1: 2, n2: 7, n3: 7, a: 1, b: 1},
square: {m: 4, n1: 100, n2: 100, n3: 100, a: 1, b: 1},
star: {m: 5, n1: 30, n2: 100, n3: 100, a: 1, b: 1},
triangle: {m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1}
};
var format = d3.format(".4n");
var scale = d3.scale.linear()
.domain([-10, 20, 1000])
.range([0, 800, 1000]);
var svg = d3.select("body")
.append("svg")
.attr("width", 960)
.attr("height", 500);
var shape = d3.superformula()
.type("asterisk")
.size(100000)
.segments(3600);
var path = svg.append("path")
.attr("class", "big")
.attr("transform", "translate(480,250)")
.attr("d", shape);
var control = d3.select("#controls")
.selectAll("div")
.data(d3.entries(types.asterisk))
.enter().append("div")
.attr("id", function(d) { return d.key; });
control.append("label")
.text(function(d) { return d.key; });
control.append("input")
.attr("type", "range")
.attr("max", 1000)
.attr("min", 0)
.property("value", function(d) { return scale(d.value); })
.on("change", changed)
.on("input", changed);
control.append("span")
.text(function(d) { return format(d.value); });
d3.select("#controls")
.append("div")
.selectAll("button")
.data(d3.entries(types))
.enter().append("button")
.text(function(d) { return d.key; })
.on("click", function(d) {
for (var param in d.value) {
var control = d3.select("#" + param);
control.select("input").property("value", scale(d.value[param]));
control.select("span").text(format(d.value[param]));
shape.param(param, d.value[param]);
}
path.attr("d", shape);
});
function changed(d) {
var v = scale.invert(this.value);
path.attr("d", shape.param(d.key, v));
d3.select(this.nextSibling).text(format(v));
}
</script>
Raw
superformula.js
(function() {
var _symbol = d3.svg.symbol(),
_line = d3.svg.line();
d3.superformula = function() {
var type = _symbol.type(),
size = _symbol.size(),
segments = size,
params = {};
function superformula(d, i) {
var n, p = _superformulaTypes[type.call(this, d, i)];
for (n in params) p[n] = params[n].call(this, d, i);
return _superformulaPath(p, segments.call(this, d, i), Math.sqrt(size.call(this, d, i)));
}
superformula.type = function(x) {
if (!arguments.length) return type;
type = d3.functor(x);
return superformula;
};
superformula.param = function(name, value) {
if (arguments.length < 2) return params[name];
params[name] = d3.functor(value);
return superformula;
};
// size of superformula in square pixels
superformula.size = function(x) {
if (!arguments.length) return size;
size = d3.functor(x);
return superformula;
};
// number of discrete line segments
superformula.segments = function(x) {
if (!arguments.length) return segments;
segments = d3.functor(x);
return superformula;
};
return superformula;
};
function _superformulaPath(params, n, diameter) {
var i = -1,
dt = 2 * Math.PI / n,
t,
r = 0,
x,
y,
points = [];
while (++i < n) {
t = params.m * (i * dt - Math.PI) / 4;
t = Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(t) / params.a), params.n2)
+ Math.pow(Math.abs(Math.sin(t) / params.b), params.n3)), -1 / params.n1);
if (t > r) r = t;
points.push(t);
}
r = diameter * Math.SQRT1_2 / r;
i = -1; while (++i < n) {
x = (t = points[i] * r) * Math.cos(i * dt);
y = t * Math.sin(i * dt);
points[i] = [Math.abs(x) < 1e-6 ? 0 : x, Math.abs(y) < 1e-6 ? 0 : y];
}
return _line(points) + "Z";
}
var _superformulaTypes = {
asterisk: {m: 12, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
bean: {m: 2, n1: 1, n2: 4, n3: 8, a: 1, b: 1},
butterfly: {m: 3, n1: 1, n2: 6, n3: 2, a: .6, b: 1},
circle: {m: 4, n1: 2, n2: 2, n3: 2, a: 1, b: 1},
clover: {m: 6, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
cloverFour: {m: 8, n1: 10, n2: -1, n3: -8, a: 1, b: 1},
cross: {m: 8, n1: 1.3, n2: .01, n3: 8, a: 1, b: 1},
diamond: {m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1},
drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1},
ellipse: {m: 4, n1: 2, n2: 2, n3: 2, a: 9, b: 6},
gear: {m: 19, n1: 100, n2: 50, n3: 50, a: 1, b: 1},
heart: {m: 1, n1: .8, n2: 1, n3: -8, a: 1, b: .18},
heptagon: {m: 7, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
hexagon: {m: 6, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
malteseCross: {m: 8, n1: .9, n2: .1, n3: 100, a: 1, b: 1},
pentagon: {m: 5, n1: 1000, n2: 600, n3: 600, a: 1, b: 1},
rectangle: {m: 4, n1: 100, n2: 100, n3: 100, a: 2, b: 1},
roundedStar: {m: 5, n1: 2, n2: 7, n3: 7, a: 1, b: 1},
square: {m: 4, n1: 100, n2: 100, n3: 100, a: 1, b: 1},
star: {m: 5, n1: 30, n2: 100, n3: 100, a: 1, b: 1},
triangle: {m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1}
};
d3.superformulaTypes = d3.keys(_superformulaTypes);
})();
@rrodkin
Copy link

rrodkin commented Jul 31, 2013

Hi . . . love the SF Explorer, but FYI, it seems to be broken in Chrome 28.0.1500.71 / Mac OS X 10.7.5. Basically, the outer frame and HTML load-in fine, but the Explorer content itself does not -- just a big blank box. Works fine in Safari, so apparently a Chrome-specific issue.

And the Tweening version works as expected, so something must have 'fallen off' between versions . . .

Thought you might want to know.

@rrodkin
Copy link

rrodkin commented Jul 31, 2013

It turns out that it has to do with the fact that you are now serving the superformula.js script from raw.github.org, and Chrome won't read the Mime Type and process the script. So nothing wrong with the code, just where it is being served from.

Here is a comment I found on code.google.com:

"GitHub does in fact serve assets from raw.github.org with a X-Content-Type-Options: nosniff header. Chrome matches the behavior of IE8, 9, and 10 on this page, and Gecko will match if/when they fix https://bugzilla.mozilla.org/show_bug.cgi?id=471020.

[I've] had conversations with GitHub folks about this issue in particular; they don't actually want folks serving files from raw.github.org, which is why they serve resources with the 'nosniff' header. They'd prefer that you set up something on GitHub Pages."

@saurfang
Copy link

This is really cool and useful. I used a workaround on the content type and also updated the input event so it changes continuously as you move the slider. Please take a look if anyone is interested: http://bl.ocks.org/saurfang/4e4f5c8b8abb87dc1efb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment