From b01d0d494a783b2351c31e5a21ebb5daba610a0a Mon Sep 17 00:00:00 2001 From: ben-burlingham Date: Thu, 31 Dec 2015 19:34:30 -0800 Subject: [PATCH] Finalized triangle gradients experiment. --- gradients-v1.js | 155 ++++++++++++++++++++++++++++++++++++++++++ index.html | 175 ++++++++++++------------------------------------ 2 files changed, 196 insertions(+), 134 deletions(-) create mode 100644 gradients-v1.js diff --git a/gradients-v1.js b/gradients-v1.js new file mode 100644 index 0000000..7eee2e5 --- /dev/null +++ b/gradients-v1.js @@ -0,0 +1,155 @@ +'use strict'; + +/** + * + */ +function Point(x, y, name, hex) { + if (typeof x !== typeof 1) { + throw new Error("x = " + x + " must be of type 'number'; it is currently of type '" + (typeof x) + "'."); + } + + if (typeof y !== typeof 1) { + throw new Error("y = " + y + " must be of type 'number'; it is currently of type '" + (typeof y) + "'."); + } + + if (x < 0 || y < 0) { + throw new Error("X and Y must be greater than 0."); + } + + this.x = x; + this.y = y; + this.name = name; + this.hex = hex; +} + +/** + * + */ +function Triangle(a, b, c) { + if (!(a instanceof Point) || !(b instanceof Point) || !(c instanceof Point)) { + throw new Error("All three arguments must be of type Point."); + } + + this.a = a; + this.b = b; + this.c = c; +} + +/** + * + */ +Triangle.prototype = { + /** + * + */ + findMidpoint: function(p1, p2) { + var minX = Math.min(p1.x, p2.x); + var maxX = Math.max(p1.x, p2.x); + var minY = Math.min(p1.y, p2.y); + var maxY = Math.max(p1.y, p2.y); + + var midX = minX + ((maxX - minX) / 2); + var midY = minY + ((maxY - minY) / 2); + + return new Point(midX, midY); + }, + + /** + * + */ + buildGradient: function(p) { + var opp1, opp2; + + if (p === this.a) { + opp1 = this.b; + opp2 = this.c; + } + + if (p === this.b) { + opp1 = this.a; + opp2 = this.c; + } + + if (p === this.c) { + opp1 = this.a; + opp2 = this.b; + } + + var fill = d3.select(document.createElementNS(d3.ns.prefix.svg, "linearGradient")) + .attr("gradientUnits", "userSpaceOnUse") + .attr("id", `fill${p.name}`) + .attr("x1", p.x) + .attr("y1", p.y) + .attr("x2", this.findMidpoint(opp1, opp2).x) + .attr("y2", this.findMidpoint(opp1, opp2).y) + + fill.append("stop") + .attr("offset", "0%") + .attr("stop-color", p.hex) + + fill.append("stop") + .attr("offset", "100%") + .attr("stop-color", "#fff") + .attr("stop-opacity", "0") + + return function() { + return fill.node(); + }; + }, + + /** + * + */ + buildPath: function(p) { + var path = d3.select(document.createElementNS(d3.ns.prefix.svg, "path")) + .attr("d", `M${this.a.x},${this.a.y} L${this.b.x},${this.b.y} L${this.c.x},${this.c.y} Z`) + .attr("fill", `url(#fill${p.name})`) + + return function() { + return path.node(); + }; + } +}; + +/** + * + */ +(function() { + var svg = d3.select("body").append("svg") + .attr("width", 500) + .attr("height", 500); + + var defs = svg.append("defs"); + + var points = [ + [ + new Point(100, 0, 'A1', '#f00'), + new Point(200, 200, 'B1', '#0f0'), + new Point(0, 200, 'C1', '#00f') + ], + + [ + new Point(100, 0, 'A2', '#f00'), + new Point(200, 200, 'B2', '#0f0'), + new Point(300, 0, 'C2', '#00f') + ], + + [ + new Point(300, 300, 'A3', '#f00'), + new Point(300, 0, 'C3', '#00f'), + new Point(200, 200, 'B3', '#0f0'), + ], + ]; + + for (var i = 0, len = points.length; i < len; i++) { + var T = new Triangle(points[i][0], points[i][1], points[i][2]); + + defs.append(T.buildGradient(points[i][0])); + defs.append(T.buildGradient(points[i][1])); + defs.append(T.buildGradient(points[i][2])); + + svg.append(T.buildPath(points[i][0])); + svg.append(T.buildPath(points[i][1])); + svg.append(T.buildPath(points[i][2])); + } +}()); diff --git a/index.html b/index.html index d74a06d..f2fc3da 100644 --- a/index.html +++ b/index.html @@ -55,156 +55,63 @@ svg { /*background: #098347;*/ - margin:100px; } - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - + --> - -