ImageAccess example notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# IPLabImageAccess example notebook\n",
    "\n",
    "This notebook serves as a reference on how the `IPLabImageAccess` class can be used to create and modify images in JavaScript. It only shows the basic functions and their default behavior, so check out the [documentation](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki) to get more information on the available functions and their input parameters.\n",
    "\n",
    "First let's import the class as `const Image` as recommended."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-07-25T23:01:47.923745Z",
     "start_time": "2021-07-25T23:01:47.914Z"
    }
   },
   "outputs": [],
   "source": [
    "var Image = require('./ImageAccess.js');"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creating new images\n",
    "New images can be created by specifying the height and width of the image, as well as the initial value of the pixels"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-07-25T23:01:49.796398Z",
     "start_time": "2021-07-25T23:01:49.784Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "5x5 image initialized to 0:\n",
      "\n",
      "[[ 0 0 0 0 0 ]\n",
      " [ 0 0 0 0 0 ]\n",
      " [ 0 0 0 0 0 ]\n",
      " [ 0 0 0 0 0 ]\n",
      " [ 0 0 0 0 0 ]]\n",
      "\n",
      "\n",
      "5x5 image initialized to 65:\n",
      "\n",
      "[[ 65 65 65 65 65 ]\n",
      " [ 65 65 65 65 65 ]\n",
      " [ 65 65 65 65 65 ]\n",
      " [ 65 65 65 65 65 ]\n",
      " [ 65 65 65 65 65 ]]\n",
      "\n",
      "\n",
      "5x5 color image initialized to 3:\n",
      "\n",
      " [\n",
      "  [ [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ] ],\n",
      "  [ [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ] ],\n",
      "  [ [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ] ],\n",
      "  [ [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ] ],\n",
      "  [ [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ], [ 3, 3, 3 ] ]\n",
      "]\n"
     ]
    }
   ],
   "source": [
    "// create a 5 by 5 image initialized to 0\n",
    "var img = new Image(5,5);\n",
    "// .visualize() returns a formatted string, which makes it easier to print the image\n",
    "console.log('5x5 image initialized to 0:\\n\\n' + img.visualize());\n",
    "\n",
    "// create a 5 by 5 image initialized to 65\n",
    "var img = new Image(5,5, {init_value:65});\n",
    "console.log('\\n5x5 image initialized to 65:\\n\\n' + img.visualize());\n",
    "\n",
    "// create a 5 by 5 color image initialized to 3\n",
    "// visualization of color images is not yet implemented, so use .toArray() instead\n",
    "var img = new Image(5,5, {init_value:3, rgb:true});\n",
    "console.log('\\n5x5 color image initialized to 3:\\n\\n', img.toArray());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creating images from JavaScript arrays\n",
    "An image can also be created from an existing JavaScript array by passing it to the constructor."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:43.747550Z",
     "start_time": "2021-03-17T16:33:43.742Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "IPLabImageAccess {\n",
      "  image: [\n",
      "    [ 205, 4, 249, 228, 12 ],\n",
      "    [ 39, 12, 112, 70, 241 ],\n",
      "    [ 50, 46, 60, 199, 192 ],\n",
      "    [ 51, 46, 239, 18, 46 ],\n",
      "    [ 116, 34, 61, 19, 249 ]\n",
      "  ],\n",
      "  nx: 5,\n",
      "  ny: 5,\n",
      "  min: 4,\n",
      "  max: 249,\n",
      "  change_check: false\n",
      "}\n"
     ]
    }
   ],
   "source": [
    "// initialize a 5x5 array filled with random integers in [0,255]\n",
    "var rand_arr = new Array(5);\n",
    "for(var i=0; i < 5; i++){\n",
    "    rand_arr[i] = new Array(5);\n",
    "    for(var j=0; j < 5; j++){\n",
    "        rand_arr[i][j] = parseInt(Math.random() * 255);\n",
    "    }\n",
    "}\n",
    "\n",
    "// create a new image from this array\n",
    "var img = new Image(rand_arr);\n",
    "console.log(img);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Accessing single pixels of an image\n",
    "To access single pixels, the [`setPixel`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#-setpixel) and [`getPixel`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#getPixel) methods can be used."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:48.721438Z",
     "start_time": "2021-03-17T16:33:48.714Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The pixel at (x=2, y=3) has value 239\n",
      "\n",
      "Now this pixel has value 0:\n",
      "\n",
      "[[ 205   4 249 228  12 ]\n",
      " [  39  12 112  70 241 ]\n",
      " [  50  46  60 199 192 ]\n",
      " [  51  46   0  18  46 ]\n",
      " [ 116  34  61  19 249 ]]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "// retrieve the pixel at (x=2, y=3) of the image defined in the previous cell\n",
    "var value = img.getPixel(2, 3);\n",
    "console.log('The pixel at (x=2, y=3) has value ' + value);\n",
    "\n",
    "// set the pixel at (x=2, y=3) to 0\n",
    "img.setPixel(2, 3, 0);\n",
    "console.log('\\nNow this pixel has value 0:\\n\\n' + img.visualize());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Accessing rows and columns of an image\n",
    "To extract a row or a column, the [`getRow`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#-getrow) and [`getColumn`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#-getcolumn) methods can be used. These methods return the row or column as another `IPLabImageAccess` object that only contains one row."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:53.018533Z",
     "start_time": "2021-03-17T16:33:53.012Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The second column: [[  4 12 46 46 34 ]]\n",
      "\n",
      "\n",
      "The third row: [[  50  46  60 199 192 ]]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "// extract the 2nd column (index 1) of the image\n",
    "var column_1 = img.getColumn(1);\n",
    "console.log('The second column: ' + column_1.visualize());\n",
    "\n",
    "// extract the 3rd row (index 2) of the image\n",
    "var row_2 = img.getRow(2);\n",
    "console.log('\\nThe third row: ' + row_2.visualize());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To insert a row or a column, the [`putRow`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#-putrow) and [`putColumn`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#-putcolumn) methods can be used. The row/column passed to these methods should be an `IPLabImageAccess` object containing only one row or column."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:54.115985Z",
     "start_time": "2021-03-17T16:33:54.108Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The image after exchanging the extracted row and column: \n",
      "[[ 205  50 249 228  12 ]\n",
      " [  39  46 112  70 241 ]\n",
      " [   4  12  46  46  34 ]\n",
      " [  51 199   0  18  46 ]\n",
      " [ 116 192  61  19 249 ]]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "// insert the 3rd row into the 2nd column\n",
    "img.putColumn(1, row_2);\n",
    "// insert the 2nd column into the 3rd row\n",
    "img.putRow(2, column_1);\n",
    "console.log('The image after exchanging the extracted row and column: \\n' + img.visualize());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Accessing neighborhood / sub-image\n",
    "The neighborhood around a pixel can be extracted using the [`getNbh`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#-getnbh) method, which returns another `IPLabImageAccess` object. The specified location (origin) is in the center of the extracted neighborhood. By default, as for all methods, a mirror-padding is applied when accessing pixels outside of the image."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:54.988031Z",
     "start_time": "2021-03-17T16:33:54.981Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[[ 112  70 241 241  70 ]\n",
      " [  46  46  34  34  46 ]\n",
      " [   0  18  46  46  18 ]]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "// extract the 3x5 neighborhood around position (x=4, y=2)\n",
    "var nbh = img.getNbh(4, 2, 5, 3);\n",
    "console.log(nbh.visualize());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A sub-image can be inserted into an existing image with the [`putSubImage`](https://github.com/Biomedical-Imaging-Group/IPLabImageAccess/wiki#-putsubimage) method. The specified location (origin) is in the top-left corder of the sub-image."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:55.790318Z",
     "start_time": "2021-03-17T16:33:55.783Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[[ 205  50 249 228  12 ]\n",
      " [ 112  70 241 241  70 ]\n",
      " [  46  46  34  34  46 ]\n",
      " [   0  18  46  46  18 ]\n",
      " [ 116 192  61  19 249 ]]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "// insert the extracted neighborhood at position (x=0, y=1)\n",
    "img.putSubImage(0, 1, nbh);\n",
    "console.log(img.visualize());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Retrieving image properties"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:56.853722Z",
     "start_time": "2021-03-17T16:33:56.847Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The shape of the image:  [ 5, 5 ]\n",
      "The width of the image:  5\n",
      "The width of the image:  5\n",
      "The number of dimensions of the image:  2\n",
      "The minimum value of the image:  0\n",
      "The maximum value of the image:  249\n"
     ]
    }
   ],
   "source": [
    "// get the size (shape) of the image\n",
    "console.log('The shape of the image: ', img.shape());\n",
    "// the width\n",
    "console.log('The width of the image: ', img.nx);\n",
    "// the height\n",
    "console.log('The width of the image: ', img.ny);\n",
    "// the number of dimensions\n",
    "console.log('The number of dimensions of the image: ', img.ndims());\n",
    "// the minimum value\n",
    "console.log('The minimum value of the image: ', img.getMin());\n",
    "// the maximum value\n",
    "console.log('The maximum value of the image: ', img.getMax());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Visualization of images in JavaScript using .visualize()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-17T16:33:58.019746Z",
     "start_time": "2021-03-17T16:33:58.009Z"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[[    -1.200    50.000   249.000   228.000    12.000 ]\n",
      " [   112.000    13.775   241.000   241.000    70.000 ]\n",
      " [    46.000    46.000   132.293    34.000    46.000 ]\n",
      " [     0.000    18.000    46.000     0.000    18.000 ]\n",
      " [   116.000   192.000    61.000    19.000 -1300.000 ]]\n",
      "\n",
      "[[    -1    50   249   228    12 ]\n",
      " [   112    14   241   241    70 ]\n",
      " [    46    46   132    34    46 ]\n",
      " [     0    18    46     0    18 ]\n",
      " [   116   192    61    19 -1300 ]]\n",
      "\n",
      "[[    -1.20000    50.00000   249.00000   228.00000    12.00000 ]\n",
      " [   112.00000    13.77484   241.00000   241.00000    70.00000 ]\n",
      " [    46.00000    46.00000   132.29348    34.00000    46.00000 ]\n",
      " [     0.00000    18.00000    46.00000     0.00000    18.00000 ]\n",
      " [   116.00000   192.00000    61.00000    19.00000 -1300.00000 ]]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "// define negative fractional\n",
    "img.setPixel(0,0,-1.2);\n",
    "// define very small number with negative scientific notation\n",
    "img.setPixel(1,1,137748377633.29e-10);\n",
    "// define number with many digits without scientific notation\n",
    "img.setPixel(2,2,132.29347733473883);\n",
    "// define very small number without scientific notation\n",
    "img.setPixel(3,3,0.0000000000002);\n",
    "// define negative number with positive scientific notation\n",
    "img.setPixel(4,4,-1.3e3);\n",
    "// visualize the image with 3 decimals\n",
    "console.log(img.visualize());\n",
    "// visualize the image with 0 decimals\n",
    "console.log(img.visualize(0));\n",
    "// visualize the image with 5 decimals\n",
    "console.log(img.visualize(5));"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Javascript (Node.js)",
   "language": "javascript",
   "name": "javascript"
  },
  "language_info": {
   "file_extension": ".js",
   "mimetype": "application/javascript",
   "name": "javascript",
   "version": "12.13.0"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}