From 6902dc748cd33781c5c9a03587ca4c91e4a15b01 Mon Sep 17 00:00:00 2001
From: "Wonko T. Sane" <42@wonko.de>
Date: Thu, 27 Feb 2020 20:19:13 +0100
Subject: [PATCH] now with smooth curves
---
index.html | 104 +++++++++++++++++++++++++++++++++++++----------------
1 file changed, 73 insertions(+), 31 deletions(-)
diff --git a/index.html b/index.html
index 3bfd69d..76e0ff5 100644
--- a/index.html
+++ b/index.html
@@ -38,9 +38,6 @@
.attr("d", "m 82.393993,102.36183 c -13.481701,0.0332 -35.416429,-15.12149 -35.446705,-28.75598 -0.03028,-13.63449 20.096934,-32.30487 35.446705,-32.64203 15.349771,-0.33716 49.390017,61.33466 61.043907,61.39801 11.65389,0.0634 39.30246,-15.12148 39.33273,-28.75598 0.0303,-13.6345 -23.98295,-32.30489 -39.33273,-32.64203 -15.34978,-0.33714 -47.562206,61.36486 -61.043907,61.39801 z"
);
- //transition();
-
-
function getRandomColorRgb() {
let red = Math.floor(Math.random() * 256);
let green = Math.floor(Math.random() * 256);
@@ -52,6 +49,28 @@
return { x: point.x + distance * Math.cos(rad), y: point.y + distance * Math.sin(rad) };
}
+
+ // from https://github.com/d3/d3-shape/blob/master/src/curve/natural.js
+ function controlPoints(x) {
+ var i,
+ n = x.length - 1,
+ m,
+ a = new Array(n),
+ b = new Array(n),
+ r = new Array(n);
+ a[0] = 0, b[0] = 2, r[0] = x[0] + 2 * x[1];
+ for (i = 1; i < n - 1; ++i) a[i] = 1, b[i] = 4, r[i] = 4 * x[i] + 2 * x[i + 1];
+ a[n - 1] = 2, b[n - 1] = 7, r[n - 1] = 8 * x[n - 1] + x[n];
+ for (i = 1; i < n; ++i) m = a[i] / b[i - 1], b[i] -= m, r[i] -= m * r[i - 1];
+ a[n - 1] = r[n - 1] / b[n - 1];
+ for (i = n - 2; i >= 0; --i) a[i] = (r[i] - a[i + 1]) / b[i];
+ b[n - 1] = (x[n] + a[n - 1]) / 2;
+ for (i = 0; i < n - 1; ++i) b[i] = 2 * x[i + 1] - a[i + 1];
+ return [a, b];
+ }
+
+
+
class ArowOnPath {
constructor(path, start, length, parts = 3, thickness = 5, angle = 2, padding = 1) {
this.path = path;
@@ -59,12 +78,12 @@
this.angle = angle;
this.thickness = thickness;
- var partlen = (length - (2 * padding)) / (2*parts);
- this.p = [this.pointsAt(start+padding,(-1*padding))];
- for (i = 1; i < (2 * parts); i++) {
+ var partlen = (length - (2 * padding)) / (2 * parts);
+ this.p = [this.pointsAt(start + padding, (-1 * padding))];
+ for (var i = 1; i < (2 * parts); i++) {
this.p.push(this.pointsAt(start + (i * partlen)));
}
- this.p.push(this.pointsAt(start + length-padding,padding));
+ this.p.push(this.pointsAt(start + length - padding, (-1 * padding)));
}
pointAngle(length) {
var p1 = this.path.getPointAtLength(length);
@@ -93,31 +112,53 @@
return point.x.toString() + "," + point.y.toString();
}
+
d3path() {
var path = d3.path();
console.log(this.p.length);
var i = 0
- console.log(i);
+
path.moveTo(this.p[i].m.x, this.p[i].m.y);
path.lineTo(this.p[i].a.x, this.p[i].a.y);
- do {
- i++;
- path.bezierCurveTo(this.p[i].a.x, this.p[i].a.y,
- this.p[i].a.x, this.p[i].a.y,
- this.p[i + 1].a.x, this.p[i + 1].a.y);
- i++;
- } while (i < (this.p.length - 1));
- console.log(i);
+ var nat = d3.curveNatural(path);
+ nat.lineStart();
+ for (var i = 0; i < this.p.length; i++) {
+ nat.point(this.p[i].a.x, this.p[i].a.y);
+
+ }
+ var px = controlPoints(nat._x),
+ py = controlPoints(nat._y);
+ var n = this.p.length;
+ var x = nat._x,
+ y = nat._y;
+ for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {
+ path.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]);
+ }
+
+ console.log(i)
+ i = this.p.length - 1;
path.lineTo(this.p[i].m.x, this.p[i].m.y);
path.lineTo(this.p[i].b.x, this.p[i].b.y);
- do {
- i--;
- path.bezierCurveTo(this.p[i].b.x, this.p[i].b.y,
- this.p[i].b.x, this.p[i].b.y,
- this.p[i - 1].b.x, this.p[i - 1].b.y);
- i--;
- } while (i > 1);
+
+ nat.lineStart();
+ console.log("blah")
+ for (var i = this.p.length - 1; i >= 0; --i) {
+ console.log(i)
+ nat.point(this.p[i].b.x, this.p[i].b.y);
+
+ }
+ var px = controlPoints(nat._x),
+ py = controlPoints(nat._y);
+ var n = this.p.length;
+ var x = nat._x,
+ y = nat._y;
+ for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {
+ path.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]);
+ }
+ //line.context(path)(this.p);
+
+
path.closePath();
return path;
}
@@ -126,19 +167,20 @@
}
}
- var i;
- var s = path.node()
-
-
- ar = new ArowOnPath(s, 0, 10);
- svg.append("path")
- .attr("d", ar.toString())
- .attr("style", "fill:" + getRandomColorRgb());
+ var s = path.node()
var l = s.getTotalLength();
var segs = 8;
+ var seg_l = l / segs;
var thickness = 5;
+ for (var i = 0; i < segs; i++) {
+ ar = new ArowOnPath(s, (i * seg_l), seg_l);
+ svg.append("path")
+ .attr("d", ar.toString())
+ .attr("style", "fill:" + getRandomColorRgb());
+ }
+
</script>
--
GitLab