RandomWalker II

Segundo volumen de RandomWalkers. Vista una pequeña introducción en el Volumen I, se pueden empezar a retocar algunos valores del código.

Uno de estos valores a considerar es el tamaño de estos píxeles que estamos tratando, en primera lugar parecían muy pequeños y la imagen final mostraba un recorrido realizado por un pequeño randomwalker, pero ¿y si hacemos zoom en la imagen? Para realizar zoom no basta en este caso con usar una función zoom(), no existe, tendremos que buscar una alternativa.

Inicialmente podemos pensar en simplemente aumentar el tamaño del stroke(), con strokeWeight(), aunque eso resulta en unos cuantos pasos (serán llamados pasos a las iteraciones de draw() que dibujan un punto en la pantalla con point(x,y)) cuya distancia sigue siendo la misma, y de manera más redondeada, dibujan un randomwalker como este:walker.png

walker.png

Modificado el codigo de la clase RWalker del Volumen I para que tenga un strokeWeight(10);


class RWalker{
  int x, y;

  RWalker(){
    x = width/2;
    y = height/2;
  }

  void display(){
    stroke(color(255, 40, 20));
    strokeWeight(10);
    point(x,y);
  }

  void step(){
    int choice = int(random(4));
    switch(choice){
     case 0: x = x + 10; break;
     case 1: x = x - 10; break;
     case 2: y = y + 10; break;
     case 3: y = y - 10; break;
    }
  }
}

Como se observa, el resultado no es satisfactorio. Para que tenga cierto sentido aumentar el tamaño del stroke, habría que aumentar también la distancia entre los puntos, ¿dónde? En step():

void step(){
 int choice = int(random(4));
 switch(choice){
   case 0: x = x + 10; break;
   case 1: x = x - 10; break;
   case 2: y = y + 10; break;
   case 3: y = y - 10; break;
 }
}

El tamaño a aumentar de las posiciones (x,y) del lienzo debe ser igual al tamaño del strokeWeight() si se quiere que quede cuadrado sin solaparse:

walker

Este formato lleno de círculos también puede llegar a ser interesante. Las formas son uno de los valores que podemos alterar en los randomwalker. Si tratamos las formas, de manera básica podemos dibujar círculos, como se acaba de observar, y cuadrados, pero ¿cómo creamos los cuadrados?

Usemos la función de dibujado de rectángulos para dibujar cuadrados: rect(x,y,a,b). ‘a’ y ‘b’ será el tamaño del cuadrado a dibujar, para dibujar un cuadrado: a = b. También definirá esto (para que no haya solapación) la distancia a la que avanza el randomwalker dentro del switch que hemos modificado antes, será de utilidad entonces unificar esta variable en una variable global: int size = 15. Otra cosa que sería de utilidad, ya que estamos ampliando el tamaño de los puntos que vamos a dibujar y vamos a dibujar una cantidad grande de ellos sería sería restringir los valores que toma x e para que no salga de la pantalla el randomwalker se dibuja, para ello se puede utilizar la función constrain() que tiene Processing.

Para crear una imagen final de randomwalker con un poco más de carga gráfica que tan solo el mismo color para cada punto podemos variar el color del randomwalker desde, por ejemplo, negro a rojo, o de cualquier color a cualquier color. El código para la variación de negro a rojo queda de la siguiente manera:

Programa principal:


rWalker w;

void settings(){
  size(30 * 20,30 * 15);
}

void setup() {
  w = new rWalker();
  background(20);
}

void draw(){
  w.step();
  w.render(int(random(0,255)),int(random(180,255)));
}

Clase RWalker:


 class rWalker {
  int x, y, size = 15;

  rWalker() {
    x = width/2;
    y = height/2;
  }

  void render(int r1, int alpha) {
    noStroke();
    fill(color(r1,30,0,alpha));
    //size = 15, for the walker to be 15x15 (square)
    rect(x,y,size,size);
  }

  void step() {

    int choice = int(random(4));
    switch(choice){
      // size = 15, for the walker to advance
      case 0: x = x + size; break;
      case 1: x = x - size; break;
      case 2: y = y + size; break;
      case 3: y = y - size; break;
    }

    x = constrain(x,0,width-1);
    y = constrain(y,0,height-1);
  }
}

Imágenes de ejemplo resultantes:

Y con colores aleatorios:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s