Patron Class

Public Properties

• color: string
• customLineEnd: (arg:{referenceSize: number, i: number, stats: Patron["stats"]}) => number;
• density: "VERY_LOW" | "LOW" | "MEDIUM" | "HIGH" | "VERY_HIGH"
• direction: "TOP" | "BOTTOM" | "RIGHT" | "LEFT"
• gap: number
• isReusingLastPattern: boolean
• patternType: "butt" | "round" | "square"
• size: ${number}% | ${number}px | "M" | "XS" | "S" | "L" | "XL" | "XXL"

Private Properties

• stats: {
  • zeroProb: number;
  • oneProb: number;
  • numberOfDots: number;
  • numberOfLines: number;
  • directionReference: "offsetHeight" | "offsetWidth";
  • sizeReference: "offsetHeight" | "offsetWidth";
  • dotSize: number;
  • strokeColor: string;
  • lineGap: number; }

Descriptions

| Propiedad | Descripción | |-----------|-------------| | color | color as string | | customLineEnd | this function stablish a number that represents were each line ends (in px) | | density | percentage of pattern painted. "VERY_LOW"=15%. "LOW"=30%, "MEDIUM"=55%, "HIGH"=75%, o "VERY_HIGH"=95% | | direction | Were does the pattern points at. | | gap | size between lines, using the line size as reference | | isReusingLastPattern | this boolean fixs the pattern value to be reused. Density don´t change the pattern if is reusing the last pattern | | patternType | butt is squared, but can start with empty values. Wont explain further, just check svg > line > dash-array | | size | Percentage or fixed px value. Also has predefined values like: "XS"= 3%, "S"= 4%, "M"= 6%, "L"= 9%, "XL"= 12%, "XXL"= 15%. |

Usage

Patron just need a configuration and a container.

const container = document.getElementById("foo");
const p = new Patron();
p.createPatron(container);

customLineEnds:

I have tested a few functions to animate customLineEnds

Choose one

//example 1
(arg) => 0.10 * arg.referenceSize * Math.sin((arg.i + theIntervar)/ 6) + (arg.referenceSize / (9.5))

//example 2
({referenceSize, stats, i}) =>  referenceSize * (1 - (i / stats.numberOfLines))

let theFunction: () => 1 // <-- paste here example 1 or 2

const container = document.getElementById("foo");
const p = new Patron({
    density: "HIGH",
    direction: "BOTTOM",
    patternType: "butt",
    size: "XS",
    color: "#f0a0a0",    
    customLineEnd: theFunction, // <--- HERE IT GOES
});

setInterval(  () => {
    theIntervar++;
    p.createPatron(container);
}, 150);

Stress test

| | Prueba v1 | Prueba v2 | |:---|:---|:---| | n | Tiempo (ms) | Tiempo (ms) | | 10 | 72.498046875 | 34.51611328125 | | 100 | 515.968017578125 | 213.760986328125 | | 1000 | 4800.697021484375 | 2014.239990234375 | | 10000 | 71669.91796875 | 20620.1259765625 | | Configuración | | | | density | "MEDIUM" | "MEDIUM" | | direction | "TOP" | "RIGHT" | | patronType |"butt" | "butt" | | isReusingLastPatron | false | false | | size | "XS" | "XS" |