@prescott/geo-pattern
Version:
Create beautiful generative geometric background images from a string.
74 lines • 2.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TrianglesComposer = void 0;
const svg_1 = require("../svg");
const base_1 = require("./base");
class TrianglesComposer extends base_1.StructureComposer {
constructor(seed, preset) {
super(seed, preset);
this.name = "triangles";
this.scale = this.seed.read(0, 1);
this.sideLength = this.map(this.scale, 0, 15, 15, 80);
this.triangleHeight = this.sideLength / 2 * Math.sqrt(3);
this.triangle = this.buildTriangleShape(this.sideLength, this.triangleHeight);
this.width = this.sideLength * 3;
this.height = this.triangleHeight * 6;
}
generate() {
const nodes = [];
let i = 0;
for (let y = 0; y <= 5; y++) {
for (let x = 0; x <= 5; x++) {
const value = this.seed.read(i, 1);
const opacity = this.opacity(value);
const fill = this.fillColor(value);
const styles = {
fill,
"fill-opacity": opacity,
stroke: this.preset.stroke.color,
"stroke-opacity": this.preset.stroke.opacity,
};
const rotation = (() => {
if (y % 2 === 0) {
return x % 2 === 0 ? 180 : 0;
}
else {
return x % 2 !== 0 ? 180 : 0;
}
})();
nodes.push(new svg_1.SVGNode("polyline", {
points: this.triangle,
...styles,
transform: this.buildTransform([
{ translate: [x * this.sideLength * 0.5 - this.sideLength / 2, this.triangleHeight * y] },
{ rotate: [rotation, this.sideLength / 2, this.triangleHeight / 2] },
]),
}));
// Add an extra one at top-right, for tiling.
if (x === 0) {
nodes.push(new svg_1.SVGNode("polyline", {
points: this.triangle,
...styles,
transform: this.buildTransform([
{ translate: [6 * this.sideLength * 0.5 - this.sideLength / 2, this.triangleHeight * y] },
{ rotate: [rotation, this.sideLength / 2, this.triangleHeight / 2] },
]),
}));
}
i++;
}
}
return nodes;
}
buildTriangleShape(sideLength, height) {
const halfWidth = sideLength / 2;
return [
halfWidth, 0,
sideLength, height,
0, height,
halfWidth, 0,
].join(",");
}
}
exports.TrianglesComposer = TrianglesComposer;
//# sourceMappingURL=triangles.js.map