speice.io/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx

---
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={5} paint={paintLinear}/></Canvas>

## Log display

import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic"

<CodeBlock language="typescript">{paintLogarithmicSource}</CodeBlock>

import {paintLogarithmic} from './paintLogarithmic'

<Canvas><FlameHistogram quality={5} paint={paintLogarithmic}/></Canvas>

## Color

import paintColorSource from "!!raw-loader!./paintColor"

<CodeBlock language="typescript">{paintColorSource}</CodeBlock>

import FlameColor from "./FlameColor";

<Canvas><FlameColor quality={15}/></Canvas>