118 lines
4.2 KiB
HTML
118 lines
4.2 KiB
HTML
<div class="wompum-demo max-w-2xl mx-auto">
|
|
<h2 class="text-2xl font-bold mb-4">What are the color grids?</h2>
|
|
|
|
<p>The color scheme on this website is inspired by <em><a href="http://n2t.net/ark:/65665/ws63912f5dd-e703-4759-8c31-33ac98b3c190">Constitutional Wampum</a></em> by Robert Houle. The site uses the following protocol to generate the colorful wampum style grid.</p>
|
|
|
|
<div class="mb-8">
|
|
<label class="block mb-2">Enter text to generate a grid:</label>
|
|
<input type="text"
|
|
class="w-full p-2 border rounded font-iosevka bg-sand-100 dark:bg-gray-800"
|
|
placeholder="Type something..."
|
|
value="{{ .Site.Title}}"
|
|
oninput="updateWompumDemoGrid(this.value)">
|
|
</div>
|
|
|
|
<p>First we generate a sigil by removing spaces, turning to lowercase, removing anything that isn't a consonant, removing repeat letters, find the unicode character number, and finally get the digital root of those numbers. From there the sigil digits are used to choose a color from our pallet.</p>
|
|
|
|
<ol class="transformation-steps mb-8 font-iosevka pl-0 list-['↪']">
|
|
<li>
|
|
<span class="font-bold md:inline block">Original Text:</span>
|
|
<span class="text-input-display"></span>
|
|
</li>
|
|
<li>
|
|
<span class="font-bold md:inline block">Lowercase:</span>
|
|
<span class="text-cleaned-display"></span>
|
|
</li>
|
|
<li>
|
|
<span class="font-bold md:inline block">Consonants only:</span>
|
|
<span class="text-consonants-display"></span>
|
|
</li>
|
|
<li>
|
|
<span class="font-bold md:inline block">Unique consonants:</span>
|
|
<span class="text-unique-display"></span>
|
|
</li>
|
|
<li>
|
|
<span class="font-bold md:inline block">Letters to numbers:</span>
|
|
<span class="text-sigil-numbers"></span>
|
|
</li>
|
|
<li>
|
|
<span class="font-bold md:inline block">Digital root:</span>
|
|
<span class="text-sigil-root"></span>
|
|
</li>
|
|
<li>
|
|
<span class="font-bold md:inline block">The final grid:</span>
|
|
</li>
|
|
</ol>
|
|
|
|
<div class="wompum-container wompum-container--demo h-48 mb-8">
|
|
<div class="wompum-grid h-full"
|
|
data-text="{{ .Site.Title}}"
|
|
data-columns="5"
|
|
data-rows="3">
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.wompum-container--demo {
|
|
overflow: hidden;
|
|
}
|
|
.wompum-container--demo .wompum-cell {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2em;
|
|
color: #fff;
|
|
}
|
|
.wompum-container--demo .wompum-cell::after {
|
|
content: attr(data-sigil-digit);
|
|
font-size: 0.5em;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// call function on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const input = document.querySelector('.wompum-demo input');
|
|
updateWompumDemo(input.value);
|
|
});
|
|
|
|
function updateWompumDemoGrid(text) {
|
|
|
|
updateWompumDemo(text);
|
|
|
|
// Update grid
|
|
const grid = document.querySelector('.wompum-demo .wompum-grid');
|
|
grid.dataset.text = text;
|
|
|
|
// Remove existing grid
|
|
while (grid.firstChild) {
|
|
grid.firstChild.remove();
|
|
}
|
|
|
|
// Reinitialize grid
|
|
new WompumGrid(grid).init();
|
|
}
|
|
|
|
function updateWompumDemo(text) {
|
|
// Update displays
|
|
document.querySelector('.text-input-display').textContent = text;
|
|
document.querySelector('.text-cleaned-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '');
|
|
document.querySelector('.text-consonants-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, '');
|
|
|
|
const uniqueConsonants = [...new Set(text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, ''))].join('');
|
|
document.querySelector('.text-unique-display').textContent = uniqueConsonants;
|
|
|
|
// Show character to number conversion
|
|
const charNumbers = [...uniqueConsonants].map(char => char.charCodeAt(0)).join(', ');
|
|
document.querySelector('.text-sigil-numbers').textContent = charNumbers;
|
|
|
|
// Show digital root calculation
|
|
const sigilArray = Sigil.generate(text);
|
|
document.querySelector('.text-sigil-root').textContent = sigilArray.join(', ');
|
|
|
|
|
|
}
|
|
</script>
|
|
</div>
|