2b:null 2c:["$","title",null,{"children":"Penrose triangle in zesty CSS | Sander Evers | Observable"}] 31:T4bd,{ const project = m.ortho([],-2,5,-2.5,2.5,-1,1); const view = changingView(cam.pos); const modelToScreen = m.concat([],m.mat23to44([],m.viewport([],0,490,350,0)),project,view); // big cube const bc = svgcube({stroke:'black','stroke-dasharray':4}); // small cubes const sc0 = translate([-1,-1,-1], scale(thickness, svgcube())); const sc1 = translate([1,-1,-1], scale(thickness, svgcube())); const sc2 = translate([1,1,-1], scale(thickness, svgcube())); const sc3 = translate([1,1,1], scale(thickness, svgcube())); const greyface = i => transform(faceTransformation3D(i),svgsquare({fill:'#cccccc99'})); const orangeface = transform(contFaceTransformation3D(pos),svgsquare({fill:'#ffaa0099'})); const faces = phase.choice? g(...range(Math.ceil(pos)).map(greyface), orangeface) : g(); // axis arrows & labels const ax = rotateX(-0.5*Math.PI, translate([1.5,0,-1], scale(0.25, svgarrow('x')))); const ay = rotateZ(0.5*Math.PI, translate([1.5,0,-1], scale(0.25, svgarrow('y')))); const az = transform(shiftL, translate([1.5,0,-1], scale(0.25, svgarrow('z')))); const group = g(faces,bc,sc0,sc1,sc2,sc3,ax,ay,az); return svgtBox(transform(project,view,group),490,350) }32:[] 2f:{"id":"e75b40a088996c79","slug":"penrose-triangle-in-zesty-css","title":"Penrose triangle in zesty CSS","thumbnail":"01a7637dccc87b676ec05339d34c8804554ca168fa2225ed587ff698f6ad3cec","access_level":"public","create_time":"$D2020-05-28T14:54:32.372Z","update_time":"$D2020-12-29T16:09:09.005Z","view_time":null,"first_public_time":"$D2020-07-08T19:43:29.199Z","fork":true,"stars":9,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":2192,"publish_version":2192,"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":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"3704bea90b0005c7","slug":"isometric","title":"isometric","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"type":"notebook","body":{"title":"Penrose triangle in zesty CSS","cells":[{"id":0,"value":"md`# Penrose triangle in zesty CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":925,"value":"withStyle({fontFamily:'sans-serif'})(md`\n__ingredients__\n- thi.ng matrix manipulation library\n- CSS matrix transformations\n- CSS animations\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"md`Today we cook up a childhood favorite of mine, the Penrose triangle. Physically impossible... and right there in front of your eyes. Seeing one for the first time in my life was a mystic experience, and I was fond of copying them well into my teens. This recipe uses contemporary techniques that lend an exciting twist to the classic.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2085,"value":"withStyle({textAlign:'center'})(md`![a Penrose triangle](https://sanderevers.github.io/assets/img/penrose.jpg \"a Penrose triangle\")`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":974,"value":"md`## Preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":977,"value":"md`As the basis for the triangle we'll use a 3D model. Proper equipment is indispensable for working with 3D models, and for this particular job we're going to draw upon the matrix package from the \\`thi.ng\\` library, which we import as \\`m\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"m = require('https://bundle.run/@thi.ng/matrices@0.6.15')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1688,"value":"md`It contains a lot of useful functions for 3D vector/matrix manipulations. Don't be distracted by the first argument \\`[]\\` that appears in most of them. It's for when you want to manipulate matrices in place. We won't use it. You'll also notice that most of the functions end in \\`44\\`; that's because the 3D transformations we use are [represented as ${tex`4 \\times 4`} matrices](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/). The last thing to note about the package is that \\`m.concat([],A,B,C)\\` is how you write the matrix multiplication ${tex`ABC`}. The other function names speak for themselves.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1699,"value":"md`To start off, define some helper transformation matrices. The first one transforms point ${tc('x','y','z')} into ${tc('y','z','x')}:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1276,"value":"// thi.ng enumerates a matrix in column-major order\nshiftL = m.mat33to44([],[0,0,1,1,0,0,0,1,0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1708,"value":"md`And this one rotates a point a given number of degrees around a certain axis (which can go through a different origin). With the axis pointing towards you, the rotation is counterclockwise.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1281,"value":"function rotateDegrees(deg,dir,origin) {\n const or = origin || [0,0,0];\n const trans = m.translation44([],or);\n return m.concat([],trans,m.rotationAroundAxis44([],dir,Math.PI * deg/180),m.invert44([],trans));\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1624,"value":"md`The last one performs transformation ${tex`A`} in a different coordinate system. The transformation to this coordinate system consists of the ${tex`X`} transformation applied ${tex`e`} times. So, the entire transformation reads ${tex`X^{-e} A X^e`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1611,"value":"function prepost(a,x,e) {\n if (e==0)\n return a;\n if (e==1)\n return m.concat([],m.invert44([],x),a,x);\n const xxx = m.concat([],...range(e).map(()=>x));\n return m.concat([],m.invert44([],xxx),a,xxx);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1553,"value":"md`## Triangle structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1547,"value":"md`Although it can't actually exist, a 3D Penrose triangle consists of three bars with four faces each. We're making it semi-transparent, so we'll need to draw all twelve faces. For each of those faces we're creating a transformation matrix for use in CSS.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1447,"value":"md`Create the faces in the order an ant could walk over them. (After this walk it will have toured the triangle four times and be back where it started.) Derive each face from the previous one using a rotation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2005,"value":"md`_To demonstrate these rotations, I've laid out some auxiliary construction lines. They form a cube, centered at the origin of space, with sides of length 2 and corner points at ${tex`(\\pm 1, \\pm 1,\\pm 1)`}. At four of these corner points, I place a little cube (${tex`6\\times`} smaller), like this:_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1149,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1461,"value":"md`_The first 4 faces of the triangle are attached to the edges of these little cubes._`\n//To do this, it is much easier to think in terms of transformations than in terms of coordinates.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1363,"value":"viewof phase = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1509,"value":"md`You will observe the faces spiralling out of the cube, instead of forming a triangle. But watch what happens when you change your viewpoint:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"viewof cam = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1569,"value":"md`We now look at the origin along the ${tex`x=y=z`} line, using an isometric projection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1971,"value":"md`_Here's how to do this in code._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1974,"value":"md`The transformation ${tex`S`}, for scaling and translating the square:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1977,"value":"squareToFace0 = m.concat([],m.translation44([],[thickness,-1,-1-thickness]),m.scale44([],[1,thickness,1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1961,"value":"md`The rotations ${tex`R_i`}:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1576,"value":"function rotation(faceNr) {\n if (faceNr==0)\n return m.IDENT44;\n const mv = [-thickness,0,thickness,0][faceNr%4];\n const origin = [mv,-mv,0];\n const shiftAndTranslate = m.concat([],m.translation44([],[0,0,-2]),shiftL);\n return prepost(rotateDegrees(90,zdir,origin),shiftAndTranslate,faceNr-1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1964,"value":"md`Combine these into ${tex`R_i R_{i-1} \\ldots R_0 S`}, the transformation from square to 3D model for face number ${tex`i`}:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1586,"value":"function faceTransformation3D(i) {\n return m.concat([],...range(i+1).map(rotation).reverse(),squareToFace0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2015,"value":"md`Each face starts out as a ${divWidth}px by ${divHeight}px \\`

\\`. Before applying the 3D transformation, transform this into the ${tex`2 \\times 2`} square. And afterwards, project it back onto proper screen coordinates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1943,"value":"function faceTransformation2D(i) {\n const divToSquare = m.scale44([],[2/divWidth,2/divHeight,1]);\n const view = m.lookAt([],[1,1,1],[0,0,0],[0,1,-1]) // look at the origin along the x=y=z line\n const project = m.ortho([],0,3,-1,2,-1,1);\n const toScreen = m.mat23to44([],m.viewport([],0,300,300,0));\n return m.concat([],toScreen,project,view,faceTransformation3D(i),divToSquare);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2030,"value":"md`## Add HTML and CSS to taste`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2119,"value":"md`With these transformations in hand, it's now only a question of producing twelve divs of the right size, and having fun with CSS (but be sure to use \\`transform-origin: center\\`). The result looks best when you clip off a corner of some faces.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1850,"value":"function htmlFace(nr) {\n const innerDiv = [\n html`

you don't see with your eye

`,\n html`

you perceive with your mind

`\n ][nr%2];\n const innerStyle = {\n fontFamily: 'Bebas Neue',\n whiteSpace: 'nowrap',\n animation: '12s infinite linear scroll',\n animationDelay: `${12-nr}s`,\n transform: 'translate(100%,0%)'\n }\n \n const outerDiv = html`

${withStyle(innerStyle)(innerDiv)}

`;\n const clippct = (1-thickness)*100;\n const outerStyle = {\n position: 'absolute',\n height: `${divHeight}px`,\n width: `${divWidth}px`,\n overflow: 'hidden',\n clipPath: (nr%4==3) ? `polygon(0% 0%, 0% 100%, 100% 100%, ${clippct}% 0%)` : undefined,\n backgroundColor: (nr%4>1) ? ['#ff33cc99','#ffff6699','#33993399'][(Math.floor(nr/2))%3] : '#99999933',\n color: (nr%4>1) ?'#000000':'#00000055',\n transformOrigin: 'center',\n transform: `matrix3d(${faceTransformation2D(nr).join(',')})`\n }\n return withStyle(outerStyle)(outerDiv);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"// import font and define \"scroll\" animation\nhtml``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1833,"value":"md`_Et voilà._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"withStyle({height:'300px'})(html`

${range(12).map(htmlFace)}

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2051,"value":"md`## _Utilities_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"range = (x,y) => {\n const start= (y===undefined)?0:x;\n const end= Math.max((y===undefined)?x:y,start);\n return [...new Array(end-start).keys()].map(i=>i+start)\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":940,"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"},{"id":1366,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"v = require('https://bundle.run/@thi.ng/vectors@4.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1266,"value":"md`_The trick for importing the \\`thi.ng\\` packages I got from [module-require-debugger](https://observablehq.com/@observablehq/module-require-debugger)._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1525,"value":"md`## _Auxiliary lines & animation_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2135,"value":"import {svgt, svgtBox, transform, g, scale, translate, rotateX, rotateY, rotateZ} from '@sanderevers/svg-transformations'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1378,"value":"mutable pos = -1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1377,"value":"// gradually change pos to phase.choice (the radio button) \n{\n const step = 0.03;\n if (Math.abs(pos - phase.choice) phase.choice) {\n mutable pos = pos-step;\n } else if (pos < phase.choice) {\n mutable pos = pos+step;\n }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1915,"value":"// like rotation, but continuous\nfunction contRotation(pos) {\n const nr = Math.ceil(pos);\n if (nr==0)\n return m.IDENT44;\n // rotation(3.8) means rotation(4) executed for 80%\n const frac = (pos-Math.floor(pos)) || 1;\n const mv = [-thickness,0,thickness,0][nr%4];\n const origin = [mv,-mv,0];\n const shiftAndTranslate = m.concat([],m.translation44([],[0,0,-2]),shiftL);\n return prepost(rotateDegrees(90*frac,zdir,origin),shiftAndTranslate,nr-1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1918,"value":"// like faceTransformation3D, but continuous\nfunction contFaceTransformation3D(pos) {\n // contFaceTransformation3D(-0.2) is the transformation to face(0) executed for 80% \n const nr = Math.ceil(pos);\n const frac = Math.min(pos+1,1);\n let squareToFace0 = m.concat([],m.translation44([],[frac*thickness,-frac,-frac-frac*thickness]),m.scale44([],[1,Math.pow(thickness,frac),1]));\n let cur = squareToFace0;\n for (let i=0;i<=nr;i++) {\n // contFaceTransformation3D(2.8) is rotation(1),rotation(2) then rotation(3) for 80%\n cur = m.concat([],contRotation(i {\n const startDir = [0.3,0.6,1];\n const endDir = [1,1,1];\n const axis = v.cross3([],startDir,endDir);\n const endAngle = v.angleBetween3(startDir,endDir);\n const camPos = m.mulV([],m.rotationAroundAxis33([],axis,t*endAngle,true),startDir)\n return m.lookAt([],camPos,[0,0,0],[0,1,-1])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1308,"value":"svgtext = (txt, attrs) => {\n const hattrs = attrs || {};\n return svgt`${txt}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1230,"value":"svgline = (points,attrs) => {\n const [[x1,y1],[x2,y2]] = points;\n const hattrs = attrs || {stroke:'black'};\n return svgt``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1212,"value":"svgsquare = (attrs) => {\n const hattrs = attrs || {}; \n const tf = mat => `matrix(${mat[0]} ${mat[1]} ${mat[4]} ${mat[5]} ${mat[12]} ${mat[13]})`;\n return svgt``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"svgcube = (attrs) => {\n const hattrs = attrs || {stroke:'black'};\n const face = svgt`\n `;\n return g(...cube.map(m => transform(m, face)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":992,"value":"cube = {\n const rot = m.mat33to44([],[0,1,0,0,0,-1,1,0,0]);\n let mat = m.translation44([],[0,0,1]);\n return range(6).map(()=>{mat = m.concat([],rot,mat); return mat});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1226,"value":"svgarrow = (txt) => {\n const lines = [\n [[-1,0],[1,0]],\n [[1,0],[0.5,0.5]],\n [[1,0],[0.5,-0.5]]\n ];\n const label = translate([0,-1,0],svgtext(txt));\n return g(...lines.map(line => svgline(line)),label);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1745,"value":"md`## _Misc_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"thickness=1/6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1951,"value":"divHeight=22","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1953,"value":"divWidth=80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1472,"value":"tc = (x,y,z) => tex`(${x},${y},${z})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1475,"value":"tsc = \"\\\\frac{1}{6}\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1751,"value":"xdir = [1,0,0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1286,"value":"zdir = [0,0,1];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"