From 8fe1505b54054003e5cef68ce1ae74582909c6b7 Mon Sep 17 00:00:00 2001 From: Mark Benson Date: Sun, 16 Apr 2023 11:56:00 +0100 Subject: [PATCH 1/6] Add joinClosePaths function and make line elements paths Not working properly. Maybe the fact that the tiles are groups and are translated might be stopping some paths from being joined. --- index.html | 6 ----- src/Tile.ts | 74 ++++++++++++++++++++++++++++++++++++++++++++++------ src/index.ts | 30 ++++++++++++++++----- src/utils.ts | 64 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 153 insertions(+), 21 deletions(-) create mode 100644 src/utils.ts diff --git a/index.html b/index.html index 4ad59ad..99b498c 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,6 @@ Geometric Pattern Generator - diff --git a/src/Tile.ts b/src/Tile.ts index b0c4b90..46d61a2 100644 --- a/src/Tile.ts +++ b/src/Tile.ts @@ -53,7 +53,7 @@ class Tile { // Draw the lines and add them to the linesGroup for (const radius of radii) { - const lines = this.createLine(radius, direction); + const lines = this.createPath(radius, direction); linesGroup.appendChild(lines); } @@ -63,17 +63,22 @@ class Tile { const largestRadius = radii[radii.length - 1]; // Convert the linesGroup.lines into an array - Array.from(linesGroup.querySelectorAll("line")).forEach((line) => { + Array.from(linesGroup.querySelectorAll("path")).forEach((line) => { // Extract the line start and end for the current line const lineStart = { - x: parseFloat(line.getAttribute("x1") as string), - y: parseFloat(line.getAttribute("y1") as string), + x: parseFloat(line.getAttribute("d")?.split(" ")[1] as string), + y: parseFloat(line.getAttribute("d")?.split(" ")[2] as string), + // x: parseFloat(line.getAttribute("x1") as string), + // y: parseFloat(line.getAttribute("y1") as string), }; const lineEnd = { - x: parseFloat(line.getAttribute("x2") as string), - y: parseFloat(line.getAttribute("y2") as string), + x: parseFloat(line.getAttribute("d")?.split(" ")[4] as string), + y: parseFloat(line.getAttribute("d")?.split(" ")[5] as string), + // x: parseFloat(line.getAttribute("x2") as string), + // y: parseFloat(line.getAttribute("y2") as string), }; + console.log("Line start:", lineStart, "Line end:", lineEnd); // Determine if there is an intersection for the current line const intersection = this.lineArcIntersection( lineStart, @@ -84,8 +89,29 @@ class Tile { if (intersection) { console.log("Intersection found", intersection); - line.setAttribute("x1", String(intersection.x)); - line.setAttribute("y1", String(intersection.y)); + console.log( + "Modify lines 'd' attribute '", + line.getAttribute("d"), + "'" + ); + console.log( + "Updating arrtibute with this: `", + `M ${intersection.x} ${intersection.y} ${line + .getAttribute("d") + ?.split(" ") + .slice(4, 6) + .join(" ")}`, + "'" + ); + line.setAttribute( + "d", + `M ${intersection.x} ${intersection.y} ${line + .getAttribute("d") + ?.split(" ") + .slice(4, 6) + .join(" ")}` + ); + // line.setAttribute("y1", String(intersection.y)); } else { console.log("No intersection found"); } @@ -138,6 +164,38 @@ class Tile { return lines; } + // Maybe the line is causing problem? (I don't seem to be able to join a line to a path so make the lines paths?) + createPath(radius: number, direction: "horizontal" | "vertical"): SVGElement { + console.log( + "Creating a single path with direction", + direction, + "and length", + radius + ); + const paths = document.createElementNS("http://www.w3.org/2000/svg", "g"); + const pathOffset = 0; + + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + + // Horizontal Lines start at x1=0 y1=radius and finish at x2=100, y2=radius + // Vertical Lines start at x1=radius y1=0 and finish at x2=radius, y2=100 + let d; + if (direction === "horizontal") { + d = `M 0 ${radius} L 100 ${radius}`; + } else { + d = `M ${radius} 0 L ${radius} 100`; + } + + path.setAttribute("d", d); + path.setAttribute("stroke", "black"); + path.setAttribute("stroke-width", "1"); + path.setAttribute("fill", "none"); + + paths.appendChild(path); + + return paths; + } + // return an SVG arc for the given start coordinates and radius between the start and end angle createArc( cx: number, diff --git a/src/index.ts b/src/index.ts index f8c4e95..7ea3ccd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,9 +1,10 @@ import Tile from "./Tile"; +import { joinClosePaths } from "./utils"; // Create a grid of patterned tiles const grid = document.getElementById("grid"); -const numRows = 10; -const numCols = 12; +const numRows = 2; +const numCols = 2; const outerSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg"); outerSVG.setAttribute("viewBox", `0 0 ${numCols * 100} ${numRows * 100}`); @@ -27,15 +28,30 @@ for (let row = 0; row < numRows; row++) { // Define the SVG element using the tile content const tileGroup = tile.element; // Apply a grid offset and rotation to the tile - tileGroup.setAttribute( - "transform", - `translate(${col * 100} ${row * 100}) rotate(${rotation} 50 50)` - ); + // tileGroup.setAttribute( + // "transform", + // `translate(${col * 100} ${row * 100}) rotate(${rotation} 50 50)` + // ); // Append the SVG element 'tileGroup' to the SVG - outerSVG?.appendChild(tileGroup); + // outerSVG?.appendChild(tileGroup); + // Iterate through the children of tileGroup and append them directly to outerSVG + while (tileGroup.firstChild) { + const child = tileGroup.firstChild; + // Check if the child is an SVGElement + if (child instanceof SVGElement) { + // Apply a grid offset and rotation to the child element + child.setAttribute( + "transform", + `translate(${col * 100} ${row * 100}) rotate(${rotation} 50 50)` + ); + } + outerSVG?.appendChild(child); + } } } +joinClosePaths(outerSVG, 5); // Add this line after creating the grid + // SVG Export (Save (Download) an SVG when the download button is clicked) const downloadButton = document.getElementById("download-svg"); diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..3dd0555 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,64 @@ +export const joinClosePaths = (outerSVG: SVGSVGElement, threshold: number) => { + const paths = Array.from(outerSVG.querySelectorAll("path")); + + for (let i = 0; i < paths.length; i++) { + // console.log("Picking a path"); + for (let j = i + 1; j < paths.length; j++) { + // console.log("Comparing to all other paths"); + const path1 = paths[i]; + const path2 = paths[j]; + + const path1D = path1.getAttribute("d") as string; + const path2D = path2.getAttribute("d") as string; + + const path1Start = path1D.split(" ").slice(1, 3); + const path1End = path1D.split(" ").slice(-2); + + const path2Start = path2D.split(" ").slice(1, 3); + const path2End = path2D.split(" ").slice(-2); + + const start1 = { + x: parseFloat(path1Start[0]), + y: parseFloat(path1Start[1]), + }; + const end1 = { x: parseFloat(path1End[0]), y: parseFloat(path1End[1]) }; + const start2 = { + x: parseFloat(path2Start[0]), + y: parseFloat(path2Start[1]), + }; + const end2 = { x: parseFloat(path2End[0]), y: parseFloat(path2End[1]) }; + + const combinations = [ + { a: start1, b: start2 }, + { a: start1, b: end2 }, + { a: end1, b: start2 }, + { a: end1, b: end2 }, + ]; + + for (const combination of combinations) { + // console.log("Comparing combinations..."); + const dist = Math.hypot( + combination.a.x - combination.b.x, + combination.a.y - combination.b.y + ); + if (threshold >= dist) { + console.log("too far to join"); + } + if (dist < threshold) { + console.log("Found close path ends..."); + path1.setAttribute( + "d", + `${path1D} L ${combination.b.x} ${combination.b.y} ${path2D + .split(" ") + .slice(3) + .join(" ")}` + ); + outerSVG.removeChild(path2); + paths.splice(j, 1); + j--; + break; + } + } + } + } +}; From 52ed82c3aa224e63b025bea710c140ed53883401 Mon Sep 17 00:00:00 2001 From: Mark Benson Date: Sun, 16 Apr 2023 19:06:17 +0100 Subject: [PATCH 2/6] Allow changing stroke weight and colour when creating a tile --- index.html | 2 ++ src/Tile.ts | 57 ++++++++++++++++++++++++++++++++++++---------------- src/index.ts | 9 +++++---- styles.css | 6 ++++++ 4 files changed, 53 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 99b498c..ba2be75 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,9 @@ +
+
diff --git a/src/Tile.ts b/src/Tile.ts index 46d61a2..6028c6a 100644 --- a/src/Tile.ts +++ b/src/Tile.ts @@ -1,21 +1,40 @@ import SVG from "svg.js"; import { parseSVG as parsePath } from "svg-path-parser"; +interface TileParams { + element?: SVGElement; + showArcs?: boolean; + tileSize?: number; + numberOfLines?: number; + rotation?: number; + strokeWeight?: number; + strokeColour?: string; +} + // Define the Tile class - arcs class Tile { element: SVGElement; showArcs: boolean; tileSize: number; numberOfLines: number; - - constructor( - showArcs: boolean = true, - tileSize: number = 100, - numberOfLines: number = 10 - ) { + rotation: number; + strokeWeight: number; + strokeColour: string; + + constructor({ + showArcs = true, + tileSize = 100, + numberOfLines = 10, + rotation = 0, + strokeWeight = 1, + strokeColour = "black", + }: TileParams) { this.showArcs = showArcs; this.tileSize = tileSize; this.numberOfLines = numberOfLines; + this.rotation = rotation; + this.strokeWeight = strokeWeight; + this.strokeColour = strokeColour; this.element = this.createTileElement(); } @@ -36,20 +55,22 @@ class Tile { // Instead of manually specifying the points for each Radii (arcRadii) we can // calculate that based on the size of the tile and the number of lines we want - const calcRadii = (size: number, qty: number): number[] => { + + // Experiment with an offset so we don't always fill the tile + const calcSpacing = (size: number, qty: number): number[] => { const spacing = size / qty; console.log("CalcRadii, size", size, "quantity", qty, "spacing", spacing); - let arcRadii = []; + let spacingArray = []; for (let i = 0; i <= qty; i++) { - arcRadii.push(0 + i * spacing); // add each position to the array + spacingArray.push(0 + i * spacing); // add each position to the array } - return arcRadii; + return spacingArray; }; // const direction = Math.random() < 0.5 ? "horizontal" : "vertical"; const direction = "horizontal"; - const radii = calcRadii(this.tileSize, this.numberOfLines); + const radii = calcSpacing(this.tileSize, this.numberOfLines); // Draw the lines and add them to the linesGroup for (const radius of radii) { @@ -156,8 +177,8 @@ class Tile { line.setAttribute("y2", "100"); } - line.setAttribute("stroke", "black"); - line.setAttribute("stroke-width", "1"); + line.setAttribute("stroke", this.strokeColour); + line.setAttribute("stroke-width", String(this.strokeWeight)); lines.appendChild(line); @@ -187,8 +208,10 @@ class Tile { } path.setAttribute("d", d); - path.setAttribute("stroke", "black"); - path.setAttribute("stroke-width", "1"); + path.setAttribute("stroke", this.strokeColour); + path.setAttribute("stroke-width", String(this.strokeWeight)); + path.setAttribute("stroke-linecap", "round"); + path.setAttribute("stroke-linejoin", "round"); path.setAttribute("fill", "none"); paths.appendChild(path); @@ -226,8 +249,8 @@ class Tile { arc.setAttribute("d", d); arc.setAttribute("fill", "none"); - arc.setAttribute("stroke", "black"); - arc.setAttribute("stroke-width", "1"); + arc.setAttribute("stroke", this.strokeColour); + arc.setAttribute("stroke-width", String(this.strokeWeight)); return arc; } diff --git a/src/index.ts b/src/index.ts index 7ea3ccd..1eb3e36 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,8 +3,8 @@ import { joinClosePaths } from "./utils"; // Create a grid of patterned tiles const grid = document.getElementById("grid"); -const numRows = 2; -const numCols = 2; +const numRows = 10; +const numCols = 12; const outerSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg"); outerSVG.setAttribute("viewBox", `0 0 ${numCols * 100} ${numRows * 100}`); @@ -12,6 +12,7 @@ outerSVG.setAttribute("width", "100%"); outerSVG.setAttribute("height", "100%"); outerSVG.setAttribute("xmlns", "http://www.w3.org/2000/svg"); grid?.appendChild(outerSVG); +// outerSVG.setAttribute("") // Loop to add tiles to a grid for (let row = 0; row < numRows; row++) { @@ -24,7 +25,7 @@ for (let row = 0; row < numRows; row++) { const showArcs = Math.random() < 0.5; // Add a tile to the grid (all the work is done in the Tile class) - const tile = new Tile(); + const tile = new Tile({ strokeWeight: 5, strokeColour: "teal" }); // Define the SVG element using the tile content const tileGroup = tile.element; // Apply a grid offset and rotation to the tile @@ -50,7 +51,7 @@ for (let row = 0; row < numRows; row++) { } } -joinClosePaths(outerSVG, 5); // Add this line after creating the grid +// joinClosePaths(outerSVG, 5); // Add this line after creating the grid // SVG Export (Save (Download) an SVG when the download button is clicked) const downloadButton = document.getElementById("download-svg"); diff --git a/styles.css b/styles.css index c59a7c0..3ee3c20 100644 --- a/styles.css +++ b/styles.css @@ -24,3 +24,9 @@ /* grid-auto-flow: row; */ grid-gap: 0; /* Adjust the gap between tiles if needed */ } + +#controls { + padding-top: 0.5em; + padding-left: 0.5em; + padding-bottom: 2em; +} From 9cd42abc1daab9f7a8ecf8e67c72b3f5170c846c Mon Sep 17 00:00:00 2001 From: Mark Benson Date: Sun, 16 Apr 2023 20:27:34 +0100 Subject: [PATCH 3/6] Random colours, change radius to length --- src/Tile.ts | 36 +++++++++++++++++------------------- src/index.ts | 24 +++++++++++++++++++++--- src/utils.ts | 26 ++++++++++++++++++++++++++ styles.css | 4 ++-- 4 files changed, 66 insertions(+), 24 deletions(-) diff --git a/src/Tile.ts b/src/Tile.ts index 6028c6a..d397037 100644 --- a/src/Tile.ts +++ b/src/Tile.ts @@ -70,18 +70,18 @@ class Tile { // const direction = Math.random() < 0.5 ? "horizontal" : "vertical"; const direction = "horizontal"; - const radii = calcSpacing(this.tileSize, this.numberOfLines); + const spacing = calcSpacing(this.tileSize, this.numberOfLines); // Draw the lines and add them to the linesGroup - for (const radius of radii) { - const lines = this.createPath(radius, direction); + for (const space of spacing) { + const lines = this.createPath(space, direction); linesGroup.appendChild(lines); } // If we are showing arcs on this tile, if (this.showArcs) { const arcCenter = { x: 0, y: 0 }; - const largestRadius = radii[radii.length - 1]; + const largestSpace = spacing[spacing.length - 1]; // Convert the linesGroup.lines into an array Array.from(linesGroup.querySelectorAll("path")).forEach((line) => { @@ -104,8 +104,7 @@ class Tile { const intersection = this.lineArcIntersection( lineStart, lineEnd, - arcCenter, - largestRadius + largestSpace ); if (intersection) { @@ -139,20 +138,20 @@ class Tile { }); // for each radius in the radii array - for (const radius of radii) { - const arc = this.createArc(0, 0, radius, 0, 0 + 90); + for (const space of spacing) { + const arc = this.createArc(0, 0, space, 0, 0 + 90); group.appendChild(arc); } } return group; } - createLine(radius: number, direction: "horizontal" | "vertical"): SVGElement { + createLine(length: number, direction: "horizontal" | "vertical"): SVGElement { console.log( "Creating a single line with direction", direction, "and length", - radius + length ); const lines = document.createElementNS("http://www.w3.org/2000/svg", "g"); const lineOffset = 0; @@ -164,16 +163,16 @@ class Tile { if (direction === "horizontal") { // Start of line line.setAttribute("x1", "0"); - line.setAttribute("y1", String(radius)); + line.setAttribute("y1", String(length)); // end of line line.setAttribute("x2", "100"); - line.setAttribute("y2", String(radius)); + line.setAttribute("y2", String(length)); } else { // Start of line - line.setAttribute("x1", String(radius)); + line.setAttribute("x1", String(length)); line.setAttribute("y1", "0"); // end of line - line.setAttribute("x2", String(radius)); + line.setAttribute("x2", String(length)); line.setAttribute("y2", "100"); } @@ -186,12 +185,12 @@ class Tile { } // Maybe the line is causing problem? (I don't seem to be able to join a line to a path so make the lines paths?) - createPath(radius: number, direction: "horizontal" | "vertical"): SVGElement { + createPath(length: number, direction: "horizontal" | "vertical"): SVGElement { console.log( "Creating a single path with direction", direction, "and length", - radius + length ); const paths = document.createElementNS("http://www.w3.org/2000/svg", "g"); const pathOffset = 0; @@ -202,9 +201,9 @@ class Tile { // Vertical Lines start at x1=radius y1=0 and finish at x2=radius, y2=100 let d; if (direction === "horizontal") { - d = `M 0 ${radius} L 100 ${radius}`; + d = `M 0 ${length} L 100 ${length}`; } else { - d = `M ${radius} 0 L ${radius} 100`; + d = `M ${length} 0 L ${length} 100`; } path.setAttribute("d", d); @@ -273,7 +272,6 @@ class Tile { lineArcIntersection( lineStart: { x: number; y: number }, lineEnd: { x: number; y: number }, - arcCenter: { x: number; y: number }, arcRadius: number ): { x: number; y: number } | null { const dx = lineEnd.x - lineStart.x; diff --git a/src/index.ts b/src/index.ts index 1eb3e36..b3603aa 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import Tile from "./Tile"; -import { joinClosePaths } from "./utils"; +import { getRandomColor, joinClosePaths } from "./utils"; // Create a grid of patterned tiles const grid = document.getElementById("grid"); @@ -12,8 +12,23 @@ outerSVG.setAttribute("width", "100%"); outerSVG.setAttribute("height", "100%"); outerSVG.setAttribute("xmlns", "http://www.w3.org/2000/svg"); grid?.appendChild(outerSVG); -// outerSVG.setAttribute("") +// Create the background rect element +const backgroundRect = document.createElementNS( + "http://www.w3.org/2000/svg", + "rect" +); +backgroundRect.setAttribute("width", "100%"); +backgroundRect.setAttribute("height", "100%"); + +const backgroundColour = getRandomColor(); +backgroundRect.setAttribute("fill", backgroundColour); + +// Add the background rect to the SVG +outerSVG.appendChild(backgroundRect); +// outerSVG.setAttribute("") +const strokeColour = getRandomColor(backgroundColour); +const strokeWeight = Math.floor(Math.random() * 8) + 1; // Loop to add tiles to a grid for (let row = 0; row < numRows; row++) { for (let col = 0; col < numCols; col++) { @@ -25,7 +40,10 @@ for (let row = 0; row < numRows; row++) { const showArcs = Math.random() < 0.5; // Add a tile to the grid (all the work is done in the Tile class) - const tile = new Tile({ strokeWeight: 5, strokeColour: "teal" }); + const tile = new Tile({ + strokeWeight, + strokeColour, + }); // Define the SVG element using the tile content const tileGroup = tile.element; // Apply a grid offset and rotation to the tile diff --git a/src/utils.ts b/src/utils.ts index 3dd0555..a1e5393 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -62,3 +62,29 @@ export const joinClosePaths = (outerSVG: SVGSVGElement, threshold: number) => { } } }; + +const webColors: string[] = [ + "red", + "blue", + "teal", + "green", + "yellow", + "purple", + "aqua", + "fuchsia", + "lime", + "maroon", + "navy", + "olive", + "silver", + "gray", + "black", +]; + +export const getRandomColor = (exclude?: string): string => { + const filteredColors = exclude + ? webColors.filter((color) => color !== exclude) + : webColors; + const randomIndex = Math.floor(Math.random() * filteredColors.length); + return filteredColors[randomIndex]; +}; diff --git a/styles.css b/styles.css index 3ee3c20..39e4f3a 100644 --- a/styles.css +++ b/styles.css @@ -17,8 +17,8 @@ #grid { /* display: grid; */ - width: 100%; - height: 100%; + /* width: auto; + height: auto; */ grid-template-columns: repeat(auto-fill, 100px); grid-template-rows: repeat(auto-fill, 100px); /* grid-auto-flow: row; */ From 369b0614c7b63f5fd333e8c620b1f35c3dd3b3b8 Mon Sep 17 00:00:00 2001 From: Mark Benson Date: Sun, 16 Apr 2023 22:19:15 +0100 Subject: [PATCH 4/6] Colours and repeating palette --- src/Tile.ts | 70 +++++++++++++++++++++++++++++++++++++++++++++------- src/index.ts | 10 ++++---- src/utils.ts | 20 +++++++++++++++ 3 files changed, 86 insertions(+), 14 deletions(-) diff --git a/src/Tile.ts b/src/Tile.ts index d397037..35603a5 100644 --- a/src/Tile.ts +++ b/src/Tile.ts @@ -1,5 +1,6 @@ import SVG from "svg.js"; import { parseSVG as parsePath } from "svg-path-parser"; +import { getRandomColor, paletteColors } from "./utils"; interface TileParams { element?: SVGElement; @@ -24,7 +25,7 @@ class Tile { constructor({ showArcs = true, tileSize = 100, - numberOfLines = 10, + numberOfLines = 9, rotation = 0, strokeWeight = 1, strokeColour = "black", @@ -72,6 +73,17 @@ class Tile { const spacing = calcSpacing(this.tileSize, this.numberOfLines); + // Colour infill lines + for (let i = 0; i < spacing.slice(0, spacing.length - 1).length; i++) { + const lines = this.createPath( + spacing[i] + 5.5, + direction, + 9, + paletteColors[i] + ); + group.appendChild(lines); + } + // Draw the lines and add them to the linesGroup for (const space of spacing) { const lines = this.createPath(space, direction); @@ -137,9 +149,34 @@ class Tile { } }); + // Can we fill the space between with a different colour? + // for (const space of spacing.slice(0, 10)) { + // const arc = this.createArc( + // 0, + // 0, + // space + 5, + // 0, + // 0 + 90, + // 8, + // getRandomColor() + // ); + // group.appendChild(arc); + // } + for (let i = 0; i < spacing.slice(0, spacing.length - 1).length; i++) { + const arc = this.createArc( + 0, + 0, + spacing[i] + 5.5, + 0, + 0 + 90, + 8, + paletteColors[i] + ); + group.appendChild(arc); + } // for each radius in the radii array for (const space of spacing) { - const arc = this.createArc(0, 0, space, 0, 0 + 90); + const arc = this.createArc(0, 0, space, 0, 0 + 90, 3); group.appendChild(arc); } } @@ -185,7 +222,12 @@ class Tile { } // Maybe the line is causing problem? (I don't seem to be able to join a line to a path so make the lines paths?) - createPath(length: number, direction: "horizontal" | "vertical"): SVGElement { + createPath( + length: number, + direction: "horizontal" | "vertical", + strokeWeight?: number, + strokeColour?: string + ): SVGElement { console.log( "Creating a single path with direction", direction, @@ -196,7 +238,6 @@ class Tile { const pathOffset = 0; const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - // Horizontal Lines start at x1=0 y1=radius and finish at x2=100, y2=radius // Vertical Lines start at x1=radius y1=0 and finish at x2=radius, y2=100 let d; @@ -207,8 +248,14 @@ class Tile { } path.setAttribute("d", d); - path.setAttribute("stroke", this.strokeColour); - path.setAttribute("stroke-width", String(this.strokeWeight)); + path.setAttribute( + "stroke", + strokeColour ? strokeColour : this.strokeColour + ); + path.setAttribute( + "stroke-width", + strokeWeight ? String(strokeWeight) : String(this.strokeWeight) + ); path.setAttribute("stroke-linecap", "round"); path.setAttribute("stroke-linejoin", "round"); path.setAttribute("fill", "none"); @@ -224,7 +271,9 @@ class Tile { cy: number, r: number, startAngle: number, - endAngle: number + endAngle: number, + strokeWeight?: number, + strokeColour?: string ): SVGElement { const startPoint = this.polarToCartesian(cx, cy, r, startAngle); const endPoint = this.polarToCartesian(cx, cy, r, endAngle); @@ -248,8 +297,11 @@ class Tile { arc.setAttribute("d", d); arc.setAttribute("fill", "none"); - arc.setAttribute("stroke", this.strokeColour); - arc.setAttribute("stroke-width", String(this.strokeWeight)); + arc.setAttribute("stroke", strokeColour ? strokeColour : this.strokeColour); + arc.setAttribute( + "stroke-width", + strokeWeight ? String(strokeWeight) : String(this.strokeWeight) + ); return arc; } diff --git a/src/index.ts b/src/index.ts index b3603aa..899d69f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,13 +22,13 @@ backgroundRect.setAttribute("width", "100%"); backgroundRect.setAttribute("height", "100%"); const backgroundColour = getRandomColor(); -backgroundRect.setAttribute("fill", backgroundColour); +backgroundRect.setAttribute("fill", "white"); // Add the background rect to the SVG outerSVG.appendChild(backgroundRect); // outerSVG.setAttribute("") -const strokeColour = getRandomColor(backgroundColour); -const strokeWeight = Math.floor(Math.random() * 8) + 1; +// const strokeColour = getRandomColor(backgroundColour); +// const strokeWeight = Math.floor(Math.random() * 8) + 1; // Loop to add tiles to a grid for (let row = 0; row < numRows; row++) { for (let col = 0; col < numCols; col++) { @@ -41,8 +41,8 @@ for (let row = 0; row < numRows; row++) { // Add a tile to the grid (all the work is done in the Tile class) const tile = new Tile({ - strokeWeight, - strokeColour, + strokeWeight: 2, + strokeColour: "black", }); // Define the SVG element using the tile content const tileGroup = tile.element; diff --git a/src/utils.ts b/src/utils.ts index a1e5393..b28baa4 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -88,3 +88,23 @@ export const getRandomColor = (exclude?: string): string => { const randomIndex = Math.floor(Math.random() * filteredColors.length); return filteredColors[randomIndex]; }; + +export const paletteColors: string[] = [ + "black", + "navy", + "blue", + "teal", + "aqua", + "teal", + "blue", + "navy", + "black", +]; + +export const getmColor = (exclude?: string): string => { + const filteredColors = exclude + ? webColors.filter((color) => color !== exclude) + : webColors; + const randomIndex = Math.floor(Math.random() * filteredColors.length); + return filteredColors[randomIndex]; +}; From 7ba6bd31b8be43aff9ebcbee849677248861b2e9 Mon Sep 17 00:00:00 2001 From: Mark Benson Date: Mon, 17 Apr 2023 22:23:05 +0100 Subject: [PATCH 5/6] Added palette chooser, tried to fix glitch between tiles but made it worse --- src/Tile.ts | 239 +++++++++++++++++++++++++-------------------------- src/index.ts | 14 ++- src/utils.ts | 67 +++++++-------- 3 files changed, 159 insertions(+), 161 deletions(-) diff --git a/src/Tile.ts b/src/Tile.ts index 35603a5..6ac8536 100644 --- a/src/Tile.ts +++ b/src/Tile.ts @@ -1,15 +1,18 @@ import SVG from "svg.js"; import { parseSVG as parsePath } from "svg-path-parser"; -import { getRandomColor, paletteColors } from "./utils"; +import { getColorPallete, getRandomColor } from "./utils"; interface TileParams { element?: SVGElement; showArcs?: boolean; tileSize?: number; numberOfLines?: number; + linesRandomDirection?: boolean; rotation?: number; - strokeWeight?: number; - strokeColour?: string; + outlineStrokeWeight?: number; + outlineStrokeColour?: string; + infillStrokeWeight?: number; + infillStrokeColour?: string; } // Define the Tile class - arcs @@ -18,25 +21,38 @@ class Tile { showArcs: boolean; tileSize: number; numberOfLines: number; + linesRandomDirection: boolean; rotation: number; - strokeWeight: number; - strokeColour: string; + outlineStrokeWeight: number; + outlineStrokeColour: string; + infillStrokeWeight: number; + infillStrokeColour: string; + defaultStrokeWeight: number; + defaultStrokeColour: string; constructor({ showArcs = true, tileSize = 100, - numberOfLines = 9, + numberOfLines = 10, + linesRandomDirection = true, rotation = 0, - strokeWeight = 1, - strokeColour = "black", + outlineStrokeWeight = 1, + outlineStrokeColour = "black", + infillStrokeWeight = 0, + infillStrokeColour = "black", }: TileParams) { this.showArcs = showArcs; this.tileSize = tileSize; this.numberOfLines = numberOfLines; + this.linesRandomDirection = linesRandomDirection; this.rotation = rotation; - this.strokeWeight = strokeWeight; - this.strokeColour = strokeColour; + this.outlineStrokeWeight = outlineStrokeWeight; + this.outlineStrokeColour = outlineStrokeColour; + this.infillStrokeWeight = infillStrokeWeight; + this.infillStrokeColour = infillStrokeColour; this.element = this.createTileElement(); + this.defaultStrokeWeight = 2; + this.defaultStrokeColour = "black"; } createTileElement(): SVGElement { @@ -60,39 +76,85 @@ class Tile { // Experiment with an offset so we don't always fill the tile const calcSpacing = (size: number, qty: number): number[] => { const spacing = size / qty; - console.log("CalcRadii, size", size, "quantity", qty, "spacing", spacing); + console.log( + "Calc spacing, Tile size", + size, + "quantity of lines", + qty, + "gap between", + spacing, + "Last coord", + spacing * qty + ); let spacingArray = []; - for (let i = 0; i <= qty; i++) { - spacingArray.push(0 + i * spacing); // add each position to the array + for (let i = 1; i <= qty; i++) { + spacingArray.push(i * spacing); // add each position to the array } return spacingArray; }; + let direction: "horizontal" | "vertical"; + if (this.linesRandomDirection) { + direction = Math.random() < 0.5 ? "horizontal" : "vertical"; + } else { + direction = "horizontal"; + } // const direction = Math.random() < 0.5 ? "horizontal" : "vertical"; - const direction = "horizontal"; + // const direction = "horizontal"; + // Spacing - Calculate the gap between lines for a given tile size and number of lines const spacing = calcSpacing(this.tileSize, this.numberOfLines); - // Colour infill lines - for (let i = 0; i < spacing.slice(0, spacing.length - 1).length; i++) { - const lines = this.createPath( - spacing[i] + 5.5, + // Infill width should be the difference between the spacing and the outline stroke weight + const calculatedInfillStrokeWeight = spacing[1]; //- this.outlineStrokeWeight + this.outlineStrokeWeight / 2; + console.log( + "Spacing[1]", + spacing[1], + "this.outlineStrokeWeight", + this.outlineStrokeWeight, + "Calculated infill stroke", + calculatedInfillStrokeWeight + ); + + // Colour infill lines - Add line that act as coloured in-fill (can't apply fill to an open path) + for (let i = 0; i < spacing.length; i++) { + console.log( + "Getting colour pallete", + i, + getColorPallete("ppP47")[i], + "direction", direction, - 9, - paletteColors[i] + "spacing", + spacing[i] ); - group.appendChild(lines); + const line = this.createPath( + spacing[i], // position + direction, + calculatedInfillStrokeWeight, // stroke weight + getColorPallete("ppP47")[i] + ); + group.appendChild(line); } - // Draw the lines and add them to the linesGroup + // Draw the 'solid' lines (the primary set of lines - not the in-fill) and add them to the linesGroup for (const space of spacing) { - const lines = this.createPath(space, direction); - linesGroup.appendChild(lines); + const lines = this.createPath( + space - this.outlineStrokeWeight / 2, + direction, + this.outlineStrokeWeight, + this.outlineStrokeColour + ); + group.appendChild(lines); } - // If we are showing arcs on this tile, + // If we are showing arcs on this tile, this is where we add them + // but also where we shorten the straight lines where they intersect with the largest arc if (this.showArcs) { - const arcCenter = { x: 0, y: 0 }; + const arcCenter = { + x: 0, + y: 0, + }; + console.log("Spacing", spacing); const largestSpace = spacing[spacing.length - 1]; // Convert the linesGroup.lines into an array @@ -101,17 +163,13 @@ class Tile { const lineStart = { x: parseFloat(line.getAttribute("d")?.split(" ")[1] as string), y: parseFloat(line.getAttribute("d")?.split(" ")[2] as string), - // x: parseFloat(line.getAttribute("x1") as string), - // y: parseFloat(line.getAttribute("y1") as string), }; const lineEnd = { x: parseFloat(line.getAttribute("d")?.split(" ")[4] as string), y: parseFloat(line.getAttribute("d")?.split(" ")[5] as string), - // x: parseFloat(line.getAttribute("x2") as string), - // y: parseFloat(line.getAttribute("y2") as string), }; - console.log("Line start:", lineStart, "Line end:", lineEnd); + // console.log("Line start:", lineStart, "Line end:", lineEnd); // Determine if there is an intersection for the current line const intersection = this.lineArcIntersection( lineStart, @@ -119,22 +177,8 @@ class Tile { largestSpace ); + // If there is an intersection for the current line, modify it so the line starts at the intersection if (intersection) { - console.log("Intersection found", intersection); - console.log( - "Modify lines 'd' attribute '", - line.getAttribute("d"), - "'" - ); - console.log( - "Updating arrtibute with this: `", - `M ${intersection.x} ${intersection.y} ${line - .getAttribute("d") - ?.split(" ") - .slice(4, 6) - .join(" ")}`, - "'" - ); line.setAttribute( "d", `M ${intersection.x} ${intersection.y} ${line @@ -143,84 +187,42 @@ class Tile { .slice(4, 6) .join(" ")}` ); - // line.setAttribute("y1", String(intersection.y)); - } else { - console.log("No intersection found"); } }); - // Can we fill the space between with a different colour? - // for (const space of spacing.slice(0, 10)) { - // const arc = this.createArc( - // 0, - // 0, - // space + 5, - // 0, - // 0 + 90, - // 8, - // getRandomColor() - // ); - // group.appendChild(arc); - // } + // Arc (curves) in-fill (the coloured arcs as per the coloured in-fill lines) for (let i = 0; i < spacing.slice(0, spacing.length - 1).length; i++) { const arc = this.createArc( 0, 0, - spacing[i] + 5.5, + spacing[i] - this.infillStrokeWeight / 2, 0, 0 + 90, - 8, - paletteColors[i] + this.infillStrokeWeight > calculatedInfillStrokeWeight + ? this.infillStrokeWeight + : calculatedInfillStrokeWeight, + getColorPallete("ppP47")[i] // We will want to switch between a pallete and a single colour at some point - how? ); group.appendChild(arc); } - // for each radius in the radii array + + // Arcs (curves) primary colour (the solid lines or outlines) for (const space of spacing) { - const arc = this.createArc(0, 0, space, 0, 0 + 90, 3); + const arc = this.createArc( + 0, + 0, + space - this.outlineStrokeWeight / 2, + 0, + 0 + 90, + this.outlineStrokeWeight, + this.outlineStrokeColour + ); group.appendChild(arc); } } return group; } - createLine(length: number, direction: "horizontal" | "vertical"): SVGElement { - console.log( - "Creating a single line with direction", - direction, - "and length", - length - ); - const lines = document.createElementNS("http://www.w3.org/2000/svg", "g"); - const lineOffset = 0; - - const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); - - // Horizontal Lines start at x1=0 y1=radius and finish at x2=100, y2=radius - // Vertical Lines start at x1=radius y1=0 and finish at x2=radius, y2=100 - if (direction === "horizontal") { - // Start of line - line.setAttribute("x1", "0"); - line.setAttribute("y1", String(length)); - // end of line - line.setAttribute("x2", "100"); - line.setAttribute("y2", String(length)); - } else { - // Start of line - line.setAttribute("x1", String(length)); - line.setAttribute("y1", "0"); - // end of line - line.setAttribute("x2", String(length)); - line.setAttribute("y2", "100"); - } - - line.setAttribute("stroke", this.strokeColour); - line.setAttribute("stroke-width", String(this.strokeWeight)); - - lines.appendChild(line); - - return lines; - } - // Maybe the line is causing problem? (I don't seem to be able to join a line to a path so make the lines paths?) createPath( length: number, @@ -228,12 +230,12 @@ class Tile { strokeWeight?: number, strokeColour?: string ): SVGElement { - console.log( - "Creating a single path with direction", - direction, - "and length", - length - ); + // console.log( + // "Creating a single path with direction", + // direction, + // "and length", + // length + // ); const paths = document.createElementNS("http://www.w3.org/2000/svg", "g"); const pathOffset = 0; @@ -248,16 +250,13 @@ class Tile { } path.setAttribute("d", d); - path.setAttribute( - "stroke", - strokeColour ? strokeColour : this.strokeColour - ); + path.setAttribute("stroke", strokeColour || this.defaultStrokeColour); path.setAttribute( "stroke-width", - strokeWeight ? String(strokeWeight) : String(this.strokeWeight) + String(strokeWeight) || String(this.defaultStrokeWeight) ); - path.setAttribute("stroke-linecap", "round"); - path.setAttribute("stroke-linejoin", "round"); + // path.setAttribute("stroke-linecap", "round"); + // path.setAttribute("stroke-linejoin", "round"); path.setAttribute("fill", "none"); paths.appendChild(path); @@ -297,10 +296,10 @@ class Tile { arc.setAttribute("d", d); arc.setAttribute("fill", "none"); - arc.setAttribute("stroke", strokeColour ? strokeColour : this.strokeColour); + arc.setAttribute("stroke", strokeColour || this.defaultStrokeColour); arc.setAttribute( "stroke-width", - strokeWeight ? String(strokeWeight) : String(this.strokeWeight) + String(strokeWeight) || String(this.defaultStrokeWeight) ); return arc; diff --git a/src/index.ts b/src/index.ts index 899d69f..cadcbc1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,8 +3,8 @@ import { getRandomColor, joinClosePaths } from "./utils"; // Create a grid of patterned tiles const grid = document.getElementById("grid"); -const numRows = 10; -const numCols = 12; +const numRows = 4; +const numCols = 4; const outerSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg"); outerSVG.setAttribute("viewBox", `0 0 ${numCols * 100} ${numRows * 100}`); @@ -38,11 +38,17 @@ for (let row = 0; row < numRows; row++) { // Randomly decide whether to show arcs (defaults to true) const showArcs = Math.random() < 0.5; + // const showArcs = false; // Add a tile to the grid (all the work is done in the Tile class) const tile = new Tile({ - strokeWeight: 2, - strokeColour: "black", + showArcs, + rotation, + linesRandomDirection: false, + numberOfLines: 7, + outlineStrokeWeight: 4, + outlineStrokeColour: "black", + infillStrokeWeight: 8, }); // Define the SVG element using the tile content const tileGroup = tile.element; diff --git a/src/utils.ts b/src/utils.ts index b28baa4..f88cccf 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -63,48 +63,41 @@ export const joinClosePaths = (outerSVG: SVGSVGElement, threshold: number) => { } }; -const webColors: string[] = [ - "red", - "blue", - "teal", - "green", - "yellow", - "purple", - "aqua", - "fuchsia", - "lime", - "maroon", - "navy", - "olive", - "silver", - "gray", - "black", -]; - export const getRandomColor = (exclude?: string): string => { const filteredColors = exclude - ? webColors.filter((color) => color !== exclude) - : webColors; + ? getColorPallete("basic").filter((color) => color !== exclude) + : getColorPallete("basic"); const randomIndex = Math.floor(Math.random() * filteredColors.length); return filteredColors[randomIndex]; }; -export const paletteColors: string[] = [ - "black", - "navy", - "blue", - "teal", - "aqua", - "teal", - "blue", - "navy", - "black", -]; +type PaletteColors = { + [key: string]: string[]; +}; -export const getmColor = (exclude?: string): string => { - const filteredColors = exclude - ? webColors.filter((color) => color !== exclude) - : webColors; - const randomIndex = Math.floor(Math.random() * filteredColors.length); - return filteredColors[randomIndex]; +const paletteColors: PaletteColors = { + basic: [ + "black", + "navy", + "blue", + "teal", + "aqua", + "teal", + "blue", + "navy", + "black", + ], + ppP47: [ + "rgb(166,217,226)", + "rgb(248,171,30)", + "rgb(250,210,219)", + "rgb(231,35,133)", + "rgb(250,210,219)", + "rgb(248,171,30)", + "rgb(166,217,226)", + ], +}; + +export const getColorPallete = (name: string): string[] => { + return paletteColors[name]; }; From 62f23066c9e7748b701e10dc5bc7e92a7872dac5 Mon Sep 17 00:00:00 2001 From: Mark Benson Date: Tue, 18 Apr 2023 21:58:29 +0100 Subject: [PATCH 6/6] Currently working with colour but not outline --- index.html | 2 +- src/Tile.ts | 99 +++++++++++++++++++++++++++++++++++++--------------- src/index.ts | 6 ++-- src/utils.ts | 9 +++++ styles.css | 37 ++++++++------------ 5 files changed, 97 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index ba2be75..8fb4fab 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-
+
diff --git a/src/Tile.ts b/src/Tile.ts index 6ac8536..06af8ba 100644 --- a/src/Tile.ts +++ b/src/Tile.ts @@ -2,6 +2,11 @@ import SVG from "svg.js"; import { parseSVG as parsePath } from "svg-path-parser"; import { getColorPallete, getRandomColor } from "./utils"; +type LineStartEnd = { + lineStart: { x: number; y: number }; + lineEnd: { x: number; y: number }; +}; + interface TileParams { element?: SVGElement; showArcs?: boolean; @@ -56,8 +61,17 @@ class Tile { } createTileElement(): SVGElement { - const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); - group.setAttribute("class", "tile"); + const outlineGroup = document.createElementNS( + "http://www.w3.org/2000/svg", + "g" + ); + outlineGroup.setAttribute("class", "tile"); + + const infillGroup = document.createElementNS( + "http://www.w3.org/2000/svg", + "g" + ); + infillGroup.setAttribute("class", "tile"); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("viewBox", "0 0 100 100"); @@ -68,7 +82,8 @@ class Tile { "http://www.w3.org/2000/svg", "g" ); - group.appendChild(linesGroup); + infillGroup.setAttribute("class", "tile"); + // group.appendChild(linesGroup); // Instead of manually specifying the points for each Radii (arcRadii) we can // calculate that based on the size of the tile and the number of lines we want @@ -106,7 +121,7 @@ class Tile { const spacing = calcSpacing(this.tileSize, this.numberOfLines); // Infill width should be the difference between the spacing and the outline stroke weight - const calculatedInfillStrokeWeight = spacing[1]; //- this.outlineStrokeWeight + this.outlineStrokeWeight / 2; + const calculatedInfillStrokeWeight = spacing[1] / 2; //+ this.outlineStrokeWeight / 2; console.log( "Spacing[1]", spacing[1], @@ -116,35 +131,56 @@ class Tile { calculatedInfillStrokeWeight ); + // Order matters! SVGs are layered, one thing over another will hide the thing below it. // Colour infill lines - Add line that act as coloured in-fill (can't apply fill to an open path) for (let i = 0; i < spacing.length; i++) { console.log( "Getting colour pallete", i, - getColorPallete("ppP47")[i], + getColorPallete("ppP50")[i], "direction", direction, "spacing", spacing[i] ); const line = this.createPath( - spacing[i], // position + spacing[i] - calculatedInfillStrokeWeight / 2, // position direction, calculatedInfillStrokeWeight, // stroke weight - getColorPallete("ppP47")[i] + getColorPallete("ppP50")[i] ); - group.appendChild(line); + infillGroup.appendChild(line); } // Draw the 'solid' lines (the primary set of lines - not the in-fill) and add them to the linesGroup - for (const space of spacing) { - const lines = this.createPath( - space - this.outlineStrokeWeight / 2, - direction, - this.outlineStrokeWeight, - this.outlineStrokeColour - ); - group.appendChild(lines); + // The first and last line should be half on or off the tile so things overlap correctly. That means + // there is one more line than the number specified. The in-fill lines will be the correct number + // for (const space of spacing) { + for (let i = 0; i <= spacing.length; i++) { + let space; + if (i >= spacing.length) { + space = 0; + console.log("Adding the single odd line at", space); + const line = this.createPath( + space, + direction, + this.outlineStrokeWeight, + this.outlineStrokeColour + ); + outlineGroup.appendChild(line); + } else { + space = spacing[i]; + console.log("Adding the next line at", space); + const line = this.createPath( + space + spacing[0] / 2, + direction, + this.outlineStrokeWeight, + this.outlineStrokeColour + ); + outlineGroup.appendChild(line); + } + + console.log("Number of outlines", outlineGroup.children.length); } // If we are showing arcs on this tile, this is where we add them @@ -158,7 +194,7 @@ class Tile { const largestSpace = spacing[spacing.length - 1]; // Convert the linesGroup.lines into an array - Array.from(linesGroup.querySelectorAll("path")).forEach((line) => { + Array.from(outlineGroup.querySelectorAll("path")).forEach((line) => { // Extract the line start and end for the current line const lineStart = { x: parseFloat(line.getAttribute("d")?.split(" ")[1] as string), @@ -191,19 +227,19 @@ class Tile { }); // Arc (curves) in-fill (the coloured arcs as per the coloured in-fill lines) - for (let i = 0; i < spacing.slice(0, spacing.length - 1).length; i++) { + for (let i = 0; i < spacing.length; i++) { const arc = this.createArc( 0, 0, - spacing[i] - this.infillStrokeWeight / 2, + spacing[i] - calculatedInfillStrokeWeight / 2, 0, 0 + 90, this.infillStrokeWeight > calculatedInfillStrokeWeight ? this.infillStrokeWeight : calculatedInfillStrokeWeight, - getColorPallete("ppP47")[i] // We will want to switch between a pallete and a single colour at some point - how? + getColorPallete("ppP50")[i] // We will want to switch between a pallete and a single colour at some point - how? ); - group.appendChild(arc); + infillGroup.appendChild(arc); } // Arcs (curves) primary colour (the solid lines or outlines) @@ -217,10 +253,13 @@ class Tile { this.outlineStrokeWeight, this.outlineStrokeColour ); - group.appendChild(arc); + outlineGroup.appendChild(arc); } } - return group; + + linesGroup.appendChild(infillGroup); + // linesGroup.appendChild(outlineGroup); + return linesGroup; } // Maybe the line is causing problem? (I don't seem to be able to join a line to a path so make the lines paths?) @@ -230,12 +269,14 @@ class Tile { strokeWeight?: number, strokeColour?: string ): SVGElement { - // console.log( - // "Creating a single path with direction", - // direction, - // "and length", - // length - // ); + console.log( + "Creating a single path with direction", + direction, + "and length", + length, + "Stroke-wdith", + strokeWeight + ); const paths = document.createElementNS("http://www.w3.org/2000/svg", "g"); const pathOffset = 0; diff --git a/src/index.ts b/src/index.ts index cadcbc1..6656a70 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,8 +3,8 @@ import { getRandomColor, joinClosePaths } from "./utils"; // Create a grid of patterned tiles const grid = document.getElementById("grid"); -const numRows = 4; -const numCols = 4; +const numRows = 10; +const numCols = 10; const outerSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg"); outerSVG.setAttribute("viewBox", `0 0 ${numCols * 100} ${numRows * 100}`); @@ -34,7 +34,7 @@ for (let row = 0; row < numRows; row++) { for (let col = 0; col < numCols; col++) { // Chose a random rotation for the tile (constrained to 0, 90, 180 & 270) const rotation = Math.floor(Math.random() * 4) * 90; - // const rotation = 0; + // const rotation = 90; // Randomly decide whether to show arcs (defaults to true) const showArcs = Math.random() < 0.5; diff --git a/src/utils.ts b/src/utils.ts index f88cccf..a431066 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -96,6 +96,15 @@ const paletteColors: PaletteColors = { "rgb(248,171,30)", "rgb(166,217,226)", ], + ppP50: [ + "rgb(242,195,219)", + "rgb(218,228,151)", + "rgb(120,172,215)", + "rgb(248,171,30)", + "rgb(120,172,215)", + "rgb(218,228,151)", + "rgb(242,195,219)", + ], }; export const getColorPallete = (name: string): string[] => { diff --git a/styles.css b/styles.css index 39e4f3a..7400628 100644 --- a/styles.css +++ b/styles.css @@ -1,28 +1,19 @@ -.tile-container { - position: relative; - } - - .tile { - /* position: absolute; */ - /* width: 100px; - height: 100px; - */ - vertical-align: top; - } - .tile-overlay { - position: absolute; - width: 100px; - height: 100px; - } +.tile { + /* position: absolute; */ + /* width: 100px; + height: 100px; + */ + /* vertical-align: top; */ +} - #grid { - /* display: grid; */ - /* width: auto; - height: auto; */ - grid-template-columns: repeat(auto-fill, 100px); - grid-template-rows: repeat(auto-fill, 100px); +#grid { + display: flexbox; + width: auto; + height: auto; + /* grid-template-columns: repeat(auto-fill, 100px); */ + /* grid-template-rows: repeat(auto-fill, 100px); */ /* grid-auto-flow: row; */ - grid-gap: 0; /* Adjust the gap between tiles if needed */ + /* grid-gap: 1; Adjust the gap between tiles if needed */ } #controls {