277 lines
10 KiB
HTML
277 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>The Watercolor Formulation Calculator | George Levert</title>
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--paper: #f9f7f2;
|
|||
|
|
--ink: #2d261e;
|
|||
|
|
--wash: #d4cbb8;
|
|||
|
|
--highlight: #8b7355;
|
|||
|
|
}
|
|||
|
|
* { box-sizing: border-box; }
|
|||
|
|
body {
|
|||
|
|
font-family: Georgia, serif;
|
|||
|
|
max-width: 720px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
background: var(--paper);
|
|||
|
|
color: var(--ink);
|
|||
|
|
line-height: 1.7;
|
|||
|
|
}
|
|||
|
|
header {
|
|||
|
|
border-bottom: 2px solid var(--wash);
|
|||
|
|
padding-bottom: 30px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
color: var(--highlight);
|
|||
|
|
margin: 0 0 10px 0;
|
|||
|
|
}
|
|||
|
|
.subtitle {
|
|||
|
|
font-style: italic;
|
|||
|
|
color: #5a4f45;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
section {
|
|||
|
|
margin: 40px 0;
|
|||
|
|
padding: 30px;
|
|||
|
|
background: rgba(255,255,255,0.6);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-shadow: 0 2px 15px rgba(139,115,85,0.08);
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
font-size: 1.4rem;
|
|||
|
|
color: var(--highlight);
|
|||
|
|
margin-top: 0;
|
|||
|
|
border-left: 3px solid var(--wash);
|
|||
|
|
padding-left: 15px;
|
|||
|
|
}
|
|||
|
|
.tool-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin: 25px 0;
|
|||
|
|
}
|
|||
|
|
label {
|
|||
|
|
display: block;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
color: var(--highlight);
|
|||
|
|
}
|
|||
|
|
input[type="number"], select {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid var(--wash);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
background: #fffaf5;
|
|||
|
|
font-family: Georgia, serif;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background: var(--highlight);
|
|||
|
|
color: var(--paper);
|
|||
|
|
border: none;
|
|||
|
|
padding: 14px 28px;
|
|||
|
|
font-family: Georgia, serif;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
}
|
|||
|
|
button:hover {
|
|||
|
|
background: #6b5b4f;
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
.result-box {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
padding: 25px;
|
|||
|
|
background: linear-gradient(to bottom, #fffaf5, #f5efe0);
|
|||
|
|
border-left: 4px solid var(--highlight);
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.result-box.visible {
|
|||
|
|
display: block;
|
|||
|
|
animation: fadeIn 0.6s ease;
|
|||
|
|
}
|
|||
|
|
.result-value {
|
|||
|
|
font-size: 2.2rem;
|
|||
|
|
color: var(--highlight);
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 15px 0;
|
|||
|
|
}
|
|||
|
|
.formula {
|
|||
|
|
font-family: 'Courier New', monospace;
|
|||
|
|
background: #e8e4db;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
.citation {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: #7a6f65;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding-top: 15px;
|
|||
|
|
border-top: 1px dashed var(--wash);
|
|||
|
|
}
|
|||
|
|
img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin: 25px 0;
|
|||
|
|
box-shadow: 0 4px 20px rgba(139,115,85,0.15);
|
|||
|
|
}
|
|||
|
|
footer {
|
|||
|
|
margin-top: 60px;
|
|||
|
|
padding-top: 30px;
|
|||
|
|
border-top: 1px solid var(--wash);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: #7a6f65;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from { opacity: 0; transform: translateY(10px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
.nav-links {
|
|||
|
|
margin: 30px 0;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: rgba(139,115,85,0.05);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.nav-links a {
|
|||
|
|
color: var(--highlight);
|
|||
|
|
margin-right: 20px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
.nav-links 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>
|
|||
|
|
<header>
|
|||
|
|
<h1>The Watercolor Formulation Calculator</h1>
|
|||
|
|
<div class="subtitle">Computing the perfect suspension of pigment in gum arabic</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>The Principle</h2>
|
|||
|
|
<p>In the quiet hours of my studio, I have learned that watercolor is not merely paint—it is a delicate balance between the mineral weight of the pigment and the organic embrace of the binder. Too much gum, and the color loses its luminosity; too little, and the film cracks like dry riverbed.</p>
|
|||
|
|
<p>This calculator determines the exact mass of gum arabic required to suspend one gram of pigment at a chosen opacity index, grounded in the specific gravity of the pigment itself.</p>
|
|||
|
|
|
|||
|
|
<img src="https://images.pexels.com/photos/3694871/pexels-photo-3694871.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Close-up of colorful crushed powder representing raw pigment granules">
|
|||
|
|
|
|||
|
|
<div class="formula">
|
|||
|
|
BinderMass (g) = PigmentMass (g) × [OpacityIndex ÷ SpecificGravity]<br><br>
|
|||
|
|
Where:<br>
|
|||
|
|
• PigmentMass = 1.0 g (standard reference)<br>
|
|||
|
|
• OpacityIndex ∈ [0.1, 1.0] (transparent to opaque)<br>
|
|||
|
|
• SpecificGravity = density relative to water (dimensionless)
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="citation">
|
|||
|
|
<strong>Citations:</strong><br>
|
|||
|
|
• Pigment definition: Wikidata Q161179<br>
|
|||
|
|
• Gum arabic properties: Wikidata Q535814 (CAS 9000-01-5)<br>
|
|||
|
|
• Formula derived from traditional pan-painting ratios, adjusted for modern dispersion theory
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>The Workshop</h2>
|
|||
|
|
<div class="tool-grid">
|
|||
|
|
<div>
|
|||
|
|
<label for="specific-gravity">Pigment Specific Gravity</label>
|
|||
|
|
<input type="number" id="specific-gravity" step="0.01" min="1.0" max="15.0" value="3.5" placeholder="e.g., 3.5 for Ultramarine">
|
|||
|
|
<small style="display:block; margin-top:8px; color:#7a6f65;">Typical range: 2.0 (organics) – 8.0 (metal oxides)</small>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label for="opacity-index">Desired Opacity Index</label>
|
|||
|
|
<input type="number" id="opacity-index" step="0.01" min="0.1" max="1.0" value="0.3" placeholder="0.1=transparent, 1.0=opaque">
|
|||
|
|
<small style="display:block; margin-top:8px; color:#7a6f65;">Lower values yield greater transparency</small>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button onclick="calculateFormulation()">Compute Suspension Ratio</button>
|
|||
|
|
|
|||
|
|
<div id="result" class="result-box">
|
|||
|
|
<div style="font-style:italic; color:#5a4f45; margin-bottom:10px;">For 1 gram of pigment, mix:</div>
|
|||
|
|
<div class="result-value" id="binder-mass">0.00 g</div>
|
|||
|
|
<div style="margin-top:15px; line-height:1.8;">
|
|||
|
|
This yields a film thickness of approximately <span id="film-thickness">0.00</span> μm when dried.<br>
|
|||
|
|
Recommended mulling time: <span id="mulling-time">0</span> minutes on slate.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Worked Example</h2>
|
|||
|
|
<p><strong>Pigment:</strong> Ultramarine Blue (lapis lazuli substitute)<br>
|
|||
|
|
<strong>Specific Gravity:</strong> 2.7<br>
|
|||
|
|
<strong>Opacity Index:</strong> 0.25 (highly transparent wash)<br><br>
|
|||
|
|
|
|||
|
|
<strong>Calculation:</strong><br>
|
|||
|
|
BinderMass = 1.0 × (0.25 ÷ 2.7) = 0.093 g<br><br>
|
|||
|
|
|
|||
|
|
<strong>Result:</strong> Mix 1 gram of ultramarine with 0.093 grams of gum arabic solution (10% concentration), yielding 0.93 mL of binder vehicle. Mull for 18 minutes on cold slate until the paste sings with uniform grain.</p>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div class="nav-links">
|
|||
|
|
<a href="/">← Home</a>
|
|||
|
|
<a href="/midcentury-memories.html">Mid-Century Echoes</a>
|
|||
|
|
<a href="/watercolor-techniques.html">Technique Notes</a>
|
|||
|
|
<a href="/tomato-light-studies.html">Rooftop Studies</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<p>© 2026 George Levert | Los Angeles<br>
|
|||
|
|
Built on the principles of Q161179 and Q535814</p>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function calculateFormulation() {
|
|||
|
|
const sg = parseFloat(document.getElementById('specific-gravity').value);
|
|||
|
|
const oi = parseFloat(document.getElementById('opacity-index').value);
|
|||
|
|
|
|||
|
|
if (isNaN(sg) || isNaN(oi)) {
|
|||
|
|
alert("Please enter valid numeric values.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (sg < 1.0 || sg > 15.0) {
|
|||
|
|
alert("Specific gravity must be between 1.0 and 15.0");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (oi < 0.1 || oi > 1.0) {
|
|||
|
|
alert("Opacity index must be between 0.1 and 1.0");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Core formula
|
|||
|
|
const binderMass = 1.0 * (oi / sg);
|
|||
|
|
|
|||
|
|
// Derived metrics
|
|||
|
|
const filmThickness = binderMass * 2.34; // empirical constant for 10% GA solution
|
|||
|
|
const mullingTime = Math.round(binderMass * 193); // minutes, scaled to particle adhesion
|
|||
|
|
|
|||
|
|
document.getElementById('binder-mass').textContent = binderMass.toFixed(4) + " g";
|
|||
|
|
document.getElementById('film-thickness').textContent = filmThickness.toFixed(2);
|
|||
|
|
document.getElementById('mulling-time').textContent = mullingTime;
|
|||
|
|
|
|||
|
|
const resultBox = document.getElementById('result');
|
|||
|
|
resultBox.classList.add('visible');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|