-
Notifications
You must be signed in to change notification settings - Fork 29.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
4 changed files
with
98 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,100 @@ | ||
import { type Color, mix, type Scale } from "chroma-js"; | ||
|
||
declare function trianglify(opts?: trianglify.Options): trianglify.PatternInterface; | ||
|
||
declare namespace trianglify { | ||
interface ColorFunctionInput { | ||
xPercent: number; | ||
yPercent: number; | ||
xScale: Scale<Color>; | ||
yScale: Scale<Color>; | ||
opts: number[][]; | ||
random?: () => number | undefined; | ||
} | ||
|
||
type ColorFunction = (args: ColorFunctionInput) => ReturnType<typeof mix>; | ||
type Points = Array<[number, number]>; | ||
|
||
interface Options { | ||
/** Width of pattern */ | ||
width?: number | undefined; | ||
width?: number; | ||
/** Height of pattern */ | ||
height?: number | undefined; | ||
height?: number; | ||
/** Size of the cells used to generate a randomized grid */ | ||
cell_size?: number | undefined; | ||
cellSize?: number; | ||
/** how much to randomize the grid */ | ||
variance?: number | undefined; | ||
variance?: number; | ||
/** Seed for the RNG */ | ||
seed?: number | string | null | undefined; | ||
/** X color stops */ | ||
x_colors?: false | string | string[] | undefined; | ||
xColors?: string[]; | ||
/** Y color stops */ | ||
y_colors?: false | string | string[] | undefined; | ||
yColors?: string[]; | ||
/** Color space used for gradient construction & interpolation */ | ||
color_space?: string | undefined; | ||
colorSpace?: "rgb" | "hsl" | "hsv" | "hsi" | "lab" | "oklab" | "lch" | "oklch" | "hcl" | "lrgb" | undefined; | ||
/** Color function f(x, y) that returns a color specification that is consumable by chroma-js */ | ||
color_function?: ((x: number, y: number) => string) | null | undefined; | ||
colorFunction?: ColorFunction; | ||
/** Width of stroke. Defaults to 1.51 to fix an issue with canvas antialiasing. */ | ||
stroke_width?: number | undefined; | ||
/** An array of [x,y] coordinates to trianglulate. Defaults to undefined, and points are generated. */ | ||
points?: number[] | undefined; | ||
strokeWidth?: number; | ||
/** An array of [x,y] coordinates to triangulate. Defaults to `undefined`, and points are generated. */ | ||
points?: Points | undefined; | ||
/** A boolean value to tell if trianglify should render the triangles or not. Defaults to `true` */ | ||
fill?: boolean; | ||
/** The array of color combinations to pick from when using random for the `xColors` or `yColors`. */ | ||
palette?: Record<string, string[]> | Color; | ||
} | ||
|
||
type RequiredOptions = Required<Options>; | ||
|
||
interface SVGOptions { | ||
includeNamespace: boolean; | ||
includeNamespace?: boolean; | ||
coordinateDecimals?: number; | ||
} | ||
|
||
interface Pattern { | ||
opts: Options; | ||
polys: any; | ||
svg(opts?: SVGOptions): SVGElement; | ||
canvas(canvas?: HTMLCanvasElement): HTMLCanvasElement; | ||
png(): string; | ||
interface CanvasOptions { | ||
scaling?: "auto" | false; | ||
applyCssScaling?: boolean; | ||
} | ||
} | ||
|
||
declare function Trianglify(opts?: trianglify.Options): trianglify.Pattern; | ||
type Polys = Array<{ | ||
vertexIndices: number[]; | ||
centroid: { | ||
x: number; | ||
y: number; | ||
}; | ||
color: Color; | ||
}>; | ||
|
||
interface PatternInterface { | ||
points: Points; | ||
polys: Polys; | ||
opts: RequiredOptions; | ||
toSVG(element?: SVGElement, opts?: SVGOptions): SVGElement; | ||
toCanvas(canvas?: HTMLCanvasElement, opts?: CanvasOptions): HTMLCanvasElement; | ||
} | ||
|
||
class Pattern implements PatternInterface { | ||
constructor(points: Points, polys: Polys, opts: RequiredOptions); | ||
points: Points; | ||
polys: Polys; | ||
opts: RequiredOptions; | ||
toSVG(element?: SVGElement, opts?: SVGOptions): SVGElement; | ||
toCanvas(canvas?: HTMLCanvasElement, opts?: CanvasOptions): HTMLCanvasElement; | ||
} | ||
|
||
const defaultOptions: RequiredOptions; | ||
|
||
const colorFunctions: { | ||
interpolateLinear(n: number): ColorFunction; | ||
sparkle(n: number): ColorFunction; | ||
shadows(n: number): ColorFunction; | ||
}; | ||
|
||
const utils: { | ||
mix: typeof mix; | ||
colorbrewer: Record<string, string[]>; | ||
}; | ||
} | ||
|
||
export = Trianglify; | ||
export as namespace trianglify; | ||
export = trianglify; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,18 @@ | ||
import Trianglify = require("trianglify"); | ||
import trianglify from "trianglify"; | ||
|
||
const pattern = Trianglify({ | ||
const pattern = trianglify({ | ||
width: 1920, | ||
height: 1080, | ||
cell_size: 75, | ||
cellSize: 75, | ||
variance: 0.75, | ||
seed: "someseed", | ||
x_colors: ["#2c2541", "#2c2541"], | ||
y_colors: ["#6441a4", "#000000"], | ||
color_space: "lab", | ||
color_function: null, | ||
stroke_width: 1.51, | ||
xColors: ["#2c2541", "#2c2541"], | ||
yColors: ["#6441a4", "#000000"], | ||
colorSpace: "lab", | ||
strokeWidth: 1.51, | ||
}); | ||
|
||
const svg = pattern.svg({ includeNamespace: true }); | ||
const svgVirtual = document.createElement("svg") as unknown as SVGElement; | ||
const svg = pattern.toSVG(svgVirtual, { includeNamespace: true }); | ||
const result = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" + svg.outerHTML; | ||
console.log(result); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters