2c:null 2d:["$","title",null,{"children":"Hello Motif.js | Atelier de cartographie de Sciences Po | Observable"}] 32:T4f3,## Parameters + **type** `{string}` - Type of pattern. Can be "line", "plaid", "circle", "plus", "cross", "triangle", square", "diamond" and "custom". If "custom" see custom parameter. Default: "line". * **scale** `{number}` - Scale of the tile. Default: 1. * **size** `{number}` - Shape size as a percentage of tile area. Default: 20. * **angle** `{number}` - Rotation angle, in degree. Default: 0 * **fill** `{string}` - Fill color. Default: "black" * **stroke** `{string}` - Stroke color. Default: "transparent" * **strokeWidth** `{number}` - Line width of shape stroke, in pixels. Default: 0 * **dash** `{number[]}` - Dash pattern as an array like in [Canvas.setLineDash](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). * **background** `{string}` - Background color of the pattern canvas. Default: "transparent". * **border** `{number}` - Tile border width. Default: 0 = no border. * **patchSize** `{boolean}` - Patch the size to truly respect ratio between shape and tile area. Default: false * **custom.shape** `{function}` - Custom shape as an SVG string data or Canvas path method. * **custom.patch** `{number}` - Patch size for the custom shape = when trigger color switch and inverse size. Default: 50.33:T685,

Line with variation of size from 10% to 100%

${sample({ type: "line", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "line", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "line", scale: 1, size: 100, patchSize }, 40, col10)}34:T697,

Plaid with variation of size from 10% to 100%

${sample({ type: "plaid", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "plaid", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "plaid", scale: 1, size: 100, patchSize }, 40, col10)}35:T6ab,

Circle with variation of size from 10% to 100%

${sample({ type: "circle", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "circle", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "circle", scale: 1, size: 100, patchSize }, 40, col10)}36:T681,

Plus with variation of size from 10% to 100%

${sample({ type: "plus", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "plus", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "plus", scale: 1, size: 100, patchSize }, 40, col10)}37:T696,

Cross with variation of size from 10% to 100%

${sample({ type: "cross", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "cross", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "cross", scale: 1, size: 100, patchSize }, 40, col10)}38:T6d5,

Triangle with variation of size from 10% to 100%

${sample({ type: "triangle", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "triangle", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "triangle", scale: 1, size: 100, patchSize }, 40, col10)}39:T6ab,

Square with variation of size from 10% to 100%

${sample({ type: "square", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "square", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "square", scale: 1, size: 100, patchSize }, 40, col10)}3a:T6c0,

Diamond with variation of size from 10% to 100%

${sample({ type: "diamond", scale: 3, size: 10, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 20, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 30, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 40, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 50, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 60, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 70, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 80, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 90, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 3, size: 100, border: 1, patchSize }, 30, col10)} ${sample({ type: "diamond", scale: 1, size: 10, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 20, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 30, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 40, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 50, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 60, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 70, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 80, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 90, patchSize }, 40, col10)} ${sample({ type: "diamond", scale: 1, size: 100, patchSize }, 40, col10)}3b:T1843,/** * Creates a pattern/motif that can be used in SVG environment or Canvas context. * @param {object} [options={}] - An object containing the options for the pattern. * @param {string} [options.type="line"] - Type of pattern. Can be "line", "plaid", "circle", "plus", "cross", "triangle", square", "diamond" and "custom". If "custom" see options.custom * @param {number} [options.scale=1] - Scale of the tile. * @param {number} [options.size=20] - Shape size as a percentage of tile area. * @param {number} [options.angle=0] - Rotation angle, in degrees. * @param {string} [options.fill="black"] - Fill color. * @param {string} [options.stroke="transparent"] - Stroke color. * @param {number} [options.strokeWidth=0] - Line width of shape stroke, in pixels. * @param {number[]} [options.dash=[]] - Dash pattern as in CSS. * @param {string} [options.background="transparent"] - Background color of the pattern canvas. * @param {number} [options.border=0] - Tile border width. Default as 0 = no border. * @param {boolean} [options.patchSize=false] - Patch the size to truly respect ratio between shape and tile area. * @param {function} [option.custom.shape] - Custom shape as an SVG string data or Canvas path method. * @param {number} [option.custom.patch=50] - Patch size for the custom shape. Default: 50. * @returns {{ defs: SVG, urls: string, context: Function, apply: Function }} An object containing SVG defs tags with pattern, url id of the pattern and two functions for Canvas use: context and apply. */ function motif(options = {}) { let { type, scale, size, angle, fill, stroke, strokeWidth, dash, background, border, patchSize, custom } = options; type = type ?? "line"; scale = scale ?? 1; size = size ?? 20; angle = angle ?? 0; fill = fill ?? "black"; stroke = stroke ?? "transparent"; strokeWidth = strokeWidth ?? 0; dash = dash ?? []; background = background ?? "white"; border = border ?? 0; patchSize = patchSize ?? false; const tile = scale * 10; const getShapeArea = () => (size / 100) * (tile * tile); let externalContext; const dpi = devicePixelRatio || 2; // double the dpi to ensure crisp small shape const shapePath = new Map([ ["line", line], ["plaid", plaid], ["circle", circle], ["plus", plus], ["cross", plus], ["triangle", triangle], ["square", square], ["diamond", square], ["custom", custom?.shape] ]); // Empirical tipping point = faster and still close to real one const tippingPoint = new Map([ ["line", 50], // arbitrary ["plaid", 50], // arbitrary ["circle", 78], ["triangle", 43], ["plus", 43], ["cross", 55], ["square", 50], // arbitrary ["diamond", 50], ["custom", custom?.patch ?? 50] ]); if (patchSize && size > tippingPoint.get(type)) { const back = background; background = fill; fill = back; size = 100 - size; } const pathFunction = shapePath.get(type); const path = custom?.shape && custom?.shape.length === 3 ? pathFunction(tile, getShapeArea(), d3.path()) : pathFunction(tile, getShapeArea()); const id = `${type}-${ Math.round(performance.now()) + Math.random().toFixed(3) }`; const rotateShape = ["cross", "diamond"].includes(type) ? 45 : 0; // SVG OUTPUT // prettier-ignore const pattern = svg` `; const defs = svg`${pattern}`; const url = `url(#${id})`; // CANVAS OUTPUT function get_canvas_with_base_tile() { let canvas; // Handle resolution const tile_dpi = tile * dpi; // Tile create with an offscreen canvas if available if (typeof window.OffscreenCanvas !== "undefined") { canvas = new window.OffscreenCanvas(tile_dpi, tile_dpi); } else { canvas = document.createElement("canvas"); canvas.width = canvas.height = tile_dpi; } const ctx = canvas.getContext("2d"); // Tile background and border ctx.fillStyle = background; ctx.strokeStyle = border === 0 ? "transparent" : "black"; ctx.lineWidth = border; ctx.rect(0, 0, tile_dpi, tile_dpi); ctx.fill(); ctx.stroke(); // Origin to tile center and shape styling ctx.beginPath(); ctx.translate(tile_dpi / 2, tile_dpi / 2); ctx.scale(dpi, dpi); ctx.rotate(degreeToRadian(rotateShape)); // handle cross and diamond as rotation of plus and square ctx.strokeStyle = strokeWidth === 0 ? "transparent" : stroke; ctx.setLineDash(dash); ctx.lineWidth = strokeWidth; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.fillStyle = fill; // SVG string path pass to a Path2D const path2D = new Path2D(path); ctx.stroke(path2D); ctx.fill(path2D); // Reset translate to tile center ctx.resetTransform(); return canvas; } function context(ctx) { const canvasBaseTile = get_canvas_with_base_tile(); const pattern = ctx.createPattern(canvasBaseTile, "repeat"); externalContext = ctx; pattern.apply = apply; pattern.defs = defs; pattern.pattern = pattern; pattern.url = url; return pattern; } // Apply pattern with good scale and angle function apply() { const angleRadian = degreeToRadian(angle); // Scale pattern to it's good size externalContext.scale(1 / dpi, 1 / dpi); // Rotate pattern according to angle input externalContext.rotate(angleRadian); externalContext.fill(); externalContext.resetTransform(); // restore scale to device pixel resolution externalContext.scale(dpi, dpi); } return { defs, pattern, url, context, apply }; }3c:[] 30:{"id":"090afffdcfbc4282","slug":"motif","title":"Hello Motif.js","thumbnail":"1264f9b523e7c7f4df594098b6bbb60d593c7ce8e6070c43c5342cbfbd54e124","access_level":"public","create_time":"$D2023-02-20T10:32:42.612Z","update_time":"$D2026-02-19T07:54:06.068Z","view_time":null,"first_public_time":"$D2023-03-02T15:51:46.434Z","has_unpublished_edits":null,"fork":false,"stars":37,"starred":false,"owner":{"type":"team","id":"5d76df5eab7f8bb7","login":"ateliercartographie","name":"Atelier de cartographie de Sciences Po","avatar_url":"https://avatars-next.observableusercontent.com/fab2304a50866da3a682fdbbdf200ecb01ddfd5fbf74f60756d36188cfd2cf68","tier":"starter_2024","bio":""},"version":5052,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5f87f2a35829281","login":"tombor","name":"Thomas Ansart","avatar_url":"https://avatars-next.observableusercontent.com/b086dcc95470aae08b776435f7604190c606884a2187354d54b5fbae116aa241","tier":null,"bio":"Cartography and datavisualization at Sciences Po"}],"members":[{"type":"team","id":"5d76df5eab7f8bb7","login":"ateliercartographie","name":"Atelier de cartographie de Sciences Po","avatar_url":"https://avatars-next.observableusercontent.com/fab2304a50866da3a682fdbbdf200ecb01ddfd5fbf74f60756d36188cfd2cf68","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b5f87f2a35829281","login":"tombor","name":"Thomas Ansart","avatar_url":"https://avatars-next.observableusercontent.com/b086dcc95470aae08b776435f7604190c606884a2187354d54b5fbae116aa241","tier":null,"role":"editor"}],"comments":[{"id":"67b0b82d7d95f3a6","reply_to_id":null,"content":"Excellent Thomas, bravo !!!","create_time":"$D2023-03-01T10:38:49.528Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c165d61cd3b3a947","login":"patricemitrano","name":"Patrice MITRANO","avatar_url":"https://avatars-next.observableusercontent.com/5fd43fb09bb85dc9c07f4726cb589a99d52ef5320ea79ab6c71218b0cfcf1aa2","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"7b1061361c5a9cc5","slug":"motif","title":"Motif","owner":{"id":"5d76df5eab7f8bb7","login":"ateliercartographie","name":"Atelier de cartographie de Sciences Po"}},"type":"notebook","body":{"titling":"auto","title":"Hello Motif.js","cells":[{"id":0,"value":"# Hello Motif.js\nMotif.js is a pattern generator that can be used in SVG environment or Canvas context\n\n**Main features** \n+ comes with shapes built in\n+ support any angle rotation\n+ size parameter as a percentage of tile area\n+ custom shape as SVG string path or Canvas path method\n\n**Suggestions and review are welcome!**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4802,"value":"viewof shape = Inputs.radio(\n [\"line\", \"plaid\", \"circle\", \"plus\", \"cross\", \"triangle\", \"square\", \"diamond\"],\n {\n label: \"Select a shape\",\n value: \"line\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4807,"value":"viewof angle = Inputs.range([0, 360], { label: \"Angle\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3199,"value":"

SVG

\n \n \n

Canvas

\n ${canvas.canvas}\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2294,"value":"toc(\"h2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4822,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1943,"value":"## Attention points\n**`Scale`** parameter refer to the tile size of the pattern. The ratio between shape area and tile area remains unchanged.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2008,"value":"

\n ${sample({ type: \"circle\", scale: 0.25, size: 30 }, col5, col5)}\n ${sample({ type: \"circle\", scale: 0.5, size: 30 }, col5, col5)}\n ${sample({ type: \"circle\", scale: 1, size: 30 }, col5, col5)}\n ${sample({ type: \"circle\", scale: 2, size: 30 }, col5, col5)}\n ${sample({ type: \"circle\", scale: 4, size: 30 }, col5, col5)}\n

Circle with a variation of scale: ${tex`\\frac{1}{4}`}, ${tex`\\frac{1}{2}`}, 1, 2 and 4

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2034,"value":"**`Size`** parameter refer to the percentage of area cover by the shape inside the tile. When a shape reach a certain size, it can cross tile limit and therefore be clipped. At this moment area perception is no more exact. Except for line and square.\n\nIn order to avoid this, a hacky solution is to 1) switch shape and background color and 2) inverse size. \n _Credit and kudos to Patrice Mitrano for this great idea!_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2374,"value":"viewof patchSize = Inputs.toggle({\n label: \"Patch size*\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"_* To truly respect ratio between shape and tile area_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2301,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2365,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2037,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2155,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2084,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2023,"value":"$38","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2088,"value":"$39","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2143,"value":"$3a","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":959,"value":"## How to use\n```js\nimport {motif} from \"@ateliercartographie/motif\"\n\n// Create your pattern\nconst pattern = motif({type: \"circle\", scale: 2, size: 30})\n```\n**In SVG environment**\n+ First insert tag with your pattern inside your SVG\n+ and apply your pattern by using it's url\n```html\n\n```\n\n**In Canvas context**\n```js\n// Pass the current canvas context\npattern.context(ctx)\n\n// Add your pattern to a fill style\nctx.fillStyle = pattern\n\n// Draw what you need\nctx.moveTo(...)\nctx.lineTo(...)\n\n// Apply your pattern, no need to do a ctx.fill()\npattern.apply() \n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":963,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4901,"value":"### Minimal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4903,"value":"// create your pattern\npattern = motif()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4919,"value":"**in SVG**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4906,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4910,"value":"**in Canvas**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4912,"value":"{\n const ctx = DOM.context2d(200, 100);\n\n ctx.rect(0, 0, 200, 100);\n ctx.fillStyle = pattern.context(ctx);\n pattern.apply();\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4106,"value":"### Map example (Canvas)\n_See [here](https://observablehq.com/@ateliercartographie/motif-bertin-js) for alternative map examples with bertin.js (in SVG)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1229,"value":"viewof palette = Inputs.select(\n new Map([\n [\"categories\", palette1],\n [\"orders with lines\", palette2],\n [\"orders with circle\", palette3]\n ]),\n {\n label: \"Select a palette\",\n value: palette2\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"map = {\n const size = [width, width];\n const ctx = DOM.context2d(...size);\n\n const proj = d3.geoIdentity().reflectY(true).fitSize(size, france[1]);\n const path = d3.geoPath(proj).context(ctx);\n\n const patterns = palette.map((d) => d.context(ctx));\n\n // Départements\n france[0].features.forEach((feature) => {\n const pattern = patterns[Math.floor(Math.random() * patterns.length)];\n ctx.beginPath();\n ctx.fillStyle = pattern;\n path(feature);\n pattern.apply();\n });\n\n // buffer lines\n ctx.beginPath();\n ctx.strokeStyle = \"white\";\n ctx.lineJoin = \"round\";\n ctx.lineWidth = 4;\n path(france[1]);\n ctx.stroke();\n\n // lines\n ctx.beginPath();\n ctx.strokeStyle = \"black\";\n ctx.lineJoin = \"round\";\n ctx.lineWidth = 1;\n path(france[1]);\n ctx.stroke();\n\n // Basemap credit\n ctx.fillStyle = \"black\";\n ctx.textBaseline = \"bottom\";\n ctx.font = \"14px monospace\";\n ctx.fillText(\n \"Basemap: 'France communes 2022 COG' by ICEM7 (Éric Mauvière)\",\n 0,\n size[1] - 7\n );\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4969,"value":"### Map example (Plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4932,"value":"Plot.plot({\n width,\n projection: { type: \"reflect-y\", domain: france[1] },\n color: { type: \"quantile\", range: palette2.map((d) => d.url), legend: true },\n marks: [\n // Combine all palette patterns in one defs tag\n () => htl.svg`${palette2.map((d) => d.pattern)}`,\n Plot.geo(france[0], { fill: \"dep\" }), // Départements\n Plot.geo(france[1], { stroke: \"white\", strokeWidth: 4 }), // Buffer lines\n Plot.geo(france[1]) // Lines\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"palette1 = [\n motif({\n type: \"line\",\n scale: 0.5,\n angle: 90,\n size: 20,\n fill: \"goldenrod\"\n }),\n motif({\n type: \"plaid\",\n scale: 0.5,\n angle: 45,\n size: 10,\n fill: \"sandybrown\"\n }),\n motif({\n type: \"circle\",\n scale: 1,\n size: 20,\n fill: \"white\",\n background: \"gold\"\n }),\n motif({\n type: \"plus\",\n scale: 1,\n size: 10,\n angle: 0,\n fill: \"firebrick\"\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"palette2 = {\n const params = { type: \"line\", scale: 0.5, angle: 45, fill: \"goldenrod\" };\n return [\n motif({ ...params, size: 10 }),\n motif({ ...params, size: 30 }),\n motif({ ...params, size: 50 }),\n motif({ ...params, size: 70 })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"palette3 = {\n const params = { type: \"circle\", scale: 0.7 };\n return [\n motif({ ...params, size: 3 }),\n motif({ ...params, size: 15 }),\n motif({ ...params, size: 35 }),\n motif({ ...params, size: 55 })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":974,"value":"// 'France communes 2022 COG' by ICEM7 (Éric Mauvière)\n// https://www.data.gouv.fr/fr/datasets/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/\nfrance = topophelper\n .from(\n await d3.json(\n \"https://static.data.gouv.fr/resources/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/20220423-134434/a-com2022-topo-2154.json\"\n )\n )\n .lines({ layer: 2, name: \"lines\" })\n .toGeojson({ layer: [2, 3] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"topophelper = import(\"https://cdn.jsdelivr.net/npm/topohelper@0.4.3/+esm\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4108,"value":"### Plot example (SVG)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4112,"value":"plotPattern = motif({ scale: 0.5, size: 10, angle: 45 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2917,"value":"// cf https://github.com/observablehq/plot/pull/700/commits/5c90c1be8c0bd7578d68f7fe072cd58c349f05f6\nPlot.plot({\n marks: [\n () => plotPattern.defs,\n Plot.areaY(aapl, {\n x: \"Date\",\n y: \"Close\",\n fill: plotPattern.url,\n stroke: \"black\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3671,"value":"### Custom shape examples\n+ need to be generated in a function\n+ 2 or 3 arguments possible:\n + `tile` => tile size\n + `shapeArea` => shape area\n + `context` => to use Canvas path method, on call will be replace by `d3.path` to retrieve SVG string path.\n+ return SVG string path or Canvas path method\n+ origin (0,0) at the center of the tile, y point down","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3745,"value":"**Square shape** \n_The same that is implement in Motif_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3747,"value":"function customSquareSVG(tile, shapeArea) {\n // Calcul square side length from square area\n const side = Math.sqrt(shapeArea);\n\n // Generic SVG string path of a square\n // M 0 0\n // h side v side h -side\n // Z\n\n // But we need to center our square in the tile. And origin (0,0) is at the center of tile\n return `M ${-side / 2} ${-side / 2}\n h ${side} v ${side} h ${-side}\n Z`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3750,"value":"function customSquareCanvas(tile, shapeArea, context) {\n // Calcul square side length from square area\n const side = Math.sqrt(shapeArea);\n\n // Generic Canvas path method of a square\n // context.rect(x, y, width, height);\n context.rect(-side / 2, -side / 2, side, side);\n\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4873,"value":"viewof customSquare = Inputs.radio([\"SVG\", \"Canvas\"], {\n label: \"Select custom square function\",\n value: \"SVG\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4876,"value":"{\n const pattern = motif({\n type: \"custom\",\n custom: {\n shape: customSquare === \"SVG\" ? customSquareSVG : customSquareCanvas\n }\n });\n\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3739,"value":"**Y shape symbol** \n_Re-use from d3-shape_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3707,"value":"function customShapeSVG(tile, shapeArea) {\n // Borrow from d3-shape, https://github.com/d3/d3-shape/blob/main/src/symbol/wye.js\n // and adapt to SVG string path\n const c = -0.5;\n const s = Math.sqrt(3) / 2;\n const k = 1 / Math.sqrt(12);\n const a = (k / 2 + 1) * 3;\n const r = Math.sqrt(shapeArea / a);\n const x0 = r / 2,\n y0 = r * k;\n const x1 = x0,\n y1 = r * k + r;\n const x2 = -x1,\n y2 = y1;\n\n return `M ${x0} ${y0}\n L ${x1} ${y1}\n L ${x2} ${y2} \n L ${c * x0 - s * y0} ${s * x0 + c * y0}\n L ${c * x1 - s * y1} ${s * x1 + c * y1}\n L ${c * x2 - s * y2} ${s * x2 + c * y2}\n L ${c * x0 + s * y0} ${c * y0 - s * x0}\n L ${c * x1 + s * y1} ${c * y1 - s * x1}\n L ${c * x2 + s * y2} ${c * y2 - s * x2}\n Z`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3686,"value":"function customShapeCanvas(tile, shapeArea, context) {\n // On call context is replace to d3.path()\n\n // Borrow from d3-shape, https://github.com/d3/d3-shape/blob/main/src/symbol/wye.js\n const c = -0.5;\n const s = Math.sqrt(3) / 2;\n const k = 1 / Math.sqrt(12);\n const a = (k / 2 + 1) * 3;\n const r = Math.sqrt(shapeArea / a);\n const x0 = r / 2,\n y0 = r * k;\n const x1 = x0,\n y1 = r * k + r;\n const x2 = -x1,\n y2 = y1;\n context.moveTo(x0, y0);\n context.lineTo(x1, y1);\n context.lineTo(x2, y2);\n context.lineTo(c * x0 - s * y0, s * x0 + c * y0);\n context.lineTo(c * x1 - s * y1, s * x1 + c * y1);\n context.lineTo(c * x2 - s * y2, s * x2 + c * y2);\n context.lineTo(c * x0 + s * y0, c * y0 - s * x0);\n context.lineTo(c * x1 + s * y1, c * y1 - s * x1);\n context.lineTo(c * x2 + s * y2, c * y2 - s * x2);\n context.closePath();\n\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4885,"value":"viewof customShape = Inputs.radio([\"SVG\", \"Canvas\"], {\n label: \"Select custom shape function\",\n value: \"SVG\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4883,"value":"{\n const pattern = motif({\n type: \"custom\",\n custom: {\n shape: customShape === \"SVG\" ? customShapeSVG : customShapeCanvas\n }\n });\n\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"## Motif.js generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":888,"value":"viewof patternSettings = Inputs.form({\n type: Inputs.select(\n [\n \"line\",\n \"plaid\",\n \"circle\",\n \"plus\",\n \"cross\",\n \"triangle\",\n \"square\",\n \"diamond\"\n ],\n {\n label: \"Type\",\n value: \"line\"\n }\n ),\n scale: Inputs.range([0.1, 30], { label: \"Scale\", step: 0.1, value: 1 }),\n size: Inputs.range([0, 100], { label: \"Size\", step: 1, value: 10 }),\n angle: Inputs.range([0, 360], { label: \"Angle\", step: 1, value: 45 }),\n strokeWidth: Inputs.range([0, 20], {\n label: \"Sroke width\",\n step: 1,\n value: 0\n }),\n fill: Inputs.color({ label: \"Fill\", value: \"#00000\" }),\n stroke: Inputs.color({ label: \"Stroke\", value: \"#ffffff\" }),\n background: Inputs.color({ label: \"Background\", value: \"#ffffff\" }),\n patchSize: Inputs.toggle({ label: \"Patch size order\", value: false })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"sample(patternSettings, 360, 360)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"patternSettings","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"## Samples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1465,"value":"sample({\n type: \"line\",\n angle: -45,\n scale: 1.5,\n size: 20,\n fill: \"firebrick\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"sample({\n type: \"plaid\",\n angle: 0,\n scale: 1,\n fill: \"limegreen\",\n size: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1807,"value":"sample({ type: \"circle\", scale: 0.8, size: 30, angle: 45 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1812,"value":"sample({\n type: \"square\",\n scale: 4,\n size: 60,\n angle: -20,\n fill: \"orange\",\n background: \"firebrick\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1815,"value":"sample({\n type: \"square\",\n scale: 2.5,\n size: 5,\n angle: 45,\n fill: \"gold\",\n background: \"mediumblue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1787,"value":"$${sample({ type: \"triangle\", scale: 2, size: 10, angle: -90, fill: \"white\", background: \"black\"}, 80, col4)}\n${sample({ type: \"triangle\", scale: 2, size: 10, angle: 0, fill: \"white\", background: \"black\"}, 80, col4)}\n${sample({ type: \"triangle\", scale: 2, size: 10, angle: 180, fill: \"white\", background: \"black\"}, 80, col4)}\n${sample({ type: \"triangle\", scale: 2, size: 10, angle: 90, fill: \"white\", background: \"black\"}, 80, col4)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":769,"value":"sample({\n type: \"plus\",\n scale: 4,\n size: 20,\n angle: 0,\n fill: \"springgreen\"\n // background: \"lavender\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"sample({ type: \"cross\", scale: 2, size: 6 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"/**\n * Creates a canvas element with a pattern applied to it.\n *\n * @param {Function} pattern_function - pattern function\n * @param {Object} pattern_options - An object with options of the pattern_function.\n * @param {number} [height=80] - The height of the canvas. Default value is 80.\n * @param {number} [w=width] - The width of the canvas. Default value is observable width.\n * @returns {HTMLCanvasElement} A canvas element with the pattern applied to it.\n */\nfunction sample(pattern_options, height = 80, w = width) {\n const ctx = DOM.context2d(w, height);\n\n const ptn = motif(pattern_options);\n\n ctx.imageSmoothingEnabled = false;\n ctx.rect(0, 0, w, height);\n ctx.fillStyle = ptn.context(ctx);\n ptn.apply();\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3755,"value":"### Shapes function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3149,"value":"function line(t, shapeArea) {\n const w = shapeArea / t;\n return `M ${-t / 2} ${-w / 2}\n h ${t} v ${w} h ${-t}\n Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2940,"value":"function plaid(t, shapeArea) {\n const w = t - Math.sqrt(Math.pow(t, 2) - shapeArea);\n return `M ${-t / 2} ${-w / 2}\n h ${t} v ${w} h ${-t}\n Z\n M ${-w / 2} ${-t / 2}\n h ${w} v ${t} h ${-w}\n Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3040,"value":"function circle(t, shapeArea) {\n const r = Math.sqrt(shapeArea / Math.PI);\n return `M ${-r} 0\n A ${r} ${r} 0 1 0 ${r} 0\n A ${r} ${r} 0 1 0 ${-r} 0`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3122,"value":"function plus(t, shapeArea) {\n const B = Math.sqrt((16 * shapeArea) / 7); // big side\n const h_B = B / 2; // half big side\n const h_S = B / 4 / 2; // half small side\n\n return `M ${-h_B} ${-h_S}\n L ${-h_S} ${-h_S}\n L ${-h_S} ${-h_B}\n L ${h_S} ${-h_B}\n L ${h_S} ${-h_S}\n L ${h_B} ${-h_S}\n L ${h_B} ${h_S}\n L ${h_S} ${h_S}\n L ${h_S} ${h_B}\n L ${-h_S} ${h_B}\n L ${-h_S} ${h_S}\n L ${-h_B} ${h_S}\n Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3106,"value":"function triangle(t, shapeArea) {\n // borrow from d3-shape, https://github.com/d3/d3-shape/blob/main/src/symbol/triangle.js\n const sqrt3 = Math.sqrt(3);\n const y = -Math.sqrt(shapeArea / (sqrt3 * 3));\n return `M 0 ${y * 2}\n L ${-sqrt3 * y} ${-y}\n L ${sqrt3 * y} ${-y}\n Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3139,"value":"function square(t, shapeArea) {\n const side = Math.sqrt(shapeArea);\n return `M ${-side / 2} ${-side / 2}\n h ${side} v ${side} h ${-side}\n Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3842,"value":"**Degree to radian helper**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3263,"value":"function degreeToRadian(degree) {\n return (degree * Math.PI) / 180;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3844,"value":"### Main function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2854,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"---\n## Ressources about patterns and symbols\n+ [lib] [Textures.js](https://riccardoscalco.it/textures/) by Riccardo Scalco\n+ [book] [Traditional methods of pattern designing; an introduction to the study of the decorative art](https://archive.org/details/traditionalmetho00chririch/page/128/mode/2up?view=theater) \n by Archibald H Christie\n+ [book] [Patterns chapter](https://thebookofshaders.com/09/) of _The Book of shaders_ by Patricio Gonzalez Vivo and Jen Lowe\n+ [notebook] [Émile Cheysson color palettes](https://observablehq.com/@tomshanley/cheysson-color-palettes) by Tom Shanley\n+ [book] Sémiologie graphique by Jacques Bertin\n+ Pre-atentive symbols\n + https://observablehq.com/d/be0598261eea8fba\n + https://observablehq.com/@fil/scintillating-symbols\n + https://observablehq.com/@heman/preattentive-symbols-176","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4636,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3231,"value":"canvas = {\n const ctx = DOM.context2d(300, 80);\n\n ctx.imageSmoothingEnabled = false;\n ctx.rect(0, 0, 300, 80);\n ctx.fillStyle = patternRenderCompare.context(ctx);\n patternRenderCompare.apply();\n\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3299,"value":"patternRenderCompare = motif({\n type: shape,\n scale: 2,\n size: 10,\n angle\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2095,"value":"colSize = (nb) => width / nb - 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4073,"value":"col4 = colSize(4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2129,"value":"col5 = colSize(5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2131,"value":"col10 = colSize(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2290,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 31:"$30:body"