# Patrones / Patterns > Web tool that turns the colors of a cultural object's image (record, book or graphic novel cover, or an artwork) into an abstract pattern or poster. Every pixel of a pattern is one of the cover's colors (flat color, no gradients). Everything runs in the browser: there is no server API and no image is uploaded. Site: https://pattern-studio-rosy.vercel.app/ Interface languages: Spanish (default) and English (`lang=en`). ## How an agent can use it 1. **Build a link.** Every pattern can be described with URL parameters. Opening the link shows that exact pattern, and the person can download it as PNG. No cover image is needed if you pass the colors. 2. **Read a recipe.** In the interface, section "07 · Para agentes / For agents" shows the current pattern as JSON, with buttons to copy the link or the JSON. The same recipe is available from JavaScript (see below). 3. **Drive it from a browser.** On the page, `window.Patrones` renders patterns and returns PNG data URLs. ## URL parameters | Param | Meaning | Values | |---|---|---| | `k` | object type: changes the labels and the poster card ("PATTERN STUDY · ARTWORK") | `disco` record (default), `libro` book, `novela` graphic novel, `obra` artwork | | `p` | pattern id | one of the ids below, default `vein` | | `s` | seed (same seed + same palette = same pattern) | positive integer | | `d` | detail | `1` low, `2` medium, `3` high | | `f` | format | `1:1`, `4:5`, `9:16`, `16:9` | | `o` | output | `poster` (pattern + paper margin + info card) or `pattern` (pattern only) | | `w`, `wr` | a Sanzo Wada combination (1–348) as the palette, and how many times it is rotated (which color is the background). Overrides `c`. Same data as https://sanzo-wada-chi.vercel.app | `w=142&wr=1` | | `c` | palette: comma-separated `hex-share` pairs, hex without `#`, share in percent of the cover. The largest share is the background. | `26224b-57,e7ca2c-9,971e29-6` | | `t`, `a`, `y` | poster title, artist, year | text | | `e` | example image to use when `c` is missing | `0` Plantasia, `1` Head Hunters, `2` Bitches Brew, `3` Echoes, `4` Malevich, `5` Hokusai, `6` Hilma af Klint (public domain artworks) | | `lang` | interface language | `es`, `en` | Example: https://pattern-studio-rosy.vercel.app/?p=cascade&s=12345&d=2&f=4:5&o=pattern&c=26224b-57,060607-11,233860-9,971e29-6,c6792d-6,e7ca2c-9,306290-2&t=Head%20Hunters&a=Herbie%20Hancock&y=1973 ## Use a pattern inside your own web: patrones.js One script, no dependencies, ~94 KB. It draws the same 39 patterns live, at any size, and does not leak globals besides `Patrones`.

Your content goes on top

 `` fills its box with the pattern, behind its content, and redraws when the box changes size. Attributes: `pattern` (id), `wada` (1–348) and `giro` (rotation), or `colors` ("#hex,#hex,#hex", first = background), `seed`, `detail` (1–3). JavaScript: `Patrones.draw(canvas, opts)` paints a canvas at its size · `Patrones.svg({ ...opts, width, height, tile })` returns SVG text · `Patrones.tile({ ...opts, width, height })` returns a canvas with a seamless tile · `Patrones.patterns()` lists the styles with their tags · `Patrones.wada(n)` returns a combination's colors. Every pixel stays one of the palette's colors. ## How to choose a pattern: catalogo.json [catalogo.json](catalogo.json) tags every style, from looking at it rendered: - `usos`: `fondo` (behind content), `hero` (the protagonist at the top), `banda` (a strip or divider), `textura` (fill for areas), `ilustración` (an image in itself). - `energia` (calma | media | alta) and `densidad` (baja | media | alta). - `texto_encima`: true if it leaves calm areas where text reads (check contrast anyway). For text over a busy pattern, put the text on a solid plate. - `se_repite`: true if the design is already periodic. Any pattern can be repeated as a mirrored tile. - `pixel`: true if it is painted per pixel; its SVG is made of colored rectangles and is heavy (1–4 MB). Prefer patrones.js or a PNG tile for those. Rules of thumb: dashboards and tools → one calm pattern (`energia: calma`) in a band or a hero, never behind data. Landings and posters → one `hero` pattern, high energy allowed. Never more than two patterns on a page. Colors: use the same Wada combination as the page's theme (https://sanzo-wada-chi.vercel.app/llms.txt). ## Export (no browser needed for the person) In the interface, section 03 exports the pattern only as SVG, a mirrored tile PNG or a tile SVG. From the page, `window.Patrones.svg({ longSide, tile })` and `window.Patrones.tile({ longSide })` do the same, and `window.Patrones.wada(n, giro)` loads a Wada combination. ## Recipe (JSON) ```json { "tool": "Patrones", "version": 1, "kind": "disco", "pattern": { "id": "cascade", "name": "Cascade", "family": "Óptico" }, "seed": 12345, "variant": 1, "detail": 2, "format": "4:5", "output": "pattern", "size": { "width": 2400, "height": 3000 }, "palette": [ { "hex": "#26224b", "share": 57, "role": "fondo" } ], "meta": { "title": "Head Hunters", "artist": "Herbie Hancock", "year": "1973" }, "url": "https://pattern-studio-rosy.vercel.app/?p=cascade&..." } ``` `share` is a percentage of the cover's area. `role` is `fondo` (background), `cuerpo` (body), `tinta` (dark ink) or `acento` (small, vivid accent). Exported PNGs are 3000 px on the long side. ## Browser API (`window.Patrones`) - `Patrones.patterns()` → `[{ id, name, family }]` for all 39 styles. - `Patrones.formats()` → `["1:1", "4:5", "9:16", "16:9"]`. - `Patrones.recipe()` → the current recipe object. - `Patrones.url()` → a shareable link for the current pattern. - `Patrones.apply(recipe)` → applies a recipe (same shape as above; `pattern` may be an id string) and returns the resulting recipe, or `null` if it was not valid. - `Patrones.render({ longSide })` → Promise of a PNG data URL (256–4000 px, default 3000). - `Patrones.renderMotion({ variations, secondsPerVariation, download })` → Promise of a video Blob (MP4 where the browser supports it, otherwise WebM). The video shows the full poster (pattern, cover photo and record details) cycling through `variations` (6, 12 or 24) of the current pattern, `secondsPerVariation` each (1, 0.5 or 0.25), with hard cuts so every frame keeps the exact colors. `download: false` skips the automatic download. ## Motion video In the interface, section "06 · Motion" renders the same video with "Exportar video / Export video" and then "Compartir / Share" (native share sheet where the browser supports sharing files, otherwise a download). The recipe includes `motion.seeds`: the first seed is the current variant and the rest derive from it, so the video is reproducible. ## Pattern ids (39) - Campos / Fields: `vein`, `terrain`, `culture`, `pith`, `mist`, `prism`, `atlas`, `stipple` - Geometría / Geometry: `warp`, `pane`, `modular`, `specimen`, `stitch`, `static` - Tipografía / Type: `cipher`, `kiosk` - Collage: `motley` - Textil / Textile: `pebble`, `stem`, `tri`, `invert`, `loom`, `block`, `yarn`, `diamond` - Óptico / Optical: `disc`, `cascade`, `chroma`, `moire`, `arc`, `arcade`, `tremor` - Gráfico / Graphic: `peg`, `super`, `squiggle` - Orgánico / Organic: `dahlia`, `chaff`, `sprig`, `filament` ## Notes - In the interface a person can crop the image so only part of it counts for the palette, and add exact colors with an eyedropper. Both end up in `palette`, so the recipe and the link already carry them. - Same pattern id + seed + detail + palette gives the same image; the format changes the composition. - There is no endpoint that returns a PNG without a browser: rendering happens in JavaScript on a canvas.