2b:null 2c:["$","title",null,{"children":"Lattice Warping | sw1227 | Observable"}] 31:Tc71,fragmentShader = { const shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(shader, ` precision highp float; uniform float u_time; uniform float u_size; const int octaves = 5; const float persistence = 0.5; const float alpha = 0.01; const float minVal = -2.0 * log(alpha + 0.5); const float maxVal = -2.0 * log(alpha); vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } float snoise(vec3 v) { const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0); const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); const float n_ = 1.0 / 7.0; vec3 i = floor(v + dot(v, C.yyy)); vec3 x0 = v - i + dot(i, C.xxx); vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min(g.xyz, l.zxy); vec3 i2 = max(g.xyz, l.zxy); vec3 x1 = x0 - i1 + C.xxx; vec3 x2 = x0 - i2 + C.yyy; vec3 x3 = x0 - D.yyy; i = mod289(i); vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0)); vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z * ns.z); vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_); vec4 x = x_ *ns.x + ns.yyyy; vec4 y = y_ *ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4(x.xy, y.xy); vec4 b1 = vec4(x.zw, y.zw); vec4 s0 = floor(b0) * 2.0 + 1.0; vec4 s1 = floor(b1) * 2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy; vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w; vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0); m = m * m; return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3))); } float onoise(vec3 v) { float sum = 0.0; float frequency = 1.0; float amplitude = 1.0; float max = 0.0; for (int i = 0; i < octaves; i++) { sum += snoise(v * frequency) * amplitude; max += amplitude; amplitude *= persistence; frequency *= 2.0; } return sum / max; } vec2 pattern(vec2 p) { ${pattern} } float lattice(vec2 point) { point = point; vec2 d = -log(alpha + abs(point - floor(point + 0.5))); return (d.x + d.y - minVal) / (maxVal - minVal); } float checkerBoard(vec2 point) { return abs(mod(floor(point.x), 2.0) - mod(floor(point.y), 2.0)); } void main() { vec2 pos = gl_FragCoord.xy / u_size; vec2 warped = pattern(pos); ${selectedMethod === "lattice" ? "float b = lattice(warped * 10.0);" : "float b = 0.2 + 0.7 * checkerBoard(warped * 10.0);"} gl_FragColor = vec4(pos.x * b, pos.y * b, b, 1.0); } `); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; throw new Error(gl.getShaderInfoLog(shader)); }32:[] 2f:{"id":"d3d05c49147d13ba","slug":"lattice-warping","title":"Lattice Warping","thumbnail":"654f1395ddf9f70e64211fd763c9fac80f6e3ab6f09d916c86c91c683883f5f3","access_level":"public","create_time":"$D2019-09-12T21:54:28.741Z","update_time":"$D2021-05-09T08:32:11.519Z","view_time":null,"first_public_time":"$D2019-09-12T22:19:30.837Z","fork":{"id":"b67b6161ed9d95cd","slug":"image-warping","title":"Image Warping","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":4,"starred":false,"owner":{"type":"team","id":"06475ae5027cde36","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":"starter_2024"},"version":801,"publish_version":801,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null}],"members":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"603f41d14c22cd58","slug":"generative","title":"Generative","owner":{"id":"06475ae5027cde36","login":"sw1227","name":"sw1227"}},"type":"notebook","body":{"title":"Lattice Warping","cells":[{"id":0,"value":"md`# Lattice Warping\nFork of [@mbostock's Image Warping](https://observablehq.com/@mbostock/image-warping), which is based on Inigo Quilez’s [Domain Warping](http://www.iquilezles.org/www/articles/warp/warp.htm).\n\nIn order to get intuition of how image is warped in Image Warping, I tried to warp equally-spaced lattice / checker board.\n\n\n(2020/3/8) Reimplementation with regl is [here](https://observablehq.com/@sw1227/lattice-warping-with-regl).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"viewof selectedMethod = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof gl = {\n const canvas = DOM.canvas(width + 28, height);\n canvas.style.cssText = `margin: 0 -14px;width:${width + 28}px;height:${height}px;`;\n canvas.value = canvas.getContext(\"webgl\");\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md`Edit the code below to change the warp function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"viewof pattern = {\n const textarea = html`

${new URLSearchParams(html`<a href>`.search).get(\"f\") || `\nfloat x = onoise(vec3(p + vec2(0.0, 0.0), u_time / 10.0));\nfloat y = onoise(vec3(p + vec2(5.2, 1.3), u_time / 10.0));\nreturn p + vec2(x, y) * 0.5;\n`}`;\n  textarea.oninput = () => {\n    textarea.style.height = \"initial\";\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  };\n  yield textarea;\n  textarea.oninput();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"html`Share your pattern using <a href=${`?f=${encodeURIComponent(pattern)}`}>this link</a>.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"md`\n## Method\nWarp function is the same as [@mbostock's Image Warping](https://observablehq.com/@mbostock/image-warping).\n\nThe only difference is that, lattice function / checkerBoard function is used here to fill pixels (by *gl_FragColor*) instead of texture image.\n\nLattice function and checkerBoard function is implemented in my notebook: [Circle Inversion](https://observablehq.com/@sw1227/circle-inversion). WebGL implementation of lattice function is also implemented in [@mbostock's fork of Circle Inversion](https://observablehq.com/@mbostock/circle-inversion).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"draw = {\n  gl.useProgram(program);\n  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);\n  gl.enableVertexAttribArray(a_vertex);\n  gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);\n  gl.uniform1f(u_size, Math.max(viewof gl.width, viewof gl.height));\n  while (true) {\n    const t = performance.now() / 1000;\n    gl.uniform1f(u_time, t);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n    yield t;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"vertexShader = {\n  const shader = gl.createShader(gl.VERTEX_SHADER);\n  gl.shaderSource(shader, `\nattribute vec2 a_vertex;\n\nvoid main(void) {\n  gl_Position = vec4(a_vertex, 0.0, 1.0);\n}\n`);\n  gl.compileShader(shader);\n  if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;\n  throw new Error(gl.getShaderInfoLog(shader));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"vertexBuffer = {\n  const buffer = gl.createBuffer();\n  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n  gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW);\n  return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"program = {\n  const program = gl.createProgram();\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n  if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;\n  throw new Error(gl.getProgramInfoLog(program));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"u_time = gl.getUniformLocation(program, \"u_time\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"u_size = gl.getUniformLocation(program, \"u_size\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"a_vertex = gl.getAttribLocation(program, \"a_vertex\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 720","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}}
30:"$2f:body"
</article></body></html>