@prescott/geo-pattern
Version:
Create beautiful generative geometric background images from a string.
54 lines • 2.16 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConcentricCirclesComposer = void 0;
const svg_1 = require("../svg");
const base_1 = require("./base");
class ConcentricCirclesComposer extends base_1.StructureComposer {
constructor(seed, preset) {
super(seed, preset);
this.name = "concentric-circles";
this.scale = this.seed.read(0, 1);
this.ringSize = this.map(this.scale, 0, 15, 10, 60);
this.strokeWidth = this.ringSize / 5;
this.width = this.height = (this.ringSize + this.strokeWidth) * 6;
}
generate() {
const nodes = [];
let i = 0;
for (let y = 0; y <= 5; y++) {
for (let x = 0; x <= 5; x++) {
this.drawOuterCircle(nodes, x, y, i);
this.drawInnerCircle(nodes, x, y, i);
i++;
}
}
return nodes;
}
drawOuterCircle(nodes, x, y, i) {
const value = this.seed.read(i, 1);
const opacity = this.opacity(value);
const fill = this.fillColor(value);
nodes.push(new svg_1.SVGNode("circle", {
cx: x * this.ringSize + x * this.strokeWidth + (this.ringSize + this.strokeWidth) / 2,
cy: y * this.ringSize + y * this.strokeWidth + (this.ringSize + this.strokeWidth) / 2,
r: this.ringSize / 2,
fill: "none",
stroke: fill,
style: `opacity: ${opacity}; stroke-width: ${this.strokeWidth}px`,
}));
}
drawInnerCircle(nodes, x, y, i) {
const value = this.seed.read(39 - i, 1);
const opacity = this.opacity(value);
const fill = this.fillColor(value);
nodes.push(new svg_1.SVGNode("circle", {
cx: x * this.ringSize + x * this.strokeWidth + (this.ringSize + this.strokeWidth) / 2,
cy: y * this.ringSize + y * this.strokeWidth + (this.ringSize + this.strokeWidth) / 2,
r: this.ringSize / 4,
fill,
"fill-opacity": opacity,
}));
}
}
exports.ConcentricCirclesComposer = ConcentricCirclesComposer;
//# sourceMappingURL=concentric-circles.js.map