2b:null 2c:["$","title",null,{"children":"Lawson's Klein Bottle | Ricky Reusser | Observable"}] 31:T14f9,drawMesh = regl({ vert: ` precision highp float; attribute vec2 uv; uniform mat4 uProjectionView; varying vec3 vPosition, vNormal; varying float vRadius; varying vec2 vUV; ${shader} void main () { vUV = uv; vPosition = f(uv); vRadius = dot(vPosition, vPosition); // Taint bad triangles to prevent them from passing through the // origin as they cross from -Ininity to Infinity if (vRadius > 400.0) vPosition /= 0.0; // Compute the normal via numerical differentiation const float dx = 5e-3; vNormal = normalize(cross( f(uv + vec2(dx, 0)) - vPosition, f(uv + vec2(0, dx)) - vPosition )); gl_Position = uProjectionView * vec4(vPosition, 1); } `, frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; varying vec3 vPosition, vNormal; uniform vec3 eye; uniform bool solidPass; varying vec2 vUV; uniform vec2 uClip, vClip, invertClip; uniform float pixelRatio, opacity, cartoonEdgeWidth, gridOpacity, specular, cartoonEdgeOpacity, gridWidth; float linearstep(float edge0, float edge1, float x) { return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); } vec2 linearstep(vec2 edge0, vec2 edge1, vec2 x) { return clamp((x - edge0) / (edge1 - edge0), vec2(0), vec2(1)); } // This function implements a constant-width grid as a function of // a two-dimensional input. This makes it possible to draw a grid // which does not line up with the triangle edges. // from: https://github.com/rreusser/glsl-solid-wireframe float gridFactor (vec2 parameter, float width, float feather) { float w1 = width - feather * 0.5; vec2 d = fwidth(parameter); vec2 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec2 a2 = linearstep(d * w1, d * (w1 + feather), looped); return min(a2.x, a2.y); } ${gridlineFunction} void main () { vec3 normal = normalize(vNormal); // The dot product of the view direction and surface normal. float vDotN = abs(dot(normal, normalize(vPosition - eye))); // We divide vDotN by its gradient magnitude in screen space to // give a function which goes roughly from 0 to 1 over a single // pixel right at glancing angles. i.e. cartoon edges! float cartoonEdge = linearstep(0.75, 1.25, vDotN / fwidth(vDotN) / (cartoonEdgeWidth * pixelRatio)); // Combine the gridlines and cartoon edges float grid = gridFactor(gridlineFunction(vUV), 0.5 * gridWidth * pixelRatio, 1.0); float combinedGrid = max(cartoonEdgeOpacity * (1.0 - cartoonEdge), gridOpacity * (1.0 - grid)); if (solidPass) { // If the surface pass, we compute some shading float shade = 0.2 + mix(1.2, specular * pow(vDotN, 3.0), 0.5); vec3 colorFromNormal = (0.5 - (gl_FrontFacing ? 1.0 : -1.0) * 0.5 * normal); vec3 baseColor = gl_FrontFacing ? vec3(0.9, 0.2, 0.1) : vec3(0.1, 0.4, 0.8); vec3 color = shade * mix( baseColor, colorFromNormal, 0.4 ); // Apply the gridlines color = mix(color, vec3(0), opacity * combinedGrid); gl_FragColor = vec4(pow(color, vec3(0.454)), 1.0); } else { // If the wireframe pass, we just draw black lines with some alpha gl_FragColor = vec4( // To get the opacity to mix ~correctly, we use reverse-add blending mode // so that white here shows up as black gridlines. This could be simplified // by doing a bit more math to get the mixing right with just additive blending. vec3(1), (1.0 - opacity) * combinedGrid ); if (gl_FragColor.a < 1e-3) discard; } // These discards need to be done at the end, otherwise standard derivatives on mobile // fails to return adjacent fragment values if a neighbor is discarded, resulting in // ugly edges. if (dot(vPosition, vPosition) > 100.0) discard; float clipU = vUV.x < uClip.x || vUV.x > uClip.y ? 1.0 : 0.0; float clipV = vUV.y < vClip.x || vUV.y > vClip.y ? 1.0 : 0.0; clipU = invertClip.x == 1.0 ? 1.0 - clipU : clipU; clipV = invertClip.y == 1.0 ? 1.0 - clipV : clipV; if (clipU == 1.0 || clipV == 1.0) discard; } `, attributes: { uv: regl.prop('buffers.positions') }, uniforms: { invertClip: (ctx, props) => [ ~opts.indexOf('invert u clip') ? 1 : 0, ~opts.indexOf('invert v clip') ? 1 : 0 ], uClip: regl.prop('uClip'), vClip: regl.prop('vClip'), tau: regl.prop('tau'), phi: regl.prop('phi'), pixelRatio: regl.context('pixelRatio'), solidPass: regl.prop('solidPass'), opacity: regl.prop('opacity'), cartoonEdgeWidth: regl.prop('cartoonEdgeWidth'), cartoonEdgeOpacity: regl.prop('cartoonEdgeOpacity'), gridOpacity: regl.prop('gridOpacity'), gridWidth: regl.prop('gridWidth'), specular: regl.prop('specular') }, depth: { enable: regl.prop('solidPass') }, elements: regl.prop('buffers.elements'), primitive: 'triangles', blend: { enable: (ctx, props) => !props.solidPass, func: { srcRGB: 'src alpha', srcAlpha: 1, dstRGB: 1, dstAlpha: 1 }, equation: { rgb: 'reverse subtract', alpha: 'add' } } })32:T10a5,meshSurface = { function assert(condition, message) { if (!condition) throw new Error(message); } var DEFAULT_RESOLUTION = 30; var tmp1 = [0.0, 0.0, 0.0]; var tmp2 = [0.0, 0.0, 0.0]; var tmp3 = [0.0, 0.0, 0.0]; return function(meshData, surfaceFn, opts) { var i, j, u, v, index, nbUFaces, nbVFaces; if (typeof meshData === 'function') { opts = surfaceFn; surfaceFn = meshData; meshData = {}; } opts = opts || {}; var res = opts.resolution || DEFAULT_RESOLUTION; var nbUFaces = Array.isArray(opts.resolution) ? opts.resolution[0] : res; var nbVFaces = Array.isArray(opts.resolution) ? opts.resolution[1] : res; var uDomain = opts.uDomain === undefined ? [0, 1] : opts.uDomain; var vDomain = opts.vDomain === undefined ? [0, 1] : opts.vDomain; meshData = meshData || {}; var nbBoundaryAdjustedUFaces = nbUFaces; var nbBoundaryAdjustedVFaces = nbVFaces; if (!opts.uClosed) nbBoundaryAdjustedUFaces += 1; if (!opts.vClosed) nbBoundaryAdjustedVFaces += 1; var nbPositions = nbBoundaryAdjustedUFaces * nbBoundaryAdjustedVFaces; var positionDataLength = nbPositions * 2; var positions = (meshData.positions = meshData.positions || new Float32Array(positionDataLength)); assert( positions.length, positionDataLength, 'Incorrect number of positions in pre-allocated array' ); var nbFaces = nbUFaces * nbVFaces * 2; var cellDataLength = nbFaces * 3; var cells = (meshData.cells = meshData.cells || new Int16Array(cellDataLength)); assert( cells.length, cellDataLength, 'Incorrect number of cells in pre-allocated array' ); if (opts.attributes) { meshData.attributes = {}; var attrSize = {}; var attributeKeys = Object.keys(opts.attributes); for (i = 0; i < attributeKeys.length; i++) { var key = attributeKeys[i]; var attrFn = opts.attributes[key]; var test = []; attrFn(test, uDomain[0], vDomain[0]); attrSize[key] = test.length; var attrDataLength = nbPositions * attrSize[key]; meshData.attributes[key] = meshData.attributes[key] || new Float32Array(attrDataLength); assert( meshData.attributes[key].length, attrDataLength, 'Incorrect attr size in pre-allocated array for attr ' + key ); } } for (i = 0; i < nbBoundaryAdjustedUFaces; i++) { u = uDomain[0] + ((uDomain[1] - uDomain[0]) * i) / nbUFaces; for (j = 0; j < nbBoundaryAdjustedVFaces; j++) { v = vDomain[0] + ((vDomain[1] - vDomain[0]) * j) / nbVFaces; index = 2 * (i + nbBoundaryAdjustedUFaces * j); if (surfaceFn.length === 2) { const xy = surfaceFn(u, v); positions[index + 0] = xy[0]; positions[index + 1] = xy[1]; } else { surfaceFn(tmp1, u, v); positions[index + 0] = tmp1[0]; positions[index + 1] = tmp1[1]; } if (attributeKeys) { for (var k = 0; k < attributeKeys.length; k++) { var key = attributeKeys[k]; var attrFn = opts.attributes[key]; attrFn(tmp1, u, v); var attrIndex = (i + nbBoundaryAdjustedUFaces * j) * attrSize[key]; var attrData = meshData.attributes[key]; for (var l = 0; l < attrSize[key]; l++) { attrData[attrIndex + l] = tmp1[l]; } } } } } var faceIndex = 0; for (i = 0; i < nbUFaces; i++) { var iPlusOne = i + 1; if (opts.uClosed) iPlusOne = iPlusOne % nbUFaces; for (j = 0; j < nbVFaces; j++) { var jPlusOne = j + 1; if (opts.vClosed) jPlusOne = jPlusOne % nbVFaces; cells[faceIndex++] = i + nbBoundaryAdjustedUFaces * j; cells[faceIndex++] = iPlusOne + nbBoundaryAdjustedUFaces * j; cells[faceIndex++] = iPlusOne + nbBoundaryAdjustedUFaces * jPlusOne; cells[faceIndex++] = i + nbBoundaryAdjustedUFaces * j; cells[faceIndex++] = iPlusOne + nbBoundaryAdjustedUFaces * jPlusOne; cells[faceIndex++] = i + nbBoundaryAdjustedUFaces * jPlusOne; } } return meshData; }; }33:[] 2f:{"id":"275bd54ee71bd399","slug":"lawsons-klein-bottle","title":"Lawson's Klein Bottle","thumbnail":"805cc67a3f75bf412635d8bbc9854f3c0c3dd18ad75e6dbcc7ab556afb0e0534","access_level":"public","create_time":"$D2021-09-16T17:35:59.988Z","update_time":"$D2021-09-30T22:22:20.733Z","view_time":null,"first_public_time":"$D2021-09-20T03:19:16.740Z","fork":true,"stars":19,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":1143,"publish_version":1143,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[{"id":"53252527942229d3","reply_to_id":null,"content":"Awesome! Is there a way to do panning? Tried dragging with the right button, but no go. It would help to center the drawing on the canvas.","create_time":"$D2021-09-20T17:02:38.907Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}},{"id":"524824b71e76317c","reply_to_id":"53252527942229d3","content":"Mouse + shift pans, mouse + opt zooms, and mouse + meta… pivots? It has a little hiccup with observable and can be a bit sticky though. I'm not sure what causes that.","create_time":"$D2021-09-20T17:19:20.781Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}},{"id":"7c4fc11d88e166b4","reply_to_id":"53252527942229d3","content":"Sorry, which is to say that you're absolutely correct and the camera controller needs work. Probably a rewrite. I don't currently have the bandwidth to work on it for the time being though. :(","create_time":"$D2021-09-24T15:54:35.191Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"2ef792b9227476b4","slug":"webgl","title":"WebGL","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"title":"Lawson's Klein Bottle","cells":[{"id":438,"value":"md`# Lawson's Klein Bottle\n\nBased on the equations described in [Lawson’s Minimal Surfaces and the Sudanese Möbius Band](http://wordpress.discretization.de/ddg2019/2019/04/29/tutorial-3-lawsons-minimal-surfaces-and-the-sudanese-mobius-band/). This notebook is modified after receiving some help from Dan Piker in [this notebook](https://observablehq.com/d/2cb69c9cdda31ed9) which is in turn a modification of [my original attempt](https://observablehq.com/d/7f3a7829668597a2), after inspiration by [Dan Piker's tweet](https://twitter.com/KangarooPhysics/status/1437478868156358667), \"I also really want to get better at putting this sort of thing online in an interactive way.\"\n\nWe start with a generalization of a Clifford Torus in 4D space. ${tex`\\tau`} below is a parameter of this surface, while ${tex`\\phi`} applies a four-dimensional rotation before the final stereographic projection into 3D space.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":987,"value":"viewof opts = checkbox(['invert u clip', 'invert v clip'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":940,"value":"viewof uClip = rangeSlider({\n min: -3.15,\n max: 3.15,\n value: [-3.15, 3.15],\n description: 'u range'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":949,"value":"viewof vClip = rangeSlider({\n min: -3.15 * 0.5,\n max: 3.15 * 0.5,\n value: [-3.15 * 0.5, 3.15 * 0.5],\n description: 'v range'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"// To add more parameters, you'll have to pass them to the drawLoop command in meshProps and also pass them through as uniforms in the drawMesh command. Follow tau's example!\nviewof tau = slider({\n value: 2,\n min: 0,\n max: 3,\n step: 0.01,\n description: 'τ'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":763,"value":"viewof phi = slider({\n value: Math.PI * 0.5,\n min: 0,\n max: Math.PI + 1e-4,\n step: Math.PI / 100,\n description: 'φ'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"viewof regl = {\n const pixelRatio = devicePixelRatio;\n const w = width;\n const h = Math.max(500, Math.floor(width * 0.7));\n const canvas = document.createElement('canvas');\n canvas.width = Math.floor(w * pixelRatio);\n canvas.height = Math.floor(h * pixelRatio);\n canvas.style.width = `${w}px`;\n canvas.style.height = `${h}px`;\n const regl = createREGL({\n canvas,\n pixelRatio,\n extensions: ['OES_standard_derivatives'],\n optionalExtensions: ['OES_element_index_uint']\n });\n canvas.value = regl;\n invalidation.then(() => regl.destroy());\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"viewof gridOpacity = slider({\n value: 0.6,\n min: 0,\n max: 1,\n step: 0.01,\n description: 'Grid opacity'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"viewof opacity = slider({\n value: 0.95,\n min: 0,\n max: 1,\n step: 0.01,\n description: 'Surface opacity'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"viewof gridWidth = slider({\n value: 0.5,\n min: 0.5,\n max: 2,\n step: 0.05,\n description: 'Grid width'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"viewof cartoonEdgeWidth = slider({\n min: 0,\n max: 5,\n step: 0.05,\n value: 1.5,\n description: 'Cartoon edge width'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"viewof cartoonEdgeOpacity = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 1,\n description: 'Cartoon edge opacity'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"viewof specular = slider({\n value: 1,\n min: 0,\n max: 1,\n step: 0.01,\n description: 'Specular'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"md`Edit shader and hit shift + enter to udpate. *Changes are not persisted* unless you open the editor cell and copy your changes into the editor cell input code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"mesh = meshSurface((u, v) => [u * 0.99999, v * 0.99999], {\n resolution: [201, 201],\n uDomain: [-Math.PI, Math.PI],\n vDomain: [-Math.PI * 0.5, Math.PI * 0.5]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"viewof shader = Editor({\n language: 'glsl',\n value: `uniform float tau, phi;\n\nvec3 f(vec2 uv) {\n float tx = tau * uv.x;\n vec4 p = vec4(\n cos(uv.y) * vec2(cos(uv.x), sin(uv.x)),\n sin(uv.y) * vec2(cos(tx), sin(tx))\n );\n float m = 0.0;\n float n = 1.0;\n float t = 1.0 * phi;\n vec4 pa = vec4(\n +(p.y) * (cos(m*t)) + (p.z) * (sin(m*t)),\n -(p.y) * (sin(m*t)) + (p.z) * (cos(m*t)),\n +(p.x) * (cos(n*t)) - (p.w) * (sin(n*t)),\n +(p.x) * (sin(n*t)) + (p.w) * (cos(n*t))\n );\n return pa.yxz / (1.0 - pa.w);\n}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"viewof gridlineFunction = Editor({\n language: 'glsl',\n value: `const float pi = 3.14159265358979;\nvec2 gridlineFunction (vec2 uv) {\n return uv * 12.0 / pi;\n}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1009,"value":"md`The shader below receives a surface in (u, v) coordinates and evaluates the above function in the vertex shader.\n\nBe aware that the shader below does a trick or two to prevent bad triangles from rendering. As things diverge to infinity, triangles tend to loop from +infinity to -infinity, producing a single giant triangle which obscures the whole screen. The vertex shader insert a NaN into vertices too far away from the origin to prevent those triangles from displaying, and the fragment shader applies a radius threshold to make the boundary a clean circle. Other than that, the surface shader is a bit ad hoc, but looks pretty at least.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"drawLoop = {\n camera.taint();\n const meshProps = {\n buffers,\n tau,\n phi,\n opacity,\n cartoonEdgeWidth,\n cartoonEdgeOpacity,\n gridWidth,\n gridOpacity,\n specular,\n uClip,\n vClip,\n opts\n };\n const frame = regl.frame(() => {\n camera(({ dirty }) => {\n if (!dirty) return;\n regl.clear({ color: [1, 1, 1, 1] });\n setUniforms(() => {\n drawMesh([\n { ...meshProps, solidPass: true },\n { ...meshProps, solidPass: false }\n ]);\n });\n });\n });\n invalidation.then(() => frame.cancel());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"setUniforms = regl({\n uniforms: {\n projection: regl.context('projection'),\n view: regl.context('view'),\n eye: regl.context('eye'),\n pixelRatio: regl.context('pixelRatio'),\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"buffers = {\n const positions = regl.buffer(mesh.positions);\n const elements = regl.elements(mesh.cells);\n invalidation.then(() => {\n positions.destroy();\n elements.destroy();\n });\n return { positions, elements };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"camera = {\n const camera = createReglCamera(regl, { distance: 8, phi: 0.2, theta: 3.5 });\n createInteractions(camera);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"import { createReglCamera, createInteractions } from '@rreusser/regl-tools'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"import { slider, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"import { Editor } from '@cmudig/editor'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"