initial

2015-08-04 16:07:20 -05:00 · 2015-08-04 16:07:20 -05:00 · cc17a9b6e6
commit cc17a9b6e6
2 changed files with 96 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>SuFoGraph - Super Formula Guilloché patterns</title>
+<meta charset="UTF-8">
+<script type="text/javascript" src="main.js"></script>
+<style>
+body { margin: 0; padding: 0; overflow:hidden; }
+svg { display: block; border: 1px solid #ccc; position: absolute; top: 1%; left: 1%; width: 98%; height: 98%; background: #fff; }
+</style>
+</head>
+<body height="100%">
+<svg id="g" xpreserveAspectRatio="xMidYMid meet">
+    <path id="p" fill="none" stroke="blue"/>
+</svg>
+<script>
+var c = new Curve(1, 1, 3, 5, 18, 18, 100);
+document.getElementById("p").setAttribute("d", c.svgpath(128))
+var bbox = c.bbox(256)
+document.getElementById("g").setAttribute("viewBox",
+    fix(bbox[0]) + " " + fix(bbox[1]) + " " + fix(bbox[2] - bbox[0]) + " " + fix(bbox[3] - bbox[1]) )
+</script>
+</body>
+</html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,72 @@
+var fix = function(d) { return d.toFixed(2); }
+var todatauri = function(d, t) { return "data:" + (t || "") + ";base64," + btoa(d); }
+
+var Curve = function(a, b, m, n1, n2, n3, scale)  {
+    this.a = a;
+    this.b = b;
+    this.m = m;
+    this.n1 = n1;
+    this.n2 = n2;
+    this.n3 = n3;
+    this.scale = scale || 1;
+}
+Curve.prototype.r = function(phi) {
+    return this.scale * Math.pow(
+        Math.pow( Math.abs( Math.cos(this.m * phi / 4) / this.a), this.n2 ) +
+        Math.pow( Math.abs( Math.sin(this.m * phi / 4) / this.b), this.n3 ),
+            -1/this.n1)
+}
+
+Curve.prototype.xy = function(phi) {
+    r = this.r(phi);
+    return [r * Math.cos(phi), r * Math.sin(phi)]
+}
+
+Curve.prototype.dxy = function(phi, h) {
+    h = h || 1e-9
+    var xy0 = xy(phi-h);
+    var xy1 = xy(phi+h);
+    return [(xy1[0]-xy0[0]) / (2*h), (xy1[1]-xy0[1]) / (2*h)]
+}
+
+Curve.prototype.svgpath = function(n) {
+    n = n || 32
+    var r = ""
+    for(var i=0; i<=n; i++) {
+        var xy = this.xy(i * 2 * Math.PI / n);
+        var x = xy[0].toFixed(2), y = xy[1].toFixed(2);
+        if(i == 0) r = r + "M" + x + "," + y
+        else r = r + "L" + x + "," + y
+    }
+    return r
+}
+
+Curve.prototype.bbox = function(n) {
+    n = n || 32
+    var x0 = 0, y0 = 0, x1 = 0, y1 = 0
+    for(var i=0; i<n; i++) {
+        var xy = this.xy(i * 2 * Math.PI / n);
+        var x = xy[0], y = xy[1]
+        if(x < x0) x0 = x
+        if(x > x1) x1 = x
+        if(y < y0) y0 = y
+        if(y > y1) y1 = y
+    }
+    return [x0, y0, x1, y1]
+}
+
+Curve.prototype.tosvg = function(n, props) {
+    var path = this.svgpath(n);
+    var bbox = this.bbox()
+    return (
+        "<svg width=\"1024\" height=\"600\" viewbox=\"" + fix(bbox[0]) + " " + fix(bbox[1]) + " " + fix(bbox[2] - bbox[0]) + " " + fix(bbox[3] - bbox[1]) + "\"\n"
+        + "xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n"
+        + "xmlns:xlink=\"http://www.w3.org/1999/xlink\">"
+        + "<path d=\"" + path + "\" " + (props || "") + "/>"
+        + "</svg>")
+}
+
+Curve.prototype.tosvgdatauri = function(n, props) {
+    var svg = this.tosvg(n, props)
+    return todatauri(svg, "image/svg+xml")
+}