@prescott/geo-pattern
Version:
Create beautiful generative geometric background images from a string.
135 lines • 5.09 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MosaicSquaresComposer = void 0;
const svg_1 = require("../svg");
const base_1 = require("./base");
class MosaicSquaresComposer extends base_1.StructureComposer {
constructor(seed, preset) {
super(seed, preset);
this.name = "mosaic-squares";
this.triangleSize = this.map(this.seed.read(0, 1), 0, 15, 15, 50);
this.width = this.height = this.triangleSize * 8;
}
generate() {
const nodes = [];
let i = 0;
for (let y = 0; y <= 3; y++) {
for (let x = 0; x <= 3; x++) {
if (x % 2 === 0) {
if (y % 2 === 0) {
this.drawOuterMosaicTitle(nodes, x * this.triangleSize * 2, y * this.triangleSize * 2, this.triangleSize, this.seed.read(i, 1));
}
else {
this.drawInnerMosaicTitle(nodes, x * this.triangleSize * 2, y * this.triangleSize * 2, this.triangleSize, [this.seed.read(i, 1), this.seed.read(i + 1, 1)]);
}
}
else {
if (y % 2 === 0) {
this.drawInnerMosaicTitle(nodes, x * this.triangleSize * 2, y * this.triangleSize * 2, this.triangleSize, [this.seed.read(i, 1), this.seed.read(i + 1, 1)]);
}
else {
this.drawOuterMosaicTitle(nodes, x * this.triangleSize * 2, y * this.triangleSize * 2, this.triangleSize, this.seed.read(i, 1));
}
}
i++;
}
}
return nodes;
}
drawInnerMosaicTitle(nodes, x, y, triangleSize, values) {
let opacity;
let fill;
let styles;
opacity = this.opacity(values[0]);
fill = this.fillColor(values[0]);
styles = {
stroke: this.preset.stroke.color,
"stroke-opacity": this.preset.stroke.opacity,
"fill-opacity": opacity,
fill,
};
nodes.push(this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x + triangleSize, y] },
{ scale: [-1, 1] },
]),
}), this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x + triangleSize, y + triangleSize * 2] },
{ scale: [1, -1] },
]),
}));
opacity = this.opacity(values[1]);
fill = this.fillColor(values[1]);
styles = {
stroke: this.preset.stroke.color,
"stroke-opacity": this.preset.stroke.opacity,
"fill-opacity": opacity,
fill,
};
nodes.push(this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x + triangleSize, y + triangleSize * 2] },
{ scale: [-1, -1] },
]),
}), this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x + triangleSize, y] },
{ scale: [1, 1] },
]),
}));
}
drawOuterMosaicTitle(nodes, x, y, triangleSize, value) {
const opacity = this.opacity(value);
const fill = this.fillColor(value);
const styles = {
stroke: this.preset.stroke.color,
"stroke-opacity": this.preset.stroke.opacity,
"fill-opacity": opacity,
fill,
};
nodes.push(this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x, y + triangleSize] },
{ scale: [1, -1] },
]),
}), this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x + triangleSize * 2, y + triangleSize] },
{ scale: [-1, -1] },
]),
}), this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x, y + triangleSize] },
{ scale: [1, 1] },
]),
}), this.buildRightTriangleShape(triangleSize, {
...styles,
transform: this.buildTransform([
{ translate: [x + triangleSize * 2, y + triangleSize] },
{ scale: [-1, 1] },
]),
}));
}
buildRightTriangleShape(sideLength, attrs) {
const points = [
0, 0,
sideLength, sideLength,
0, sideLength,
0, 0,
].join(",");
return new svg_1.SVGNode("polyline", {
points,
...attrs,
});
}
}
exports.MosaicSquaresComposer = MosaicSquaresComposer;
//# sourceMappingURL=mosaic-squares.js.map