Azul oscuro casi negro
ProgramaciónCambio de bases
Daniel Sánchez Arévalo, director de AzulOscuroCasiNegro, quiere hacer un remake de su película del 2006. Pero necesita darle un toque un poco más moderno y lo primero que ha pensado es cambiarle el título de la película por algo más “digital”. De ahí el nombre de este reto.
Al final se lió la manta a la cabeza y el remake no va a tener nada que ver. Trata de códigos, colores… y ahí entramos nosotros en el juego. Nos envió un mensaje que decía así:
Hola, Ada:
Necesito un programa sencillito que transforme un código en RGB en hexadecimal. La idea es que, a partir de tres variables (rojo, verde y azul) devuelva el código de color en hexadecimal.
Ejemplo de entrada: 0, 36, 255
Ejemplo de salida: #0024ff
Hay varias maneras de representar un color digital. En todas ellas necesitamos “cuánto” rojo, verde y azul (RGB) hay en la composición del color final.
Podemos hacerlo con tres números del 0 al 255, también llamado representación RGB; por ejemplo: 255, 35, 123.
También podemos transformar cada uno de esos números en su equivalente en hexadecimal (de 00 a FF); por ejemplo, #FF237B, de manera que en hexadecimal, FF es el 255, 23 es el 36 y 7B es el 123.
Y aquí tenemos al cansino de Edu preguntando…
Si las tres variables necesitan el mismo proceso, podrías crear una función, ¿no? ¿Sabes que en Javascript hay una función para transformar las bases? Tendrás que poner las letras en mayúsculas, ¿no?
“Venga, Edu, que este reto está tirao, no me líes“, le dije. Aún así, trataré de pensar alguna alternativa a lo que tengo en mi cabeza…
¿Tú cómo lo harías? ¡Deja tus ideas en los comentarios!
Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…
function hexadecimal(decimal)
{
var resultado = “”;
numeros_hexadecimales = {10:”A”, 11:”B”, 12:”C”, 13:”D”, 14:”E”, 15:”F”};
cociente = Math.trunc(decimal/16);
resto = decimal % 16;
if (cociente > 9)
{
resultado += numeros_hexadecimales[cociente];
}
else
{
resultado += String(cociente);
}
if (resto > 9)
{
resultado += numeros_hexadecimales[resto];
}
else
{
resultado += String(resto);
}
return resultado
}
R = 0;
G = 36;
B = 255;
alert(“#” + hexadecimal(R) + hexadecimal(G) + hexadecimal(B));
window.onload = cargaCompleta;
var rojito;
var verdecito;
var azulito;
var botonObtener;
let verda;
let verdadera;
let verdades;
let Rojo;
let Verde;
let Azul;
const NUMEROSHEXADECIMALES = [“0″,”1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”9″,”a”,”b”,”c”,”d”,”e”,”f”];
function cargaCompleta()
{
rojito = document.getElementById(“ingresoRojo”);
verdecito = document.getElementById(“ingresoVerde”);
azulito = document.getElementById(“ingresoAzul”);
botonObtener = document.getElementById(“btn”).addEventListener(“click”,comprobarResultados);
}
function comprobarResultados()
{
if(rojito.value > 255)
{
rojito.style = “background-color: red”;
rojito.style.color = “white”;
alert(“El valor ingresado no es valido, es mayor a 255”);
}
else if(rojito.value < 0)
{
rojito.style = "background-color: red";
rojito.style.color = "white";
alert("El valor ingresado no es valido, es menor a 0 ");
}
else if(rojito.value === "")
{
rojito.value = "0";
verdadera = true;
}
else if(0 <= rojito.value 255)
{
verdecito.style = “background-color: red”;
verdecito.style.color = “white”;
alert(“El valor ingresado no es valido, es mayor a 255 “);
}
else if(verdecito.value < 0)
{
verdecito.style = "background-color: red";
verdecito.style.color = "white";
alert("El valor ingresado no es valido, es menor a 0 ");
}
else if(verdecito.value === "")
{
verdecito.value = "0";
verda = true;
}
else if(0 <= verdecito.value 255)
{
azulito.style = “background-color: red”;
azulito.style.color = “white”;
alert(“El valor ingresado no es valido, es mayor a 255”);
}
else if(azulito.value < 0)
{
azulito.style = "background-color: red";
azulito.style.color = "white";
alert("El valor ingresado no es valido, es menor a 0 ");
}
else if(azulito.value === "")
{
azulito.value = "0";
verdades = true;
}
else if(0 <= azulito.value < 256)
{
azulito.style = "background-color: white"
azulito.style,color = "black";
verdades = true;
}
if(verdadera && verda && verdades)
{
transformar();
}
}
function transformar()
{
let xxx = 0;
let xx = 0;
let i = 0;
let ii = 0;
let iii = 1;
let mostrado;
let mostrado2;
while(i < iii)
{
if(xxx === 16)
{
xxx = 0;
}
while(ii <= rojito.value)
{
if(xx === 16)
{
iii++;
xx = 0;
i++
xxx++;
}
if(ii == rojito.value)
{
mostrado2 = NUMEROSHEXADECIMALES[xx];
i++;
}
ii++;
xx++;
}
mostrado = NUMEROSHEXADECIMALES[xxx];
}
let nnn = 0;
let nn = 0;
let n = 0;
let nb = 0;
let nbv = 1;
let masmostrados;
let masmostrados2;
while(n < nbv)
{
if(nnn === 16)
{
nnn = 0;
}
while(nb <= verdecito.value)
{
if(nn === 16)
{
nbv++;
nn = 0;
n++
nnn++;
}
if(nb == verdecito.value)
{
masmostrados2 = NUMEROSHEXADECIMALES[nn];
n++;
}
nb++;
nn++;
}
masmostrados = NUMEROSHEXADECIMALES[nnn];
}
let mmm = 0;
let mm = 0;
let m = 0;
let mn = 0;
let mnb = 1;
let mostrado1;
let mostrador;
while(m < mnb)
{
if(mmm === 16)
{
mmm = 0;
}
while(mn <= azulito.value)
{
if(mm === 16)
{
mnb++;
mm = 0;
m++
mmm++;
}
if(mn == azulito.value)
{
mostrador = NUMEROSHEXADECIMALES[mm];
m++;
}
mn++;
mm++;
}
mostrado1 = NUMEROSHEXADECIMALES[mmm];
}
Rojo = mostrado + mostrado2;
Verde = masmostrados + masmostrados2;
Azul = mostrado1 + mostrador;
rgb = Rojo + Verde + Azul;
mostrarResultado();
}
function mostrarResultado()
{
let introducirContenido = document.getElementById("resultadoMostrado");
let texto = document.createTextNode("Tu color en Hexadecimal es #" + Rojo + Verde + Azul);
introducirContenido.appendChild(texto);
let cambioColor = document.getElementById("cuerpo").style = "background-color: #" + rgb;
}
¿En serio?
¡Hola, Juan!
Bueno, ¡veo que te has complicado muchísimo! Hay muchas maneras de resolverlo muchísimo más sencillas, pero, en cualquier caso, hay que intentar modularizar ese código. Te he escrito en privado una serie de consejitos, por si te pueden servir, ¿vale? Y este miércoles desvelamos la solución (soluciones) 😉
¡Un abrazo y a seguir “currando”!
¡Buena respuesta, José Julio! Pero te adelanto que hay funciones para hacer esa transformación, jejeje. Eso sí, con tu resolución podrías utilizarlo para cualquier lenguaje de programación de alto nivel 😉
var rojo =0;
var verde =36;
var azul = 255;
var hexadecimal = “#”;
console.log(hexadecimal + transforma(rojo) + “” + transforma(verde) + “” + transforma(azul))
function transforma(color) {
var resultado;
resultado = color.toString(16);
resultado = resultado.toUpperCase();
return resultado;
}
¡Ea! Ahí tenemos una solución sencillita: toString(16) trabaja por nosotros y nos pasa un número de decimal a hexadecimal (solo hay que meter la base entre paréntesis y lo transformará a octal, binario…).
¡Buen trabajo, Guillermo! 🙂
Hola, me pareció interesante el problema, lo quise resolver limitándome al usar funciones, ya que no conozco muchas funciones JavaScript, igual creo que sería una solución al problema, espero recomendaciones, ¡Saludos a todo, y a Ada también!
‘use strict’;
function $(valorDecimal)
{
var valoresHex = [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’]
var numeroHexadecimal = ”;
var contador = 0;
while( valorDecimal >= 16 )
{
var residuo = parseInt(valorDecimal % 16);
valorDecimal /= 16;
numeroHexadecimal = valoresHex[residuo] + numeroHexadecimal;
contador++;
}
numeroHexadecimal = valoresHex[parseInt(valorDecimal)] + numeroHexadecimal;
if( contador == 0 )
{
numeroHexadecimal = 0 + numeroHexadecimal;
}
return numeroHexadecimal;
}
var rojo = 20;
var verde = 0;
var azul = 19;
console.log(‘#’ + $(rojo) + $(verde) + $(azul));
Una ligera modificación del problema original.
‘use strict’;
function $(valorDecimal)
{
var valoresHex = [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’]
var numeroHexadecimal = ”;
var unDigito = true;
while( valorDecimal >= 16 )
{
var residuo = parseInt(valorDecimal % 16);
valorDecimal /= 16;
numeroHexadecimal = valoresHex[residuo] + numeroHexadecimal;
unDigito = false;
}
numeroHexadecimal = valoresHex[parseInt(valorDecimal)] + numeroHexadecimal;
if( unDigito )
{
numeroHexadecimal = 0 + numeroHexadecimal;
}
return numeroHexadecimal;
}
var rojo = 20;
var verde = 0;
var azul = 19;
console.log(‘#’ + $(rojo) + $(verde) + $(azul));
¡Ole! Me gusta mucho más así, la verdad, ya no solo por el cambio de tipo sino porque creo que es más intuitivo… más “Clean Code” 😉
¡Hola, Dani!
¡Muy bien pensado la resolución de los valores hexadecimales! Eso es: cuando no sabemos si existe una función tenemos que “buscarnos la vida” para resolverlo de otra manera 🙂 Quizá añada algo como lo que propones para ver alternativas a usar una función.
¡Buen trabajo, Dani!