2a:null 2b:["$","title",null,{"children":"OpenGL UV Grid | Zihou Ng | Observable"}] 30:[] 2e:{"id":"2697b9e3169ac2cc","slug":"opengl-uv-grid","title":"OpenGL UV Grid","thumbnail":"7f0bc1503fa52bab6edba6f05d3efd4b0d0b1f1dac1ec134d102cc5c7c5db0bb","access_level":"public","create_time":"$D2023-09-18T03:03:11.871Z","update_time":"$D2023-09-19T00:38:36.042Z","view_time":null,"first_public_time":"$D2023-09-18T03:03:11.871Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":66,"publish_version":null,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"OpenGL UV Grid","cells":[{"id":0,"value":"# OpenGL UV Grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Canvas draw of the [OpenGL UV grid](https://github.com/mrdoob/three.js/blob/dev/examples/textures/uv_grid_opengl.jpg) used by [Three.js](https://threejs.org/), in case you want a scalable one or to save some bandwidth.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof config = Inputs.form({\n width: Inputs.range([100, 800], {label: \"width\", step: 50, value: 500}), \n height: Inputs.range([100, 800], {label: \"height\", step: 50, value: 500}),\n nx: Inputs.range([2, 20], {label: \"nx\", step: 1, value: 10}),\n ny: Inputs.range([2, 20], {label: \"ny\", step: 1, value: 10}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"{\n const canvas = DOM.canvas(config.width, config.height);\n canvas.width *= window.devicePixelRatio;\n canvas.height *= window.devicePixelRatio;\n canvas.style.width = `${config.width}px`;\n\n drawUVGrid(canvas.getContext(\"2d\"), {\n nx: config.nx, ny: config.ny,\n colors: { M: [199,35,199], R: [229,20,20], B: [20,20,229], G: [34,158,34] },\n });\n \n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function drawUVGrid(ctx, config) {\n drawCells(ctx, config);\n drawCoords(ctx, config);\n drawGrid(ctx, config);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function drawGrid(ctx, { nx, ny }) {\n const H = ctx.canvas.height, W = ctx.canvas.width;\n ctx.lineWidth = 1;\n ctx.strokeStyle = 'white';\n\n for (let i = 0; i <= ny; i++) {\n const y = ctx.lineWidth * .5 + (H - ctx.lineWidth) / ny * i;\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(W, y);\n ctx.stroke();\n ctx.closePath();\n }\n\n for (let i = 0; i <= nx; i++) {\n const x = ctx.lineWidth * .5 + (W - ctx.lineWidth) / nx * i;\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, H);\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function drawCells(ctx, { colors: { R, G, B, M}, nx, ny }) {\n const H = ctx.canvas.height, W = ctx.canvas.width;\n const sx = W / nx, sy = H / ny;\n const im = ctx.getImageData(0, 0, W, H);\n const data = new Uint32Array(im.data.buffer);\n for (let i = 0; i < H; i++) for (let j = 0; j < W; j++) {\n const ty = i / (H - 1), tx = j / (W - 1);\n const mr = Array.from({ length: 3 }, (_, i) => lerp(M[i],R[i],ty));\n const bg = Array.from({ length: 3 }, (_, i) => lerp(B[i],G[i],ty));\n let [r, g, b] = Array.from({ length: 3 }, (_, i) => lerp(mr[i],bg[i],tx));\n if (((i / sy | 0) + (j / sx | 0)) % 2 == 0) \n r *= 1.08, g *= 1.08, b *= 1.08;\n data[i * W + j] = (0xff << 24) | (b << 16) | (g << 8) | r;\n }\n ctx.putImageData(im, 0, 0);\n\n for (let i = 1; i < 10; i++) for (let j = 1; j < 10; j++) {\n ctx.beginPath();\n ctx.arc(i * sx, j * sy, 1.5 * window.devicePixelRatio, 0, 2 * Math.PI, false);\n ctx.fillStyle = 'white';\n ctx.fill();\n ctx.closePath();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function drawCoords(ctx, { nx, ny }) {\n const H = ctx.canvas.height, W = ctx.canvas.width;\n const fontSize = Math.round(Math.min(W, H) / Math.max(ny, nx) * .16);\n \n ctx.textRendering = \"optimizeLegibility\";\n ctx.fillStyle = 'white';\n ctx.letterSpacing = \"-.2px\";\n\n const sx = W / nx, sy = H / ny;\n ctx.font = `${fontSize * 2}px Arial,sans-serif`;\n ctx.textBaseline = 'middle';\n ctx.textAlign = 'center';\n ctx.fillText(\"0,1\", sx * .5, sy * .5);\n ctx.fillText(\"1,1\", W - sx * .5, sy * .5);\n ctx.fillText(\"0,0\", sx * .5, H - sy * .5);\n ctx.fillText(\"1,0\", W - sx * .5, H - sy * .5);\n\n ctx.font = `${fontSize}px Arial,sans-serif`;\n for (let i = 0; i < ny; i++) for (let j = 0; j < nx; j++) {\n ctx.textBaseline = 'bottom';\n ctx.textAlign = 'end';\n ctx.fillText((1 - (i + 1) / ny).toFixed(1), (j + 1) * sx - 4, (i + 1) * sy);\n\n ctx.textAlign = 'start';\n ctx.textBaseline = 'top';\n ctx.fillText((j / nx).toFixed(1), j * sx + 4, i * sy + 6);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"lerp = (a, b, t) => a * (1 - t) + b * t","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"