speice.io/assets/js/b266de79.c9b9535f.js

1 line
446 KiB
JavaScript
Raw Permalink Normal View History

"use strict";(self.webpackChunkspeice_io=self.webpackChunkspeice_io||[]).push([["1225"],{86760:function(e){e.exports=JSON.parse('{"archive":{"blogPosts":[{"id":"2024/11/playing-with-fire-log-density","metadata":{"permalink":"/2024/11/playing-with-fire-log-density","source":"@site/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx","title":"Playing with fire: Tone mapping and color","description":"So far, our plot() function has been fairly simple: map a fractal flame coordinate to a specific pixel,","date":"2024-12-16T21:32:00.000Z","tags":[],"readingTime":6.245,"hasTruncateMarker":true,"authors":[{"name":"Bradlee Speice","socials":{"github":"https://github.com/bspeice"},"key":"bspeice","page":null}],"frontMatter":{"slug":"2024/11/playing-with-fire-log-density","title":"Playing with fire: Tone mapping and color","date":"2024-12-16T21:32:00.000Z","authors":["bspeice"],"tags":[]},"unlisted":false,"lastUpdatedAt":1734402605000,"nextItem":{"title":"Playing with fire: Transforms and variations","permalink":"/2024/11/playing-with-fire-transforms"}},"content":"So far, our `plot()` function has been fairly simple: map a fractal flame coordinate to a specific pixel,\\nand color in that pixel. This works well for simple function systems (like Sierpinski\'s Gasket),\\nbut more complex systems (like the reference parameters) produce grainy images.\\n\\nIn this post, we\'ll refine the image quality and add color to really make things shine.\\n\\n\x3c!-- truncate --\x3e\\n\\n## Image histograms\\n\\n:::note\\nThis post covers sections 4 and 5 of the Fractal Flame Algorithm paper\\n:::\\n\\nOne problem with the current chaos game algorithm is that we waste work\\nbecause pixels are either \\"on\\" (opaque) or \\"off\\" (transparent).\\nIf the chaos game encounters the same pixel twice, nothing changes.\\n\\nTo demonstrate how much work is wasted, we\'ll count each time the chaos game\\nvisits a pixel while iterating. This gives us a kind of image \\"histogram\\":\\n\\nimport chaosGameHistogramSource from \\"!!raw-loader!./chaosGameHistogram\\"\\n\\n<CodeBlock language=\\"typescript\\">{chaosGameHistogramSource}</CodeBlock>\\n\\nWhen the chaos game finishes, we find the pixel encountered most often.\\nFinally, we \\"paint\\" the image by setting each pixel\'s alpha (transparency) value\\nto the ratio of times visited divided by the maximum:\\n\\nimport CodeBlock from \\"@theme/CodeBlock\\";\\n\\nimport paintLinearSource from \\"!!raw-loader!./paintLinear\\"\\n\\n<CodeBlock language=\\"typescript\\">{paintLinearSource}</CodeBlock>\\n\\nimport {SquareCanvas} from \\"../src/Canvas\\";\\nimport FlameHistogram from \\"./FlameHistogram\\";\\nimport {paintLinear} from \\"./paintLinear\\";\\n\\n<SquareCanvas><FlameHistogram paint={paintLinear}/></SquareCanvas>\\n\\n## Tone mapping\\n\\nWhile using a histogram reduces the \\"graining,\\" it also leads to some parts vanishing entirely.\\nIn the reference parameters, the outer circle is still there, but the interior is gone!\\n\\nTo fix this, we\'ll introduce the second major innovation of the fractal flame algorithm: [tone mapping](https://en.wikipedia.org/wiki/Tone_mapping).\\nThis is a technique used in computer graphics to compensate for differences in how\\ncomputers represent brightness, and how people actually see brightness.\\n\\nAs a concrete example, high-dynamic-range (HDR) photography uses this technique to capture\\nscenes with a wide range of brightnesses. To take a picture of something dark,\\nyou need a long exposure time. However, long exposures lead to \\"hot spots\\" (sections that are pure white).\\nBy taking multiple pictures with different exposure times, we can combine them to create\\na final image where everything is visible.\\n\\nIn fractal flames, this \\"tone map\\" is accomplished by scaling brightness according to the _logarithm_\\nof how many times we encounter a pixel. This way, \\"cold spots\\" (pixels the chaos game visits infrequently)\\nare still visible, and \\"hot spots\\" (pixels the chaos game visits frequently) won\'t wash out.\\n\\n<details>\\n