ben-burlingham
10 years ago
parent
fa2bc67bce
commit
b01d0d494a
2 changed files with 196 additions and 134 deletions
@ -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])); |
||||
} |
||||
}()); |
||||
Loading…
Reference in new issue