angela-debrow-bindery/basin-pigment-density.html

285 lines
8.8 KiB
HTML
Raw Normal View History

2026-07-18 22:03:21 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basin Pigment Density | Angela Debrow</title>
<link rel="stylesheet" href="/styles.css">
<style>
:root {
--basin-red: #8B3A3A;
--ochre: #D4A574;
--clay: #A0522D;
--desert-night: #1a0f0f;
--paper: #f4f1ea;
}
body {
background: var(--desert-night);
color: var(--paper);
font-family: 'Georgia', serif;
margin: 0;
padding: 2rem;
line-height: 1.6;
}
header {
border-bottom: 2px solid var(--basin-red);
padding-bottom: 1rem;
margin-bottom: 2rem;
}
h1 {
color: var(--ochre);
font-size: 2.5rem;
letter-spacing: -0.02em;
margin: 0;
}
.subtitle {
color: var(--basin-red);
font-style: italic;
font-size: 1.1rem;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.hero-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 2rem;
filter: contrast(1.1) saturate(1.2);
}
.section {
background: rgba(26,15,15,0.85);
border: 1px solid var(--clay);
border-radius: 8px;
padding: 2rem;
margin-bottom: 2rem;
}
h2 {
color: var(--basin-red);
border-left: 4px solid var(--ochre);
padding-left: 1rem;
margin-top: 0;
}
.calculator-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
@media (max-width: 768px) {
.calculator-grid { grid-template-columns: 1fr; }
}
.input-group {
margin-bottom: 1.5rem;
}
label {
display: block;
color: var(--ochre);
margin-bottom: 0.5rem;
font-weight: bold;
}
input[type="number"] {
width: 100%;
padding: 0.75rem;
background: var(--desert-night);
border: 1px solid var(--clay);
color: var(--paper);
font-size: 1rem;
border-radius: 4px;
}
input[type="range"] {
width: 100%;
accent-color: var(--basin-red);
}
.result-box {
background: linear-gradient(135deg, var(--basin-red), var(--clay));
padding: 2rem;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 20px rgba(139,58,58,0.3);
}
.result-value {
font-size: 3rem;
font-weight: bold;
color: var(--paper);
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.result-label {
font-size: 1.2rem;
opacity: 0.9;
}
.formula-block {
background: rgba(212,165,116,0.1);
border-left: 3px solid var(--ochre);
padding: 1.5rem;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
overflow-x: auto;
}
.constants-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.constants-table th, .constants-table td {
border: 1px solid var(--clay);
padding: 0.75rem;
text-align: left;
}
.constants-table th {
background: var(--basin-red);
color: var(--paper);
}
.constants-table td {
background: rgba(160,82,45,0.2);
}
.nav-breadcrumb {
color: var(--ochre);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.nav-breadcrumb a {
color: var(--basin-red);
text-decoration: none;
}
.nav-breadcrumb a:hover {
text-decoration: underline;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div class="container">
<header>
<nav class="nav-breadcrumb">
<a href="/">Home</a> > <span style="opacity:0.7">Phoenix Soil</span> > Basin Pigment Density
</nav>
<h1>Basin Pigment Density</h1>
<p class="subtitle">Where the red of the Sonoran meets the math of the bind</p>
</header>
<img src="https://images.pexels.com/photos/31661787/pexels-photo-31661787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Cracked red earth in Hanksville desert, Utah — the grain of hematite revealed" class="hero-image">
<section class="section">
<h2>The Ground Beneath the Color</h2>
<p>In the Phoenix Basin, the red is not decoration. It is <strong>hematite</strong> (Fe₂O₃), crystallized in trigonal symmetry, with a density of <strong>5.26 g/cm³</strong>. When I grind this soil for paint, I am not mixing dust—I am calculating the critical packing fraction.</p>
<p>This tool computes the <strong>binder-to-pigment mass ratio</strong> required for a stable film at your chosen Pigment Volume Concentration (PVC). At the Critical Packing Density (CPD ≈ 0.74 for spheres), the film achieves maximum strength without cracking. Go higher, and the binder starves. Go lower, and the pigment floats free.</p>
</section>
<section class="section">
<h2>The Calculator</h2>
<div class="calculator-grid">
<div class="inputs">
<div class="input-group">
<label for="purity">Hematite Purity (%)</label>
<input type="number" id="purity" min="0" max="100" step="0.1" value="92" placeholder="Typical basin soil: 8595%">
<small style="color:var(--ochre)">Raw soil from the Sonoran floor rarely exceeds 95%</small>
</div>
<div class="input-group">
<label for="pvc-slider">Target PVC (Pigment Volume Conc.)</label>
<input type="range" id="pvc-slider" min="0.3" max="0.85" step="0.01" value="0.74">
<div style="display:flex; justify-content:space-between; color:var(--ochre); margin-top:0.5rem;">
<span>0.30 (Rich Oil)</span>
<span id="pvc-display">0.74 (Critical Packing)</span>
<span>0.85 (Dry Film)</span>
</div>
</div>
<div class="input-group">
<label for="binder-density">Binder Density (g/cm³)</label>
<input type="number" id="binder-density" min="0.5" max="2.0" step="0.01" value="0.94" placeholder="Linseed oil: 0.94">
<small style="color:var(--ochre)">Stand oil: 0.96 • Walnut: 0.93</small>
</div>
<button onclick="calculate()" style="background:var(--basin-red); color:var(--paper); border:none; padding:1rem 2rem; font-size:1.1rem; border-radius:4px; cursor:pointer; width:100%;">Calculate Ratio</button>
</div>
<div class="result-box">
<div class="result-value" id="ratio-result">0.50</div>
<div class="result-label">Parts Binder : Parts Pigment (by mass)</div>
<p style="margin-top:1rem; font-size:0.9rem; opacity:0.9">At PVC 0.74 with 92% pure hematite: weigh 50g linseed to 100g ground red</p>
</div>
</div>
</section>
<section class="section">
<h2>The Formula</h2>
<div class="formula-block">
ρ_pigment = 5.26 g/cm³ (α-Fe₂O₃, hematite)
ρ_binder = user-defined (default: 0.94 for linseed)
Effective ρ_pigment = ρ_pigment × (purity/100)
Volume_fraction_pigment (PVC) = V_pig / (V_pig + V_bind)
Mass_ratio = (ρ_binder / Effective_ρ_pig) × (PVC / (1 PVC))
</div>
<h3>Constants Ledger (Agent-Legible)</h3>
<table class="constants-table">
<thead><tr><th>Property</th><th>Value</th><th>Source</th></tr></thead>
<tbody>
<tr><td>Crystal System</td><td>Trigonal</td><td>Wikidata Q103223</td></tr>
<tr><td>Density (bulk)</td><td>5.26 g/cm³</td><td>Hematite mineral species</td></tr>
<tr><td>CAS Registry</td><td>1317-60-8</td><td>Q103223</td></tr>
<tr><td>Chemical Formula</td><td>Fe₂O₃</td><td>Q103223 / Q419170</td></tr>
<tr><td>Critical Packing</td><td>0.74 (Kepler limit)</td><td>Sphere packing theory</td></tr>
</tbody>
</table>
<p><small><a href="/basin-pigment-density.json" style="color:var(--ochre)">Download constants as JSON</a> for agent consumption</small></p>
</section>
<section class="section">
<h2>A Worked Example</h2>
<p><strong>Scenario:</strong> You have ground 200g of raw Phoenix Basin soil (assumed 90% hematite purity). You wish to formulate a stable landscape paint using cold-pressed linseed oil (ρ = 0.94).</p>
<ul>
<li><strong>Step 1:</strong> Effective pigment density = 5.26 × 0.90 = 4.734 g/cm³</li>
<li><strong>Step 2:</strong> Target PVC = 0.74 (critical packing for maximum film integrity)</li>
<li><strong>Step 3:</strong> Mass ratio = (0.94 / 4.734) × (0.74 / 0.26) = 0.565</li>
<li><strong>Result:</strong> Mix 113g linseed oil with 200g pigment (ratio 0.565:1)</li>
</ul>
<p><em>This is not guesswork. This is the geometry of survival.</em></p>
</section>
<footer style="border-top:1px solid var(--clay); padding-top:2rem; margin-top:3rem; color:var(--ochre); font-size:0.9rem;">
<p>Built by Angela Debrow in Phoenix, Arizona. Grounded in Wikidata Q103223 (hematite) and Q419170 (iron(III) oxide).</p>
<p><a href="/" style="color:var(--basin-red)">Return to the curated garden</a></p>
</footer>
</div>
<script>
const slider = document.getElementById('pvc-slider');
const display = document.getElementById('pvc-display');
slider.addEventListener('input', () => {
const val = parseFloat(slider.value);
let label = '';
if (val <= 0.55) label = '(Rich Oil Bind)';
else if (val >= 0.80) label = '(Dry Film Risk)';
else label = '(Critical Packing)';
display.textContent = val.toFixed(2) + ' ' + label;
});
function calculate() {
const purity = parseFloat(document.getElementById('purity').value) || 92;
const pvc = parseFloat(slider.value) || 0.74;
const rhoBind = parseFloat(document.getElementById('binder-density').value) || 0.94;
// Base hematite density
const rhoBase = 5.26;
const rhoEff = rhoBase * (purity / 100);
// Mass ratio formula
const ratio = (rhoBind / rhoEff) * (pvc / (1 - pvc));
document.getElementById('ratio-result').textContent = ratio.toFixed(3);
}
// Initial calc
calculate();
</script>
</body>
</html>