32:T600,function createZSliceImage(ctx, data, width, height, sliceIndex) { // Create image buffer with the same width and height as the dataset. // The image data has 4 channels (red, green, blue, alpha). const image = ctx.createImageData(width, height); // Loop through all pixels in the image and set the color based on the data. for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { // Compute the data index in the 3D volume. // The first part is the offset to the current volume slice (width * height * sliceIndex). // The second part is the offset inside the slice to the current voxel (width * y + x). const dataIndex = (width * height * sliceIndex) + (width * y + x); // ✔️ SOLUTION for exercise 2 (part 1) ✔️ const value = invertColor ? 255 - data[dataIndex] : data[dataIndex]; // ✔️ SOLUTION for exercise 2 (part 2) ✔️ const color = d3.color(colorScale(value / 255)) // Compute the index of the pixel in the image data, considering the 4 color channels. const imageIndex = (width * y + x) * 4; // Set the pixel color. image.data[imageIndex] = color.r; // Red ✔️ Exercise 2 ✔️ image.data[imageIndex + 1] = color.g; // Green ✔️ Exercise 2 ✔️ image.data[imageIndex + 2] = color.b; // Blue ✔️ Exercise 2 ✔️ image.data[imageIndex + 3] = 255; // Alpha } } // Asynchronously create a bitmap from the image data (returns a promise). return createImageBitmap(image); }33:T513,To invert the colors in our visualization depending on the checkbox in the user interface, we only need to change one line of code in the *createZSliceImage()* function, where we retrieve the data values for each pixel: - Before: *const value = data[dataIndex];* - After: *const value = invertColor ? 255 - data[dataIndex] : data[dataIndex];* Instead of changing the colors directly, we manipulate the data value. This way, all three color channels (red, green, and blue) are changed together. If we also want to apply the color palette, we need to further modify the code in the *createZSliceImage()* function. First, we have to normalize our data values, as our *colorScale()* function requires values between 0 and 1 as input. Then, we can use the normalized values to retrieve an interpolated color as a string and convert it to a color object for each pixel. Finally, the red, green, and blue values are assigned per pixel in our slice image. A nice side effect of inverting the data values instead of the color values as described above is that we can now also invert the color palette. The modified parts of code are marked in the [*createZSliceImage()*](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset-solution#createZSliceImage) function above.34:T561,// ✔️ SOLUTION for exercise 3: add extents and dataIndexFn as parameters ✔️ function createSliceImage(ctx, data, width, height, sliceIndex, extents, dataIndexFn) { // Create image buffer with the same width and height as the dataset. // The image data has 4 channels (red, green, blue, alpha). const image = ctx.createImageData(width, height); // Loop through all pixels in the image and set the color based on the data. for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { // Compute the data index in the 3D volume. // ✔️ SOLUTION for exercise 3 ✔️ const dataIndex = dataIndexFn(x, y, extents, sliceIndex); // Exercise 2 (part 1 and 2). const value = invertColor ? 255 - data[dataIndex] : data[dataIndex]; const color = d3.color(colorScale(value / 255)) // Compute the index of the pixel in the image data, considering the 4 color channels. const imageIndex = (width * y + x) * 4; // Set the pixel color. image.data[imageIndex] = color.r; // Red (Exercise 2) image.data[imageIndex + 1] = color.g; // Green (Exercise 2) image.data[imageIndex + 2] = color.b; // Blue (Exercise 2) image.data[imageIndex + 3] = 255; // Alpha } } // Asynchronously create a bitmap from the image data (returns a promise). return createImageBitmap(image); }35:T4d3,async function* plotSliceExt(size, description, values, widthIndex, heightIndex, planeIndex, sliceIndex, indexFn) { // Create the canvas and 2D rendering context. const extents = [description.xExtent, description.yExtent, description.zExtent] // Take the volume aspect ratio and spacing of voxels into account. const dataAspect = extents[heightIndex] / extents[widthIndex]; const width = (size / dataAspect) / Math.abs(description.scale[widthIndex]); const ctx = DOM.context2d(width, size); // Create and draw the slice image. The returned bitmap image can be used // to draw the slice image scaled to the dimensions of the canvas. The data // aspect ratio has to be taken into account to prevent stretching of the // slice image. const image = await createSliceImage(ctx, values, extents[widthIndex], extents[heightIndex], sliceIndex, extents, indexFn); ctx.drawImage(image, 0, 0, width * Math.abs(description.scale[heightIndex]), size); // Draw the info label (current image number and overall number of images). const info = "Image " + (sliceIndex + 1) + "/" + (extents[planeIndex]); ctx.font = "16px sans-serif"; drawSliceInfo(ctx, info); // Return the canvas element. yield ctx.canvas; }36:[{"id":"46cfe2bacb56a17226973e8ed4e55d28ce43b8951962b7ccab85d2e77b30926e09ce6eba0531a1c659b02036ba513acac04bf5e1f0348f54f9fe8d7c1f7abdb4","href":"https://static.observableusercontent.com/files/46cfe2bacb56a17226973e8ed4e55d28ce43b8951962b7ccab85d2e77b30926e09ce6eba0531a1c659b02036ba513acac04bf5e1f0348f54f9fe8d7c1f7abdb4","name":"engine_256x256x128_uint8.zip","type":"application/zip","lastModified":1682075260043.928,"size":3035589},{"id":"7aa8e2ddf434408ff35e066873d37bde6434a4634f02402c19b4f1bb43990b62a7c60426cb4bb84e3c7575efa43e666d50c991801213a7062c747c677805420e","href":"https://static.observableusercontent.com/files/7aa8e2ddf434408ff35e066873d37bde6434a4634f02402c19b4f1bb43990b62a7c60426cb4bb84e3c7575efa43e666d50c991801213a7062c747c677805420e","name":"z_slice_example_svg@2.svg","type":"image/svg+xml","lastModified":1682075260043.928,"size":11020},{"id":"665f95b53cbb24a26266344c9dfb081cb0f226713a3976976b21c8283dd3f6a22a5992730905cc3c50b8f3a32aaf7436f475ecafb1c353c4300011d54de06d6f","href":"https://static.observableusercontent.com/files/665f95b53cbb24a26266344c9dfb081cb0f226713a3976976b21c8283dd3f6a22a5992730905cc3c50b8f3a32aaf7436f475ecafb1c353c4300011d54de06d6f","name":"x_slice_example_svg@2.svg","type":"image/svg+xml","lastModified":1682075260043.928,"size":13243},{"id":"986bf0183e6e85ace6596f97b906d680eb6c0fdfce146e02a3b054aecabad5c5232ef09ee4c0577912ef3d7fc75b23ae85cf649b828893398cef35407f80fbfb","href":"https://static.observableusercontent.com/files/986bf0183e6e85ace6596f97b906d680eb6c0fdfce146e02a3b054aecabad5c5232ef09ee4c0577912ef3d7fc75b23ae85cf649b828893398cef35407f80fbfb","name":"y_slice_example_svg@1.svg","type":"image/svg+xml","lastModified":1682075260043.928,"size":13546}] 30:{"title":"Visualization of 2D slices through a 3D volume dataset (solution)","cells":[{"id":0,"value":"# Visualization of 2D slices through a 3D volume dataset (solution)","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"A step-by-step demonstration of creating a visualization of two-dimensional volume slices in the Z-plane using the [2D rendering context of the Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"viewof zSliceIndex = Inputs.range([0, dataDescription.zExtent - 1], {value: dataDescription.zExtent / 2, step: 1, label: \"z-slice index\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"plotSlice(500, 500, dataDescription, dataValues, createZSliceImage, zSliceIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"The 3 steps to create the above visualization (+ exercises step) are detailed below:\n1. [Retrieving a dataset](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset-solution#cell-278)\n2. [Creating a slice image](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset-solution#cell-328)\n3. [Drawing the slice image](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset-solution#cell-390)\n4. [Exercises](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset-solution#cell-477)","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"## Retrieving the dataset","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"Example datasets can be obtained from Pavol Klacansky's [Open Scientific Visualization Datasets Repository](https://klacansky.com/open-scivis-datasets/). We select the *Engine* dataset containing a CT scan of two cylinders of an engine block. The following cell lists the corresponding metadata.","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"dataDescription = ({\n name: \"Engine\",\n acknowledgement: \"volvis.org and General Electric\",\n description: \"CT scan of two cylinders of an engine block\",\n link: \"https://klacansky.com/open-scivis-datasets/\",\n dataType: \"uint8\",\n endian: \"little\",\n scale: [1, 1, 1],\n xExtent: 256,\n yExtent: 256,\n zExtent: 128\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"The dataset is attached to this notebook with an [Observable FileAttachment](https://observablehq.com/@observablehq/file-attachments) (see the sidebar on the right). We need to retrieve the attachment, decompress it, get the actual file, and turn the file buffer into an [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) to match the data type specified in the dataset's metadata. The result is a 1-dimensional array of 8-bit unsigned integer values. It represents the loaded 3D volume with the x-, y-, and z-extents specified in the metadata.","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"dataValues = {\n const zip = await FileAttachment(\"engine_256x256x128_uint8.zip\").zip(); // Retrieve attachment and decompress it.\n const file = zip.file(\"engine_256x256x128_uint8.raw\"); // Get the actual data file in the decompressed archive.\n const buffer = await file.arrayBuffer(); // Get the byte buffer of the file.\n const byteArray = new Uint8Array(buffer); // Create an uint8-array-view of the file buffer.\n \n return byteArray; // Return the data as an uint8 array.\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"## Creating the slice image","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"After retrieving the data, we can create a 2D image for a selected slice of the 3D volume. For simplicity, we first consider only slices in the z-plane. This allows us to think of the 3D volume as a stack of 2D images, with each 2D image representing a slice.","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"FileAttachment(\"z_slice_example_svg@2.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"To create the slice image, we first [create an ImageData object](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData) with the x-extent and y-extent of our volume data. Then, we calculate the offset into our volume for the selected slice. Next, we loop through the pixels of our slice image and set the pixel colors based on the corresponding data values in the volume. Finally, we [create an ImageBitmap with the function *createImageBitmap*](https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap) from the image data, so that it can be drawn on the canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"## Drawing the slice image","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"We can now create a plot function that renders our visualization of 2D volume slices. To do this, we first create a canvas object and [2D rendering context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) using Observable's wrapper function *DOM.context2d()*. The width and the height of the canvas can be chosen freely. Next, we create the image bitmap for the currently selected slice using our function *createZSliceImage()* and draw it by calling the [*drawImage()*](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) function of the rendering context. When drawing, we must consider the aspect ratio of the volume to avoid stretching the slice image on the canvas. Optionally, we can add a text label on the canvas to indicate which slice image is currently selected.","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"async function* plotSlice(width, height, description, values, imageFn, sliceIndex) {\n // Create the canvas and 2D rendering context.\n const ctx = DOM.context2d(width, height);\n\n // Create and draw the slice image. The returned bitmap image can be used\n // to draw the slice image scaled to the dimensions of the canvas. The data\n // aspect ratio has to be taken into account to prevent stretching of the\n // slice image.\n const image = await imageFn(ctx, values, description.xExtent, description.yExtent, sliceIndex);\n const dataAspect = description.yExtent / description.xExtent;\n ctx.drawImage(image, 0, 0, width, width * dataAspect);\n \n // Draw the info label (current image number and overall number of images).\n const info = \"Image \" + (sliceIndex + 1) + \"/\" + (description.zExtent);\n ctx.font = \"16px sans-serif\";\n drawSliceInfo(ctx, info);\n\n // Return the canvas element.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"To display our visualization, we just need to call our plot function. The final result is shown below and at the [top of the notebook](https://observablehq.com/d/46bb744dadf11d68#cell-398). Well done! 👍🎉","pinned":false,"hidden":false,"mode":"md"},{"id":726,"value":"plotSlice(500, 500, dataDescription, dataValues, createZSliceImage, zSliceIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"## Exercises","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"The following exercises provide some ideas on how to extend the visualization. Try them out or come up with your own extension!","pinned":false,"hidden":false,"mode":"md"},{"id":504,"value":"### 1. Try another dataset","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"More example datasets can be found in Pavol Klacansky's [Open Scientific Visualization Datasets Repository](https://klacansky.com/open-scivis-datasets/). Pay attention to their size, as volume datasets can be quite large. A new dataset can then be attached to this notebook in the *Files* sidebar and loaded via a [FileAttachment](https://observablehq.com/@observablehq/file-attachments) as described above. Alternatively, you can also import datasets from other notebooks on Observable. For example, use the following import statement to retrieve a CT scan of a human head.","pinned":false,"hidden":false,"mode":"md"},{"id":579,"value":"import {dataDescription as headDataDescription, dataValues as headDataValues} from \"@mroehlig/3d-volume-rendering-with-webgl-three-js\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"After importing the new dataset, you have access to the metadata and the buffer with the volume data.","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"headDataDescription","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"headDataValues // Use the imported data to create and visualize a slice image...","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"#### ➡️ Solution for exercise 1 ✔️","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"First, we add a new slider to change the slice index for the new dataset, taking into account the dimensions of this dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":881,"value":"viewof headZSliceIndex = Inputs.range([0, headDataDescription.zExtent - 1], {value: headDataDescription.zExtent / 2, step: 1, label: \"head z-slice index\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":896,"value":"Next, we simply have to call our plot function with the description and values of the new dataset as input.","pinned":false,"hidden":false,"mode":"md"},{"id":883,"value":"plotSlice(500, 500, headDataDescription, headDataValues, createZSliceImage, headZSliceIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"### 2. Add user interface controls to customize the data coloring","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"Try adding more UI components to customize the visualization of the volume data. For example, you can use the value of the checkbox below to decide whether the coloring should be inverted or not. This also requires adjusting the code in the *createZSliceImage()* function at the point where the red, green and blue values of the pixel color in the slice image are set.","pinned":false,"hidden":false,"mode":"md"},{"id":607,"value":"viewof invertColor = Inputs.toggle({label: \"Invert color\", value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"You can also use a different color palette for encoding the data. For example, have a look at the continuous color palettes of [ColorBrewer](https://colorbrewer2.org/), how they are [available in D3.js](https://observablehq.com/@d3/color-schemes), and how to [interpolate between colors](https://observablehq.com/@d3/working-with-color#continuous). The interpolated colors can then be used to adapt the the *createZSliceImage()* function and customize the appearance of the data.","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"colorScale = {\n // Get a ColorBrewer color palette with the maximum available number of colors using D3.\n const palette = d3.schemeRdPu[d3.schemeRdPu.length - 1];\n // Create a color scale from the palette using D3. The scale function can then be used\n // to retrieve interpolated color values for input values between 0 and 1.\n return d3.scaleLinear()\n .domain(Array.from({length: palette.length}, (_, i) => i / (palette.length - 1)))\n .range(palette);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"As an example, the *colorScale()* function is here used to draw a smoothly interpolated color gradient.","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"drawGradient(colorScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":945,"value":"To obtain the individual red, green, and blue values of an interpolated color from our color scale (returns CSS strings), we can use D3's color module [*d3.color*](https://github.com/d3/d3-color/blob/v1.2.3/README.md#color).","pinned":false,"hidden":false,"mode":"md"},{"id":949,"value":"interpolatedColor = d3.color(colorScale(0.5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":909,"value":"#### ➡️ Solution for exercise 2 ✔️","pinned":false,"hidden":false,"mode":"md"},{"id":915,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"### 3. Create and visualize slice images in x- and/or y-direction","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"So far, we have only considered slices through the volume in the z-direction. However, it can be interesting to examine a volume from other directions as well. Try developing new code to create and visualize slice images in the x-direction and/or y-direction. The sketches below give an idea of how the slices are formed.","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":" \n \n \n \n \n

${await FileAttachment(\"x_slice_example_svg@2.svg\").image()}

${await FileAttachment(\"y_slice_example_svg@1.svg\").image()}

","pinned":false,"hidden":false,"mode":"html"},{"id":682,"value":" You can also try to combine and link different slice images, so that multiple directions can be explored at once. Have a look at the following interactive example from [this notebook](https://observablehq.com/@mroehlig/interactive-volume-visualization-of-2d-slices-in-x-y-and-z-plane).","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"import {sliceViewer} from \"@mroehlig/interactive-volume-visualization-of-2d-slices-in-x-y-and-z-plane\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"Drag the cursor in each view to explore the volume.","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"sliceViewer","pinned":true,"hidden":false,"mode":"ojs"},{"id":1003,"value":"#### ➡️ Solution for exercise 3 ✔️","pinned":false,"hidden":false,"mode":"md"},{"id":1199,"value":"In order to visualize slices for the x- and y-plane, we first need to figure out how to index into our volume buffer to get the data values of the slices. We have already done this indexing for the z-plane. So let's extract the formula for the z-plane from the *createZSliceImage()* function into its own function.","pinned":false,"hidden":false,"mode":"md"},{"id":1102,"value":"function getZSliceDataIndex(column, row, extents, sliceIndex) {\n return (extents[0] * extents[1]) * sliceIndex + extents[0] * row + column;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1202,"value":"Now, we follow the same strategy to create an indexing function for the x-plane...","pinned":false,"hidden":false,"mode":"md"},{"id":1007,"value":"function getXSliceDataIndex(column, row, extents, sliceIndex) {\n return extents[0] * extents[1] * column + extents[0] * row + sliceIndex;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1204,"value":"...and an indexing function for the y-plane.","pinned":false,"hidden":false,"mode":"md"},{"id":1015,"value":"function getYSliceDataIndex(column, row, extents, sliceIndex) {\n return extents[0] * extents[1] * row + extents[0] * sliceIndex + column;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"With these indexing functions, we can make a copy of our *createZSliceImage()* function, rename it to *createSliceImage()*, and generalize it to take the other planes into account. We pass the extents of our dataset and one of our indexing functions as parameters to *createSliceImage()* and use the indexing function inside the nested loops to compute the data index for each image pixel in our visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":1174,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1236,"value":"To display the slice images, we also need to adapt and generalize our plot function. Here, we copy and rename the plot function and add parameters to describe the requested slice, namely which dimensions of the volume to use for the width and height of the image and which dimension to use for the slice offset. We also pass in one of our matching indexing functions that we created above. The plot function then creates a fitting canvas and calls our adapted *createSliceImage()* function with the correct parameters.","pinned":false,"hidden":false,"mode":"md"},{"id":1024,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1227,"value":"Finally, we can use our generalized plot function to create slice visualizations for different axis-aligned planes. Starting with the z-plane...","pinned":false,"hidden":false,"mode":"md"},{"id":1119,"value":"plotSliceExt(250, headDataDescription, headDataValues, 0, 1, 2, headZSliceIndex, getZSliceDataIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1229,"value":"...adding a slice visualization for the x-plane...","pinned":false,"hidden":false,"mode":"md"},{"id":1045,"value":"viewof xSliceIndex = Inputs.range([0, headDataDescription.xExtent - 1], {value: headDataDescription.xExtent / 2, step: 1, label: \"x-slice index\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"plotSliceExt(250, headDataDescription, headDataValues, 2, 1, 0, xSliceIndex, getXSliceDataIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1231,"value":"...and adding another slice visualization for the y-plane.","pinned":false,"hidden":false,"mode":"md"},{"id":1064,"value":"viewof ySliceIndex = Inputs.range([0, headDataDescription.yExtent - 1], {value: headDataDescription.yExtent / 2, step: 1, label: \"y-slice index\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"plotSliceExt(250, headDataDescription, headDataValues, 0, 2, 1, ySliceIndex, getYSliceDataIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"Helper function to draw text labels on the canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"function drawSliceInfo(ctx, info) { \n // Draw the info string with white color in the upper left corner.\n ctx.fillStyle = \"white\";\n ctx.fillText(info, 5, 24);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"Helper function to duplicate a canvas object. In this notebook it is used to display the final result also at the top of the notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"function* duplicateCanvas(canvas) {\n // Create a new canvas and 2D rendering context with the same dimensions as the input canvas.\n const ctx = DOM.context2d(canvas.clientWidth, canvas.clientHeight);\n // Draw the content of the input canvas onto the new canvas.\n ctx.drawImage(canvas, 0, 0, canvas.clientWidth, canvas.clientHeight);\n // Return the new canvas.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"Helper function to draw a color gradient based on the given color interpolation function.","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"function* drawGradient(colors, n = 256) {\n // Create a new canvas with it's width set to the number of colors and it's height to one.\n const ctx = DOM.context2d(n, 1, 1);\n // Adjust the styling of the canvas to it is displayed larger.\n ctx.canvas.style.width = \"100%\";\n ctx.canvas.style.height = \"40px\";\n ctx.canvas.style.imageRendering = \"pixelated\";\n // Fill the canvas's pixels based on the given color function.\n for (let i = 0; i < n; ++i) {\n // For each color draw a colored rectangle in the size of a pixel.\n ctx.fillStyle = colors(i / (n - 1));\n ctx.fillRect(i, 0, 1, 1);\n }\n\n // Return the canvas.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}