29:null 2a:["$","title",null,{"children":"Lawson's Klein Bottle | Dan Piker | Observable"}] 2f:T1213,drawMesh = regl({ vert: ` precision highp float; attribute vec2 uv; uniform mat4 uProjectionView; uniform vec2 uRange; varying vec3 vPosition, vNormal; varying float vRadius; varying vec2 vUV; ${shader} void main () { vUV = uv; vec2 uvScaled = uv * uRange; vUV *= uRange; vPosition = f(uvScaled); 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(uvScaled + vec2(dx / uRange.x, 0)) - vPosition, f(uvScaled + vec2(0, dx / uRange.y)) - 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 float pixelRatio, opacity, cartoonEdgeWidth, gridOpacity, specular, cartoonEdgeOpacity, gridWidth; // 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 = smoothstep(d * w1, d * (w1 + feather), looped); return min(a2.x, a2.y); } ${gridlineFunction} void main () { if (dot(vPosition, vPosition) > 100.0) discard; 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 = smoothstep(0.75, 1.25, vDotN / fwidth(vDotN) / (cartoonEdgeWidth * pixelRatio)); // Combine the gridlines and cartoon edges float grid = gridFactor(gridlineFunction(vUV), 0.5 * gridWidth * pixelRatio, 0.5); 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.1, 0.4, 0.8) : vec3(0.9, 0.2, 0.1); 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; } } `, primitive: 'triangles', uniforms: { uRange: (ctx, props) => [1, 1], //[state.uRange, state.vRange], 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') }, attributes: { uv: regl.prop('buffers.positions') }, depth: { enable: regl.prop('solidPass') }, blend: { enable: (ctx, props) => !props.solidPass, func: { srcRGB: 'src alpha', srcAlpha: 1, dstRGB: 1, dstAlpha: 1 }, equation: { rgb: 'reverse subtract', alpha: 'add' } }, elements: regl.prop('buffers.elements') })30: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; }; }31:[] 2d:{"id":"2cb69c9cdda31ed9","slug":null,"title":"Lawson's Klein Bottle","thumbnail":"f9deb6c9d599d45c9ac78f95d6a8108943d23be20ee52fa179d5340c7f9ab706","access_level":"unlisted","create_time":"$D2021-09-16T14:16:25.938Z","update_time":"$D2021-09-20T18:05:51.463Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"eee23d2a7bc806c7","login":"danpiker","name":"Dan Piker","avatar_url":null,"tier":"starter_2024"},"version":808,"publish_version":808,"role":null,"authored":false,"authors":[{"type":"individual","id":"4f4931a474301dc7","login":"danpiker","name":"Dan Piker","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"4f4931a474301dc7","login":"danpiker","name":"Dan Piker","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Lawson's Klein Bottle","cells":[{"id":438,"value":"md`# Lawson's Klein Bottle\n\nModified from [this notebook by Ricky Reusser](https://observablehq.com/d/7f3a7829668597a2) \n(just added an extra 4d rotation at the end to show also the closed form)\n\nMy first go with an Observable notebook - this is fun! \n\nThanks Ricky!\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":648,"value":"viewof shader = Editor({\n language: 'glsl',\n value: `/*vec4 quatMult(vec4 q1, vec4 q2) {\n return vec4((q1.w * q2.x) + (q1.x * q2.w) + (q1.y * q2.z) - (q1.z * q2.y),\n (q1.w * q2.y) - (q1.x * q2.z) + (q1.y * q2.w) + (q1.z * q2.x),\n (q1.w * q2.z) + (q1.x * q2.y) - (q1.y * q2.x) + (q1.z * q2.w),\n (q1.w * q2.w) - (q1.x * q2.x) - (q1.y * q2.y) - (q1.z * q2.z));\n }*/\n\nuniform float tau;\nuniform float 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 );\nfloat m = 0.0;\nfloat n = 1.0;\nfloat t = 1.0 * phi;\nvec4 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.yzx / (1.0 - pa.w);\n}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":743,"value":"","pinned":true,"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: 1,\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: 1,\n min: 0,\n max: 3.14159265358979,\n step: 0.01,\n description: 'φ'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":745,"value":"","pinned":true,"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":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, v], {\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":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.9,\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":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 };\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":80,"value":"$2f","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":"$30","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: 0.4 });\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":453,"value":"LICENSE = \"mit\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"