{"id":179,"date":"2026-08-08T13:28:26","date_gmt":"2026-08-08T16:28:26","guid":{"rendered":"https:\/\/freeanimationpower.org\/blog\/?p=179"},"modified":"2026-08-08T13:28:26","modified_gmt":"2026-08-08T16:28:26","slug":"salpicaduras_temblor_acuarela","status":"publish","type":"post","link":"https:\/\/freeanimationpower.org\/blog\/salpicaduras_temblor_acuarela\/","title":{"rendered":"Salpicaduras, Temblor y Acuarela: Como las Matematicas del Azar Crean Arte"},"content":{"rendered":"

\"\"<\/h1>\n

\u00bfPuede una computadora ser artista?<\/h2>\n

Cuando le pides a una computadora que dibuje una linea recta, te dibuja una linea perfecta. Sin temblores, sin imperfecciones, sin “errores humanos”. Pero el arte no es perfecto. El arte es una acuarela que se corre, un carboncillo que se quiebra, una salpicadura que cayo donde no debia.<\/p>\n

En FAP Mobile tenemos pinceles que no dibujan lineas perfectas. Dibujan como lo haria un artista de verdad: con accidentes felices, texturas caoticas y variaciones inesperadas. \u00bfEl secreto? Numeros aleatorios controlados por matematicas.<\/p>\n

Hoy vamos a conocer tres pinceles magicos: Splatter (salpicaduras), Charcoal (carboncillo) y Watercolor (acuarela). Los tres usan el mismo truco: el azar domesticado.<\/p>\n

\"\"<\/p>\n

La materia prima: numeros aleatorios<\/h2>\n

La computadora tiene una funcion magica llamada random()<\/code>. Cada vez que la llamas, te devuelve un numero decimal entre 0 y 1, como 0.347, 0.891, 0.052. Es como tirar un dado de infinitas caras.<\/p>\n

Pero el chiste no es usar el numero tal cual. El chiste es transformarlo.<\/p>\n

Si escribes random(0, 10)<\/code>, la computadora multiplica el 0.347 por 10 y te da 3.47. Ahora tienes un numero aleatorio entre 0 y 10. Para un entero: 3 + random(0, 4)<\/code> te da un numero entre 3 y 7. Domar el azar es saber exactamente que rango quieres.<\/p>\n

\"\"<\/p>\n

Splatter: el pincel que estornuda pintura<\/h2>\n

Imagina que mojas un pincel en pintura, apuntas al lienzo, y soplas fuerte. La pintura no cae en un solo punto: se dispersa en decenas de gotitas alrededor. Eso es Splatter.<\/p>\n

La formula es sorprendentemente simple:<\/p>\n

N = 3 + random(0, 4)<\/code><\/pre>\n
Para cada gotita k<\/code> (desde 1 hasta N):<\/p>\n
angulo_k = random(0, 2\u03c0)\r\nradio_k = random(0, tama\u00f1o \u00d7 3)<\/code><\/pre>\n
Vamos a descifrarla. Primero, \u00bfcuantas gotitas salen? Entre 3 y 7 (porque 3+0=3 y 3+4=7). Cada vez que usas el pincel, salpica una cantidad distinta de gotas. A veces 3, a veces 5, a veces 7. Nunca sabes. Eso ya lo hace impredecible.<\/p>\n
Luego, cada gotita tiene dos datos:<\/p>\n
El angulo<\/strong> (\u03b8_k<\/code>) es un numero entre 0 y 2\u03c0 (2 por pi, o sea, 360 grados, un circulo completo). Como es aleatorio, una gota sale hacia las 3 en punto (angulo 90 grados), otra hacia las 7 (angulo 210 grados), otra hacia las 11 (angulo 330 grados). Las gotas forman un circulo perfectamente caotico alrededor del punto donde tocaste.<\/p>\n
El radio<\/strong> (r_k<\/code>) es que tan lejos llega la gota. Puede ir desde 0 (justo en el centro) hasta tama\u00f1o \u00d7 3 (bastante lejos). La mayoria de las gotas caen en un radio intermedio, porque la distribucion uniforme las reparte por igual entre 0 y el maximo.<\/p>\n
Y con esos dos datos, la computadora calcula la posicion exacta de cada gotita:<\/p>\n
x_gota = x_centro + radio_k \u00d7 cos(angulo_k)\r\ny_gota = y_centro + radio_k \u00d7 sen(angulo_k)<\/code><\/pre>\n
Esto es trigonometria basica: convertir coordenadas polares (angulo y distancia) a coordenadas cartesianas (X e Y). Como un GPS que te dice “camina 5 pasos hacia el noreste”.<\/p>\n
\"\"<\/p>\n
Charcoal: el carboncillo que tiembla<\/h2>\n
El carboncillo de verdad es aspero. Cuando arrastras una barra de carbon sobre papel, no dibuja una linea suave: dibuja una linea quebradiza, granulada, con peque\u00f1os saltos y texturas por todos lados.<\/p>\n
Nuestro pincel Charcoal descompone cada trazo en muchos pasitos temblorosos:<\/p>\n
N = distancia \/ (tama\u00f1o \u00d7 0.35)<\/code><\/pre>\n
Cuantos mas larga es la pincelada, mas pasitos se generan. El tama\u00f1o \u00d7 0.35<\/code> controla la densidad: mientras mas grande el pincel, menos pasitos (porque cada pasito cubre mas area).<\/p>\n
Para cada pasito t<\/code> (que va avanzando desde 0 hasta la distancia total):<\/p>\n
cx = x_inicio + dx \u00d7 t + random(-tama\u00f1o \u00d7 6, +tama\u00f1o \u00d7 6)\r\ncy = y_inicio + dy \u00d7 t + random(-tama\u00f1o \u00d7 6, +tama\u00f1o \u00d7 6)<\/code><\/pre>\n
La primera parte (x_inicio + dx \u00d7 t<\/code>) es la posicion “teorica” de la linea perfecta. Es donde DEBERIA estar el carboncillo si no temblara.<\/p>\n
La segunda parte (random(-tama\u00f1o \u00d7 6, +tama\u00f1o \u00d7 6)<\/code>) es el temblor. Es un numero aleatorio que puede ser negativo o positivo, con una magnitud maxima de tama\u00f1o \u00d7 6. Si tu pincel mide 3 pixeles, el temblor maximo es de \u00b118 pixeles. Eso es un monton. El resultado es una linea que serpentea, tiembla, se quiebra… como un carboncillo de verdad.<\/p>\n
Cada pasito se dibuja como un peque\u00f1o punto o una peque\u00f1a linea. Cuando juntas cientos de pasitos temblorosos, el ojo humano ya no ve puntitos individuales: ve una linea de carboncillo perfectamente imperfecta.<\/p>\n
\"\"<\/p>\n
Watercolor: la magia de las capas<\/h2>\n
La acuarela real es un baile entre agua y pigmento. El agua arrastra el color, lo difumina, crea zonas mas intensas y zonas mas suaves. Para imitar esto, nuestro pincel Watercolor pinta cada trazo… \u00a1tres veces!<\/p>\n
Cada pasada tiene distinta intensidad:<\/p>\n
Pasada 1 (L=1.0): alfa = alfa_base \u00d7 1.0 \u00d7 0.5 = alfa_base \u00d7 0.5\r\nPasada 2 (L=0.7): alfa = alfa_base \u00d7 0.7 \u00d7 0.5 = alfa_base \u00d7 0.35\r\nPasada 3 (L=0.4): alfa = alfa_base \u00d7 0.4 \u00d7 0.5 = alfa_base \u00d7 0.20<\/code><\/pre>\n
Donde L toma los valores 1.0 (capa completa), 0.7 (capa media) y 0.4 (capa suave), y el 0.5 es un factor fijo de transparencia.<\/p>\n
La primera pasada es la mas intensa: pinta al 50% de opacidad. La segunda pasada, un 35%. La tercera, un 20%. Las tres capas superpuestas crean un efecto de profundidad y difuminado que el ojo interpreta como acuarela.<\/p>\n
Pero hay otro truco: entre pasada y pasada, la posicion se desplaza un poquito aleatoriamente. No mucho, solo unos pixeles. Esto simula la forma en que el agua “mueve” el pigmento sobre el papel poroso.<\/p>\n
La distribucion uniforme: el motor del caos<\/h2>\n
Los tres pinceles usan lo que se llama “distribucion uniforme”. Significa que todos los valores dentro del rango tienen la MISMA probabilidad de salir. Es como un dado justo: el 1 sale igual de veces que el 6. No es como la estatura de las personas (hay mas gente de estatura promedio que gente muy alta o muy baja), sino como una rifa donde todos los boletos son identicos.<\/p>\n
Si quisieramos una distribucion “normal” (la famosa campana de Gauss, con mas probabilidad en el centro), usariamos otra formula. Pero para simular arte natural, la distribucion uniforme funciona mejor: genera sorpresas, irregularidades, accidentes… todo lo que hace que un dibujo digital no parezca dibujado por un robot.<\/p>\n
\"\"<\/p>\n
El arte de controlar lo incontrolable<\/h2>\n
La paradoja es hermosa: usamos matematicas exactas para crear imperfeccion. Las formulas son rigidas, los rangos estan acotados, las probabilidades son uniformes… pero el resultado es caotico, organico, humano.<\/p>\n
Cada vez que usas el pincel Splatter, Charcoal o Watercolor en FAP Mobile, estas usando el mismo principio que hace que las nubes no sean esferas perfectas y que los arboles no crezcan en lineas rectas. El azar domesticado es la firma secreta de la naturaleza, y ahora tambien de tu arte digital.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00bfPuede una computadora ser artista? Cuando le pides a una computadora que dibuje una linea recta, te dibuja una linea perfecta. Sin temblores, sin imperfecciones, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-179","post","type-post","status-publish","format-standard","hentry","category-aprende-mobile-web"],"_links":{"self":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":2,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/media?parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/categories?post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/tags?post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}