2a:null 2b:["$","title",null,{"children":"Genuary 2022 / 2. Dithering | Zihou Ng | Observable"}] 30:Tafa,model = new class { constructor(gl) { const bayer = makeBayerTexture(gl, 1); this.model = webgl.compileModel(gl, { ...webgl.defQuadModel(), shader: webgl.defShader(gl, { ...webgl.FX_SHADER_SPEC_UV, fs: ` ${snoise} float fit(float x, float a, float b, float c, float d) { float norm = (x - a) / (b - a); return c + (d - c) * norm; } mat2 rotate2d(float angle) { float s = sin(angle), c = cos(angle); return mat2(c, -s, s, c); } vec3 rotate2(vec3 p, float angle) { mat2 rot = rotate2d(angle / 180. * PI); return vec3(rot * p.xy, p.z); } float fbm(vec3 p, int octaves) { float freq = 1.0, amp = 1.0, persistence = 0.5; float ret = 0.0, maxV = 0.0; for (int i = 0; i < 5; i++) { if (i >= octaves) break; ret += snoise(rotate2(p * freq + time * 4. * float(i), time * .2 * float(i))) * amp; maxV += amp; amp *= persistence; freq *= 2.0; } return ret / maxV; } const float BAYER_SIZE = ${bayer.size[0]}.; // https://en.wikipedia.org/wiki/Luma_(video) const vec3 LUMA = vec3(0.299, 0.587, 0.114); // CCIR 601 // const vec3 LUMA = vec3(0.2126, 0.7152, 0.0722); // BT 709 // const vec3 LUMA = vec3(0.212, 0.701, 0.087); // SMPTE 240M void main() { vec3 p0 = vec3(v_uv * scale + time * 5., 0.0); float v = fbm(p0, octaves); vec2 p = fract(gl_FragCoord.xy / BAYER_SIZE); float thres = texture2D(bayer, p).r; vec2 uv = v_uv; float aspectY = 1.3; uv.x = clamp((uv.x - .5) * aspectView * aspectImg * aspectY + .5, 0., 1.); uv.y = clamp((uv.y - .5) * aspectY + .5, 0., 1.); vec3 color1 = texture2D(img1, uv).rgb; vec3 color2 = texture2D(img2, uv).rgb; float luma1 = dot(color1, LUMA); float luma2 = dot(color2, LUMA); float luma = (luma1 + luma2) * .5; vec3 color; float t = step(thres, luma + v * .5); color = mix(color1, color2, t); vec3 vv = vec3(step(thres, fit(v, -1., 1., 0., 1.) * .25)); float t1 = step(1e-6, uv.x) * (1. - step(1., uv.x)); t1 *= step(1e-6, uv.y) * (1. - step(1., uv.y)); color = mix(vv, color, t1); gl_FragColor = vec4(color, 1.0); }`, uniforms: { aspectView: ["float", gl.drawingBufferWidth / gl.drawingBufferHeight], aspectImg: ["float", imgTex1.size[1] / imgTex1.size[0]], bayer: ["sampler2D", 0], img1: ["sampler2D", 1], img2: ["sampler2D", 2], scale: ["float", 1], octaves: ["int", 3], time: ["float", 0], nIter: ["int", 3], } }), textures: [bayer, imgTex1, imgTex2], }); } draw({ scale = 1, octaves = 5, time = 0 }) { this.model.uniforms.scale = scale; this.model.uniforms.octaves = octaves; this.model.uniforms.time = time; webgl.draw(this.model); } }(gl)31:T875,snoise = ` // https://github.com/ashima/webgl-noise 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); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners 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; // Permutations 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 )); // Gradients: 7x7 points over a square, mapped onto an octahedron. // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) float n_ = 0.142857142857; // 1.0/7.0 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) 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); // Normalise gradients 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; // Mix final noise value 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) ) ); }`32:[{"id":"ad9b916ef18b72204148456eff4194f062204a79280e893ddb05f9f8f99c19b96619542d3502281f8f88f9cd3eee1b8fed7e7fabe2fa75548253553bb6292186","href":"https://static.observableusercontent.com/files/ad9b916ef18b72204148456eff4194f062204a79280e893ddb05f9f8f99c19b96619542d3502281f8f88f9cd3eee1b8fed7e7fabe2fa75548253553bb6292186","name":"portrait_0.jpg","type":"image/jpeg","lastModified":1641900354213.429,"size":146895},{"id":"f660cb40b7e8aed7e7e38ac84def66c858f0f4fdaebe92c72cc4b042f74654c8bc7056f47dabb0022ddcbd6dcbe24f2887d2dd1cc9b13a07541e8940210bb892","href":"https://static.observableusercontent.com/files/f660cb40b7e8aed7e7e38ac84def66c858f0f4fdaebe92c72cc4b042f74654c8bc7056f47dabb0022ddcbd6dcbe24f2887d2dd1cc9b13a07541e8940210bb892","name":"portrait_8.jpg","type":"image/jpeg","lastModified":1641900354247.027,"size":156884}] 2e:{"id":"348f03fc9c6abf72","slug":"genuary-2022-2","title":"Genuary 2022 / 2. Dithering","thumbnail":"2d4b366a3d08f8ea13804f8d51019bfe4c83a1194ca74d6f268206c3e28ddb9d","access_level":"public","create_time":"$D2022-01-11T08:24:35.818Z","update_time":"$D2022-02-02T04:44:12.838Z","view_time":null,"first_public_time":"$D2022-01-12T02:36:53.098Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":728,"publish_version":728,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"29a9d2685c37d031","slug":"genuary-2022","title":"Genuary 2022","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"titling":"auto","title":"Genuary 2022 / 2. Dithering","cells":[{"id":0,"value":"# Genuary 2022 / 2. Dithering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"[Dithering](https://genuary.art/prompts#jan2)\n\nDitheringly blending two portraits generated with StyleGAN2 Metfaces.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":676,"value":"viewof pause = Inputs.toggle({ label: \"pause\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof gl = {\n const canvas = DOM.canvas(width, width / 1.618);\n const gl = canvas.value = canvas.getContext('webgl', {\n antialias: true, alpha: true\n });\n gl.getExtension('OES_texture_float');\n gl.getExtension('WEBGL_draw_buffers');\n gl.getExtension('WEBGL_color_buffer_float');\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"---\n## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"{\n glClear(gl, { bg: [.12, .12, .12] });\n \n model.draw({\n scale: .5,\n octaves: 5,\n time: frame * 2e-4\n });\n \n return \"render\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"frame = counter(this, pause)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"imgTex1 = makeImageTexture(gl, await FileAttachment(\"portrait_8.jpg\").image())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"imgTex2 = makeImageTexture(gl, await FileAttachment(\"portrait_0.jpg\").image())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"### WebGL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"makeBayerTexture = (gl, level) => {\n const dim = 2 ** (level + 1);\n const norm = 256 / (dim ** 2);\n return webgl.defTexture(gl, {\n width: dim, height: dim,\n format: gl.LUMINANCE, type: gl.UNSIGNED_BYTE,\n filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE,\n image: new Uint8Array(makeBayerMatrix(level).map(x => x * norm))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"makeImageTexture = (gl, image) => webgl.defTexture(gl, { flip: true, image })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"glClear = (gl, { bg = [0,0,0] }) => {\n gl.clearColor(...bg, 1);\n gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"### Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"makeBayerMatrix = (r, c = r) => {\n // ref: https://bisqwit.iki.fi/story/howto/dither/jy/\n \n const M = r + 1, L = c + 1;\n const out = [];\n for (let x = 0, xdim = 1 << M; x < xdim; x++) {\n for (let y = 0, ydim = 1 << L; y < ydim; y++) {\n let v = 0, offset = 0, xmask = M, ymask = L;\n if (M == 0 || (M > L && L != 0)) {\n const xc = x ^ ((y << M) >> L), yc = y;\n for (let bit = 0; bit < M + L;) {\n v |= ((yc >> --ymask) & 1) << bit++;\n for(offset += M; offset >= L; offset -= L)\n v |= ((xc >> --xmask) & 1) << bit++;\n }\n } else {\n const xc = x, yc = y ^ ((x << L) >> M);\n for (let bit = 0; bit < M + L;) {\n v |= ((xc >> --xmask) & 1) << bit++;\n for (offset += L; offset >= M; offset -= M)\n v |= ((yc >> --ymask) & 1) << bit++;\n }\n }\n out.push(v);\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"function* counter(start, pause = false) {\n start = start !== undefined ? start : 0;\n yield start;\n while (!pause) {\n yield start += 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"### Apendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"webgl = import(\"https://cdn.skypack.dev/@thi.ng/webgl@v6.1.7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"