Nota:
Considere leer toda esta respuesta para entender los detalles de las líneas de código publicadas acá. También puede ir directamente al código fuente para probarlo.
Circunferencia, nodo y eje de rotación:
Para formar la circunferencia con los dígitos del símbolo PI
decreciendo durante su rotación se pueden considerar las acciones que se describen en esta publicación.
JavaScript
Para el caso de JavaScript:
Crear las variables cantidad
, nodo
, tamanno
y grados
. Donde cantidad
es la cantidad de caracteres, nodo
la variable auxiliar donde se almacenará temporalmente el nodo creado en cada iteración, tamanno
el tamaño de la fuente tipográfica y el grado de inclinación de cada elemento y grado
el grado de inclinación almacenado en él (requiere del 5%
de tamanno
).
Crear el arreglo elementosHTML
, que es donde se almacenarán los nodos que girarán cada tantos grados en cada iteración. En él se ubicarán los números de la constante PI
.
Recuperar los caracteres numéricos de PI
en la variable caracteres
.
Recuperado los caracteres numéricos en la variable antes mencionada, borrarlos de donde estaban.
Para lograr que el código sea entendible para cualquier persona interesada en él se crean las siguientes funciones:
crearNodo( elemento ): creará y devolverá un nodo.
insertarNodo( nodo, nodoPadre ): una función con dos argumentos, que insertará o moverá un nodo previamente creado hacia otro elemento, que será el elemento padre del nodo insertado en él.
prepararNodo( nodo, caracter, tamanno, grados ): una función con cuatro (04) parámetros (argumentos). Esta función creará un nuevo nodo utilizando la función crearNodo(), que se insertará en un nodo previamente creado utilizando la función insertarNodo().
Los parámetros de la función se explican a continuación:
nodo
: si el nodo ha sido previamente creado debe pasar por este parámetro para prepararlo antes de ser renderizado. En él, se insertará otro nodo que se creará al momento de llamar la función prepararNodo().
caracter
: este argumento pasará cada caracter numérico que se haya obtenido durante cada iteración.
tamanno
: en él pasará un valor numérico que irá variando en cada iteración.
grados
: los grados de inclinación (varía en cada iteración) del nodo que se preparará en dicha función pasarán por acá.
Caso HTML
En esta oportunidad, las líneas a utilizar serán las siguientes:
<div id="figura">3.1415...</div>
<!-- Imagen que se moverá dentro del elemento «figura» -->
<div id="simboloPI" class="flex">
<img src="https://i.ibb.co/X5cMLDZ/imagen.png" alt="" />
</div>
Caso CSS:
En el código CSS crearemos una variable (también conocida como propiedades no estándar de CSS) que se denominará --diametro
en ella se establecerá el diámetro de la circunferencia en px
.
La idea de la variable --diametro
es que se utilice para realizar cálculos de forma dinámica en las proporciones anchura y altura, a la vez, se calcule el radio de la propiedad border-radius
en función de las proporciones antes descritas.
También se establece el eje de rotación en el centro inferior del elemento que debe girar utilizando la siguiente propiedad:
transform-origin: center bottom;
Dicha propiedad se encuentra ubicada en la siguiente regla CSS:
.girar {
/* Propiedades CSS */
}
Código de ejemplo
No se agregaron validaciones en el código para simplificar en la medida de lo posible los pasos para la formación de la circunferencia a base de caracteres numéricos del número PI
.
El resto de la explicación se encuentra en los comentarios de las siguientes líneas de código:
// Variables que se necesitan:
let
cantidad, // Cantidad de caracteres que forman la circunferencia.
nodo, // Variable auxiliar donde se almacenará el nodo.
tamanno, // Tamaño de la fuente y grados de inclinación.
grados; // Grado de la circunferencia.
// Array (arreglo) donde se almacenarán los nodos:
const elementosHTML = [];
// Almacenar los caracteres en un Array (arreglo):
const caracteres = figura.textContent.split("");
// Valores por defectos de las variables:
tamanno = cantidad = 121;
grados = 360;
// Eliminar caracteres de la figura:
figura.textContent = "";
// Función para crear un nodo:
const crearNodo = ( elemento ) => {
return document.createElement( elemento );
}
// Función para insertar o mover el nodo a otro elemento:
const insertarNodo = ( nodo, nodoPadre ) => {
nodoPadre.append( nodo );
}
// Función para preparar cada nodo que se vaya generando en
// en cada iteración:
const prepararNodo = ( nodo, caracter, tamanno, grados ) => {
let nodoInterno = crearNodo( "div" );
// Preparar nodo principal:
nodo.classList.add( "girar" );
nodo.style.transform = `rotateZ(-${grados}deg)`;
nodo.style.fontSize = `${tamanno * 0.3}px`;
// Preparar nodo interno:
nodoInterno.classList.add( "flex" );
// Se insertará en este nodo los caracteres
// numéricos:
nodoInterno.textContent = caracter;
// Insertar el nodo Interno en el nodo principal,
// tomando en cuenta que el nodo principal es el que
// rotará:
insertarNodo( nodoInterno, nodo );
// Retornar el nodo principal ya preparado:
return nodo;
}
// Clases que se agregan a la figura circular:
figura.classList.add( "flex", "figura" );
// Colocar el símbolo PI en la figura circular:
insertarNodo( simboloPI, figura );
// Con este bucle crearemos los nodos donde estarán
// contenido los números:
for ( let i = 0; i < cantidad; i++ ) {
tamanno--;
grados -= tamanno * 0.05;
nodo = crearNodo( "div" );
nodo = prepararNodo( nodo, caracteres[i], tamanno, grados );
// Se agrega el nodo ya preparado en
// el Array «elementosHTML»:
elementosHTML.push( nodo );
}
// Una vez preparado el nodo se muestra en el
// navegador al insertarlo en el elemento figura:
for ( let nodo of elementosHTML )
insertarNodo( nodo, figura );
/* Importar fuentes tipográficas */
@import url('https://fonts.googleapis.com/css?family=Courier+Prime|Montserrat|Open+Sans&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Aquí se define la regla CSS del elemento
que formará una circunferencia */
.figura {
/* Variable para definir el diámetro de
la circunferencia */
--diametro: 500px;
position: absolute;
margin: auto;
left: 0; right: 0;
top: 0; bottom: 0;
/*
Mantener la proporción altura = anchura
usuario variables CSS para poder cambiarla
de tamaño sin que se rompa el diseño */
width: var(--diametro);
height: var(--diametro);
/* Redondear el radio en función del diámetro
de la circunferencia */
border-radius: calc(var(--diametro) / 2);
overflow: hidden;
/* Fuente de tipo consola y negrita para los números */
font-family: 'Courier Prime', monospace;
font-weight: bold;
}
/* Esta animación es opcional, por lo tanto,
no es necesaria para la formación de la
circunferencia a base de caracteres
numéricos de PI. Su función es crear un
efecto animado */
@keyframes girar {
from {
transform: rotateZ( -359deg );
}
}
/* Regla CSS para el elemento que tendrá los números
contenidos en él */
.girar {
position: absolute;
margin: auto;
left: 0; right: 0;
top: 0;
/* La anchura es su contenido y su altura será
el radio de la circunferencia que lo contiene */
width: max-content;
height: calc(var(--diametro) / 2);
/* Esta propiedad es opcional */
animation: 2s ease girar 1;
/* Se establece el eje de rotación en el centro
inferior del elemento que contiene los números */
transform-origin: center bottom;
}
.girar > div {
height: 50px;
}
/* La altura o anchura máxima del
símbolo del PI será el radio de la
circunferencia: */
#simboloPI img {
max-width: 50%;
max-height: 50%;
}
/* Se utiliza el modelo de caja flexible para centrar
horizontal y verticalmente los números y el símbolo PI */
.flex {
display: flex;
align-items: center;
justify-content: center;
}
<div id="figura">3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091</div>
<!-- Imagen que se moverá dentro del elemento «figura» -->
<div id="simboloPI" class="flex">
<img src="https://i.ibb.co/X5cMLDZ/imagen.png" alt="">
</div>
IMPORTANTE:
La solución presentada en esta publicación no se puede considerar definitiva ni la mejor. Esta es una solución con resultados aproximados que busca explicar o dar una idea sobre los posibles pasos que deben seguirse para lograr el resultado deseado, que es la formación de la circunferencia a base de caracteres numéricos del número PI
.
También dejo disponible el código en CodePen para que lo puedan visualizar allí también:
Visitar Circunferencia PI