noe/noe.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add explanation and highp 8bit float

Browse source
This commit is contained in:
41666 2024-05-02 21:24:55 -04:00
parent 2780eaad9a
commit d8de618cfc
1 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
-~-/what the fuck is a lightrunner/-~-/index.html
View file

@ -51,8 +51,31 @@
<ul>
<li id="rgb">rgb(-1,-1,-1)</li>
<li id="hex">#HHHHHH</li>
<li id="rgb2">high precision rgb(-1,-1,-1)</li>
</ul>
</section>
<section>
<p>warning: math</p>
<p>
a 9-character single-case string could be interpreted as 3 triplets of
base32. this allows for a 0-46655 range per channel!
</p>
<ol>
<li>our example "girltwink" turns into (gir, ltw, ink)</li>
<li>which turns into decimal (21411, 28292, 24176)</li>
<li>
we change this to linear by dividing by 46655 ( 0.45892187332547424,
0.6064087450434037, 0.5181866895295253 )
</li>
<li>
and then up to 8 bit 0-255 ( 117.02507769799593, 154.63422998606794,
132.13760583002895 )
</li>
<li>
but probably too precise of a color :3 so <b>( 117, 155, 132 )</b>
</li>
</ol>
</section>
</main>
<script>
@ -61,18 +84,22 @@
const colorBoxEl = document.querySelector("#color-box");
const hexEl = document.querySelector("#hex");
const rgbEl = document.querySelector("#rgb");
const rgb2El = document.querySelector("#rgb2");
const setColor = (r, g, b) => {
colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`);
hexEl.innerHTML = `#${(
r.toString(16).padStart(2, "0") +
g.toString(16).padStart(2, "0") +
b.toString(16).padStart(2, "0")
Math.round(r).toString(16).padStart(2, "0") +
Math.round(g).toString(16).padStart(2, "0") +
Math.round(b).toString(16).padStart(2, "0")
).toLowerCase()}`;
rgbEl.innerHTML = `rgb(${r}, ${g}, ${b})`;
rgbEl.innerHTML = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(
b
)})`;
rgb2El.innerHTML = `highp rgb(${r}, ${g}, ${b})`;
};
const base32to8bit = (b32) => Math.round((parseInt(b32, 36) / 46655) * 255);
const base32to8bit = (b32) => (parseInt(b32, 36) / 46655) * 255;
const inputToColor = (inputRaw) => {
const input = inputRaw + "000000000";