32:[{"id":"e2728bfc5b6a98f5240afab37000dc19b852b757803fd66ee56d896e7f8a9d7283d9a26040b3ecdfde73bc3a18c7bb9903cfda3e38ade42523a081d32a5e5016","href":"https://static.observableusercontent.com/files/e2728bfc5b6a98f5240afab37000dc19b852b757803fd66ee56d896e7f8a9d7283d9a26040b3ecdfde73bc3a18c7bb9903cfda3e38ade42523a081d32a5e5016","name":"head_256x256x109@1.zip","type":"application/zip","lastModified":1678968714077.825,"size":4127295}] 30:{"title":"Interactive volume visualization of 2D slices in X-, Y-, and Z-plane","cells":[{"id":0,"value":"# Interactive volume visualization of 2D slices in X-, Y-, and Z-plane","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"Drag the cursor in each view to explore the slices.","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"viewof invert = Inputs.toggle({label: \"Invert\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"sliceViewer = html` \n \n \n \n \n \n

${canvasXY}

${canvasYZ}

${canvasXZ}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"filename = \"head_256x256x109.zip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"dimensions = getDimensions(filename);","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"The _3D image of a head_ was borrowed from [this post](https://www.codeproject.com/Articles/352270/Getting-Started-with-Volume-Rendering-using-OpenGL) by Divine Augustine, shared under the [The Code Project Open License](https://www.codeproject.com/info/cpol10.aspx).","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"data = {\n const zip = await FileAttachment(\"head_256x256x109@1.zip\").zip();\n const file = zip.file(\"head_256x256x109\");\n const buffer = await file.arrayBuffer();\n const byteArray = new Uint8Array(buffer);\n return byteArray;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"dataAspect = [1, -1, 1 / 1.65]","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"mutable position = dimensions.map(e => Math.floor(e / 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"paramsXY = {\n return {\n name: \"XY\",\n width: dimensions[0],\n height: dimensions[1],\n slice: { index: position[2], max: dimensions[2] },\n getPosition(x, y) {\n return [Math.floor(dimensions[0] * x / this.width),\n Math.floor(dimensions[1] * y / this.height),\n position[2]];\n },\n sampler(x, y) {\n return data[(dimensions[0] * dimensions[1]) * position[2] + dimensions[0] * y + x];\n },\n getX() {\n return this.width * position[0] / dimensions[0];\n },\n getY() {\n return this.height * position[1] / dimensions[1];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"paramsYZ = {\n return {\n name: \"YZ\",\n width: dimensions[2] / dataAspect[2],\n height: dimensions[1],\n slice: { index: position[0], max: dimensions[0] },\n getPosition(x, y) {\n return [position[0],\n Math.floor(dimensions[2] / dataAspect[2] * y / this.width),\n Math.floor(dimensions[1] * dataAspect[2] * x / this.height)]\n },\n sampler(x, y) {\n return data[(dimensions[0] * dimensions[1]) * Math.floor(x * dataAspect[2]) + dimensions[0] * y + position[0]];\n },\n getX() {\n return this.width * position[2] / dimensions[2];\n },\n getY() {\n return this.height * position[1] / dimensions[1];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"paramsXZ = {\n return {\n name: \"XZ\",\n width: dimensions[0],\n height: dimensions[2] / dataAspect[2],\n slice: { index: position[1], max: dimensions[1] },\n getPosition(x, y) {\n return [Math.floor(dimensions[0] * x / this.width),\n position[1],\n Math.floor(dimensions[2] * y / this.height)];\n },\n sampler(x, y) {\n return data[dimensions[0] * dimensions[1] * Math.floor(y * dataAspect[2]) + dimensions[0] * position[1] + x];\n },\n getX() {\n return this.width * position[0] / dimensions[0];\n },\n getY() {\n return this.height * position[2] / dimensions[2];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"canvasXY = getCanvas(paramsXY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"canvasYZ = getCanvas(paramsYZ)","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"canvasXZ = getCanvas(paramsXZ)","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"async function *getCanvas(params) {\n const ctx = DOM.context2d(params.width, params.height);\n ctx.canvas.onmousemove = (e) => {\n if (!e.buttons) { return; }\n mutable position = params.getPosition(e.offsetX, e.offsetY);\n };\n \n let image = await getImage(ctx, params.width, params.height, params.sampler);\n ctx.drawImage(image, 0, 0, params.width, params.height);\n\n drawCross(ctx, params.getX(), params.getY());\n drawInfo(ctx, params.name + \" (\" + params.slice.index + \"/\" + params.slice.max + \")\"); \n \n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"function drawInfo(ctx, info) {\n ctx.font = \"16px sans-serif\";\n //ctx.strokeStyle = 'black';\n //ctx.lineWidth = 3;\n //ctx.strokeText(info, 5, 24);\n ctx.fillStyle = invert ? \"black\" : \"white\";\n ctx.fillText(info, 5, 24);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"function drawCross(ctx, x, y, radius = 10) {\n ctx.strokeStyle = \"red\";\n ctx.beginPath();\n ctx.moveTo(x - radius, y);\n ctx.lineTo(x + radius, y);\n ctx.moveTo(x, y - radius);\n ctx.lineTo(x, y + radius);\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"async function getImage(ctx, width, height, sampler) { \n let image = ctx.createImageData(width, height);\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n let value = sampler(x, y);\n if (invert) {\n value = 255 - value;\n }\n\n let i = (image.width * y + x) * 4;\n image.data[i] = value;\n image.data[i + 1] = value;\n image.data[i + 2] = value;\n image.data[i + 3] = 255;\n }\n }\n\n return createImageBitmap(image);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"function getDimensions(filename) {\n let dimensions = filename.split(\"_\")[1].split(\"x\").map((value) => parseInt(value));\n return dimensions;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}