mirror of
https://github.com/bspeice/speice.io
synced 2024-12-23 00:58:09 -05:00
47 lines
1.4 KiB
Plaintext
47 lines
1.4 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
|
|
|
|
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 Canvas from "../src/Canvas";
|
|
import FlameHistogram from "./FlameHistogram";
|
|
import {paintLinear} from "./paintLinear";
|
|
|
|
<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas> -->
|
|
|
|
## Log display
|
|
|
|
import {paintLogarithmic} from './paintLogarithmic'
|
|
|
|
<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas> -->
|
|
|
|
## Color
|
|
|
|
import FlameColor from "./FlameColor";
|
|
|
|
<Canvas><FlameColor quality={10}/></Canvas> |