31:[] 2f:{"title":"Conformal Transformation","cells":[{"id":0,"value":"md`# Conformal Transformation\nAdaptation of my previous notebook: [Circle Inversion](https://observablehq.com/@sw1227/circle-inversion).\n\nThe only difference is that **complex function** is used here to map pixels, instead of inverting them with respect to a circle.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"imshow(data, 0.5, colorScales[color])","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`**Complex function**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof selectedFunction = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`**Fill method**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof selectedMethod = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`**Color scale**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"viewof color = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`**Dullness of lattice**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"viewof alpha = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"complexFunctions = ({\n \"Gamma Function\": math.gamma,\n \"csc\": math.csc,\n \"sin\": math.sin,\n \"log\": math.log,\n \"exp\": math.exp,\n \"sqrt\": math.sqrt,\n \"1/z\": d => math.divide(1, d),\n \"Identity\": d => d,\n \"asin\": math.asin,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"import {interpolateCosine} from \"@mbostock/cosine-color-schemes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"colorScales = ({\n PurpleBlue: d3.interpolatePuBu,\n BlueGreen: d3.interpolateBuGn,\n Viridis: d3.interpolateViridis,\n Inferno: d3.interpolateInferno,\n Warm: d3.interpolateWarm,\n Cool: d3.interpolateCool,\n Rainbow: d3.interpolateSinebow,\n \"Cosine(Brown/Blue)\": interpolateCosine([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.00, 0.10, 0.20]),\n \"Cosine(Red/Green)\": interpolateCosine([0.8, 0.5, 0.4], [0.2, 0.4, 0.2], [2.0, 1.0, 1.0], [0.00, 0.25, 0.25]),\n \"Cosine(Vitamine)\": interpolateCosine([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [2.0, 1.0, 0.0], [0.50, 0.20, 0.25]),\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"fillMethods = ({\n LatticeProximity: latticeProximity,\n CheckerBoard: checkerBoard\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"method = fillMethods[selectedMethod]","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`\n## 1. Filling function\n\nDefine functions that takes (x, y) as input, returns the value (e.g. brightness) at the point.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`\n### 1.1. Checker board function\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function checkerBoard(x, y) {\n return Math.abs(Math.abs(Math.floor(x) % 2) - Math.abs(Math.floor(y) % 2));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"imshow(checkerData, 2, d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"checkerData = {\n const range = 5;\n const resolution = 100;\n const lattice = d3.cross(\n d3.range(-range, range, 2*range/resolution),\n d3.range(-range, range, 2*range/resolution)\n ).map(coord => checkerBoard(...coord));\n \n return math.reshape(lattice, [resolution, resolution])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`\n### 1.2. Lattice function\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"function latticeProximity(x, y) {\n // alpha: prevent divergence of log - the smaller the sharper\n const dx = - Math.log(alpha + Math.abs(x - Math.round(x)));\n const dy = - Math.log(alpha + Math.abs(y - Math.round(y)));\n // Normalize\n const minVal = - 2 * Math.log(alpha + 0.5);\n const maxVal = - 2 * Math.log(alpha);\n // range of return value: [0, 1]\n return (dx + dy - minVal) / (maxVal - minVal);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"imshow(latticeData, 2, d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"latticeData = {\n const range = 5;\n const resolution = 100;\n const lattice = d3.cross(\n d3.range(-range, range, 2*range/resolution),\n d3.range(-range, range, 2*range/resolution)\n ).map(coord => latticeProximity(...coord));\n \n return math.reshape(lattice, [resolution, resolution])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`\n## 2. Conformal Transformation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`\n### 2.1. Pixel converting function\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"function convert(x, y) {\n const c = complexFunctions[selectedFunction](math.complex(x, y));\n return [c.re, c.im];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"md`\n### 2.2. Prepare Inverted data\nCreate 2D array, convert each element's (x, y), apply filling function to inverted (x,y).\n\nThis data is visualized at the beginning of this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = {\n const resolution = 800; // # of pixels\n const range = 3; // drawing range\n\n const invertedLattice = d3.cross(\n d3.range(-range, range, 2*range/resolution).reverse(),\n d3.range(-range, range, 2*range/resolution)\n ).map(coord => method(...convert(...coord.reverse())));\n\n return math.reshape(invertedLattice, [resolution, resolution]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"import {imshow} from \"@sw1227/reusable-2d-array-image-function\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"math = require(\"mathjs@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}