graphics - faciles - dibujos con crayones para niños
¿Cómo dibujas como un Crayon? (7)
Crayon Physics Deluxe es un juego comercial que salió recientemente. Mire el video en el enlace principal para tener una idea de lo que estoy hablando.
Te permite dibujar formas y hacer que reaccionen con la física adecuada. El objetivo es mover una bola a una estrella a través de la pantalla usando artilugios y formas que construyas.
Si bien el juego es básicamente un envoltorio para el popular Motor de Física Box2D , tiene una característica que tengo curiosidad acerca de cómo se implementa.
Su dibujo se parece mucho a un Crayon. Puedes ver la textura del crayón y, a medida que lo dibuja, varía en grosor y oscuridad, tal como se vería con un dibujo real de crayón.
texto alternativo http://www.kloonigames.com/crayon/screenshots/crayon_small_01.jpg alt text http://www.kloonigames.com/crayon/screenshots/crayon_small_02.jpg
La textura de fondo está disponible gratuitamente aquí .
texto alternativo http://img267.imageshack.us/img267/1488/crayonmh7.png
Cierre de dibujo de lápices de colores - Tenga en cuenta la variación de la oscuridad
¿Qué tipo de algoritmo se usaría para representar esas líneas de una manera que se parece a un Crayon? ¿Es una textura simple aplicada con grosor y oscuridad aleatorios o hay algo más en juego?
Recuerdo haber leído (hace mucho tiempo) una breve descripción de un algoritmo para hacerlo:
para la forma general de la línea, divide el segmento en dos en un punto aleatorio, y mueve este punto ligeramente lejos de su posición (la variación depende de la distancia del punto al extremo). Repita recursivamente / aleatoriamente. De esta forma, tus líneas no son "perfectas" (línea recta)
para un segmento dado puede "sobrepasar" un poco, extendiendo un extremo u otro (o ambos). De esta manera, no tienes articulaciones perfectas . Si recuerdo bien, lo mejor fue extender las extremidades originales, pero puedes hacer esto para el subsegmento si quieres dividirlas visiblemente.
dibuja las líneas con patrón / sello
también estaba la posibilidad (ya mencionada) de dibujar con diferente opacidad inicial y final (para imitar la tendencia a soltar la pluma al final del dibujo)
Puede usar un tamaño diferente para el sello al principio y al final de la línea (también para imitar la tendencia a soltar el lápiz al final del dibujo). Para el mismo efecto, también puede dibujar la línea dos veces, con una pequeña variación para uno de los extremos (tenga cuidado con el alfa en este caso, ya que la línea se dibujará dos veces)
Por último, para una línea determinada, puede hacer las modificaciones anteriores varias veces (es decir, dibujar la línea dos veces, con diferentes variaciones): los humanos tienden a repetir una línea si cometen algunos errores.
Saludos
Si sopla la imagen hacia arriba, puede ver un patrón de sello repetido. Probablemente haya un pequeño surtido que utiliza a medida que se mueve de aa b, incluso podría rotarlos.
La vacilación de la línea no puede ser tan difícil de hacer. Divida en un grupo de segmentos aleatorios, elija posiciones ligeramente alejadas de la ruta directa y dibuje splines.
Puedes basar la oscuridad en la velocidad. Eso es solo medir la distancia recorrida por el cursor entre este marco y el último cuadro (recuerde el teorema de Pitágoras) y luego cuando vaya a dibujar ese segmento de línea en la pantalla, ajuste el alfa (opacidad) de acuerdo con la distancia que midió.
Creo que la manera más sencilla sería simplemente usar una textura con oscuridad aleatoria (algunos degradados, tal vez) en todo, y establecer el tamaño al azar.
Hay un documento disponible llamado Mimicking Hand Drawn Pencil Lines que cubre un poco de lo que busca . Aunque no presenta una vista muy detallada del algoritmo, los autores cubren los aspectos básicos de los pasos que utilizaron.
Este documento incluye descripciones de alto nivel de cómo generaron las líneas, así como también cómo generaron las texturas para las líneas, y obtienen resultados que son similares a los que desea.
Este artículo sobre la representación de series de gráficos para que parezcan cómics XKCD tiene un algoritmo para perturbar líneas que pueden ser relevantes. No cubre el cálculo de la textura de una línea dibujada con lápices de colores, pero ofrece un enfoque para hacer que una línea recta parezca imperfecta de una manera similar a la humana.
Ejemplo de salida:
Aquí hay un documento que usa mucha matemática para simular la deposición de la cera sobre el papel usando un modelo de fricción. Pero creo que lo mejor es usar un patrón repetitivo, como lo menciona otro lector, y variar la opacidad según la presión.
Para las partes de dibujo de líneas imperfectas, tengo una entrada de blog que describe cómo hacerlo usando curvas bezier.