2b:null 2c:["$","title",null,{"children":"The Art of Woven Fabrics | Michaël Guitton | Observable"}] 31:T647,canvas = { const surface = "#234"; yield svg` `; }32:T434,{ const layers = { lower: 0, upper: 1 }; const components = { weft: [weftData, weftPick], warp: [warpData, warpEnd] }; fabric.hatch.selectAll("*").remove(); RENDER: for (const container of Object.keys(layers)) { const callback = (d) => d[0].z === layers[container]; for (const [yarn, component] of Object.entries(components)) { const [data, commands] = component; fabric[container] .selectAll(`.${container}.${yarn}`) .data(data.filter(callback)) .join("path") .attr("class", (d) => `${container} ${yarn} ${d[0].treadle || ""}`.trim() ) .attr("d", (d) => commands(d)); } } const { x, y, width: w, height: h } = fabric.frame.node().getBBox(); fabric.hatch .append("rect") .attr("class", "hatch") .attr("x", x) .attr("y", y) .attr("width", w) .attr("height", h) .attr("opacity", Math.min(16 / picks, 1)); fabric.frame.attr( "transform", `translate(${(width - w) / 2 - x}, ${(height - h) / 2 - y})` ); yield [x, y, w, h]; }33:T644,weftData = d3 .range(picks) .map((weft) => d3.range(ends - 1).map((warp) => { const base = { x: warp, y: weft }; const [current, next] = [ 1 - patternAt(warp, weft), 1 - patternAt(warp + 1, weft) ]; const transitionZ = +!!(current && next); const treadle = direction(current, next); return [ [ { ...base, offset: offset.start(warp), size: current, z: current }, { ...base, offset: offset.first(warp), size: current, z: current } ], [ // Use 4 points to define the curve of this transitional shape { ...base, offset: offset.first(warp), size: current, z: transitionZ, treadle }, { ...base, offset: offset.first(warp) + 0.1, size: current, z: transitionZ, treadle }, { ...base, offset: offset.second(warp) - 0.1, size: next, z: transitionZ }, { ...base, offset: offset.second(warp), size: next, z: transitionZ } ], [ { ...base, offset: offset.second(warp), size: next, z: next }, { ...base, offset: offset.end(warp, ends), size: next, z: next } ] ]; }) ) .flat(2)34:T603,warpData = d3 .range(ends) .map((warp) => d3.range(picks - 1).map((weft) => { const base = { x: warp, y: weft }; const [current, next] = [ patternAt(warp, weft), patternAt(warp, weft + 1) ]; const transitionZ = +!!(current && next); const treadle = direction(current, next); return [ [ { ...base, offset: offset.start(weft), size: current, z: current }, { ...base, offset: offset.first(weft), size: current, z: current } ], [ // Use 4 points to define the curve of this transitional shape { ...base, offset: offset.first(weft), size: current, z: transitionZ, treadle }, { ...base, offset: offset.first(weft) + 0.1, size: current, z: transitionZ, treadle }, { ...base, offset: offset.second(weft) - 0.1, size: next, z: transitionZ }, { ...base, offset: offset.second(weft), size: next, z: transitionZ } ], [ { ...base, offset: offset.second(weft), size: next, z: next }, { ...base, offset: offset.end(weft, picks), size: next, z: next } ] ]; }) ) .flat(2)35:T5a0,{ const [is, checkbox] = Array.from(Inputs.checkbox([]).classList); yield md` `; }36:T48e,form = ({ draft = [0, 1, 2, 5, 6, 7, 8, 10, 11, 12, 13, 15], warpColor = "#7da9e3", weftColor = "#f7f7f7" } = {}) => Inputs.form({ draft: Object.assign( Inputs.checkbox( Array.from({ length: slots.length ** 2 }, (_, i) => i), { label: "Pattern", keyof: (d) => "", value: draft } ), { id: +new Date() } ), warpColor: Inputs.text({ label: "Warp color", value: warpColor, disabled: true }), weftColor: Inputs.text({ label: "Weft color", value: weftColor, disabled: true }), hue: Inputs.range([0, 360], { label: "Adjust hue", step: 5, value: 60 }), swap: Inputs.toggle({ label: "Swap yarn colors", value: false }), size: Inputs.range( [ Math.max(slots.length, 2), Math.max(slots.length, 2) * (Math.min(slots.length, 4) + 3) ], { label: "Fabric size", step: slots.length } ), gap: Inputs.range([0.3, 0.6], { label: "Gap between yarns", step: 0.05, value: 0.45 }), toggle: Inputs.toggle({ label: "Weft-faced", value: false }) })37:[] 2f:{"id":"0cdd76954522df48","slug":"the-art-of-woven-fabrics","title":"The Art of Woven Fabrics","thumbnail":"2b4d650a884a024ab3536f8335cfcdd980c20a2008123a50de1b627489f0d1e3","access_level":"public","create_time":"$D2024-06-12T10:12:41.313Z","update_time":"$D2025-04-09T13:00:01.003Z","view_time":null,"first_public_time":"$D2024-06-12T10:13:10.104Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4c1622bb5c37477f","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/10e2fe999ac95c8686156fd07e96a686520149a4eef18a95f97795b7a7be1e29","tier":"starter_2024"},"version":53,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"4c1622bb5c37477f","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/10e2fe999ac95c8686156fd07e96a686520149a4eef18a95f97795b7a7be1e29","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"The Art of Woven Fabrics","cells":[{"id":50,"value":"Object.assign(md`# The Art of Woven Fabrics`, {\n style: \"text-wrap: balance;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"viewof widget = form()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Inputs.button(\"Reset\", {\n value: null,\n reduce: () =>\n ((input) => (\n (input.value = form().value),\n input.dispatchEvent(new Event(\"input\", { bubbles: true }))\n ))(viewof widget)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Woven fabric is any textile formed by weaving. Woven fabrics are often created on a loom, and made of many threads woven on a warp and a weft.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"This notebook would not exist without the preliminary and founding work of [Kevin W. James](/@k9). I seize the opportunity to refactor the various code snippets and improve the whole thing a bit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"Kevin has been working on a 3D visualization of weaving, and because it was complex he realized breaking it down into pieces would be beneficial.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"So here is a 2D visualization of woven fabric, using [D3](https://d3js.org/) `scaleBand()`, `scaleLinear()`, and `area()` methods to generate a stunning SVG diagram.\n\n${html`