mirror of
https://github.com/bspeice/speice.io
synced 2024-12-23 00:58:09 -05:00
59 lines
1.8 KiB
Plaintext
59 lines
1.8 KiB
Plaintext
---
|
|
slug: 2024/11/playing-with-fire-log-density
|
|
title: "Playing with fire: Log-density and color"
|
|
date: 2024-11-15 14:00:00
|
|
authors: [bspeice]
|
|
tags: []
|
|
---
|
|
|
|
So far, our `plot()` function has been fairly simple; map an input coordinate
|
|
to a specific pixel, and color in that pixel.
|
|
This works well for simple function systems (like Sierpinski's Gasket),
|
|
but more complex systems (like our reference parameters) produce grainy images.
|
|
|
|
Every time we "turn on" pixels that have already been enabled, we're wasting work.
|
|
Can we do something more intelligent with that information?
|
|
|
|
<!-- truncate -->
|
|
|
|
## Image histograms
|
|
|
|
:::note
|
|
This post covers sections 4 and 5 of the Fractal Flame Algorithm paper
|
|
:::
|
|
|
|
To start with, it's worth demonstrating how much work is actually "wasted."
|
|
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 paintLinearSource from "!!raw-loader!./paintLinear"
|
|
|
|
<CodeBlock language="typescript">{paintLinearSource}</CodeBlock>
|
|
|
|
import {SquareCanvas} from "../src/Canvas";
|
|
import FlameHistogram from "./FlameHistogram";
|
|
import {paintLinear} from "./paintLinear";
|
|
|
|
<SquareCanvas><FlameHistogram quality={5} paint={paintLinear}/></SquareCanvas>
|
|
|
|
## Log display
|
|
|
|
import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic"
|
|
|
|
<CodeBlock language="typescript">{paintLogarithmicSource}</CodeBlock>
|
|
|
|
import {paintLogarithmic} from './paintLogarithmic'
|
|
|
|
<SquareCanvas><FlameHistogram quality={10} paint={paintLogarithmic}/></SquareCanvas>
|
|
|
|
## Color
|
|
|
|
import paintColorSource from "!!raw-loader!./paintColor"
|
|
|
|
<CodeBlock language="typescript">{paintColorSource}</CodeBlock>
|
|
|
|
import FlameColor from "./FlameColor";
|
|
|
|
<SquareCanvas><FlameColor quality={15}/></SquareCanvas> |