2a:null 2b:["$","title",null,{"children":"SVG transformations | Sander Evers | Observable"}] 30:T58b,// Process all template parameters. // Collect input vectors from numbers, arrays and arrays-of-arrays. // Also return, for each parameter, a function that determines the output value // that is substituted into the template string. (This function is applied to // the transformed input vectors and the transformation matrix.) function process_params(args) { let invec = false; const vecs = []; const getargs = []; for (const arg of args) { if (typeof(arg)==='number') { if (!invec) vecs.push([]); invec=true; const curvec = vecs.length-1; const curel = vecs[curvec].length; vecs[curvec].push(arg); getargs.push(tvecs => tvecs[curvec][curel] ?? ''); } else { invec=false; if (typeof(arg)==='object' && Array.isArray(arg)) { const arrays = Array.isArray(arg[0])?arg:[arg]; const firstvec = vecs.length; const nvecs = arrays.length; for (const arr of arrays) { vecs.push(arr); } getargs.push(tvecs => tvecs.slice(firstvec,firstvec+nvecs).map(vec=>vec.join(',')).join(' ')); } else if (typeof(arg)==='object') { getargs.push(tvecs => Object.entries(arg).map(([k,v]) => `${k}="${v}"`).join(' ')); } else if (typeof(arg)==='function') { getargs.push((tvecs,mat) => arg(mat)); } else { getargs.push(tvecs => arg); } } } return {vecs,getargs}; }31:[] 2e:{"id":"d1344ad07f834f03","slug":"svg-transformations","title":"SVG transformations","thumbnail":"45a82dea4cfd91d83ca9bc98ab9e0915afbd5079543421dfbf6786a36be9de94","access_level":"public","create_time":"$D2020-10-07T09:44:03.992Z","update_time":"$D2022-10-19T11:15:22.342Z","view_time":null,"first_public_time":"$D2020-10-14T13:01:34.415Z","has_unpublished_edits":null,"fork":false,"stars":51,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":976,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}],"members":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null,"role":"editor"}],"comments":[{"id":"1f559422db35e668","reply_to_id":null,"content":"All this code is so damn cool","create_time":"$D2020-10-17T09:44:31.891Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"448dbf923c3ebf2f","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":null}},{"id":"1d9e26a95d9bf496","reply_to_id":"1f559422db35e668","content":"Thank you!","create_time":"$D2020-10-19T15:51:30.612Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}},{"id":"f8676c80224fd900","reply_to_id":"1f559422db35e668","content":"wow","create_time":"$D2020-10-26T05:23:32.461Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c70f9b20103e4b8c","login":"nico1988","name":"nico","avatar_url":"https://avatars-next.observableusercontent.com/0cbf12be952e427ef02d1e322c775fd0d89295e58922eaf6eee06f46279746ff","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"82ad1656d5e86b0c","slug":"lib","title":"lib","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"type":"notebook","body":{"titling":"auto","title":"SVG transformations","cells":[{"id":0,"value":"md`# SVG transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"{\n const points=[];\n for (let t=-200; t<200; t++)\n points.push([Math.cos(t/5),2/(1+Math.exp(t/80))-1,Math.sin(t/5)]);\n const attrs={\n stroke:'black',\n fill:'none',\n 'stroke-dasharray':'8 3',\n };\n const obj=svgt``;\n \n const rot1=m.rotationAroundAxis44([],[1,2,3],now/1600,true);\n const rot2=m.rotationAroundAxis44([],[4,5,6],2*Math.sin(now/1800),true);\n const view=m.lookAt([],[2,2,2],[0,0,0],[0,1,-1]);\n const project=m.frustum([],-1,1,-1,1,1.8,10);\n\n return svgtBox(transform(project,view,rot2,rot1,obj),250,250)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`SVG is a powerful format for line drawings, but its coordinate transformations have some shortcomings:\n- 3D transformations are not supported\n- you can't transform a shape's coordinates without also transforming its strokes (and text)\n\nTo overcome these, this notebook introduces a template literal tag ${greensvgt()}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md`## Basic usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`The idea is that you pass all coordinates as \\`\\${parameters}\\` into this literal. These are *not* directly substituted into the resulting SVG, but are subjected to matrix transformations that you apply later. For example:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"example('')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"md`All consecutive *numbers* passed into the literal are interpreted as a 3D input vector. So there are two input vectors here: \\`[10,20,30]\\` and \\`[40,50,60]\\`. They are separated using \\`\\${\"\"}\\`, which has no effect on the output. Both vectors are transformed using permutation matrix [\\`\\shiftL\\`](#shiftL), yielding \\`[20,30,10]\\` and \\`[50,60,40]\\`. *Only the first two elements* of the vectors are passed into the final SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"md`## More parameter types`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`Number arrays are also interpreted as input vectors. The resulting 2D output vectors are inserted as \\`x,y\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"example('')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`Arrays of number arrays result in \\`x,y\\` vectors separated by spaces.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"example('')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"md`A Javascript object is converted into an attribute list and directly inserted. It does not contribute to the input vectors.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"example('')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`Strings are inserted as-is.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"example('Hello ${\"world\"}.')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"md`## Manipulating and drawing ${greensvgt()} objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"md`In addition to the ${greensvgt()} tag, the [API](#api) contains some transformation and drawing functions. A short walkthrough.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"function arrowx(moreAttrs) {\n const attrs = {fill:'none',stroke:'black','stroke-width':2};\n Object.assign(attrs,moreAttrs);\n const points = [[0,0.2],[0.6,0.2],[0.6,0.4],[1,0],[0.6,-0.4],[0.6,-0.2],[0,-0.2]];\n return svgt``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`☝️ Let's start with an example function returning an ${greensvgt()} arrow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"svgtBox(arrowx(),200,200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"md`☝️ Draws the arrow on the screen, mapping the unit square to a 200px x 200px viewport. Top left is (-1,1), bottom right is (1,-1). Alternatively, use [\\`svgtScreenBox\\`](#svgtScreenBox) to draw in screen coordinates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"{ const smaller = scale(0.7,arrowx());\n return svgtBox(g(arrowx({'stroke-width':'1'}),smaller),200,200); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"md`☝️ Scales it by 0.7 in all directions. You can also use \\`[0.7,0.8,0.9]\\` for per-axis scaling. [\\`g(obj1,obj2,...)\\`](#g) groups objects together.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"{ const moved = translate([-0.5,-0.3,0.4],arrowx());\n return svgtBox(g(arrowx({'stroke-width':'1'}),moved),200,200); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"md`☝️ Performs a translation. The 0.4 move in z-direction (straight towards the camera) is currently not visible, but would be after a suitable 3D transformation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"{ const arrowy = rotateZ(0.5*Math.PI,arrowx());\n return svgtBox(g(arrowx({'stroke-width':'1'}),arrowy),200,200); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"md`☝️ Rotates it around the z-axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"{ const arrowz = rotateY(-0.5*Math.PI,arrowx());\n const view = m.lookAt([],[1,1,2],[0,0,0],[0,1,0]);\n return svgtBox(transform(view,g(arrowx({'stroke-width':'1'}),arrowz)),200,200); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md`☝️ Uses a custom 4x4 transformation matrix. In this case, it's \\`lookAt\\` from [thi.ng/matrices](https://docs.thi.ng/umbrella/matrices/). An arbitrary matrix can be provided as 16-element array, column-major order. You can string transformations together with [\\`transform(matA,matB,...,obj)\\`](#transform).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"api = md`# API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function svgt(strings,...args) {\n const {vecs,getargs} = process_params(args);\n return mat => {\n const fullvecs = vecs.map(v => Object.assign([0,0,0,1],v));\n const tvecs = fullvecs.map(transform_vector(mat));\n const newargs = getargs.map(f => f(tvecs,mat));\n return [svg(strings,...newargs)];\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"function transform(...args) {\n const obj = args.pop();\n if (args.length==0) return obj;\n return mat => obj(m.concat([],mat,...args));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"scale = (xyz,obj) => transform(m.scale44([],xyz),obj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"translate = (xyz,obj) => transform(m.translation44([],xyz),obj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"rotateX = (rad,obj) => transform(m.rotationAroundAxis44([],[1,0,0],rad),obj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"rotateY = (rad,obj) => transform(m.rotationAroundAxis44([],[0,1,0],rad),obj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"rotateZ = (rad,obj) => transform(m.rotationAroundAxis44([],[0,0,1],rad),obj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"function g(...objs) {\n return mat => objs.flatMap(obj => obj(mat))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"identity = m.IDENT44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"function svgtBox(obj,width,height) {\n const toScreen = m.mat23to44([],m.viewport([],0,width,height,0));\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"svgtScreenBox = (obj,width,height) => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"md`## API (unstable)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"cull = obj => mat => m.mulV([],mat,[0,0,0,1])[3]>=0 ? obj(mat) : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"md`## Helpers & imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"transform_vector = mat => v => {\n const tv = m.mulV([],mat,v);\n if (tv[3]===0)\n return [tv[0],tv[1]];\n return [tv[0]/tv[3],tv[1]/tv[3]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"m = require('https://bundle.run/@thi.ng/matrices@0.6.34')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`## Documentation helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"// thi.ng enumerates a matrix in column-major order\nshiftL = m.mat33to44([],[0,0,1,1,0,0,0,1,0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"function svgtext(strings,...args) {\n const {vecs,getargs} = process_params(args);\n return mat => {\n const fullvecs = vecs.map(v => Object.assign([0,0,0,1],v));\n const tvecs = fullvecs.map(transform_vector(mat));\n const newargs = getargs.map(f => f(tvecs,mat));\n let result = strings[0];\n for (let [i,val] of newargs.entries()) {\n result += val;\n result += strings[i+1];\n }\n return result;\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"example = (str) => {\n const inputText = md`\\`\\`svgt\\`${str}\\`(shiftL)\\`\\``;\n window.svgtext = svgtext;\n window.shiftL = shiftL;\n const obj = new Function(`return svgtext\\`${str}\\`(shiftL);`)();\n const outputText = md`→ \\`\\`svg\\`${obj}\\` \\`\\``;\n return html`${withStyle({color:'green'})(inputText)}\n ${withStyle({color:'navy'})(outputText)}`\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"greensvgt = () => withStyle({color:'green'})(html`svgt`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"withStyle = (sty) => (target) => {\n for (let p in sty)\n target.style[p] = sty[p];\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"