Skip to content

Creacion de nuevos pinceles

codeanticode edited this page Aug 22, 2022 · 4 revisions

Los pinceles son el aspecto de Andiamo 2 que permite modificación dentro del marco existente para obtener trazos completamente distintos a los existentes. Los nuevos pinceles tienen que seguir unas pocas pautas de estructura de código para poder ser incorporados. Como ejemplo, el siguiente es un pincel muy simple que dibuja una línea que pasa por los puntos o toques que definen el trazo del dibujante:

class PincelLinea extends Pincel  {
  PincelLinea(int indice, String nombre, char[] teclas) {
    super(indice, nombre, teclas);
  }
  
  Pincel nuevoPincel() {
    return new PincelLinea(indice, nombre, teclas);
  }
  
  void pintar(Toque[] toques, color tinta, float escala) {
    stroke(tinta);
    strokeWeight(escala);
    Toque ptoque = null;
    for (Toque toque: toques) {      
      if (distintos(ptoque, toque) && !toque.primero) {        
        line(ptoque.x, ptoque.y, toque.x, toque.y);      
      }
      ptoque = toque;
    }      
  }
}

En este caso, la clase de este pincel es PincelLinea, y tiene tres parametros básicos: nombre que se utiliza para mostrar el pincel seleccionado en el texto de ayuda, un índice de cero en adelante, y las teclas para seleccionar este pincel. Esta es toda la información requerida para crear el pincel y agregarlo a la lista de pinceles en uso:

function cargarPinceles() {
  pinceles = new ArrayList<Pincel>();
  pinceles.add(new PincelLinea(0, "LIN", new char[]{'W', 'w'}));
  ...
}

Todo esto está en el archivo Pinceles.pde. Es decir que para implementar un nuevo pincel hay que escribir el código de la clase, y luego asegurarse de que un instancia de dicha clase sea agregada a la lista de pinceles. Esto último tiene que hacerse en el la función cargarPinceles.

Pintando un pincel

La parte mas importante del código de un pincel es la funcion pintar(), que siempre tiene que recibir los mismos argumentos, la lista de toques, el color de tinta, y el escala de tamaño:

void pintar(Toque[] toques, color tinta, float escala) {
}

La lista de toques contiene todos los puntos del trazo que hay que dibujar en un momento de tiempo específico (que pueden ser solamente algunos de los toques debido a la animación de repetición). Cada elemento de la lista de toques es un objeto de toque que contiene las coordenadas (x, y) del toque, la presión p, el tiempo t en milisegundos cuando el toque fue creado, y variables primero y ultimo que indican si el toque está ubicado al comienzo de un tramo contiguo de un trazo, o al final (ya que un trazo puede estar compuesto por distintos tramos). Con esta información, cualquier algoritmo de dibujo puede ser implementado para representar la información del trazo. En el ejemplo anterior:

  void pintar(Toque[] toques, color tinta, float escala) {
    stroke(tinta);
    strokeWeight(escala);
    Toque ptoque = null;
    for (Toque toque: toques) {      
      if (distintos(ptoque, toque) && !toque.primero) {        
        line(ptoque.x, ptoque.y, toque.x, toque.y);      
      }
      ptoque = toque;
    }      
  }

el trazo es dibujado con una secuencia de líneas entre un toque y el siguiente, aplicando la tinta y la escala como los parámetros de stroke. La función distintos() es una utilidad que devuelve verdadero cuando el toque previo no es null, y los valores x o y entre el previo y el siguiente son diferentes. Esto evita dibujar toques repetidos.

Es importante tener en cuenta que Andiamo 2 genera una nueva instancia de la clase de pincel seleccionada para cada trazo, esto permite definir variables de dibujo dentro del pincel que son unicas a cada trazo. Por ejemplo, en el siguiente pincel:

class PincelAnimado extends Pincel  {
  float offset;
  
  PincelAnimado(int indice, String nombre, char[] teclas) {
    super(indice, nombre, teclas);
    offset = random(10);
  }
  
  Pincel nuevoPincel() {
    return new PincelAnimado(indice, nombre, teclas);
  }    
  
  void pintar(Toque[] toques, color tinta, float escala) {
    if (0 < toques.length) {
      noStroke();
      fill(tinta);      
      Toque toque = toques[toques.length - 1];
      float r = 20 * escala * noise(offset + millis() / 2500.0);
      ellipse(toque.x, toque.y, r, r);
   }
  }
}

hay una variable llamada offset que se inicializa con un valor random entre 0 y 10. Este offset se usa para generar variabilidad en la animacion del tamaño del círculo que se usa para dibujar el último toque del trazo. Como cada trazo tiene su propio pincel, el valor de offset es diferente para cada trazo, con los círculos son animados con desfasaje para evitar una animación uniforme.

Exprimentando con nuevos pinceles

Se puede usar tanto Processing como p5.js (u otras herramientas de programación) para crear nuevos pinceles que luego se puedan incorporar a Andiamo 2. El siguiente bosquejo de ejemplo en el editor online de p5.js:

https://editor.p5js.org/codeanticode/sketches/EEURt9RtI

replica la estructura de dibujo de pincel en Andiamo 2 (que es la misma que en SINCENTRO), incluyendo la animación de repetición, con lo cual código de dibujo de pincel escrito en versiones derivadas de dicho ejemplo pueden ser incorporadas en Andiamo 2 con facilidad.

Clone this wiki locally