``````  <h3 style="font-family: monospace;">Welcome to Neurochromohexonics</h3>
<div id="bgdiv" style="width: 300; height: 300; border: 1px solid;">
<span id="fgtext">The rain in spain falls mainly on the plains.</span>
</div>
<div id="voting">
Is the foreground text color good or bad for the background color?
<ul>
<li>Click to change color: <input type="color" id="fgpicker" alt="A color picker"></input></li>
<li>Color is good: <button id="next">Next</button></li>
</ul>``````
``````function randomColorVal(){
// Should be 0 to 255 inclusive
return Math.floor((Math.random() * 256));
}
function toHex(intVal){
let hex = intVal.toString(16);
if (hex.length === 1){
hex = '0' + hex;
}
return hex;
}
function hexFromInts(r, g, b){
return '#' + toHex(r) + toHex(g) + toHex(b);
}
function randomHex(){
let r = randomColorVal();
let g = randomColorVal();
let b = randomColorVal();
return hexFromInts(r, g, b);
}
function intsFromHex(hex){
return [
parseInt(hex[1] + hex[2], 16),
parseInt(hex[3] + hex[4], 16),
parseInt(hex[5] + hex[6], 16),
];
}
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+).*\)\$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
function regen(){
train()
let bgcolor = randomHex();
//let fgcolor = randomHex();
\$('#bgdiv').css({
'background-color': bgcolor})
//console.log(intsFromHex(fgcolor))
let fgcolor = generateFg();
\$('#bgdiv').css({'color': fgcolor})
\$('#fgpicker').val(fgcolor);
}
function train(){
let bgvals = intsFromHex(rgb2hex(\$('#bgdiv').css('background-color')));
let fgvals = intsFromHex(rgb2hex(\$('#bgdiv').css('color')));
bgvals = bgvals.map(n => n / 256)
fgvals = fgvals.map(n => n / 256)
console.log('bgvals', bgvals)
console.log('fgvals', fgvals)
//for (let i = 0; i < 20000; i++){
trainer.train([{input: bgvals, output: fgvals}])
//}
}
function regenClicker(event){
regen()
event.preventDefault();
}
const Neuron = synaptic.Neuron,
Layer = synaptic.Layer,
Network = synaptic.Network,
Trainer = synaptic.Trainer,
Architect = synaptic.Architect;
let generator = new Architect.Perceptron(3,27,3);
let trainer = new Trainer(generator);
function generateFg(){
let input = intsFromHex(rgb2hex(\$('#bgdiv').css('background-color')))
for(let i = 0; i < input.length; i++){
input[i] = input[i] / 256;
}
output = generator.activate(input)
for (let i = 0; i < output.length; i++){
output[i] = Math.floor(output[i] * 256);
}
return hexFromInts(...output);
}
\$(function(){
\$('#next').click(regenClicker);
\$('#fgpicker').on('input', function(){
\$('#bgdiv').css({'color': this.value})
})
for (let i = 0; i < 1; i++){
trainer.train([
{input: [0, 0, 0], output: [1, 1, 1]},
{input: [1, 1, 1], output: [0, 0, 0]}
])
}
regen();
});``````

### External CSS

This Pen doesn't use any external CSS resources.