Explosión gris

Hice esta pequeña y ordenada pieza gris. No es nada particularmente especial, especialmente comparado con la asombrosa creatividad de CodePen, pero pensé que podría documentar algunas de las cosas que suceden en él por razones de aprendizaje.

es SVG

SVG tiene line x1 y1 x2 y2, así que pensé que sería fácil de usar para esta apariencia de ráfaga. El x1 y1 es siempre el medio y el x2 y2 se generan aleatoriamente. El cálculo mental para colocar líneas es bastante fácil ya que utilizar viewBox="0 0 100 100". Incluso podrías preferir -50 -50 100 100que la coordinada 0 0esté en el medio.

Números al azar

const getRandomInt = (min, max) = {  min = Math.ceil(min);  max = Math.floor(max);  return Math.floor(Math.random() * (max - min + 1)) + min;};

Es bueno tener una función como esa disponible para generar arte. Lo uso no sólo para la posición de la línea sino también para el ancho del trazo y la opacidad en los grises.

He usado esa función tantas veces que me hace pensar que JavaScript nativo debería tener una función matemática auxiliar que sea así de clara.

Generar HTML con literales de plantilla es muy fácil

Esto es muy legible para mí:

let newLines;for (let i = 0; i  NUM_LINES; i++) {  newLines += `  line     x1="50"    y1="50"    x2="${getRandomInt(10, 90)}"    y2="${getRandomInt(10, 90)}"    stroke="rgba(0, 0, 0, 0.${getRandomInt(0, 25)})"    stroke-linecap="round"    stroke-width="${getRandomInt(1, 2)}"  /`;}svg.insertAdjacentHTML("afterbegin", newLines);

Interactividad en forma de clic para regenerar

Si hay una única función para comenzar a dibujar la obra de arte, hacer clic para regenerar es tan fácil como:

doArt();window.addEventListener("click", doArt);

redondeo

Lo encuentro mucho más agradable con stroke-linecap="round". Es bueno que podamos hacer eso con terminaciones de trazo en SVG.

Las coordenadas de las líneas no se mueven, es solo una transformación CSS

Acabo de poner esto en las líneas:

line {  transform-origin: center;  animation: do 4s infinite alternate;}line:nth-child(6n) {  animation-delay: -1s;}line:nth-child(6n + 1) {  animation-delay: -2s;}line:nth-child(6n + 2) {  animation-delay: -3s;}line:nth-child(6n + 3) {  animation-delay: -4s;}line:nth-child(6n + 4) {  animation-delay: -5s;}@keyframes do {  100% {    transform: scale(0.69);  }}

Puede parecer que las líneas se están alargando o acortando, pero en realidad es toda la línea la que se está reduciendo scale(). Apenas notas el adelgazamiento de las líneas ya que son mucho más largas que anchas.

Observe los retrasos de la animación negativa. Esto es para escalar las animaciones para que parezcan un poco aleatorias, pero que aún así comenzarán todo al mismo tiempo.

¿Qué más se podría hacer?

• La coloración podría ser genial. ¿Incluso agradable, tal vez?
• Me gusta la idea de agrupar la estética. Por ejemplo, si haces todos los trazos al azar entre 1 y 10, se siente casi demasiado aleatorio, pero si los haces al azar entre grupos de 1 a 2, 2 a 4 u 8 a 10, la estética se siente más considerada. Lo mismo ocurre con la coloración: los colores completamente aleatorios son demasiado aleatorios. Sería más interesante ver la aleatorización dentro de parámetros más estrictos.
• Más movimiento. ¿Rotación? ¿Movimiento por la página? ¿Más ráfagas?
• Sobre todo, siempre es divertido poder jugar con más parámetros directamente en la demostración. dat.GUI siempre es bueno para eso.