1
0
mirror of https://github.com/osmarks/website synced 2024-12-24 00:50:31 +00:00
website/experiments/colours-of-the-alphabet/index.html
2020-03-08 17:13:14 +00:00

106 lines
2.7 KiB
HTML
Executable File

---
title: Colours of the Alphabet
slug: alphacol
description: Colorizes the Alphabet, using highly advanced colorizational algorithms.
---
<style>
#colOut .charOut {
font-size: 2em;
font-family: Fira Mono, Courier New, Courier, monospace;
}
#chars {
width: 100%;
}
textarea {
font-size: 2em;
}
</style>
<script src="/assets/js/vue.js"></script>
<div id="app">
<div id="colOut">
<span v-for="c in coloredChars" :style="c.style" class="charOut">{{c.char}}</span>
</div>
<hr>
<textarea rows="5" type="text" placeholder="Enter some text" id="chars" v-model="input"></textarea>
<div>Colorization Mode: </div>
<select v-model="method">
<option value="hsl">HSL</option>
<option value="rgb">RGB</option>
</select>
</div>
<script>
String.prototype.forEach = function(callback)
{
for (var i = 0; i < this.length; i++)
callback(this[i]);
}
var beginAlpha = 97;
var endAlpha = 122;
var numChars = endAlpha - beginAlpha + 1
var colMax = 4096;
var alpha = {}
for (var charCode = beginAlpha; charCode <= endAlpha; charCode++)
{
alpha[String.fromCharCode(charCode)] = charCode - beginAlpha;
}
var charOut = document.getElementById("charOut");
var colOut = document.getElementById("colOut");
var pad3 = function(num) {return ("000" + num).substr(-3, 3)}; // Pads out a number so that it is exactly 3 digits long.
function rescaleAlpha(char, max) {
return alpha[char] / numChars * max;
}
function toShortHex(col)
{
var hexCode = Math.round(col).toString(16);
return "#" + pad3(hexCode);
}
var vm = new Vue({
el: "#app",
data: {
input: "",
method: "rgb"
},
computed: {
coloredChars: function() {
var conversionFunction = function() {return "red";}
if (this.method == "rgb") {
conversionFunction = this.charToRGB;
} else if (this.method == "hsl") {
conversionFunction = this.charToHSL;
}
return this.input.split("").map(function(character) {
return {style: {"color": conversionFunction(character.toLowerCase())}, char: character}
});
}
},
methods: {
charToRGB: function(char) {
return toShortHex(rescaleAlpha(char, colMax));
},
charToHSL: function(char) {
return "hsl(" + rescaleAlpha(char, 360) + ", 100%, 50%)"
}
}
})
</script>