mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2025-07-05 07:44:54 -04:00
Code Issues Releases Wiki Activity

Log density visualization

Browse Source
This commit is contained in:
Bradlee Speice
2024-12-01 21:57:10 -05:00
parent 79b66337e8
commit 2e8a6d1ce7
20 changed files with 206 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
blog/2024-11-15-playing-with-fire/3-log-density/index.mdx
View File

@ -19,17 +19,23 @@ Can we do something more intelligent with that information?
## Image histograms
To start with, it's worth demonstrating how much work is actually "wasted."
We'll render the reference image again, but this time, counting the times
we tried to turn on a pixel.
We'll render the reference image again, but this time, set each pixel's transparency
based on how many times we encounter it in the chaos game:
import CodeBlock from "@theme/CodeBlock";
import plotHistogramSource from "!!raw-loader!./plotHistogram";
<CodeBlock language="typescript">{plotHistogramSource}</CodeBlock>
import paintLinearSource from "!!raw-loader!./paintLinear"
<CodeBlock language="typescript">{paintLinearSource}</CodeBlock>
import Canvas from "../src/Canvas";
import FlameHistogram from "./FlameHistogram";
import {paintLinear} from "./paintLinear";
<Canvas width={400} height={400} hidden={true}>
<FlameHistogram/>
</Canvas>
<Canvas><FlameHistogram quality={5} paintFn={paintLinear}/></Canvas>
## Log display
import {paintLogarithmic} from './paintLogarithmic'
<Canvas><FlameHistogram quality={10} paintFn={paintLogarithmic}/></Canvas>