Red de elementos que giran

grid
Podemos anidar dos bucles while(), uno dentro de otro, para crear una red ortogonal de elementos. Consiste en crear un bucle que lanza varias copias de un objeto distribuidas horizontalmente, y encerrarlo en otro que hace lo mismo con copias del bucle anterior distribuidas verticalmente.

También haremos girar esos elementos.

  1. //con estas variables asignaremos diferente color y rotación a cada elemento
  2. float n = 0;
  3. float h = 0;
  4.  
  5. void setup() {
  6.   size(300, 300);
  7.   //cambiamos cómo definiremos el color y el rectángulo
  8.   colorMode(HSB, 100);
  9.   rectMode(CENTER);
  10.   //asignamos un tono cualquiera al color
  11.   h = random(100);
  12. }
  13.  
  14. void draw() {
  15.   //reseteamos el fondo para evitar que los elementos 'dibujen'
  16.   background(h, 50, 35);
  17.   //comienzan los bucles
  18.   //primero reseteamos el bucle a cada ciclo
  19.   float y = 0;
  20.   //este bucle hace copias verticales del segundo
  21.   while (y < height) {
  22.     //reseteamos el segundo bucle
  23.     float x = 0;
  24.     //y este hace copias horizontales de una función propia llamada 'modulo()'
  25.     while (x < width) {
  26.       //cada módulo se traslada a su posición en la red
  27.       translate(10+x, 10+y);
  28.       //y se gira un ángulo diferente según su posición
  29.       rotate(n+x+y);
  30.       //llamamos el módulo del que se harán las copias
  31.       modulo((n+x+y)/10);
  32.       //y reseteamos la traslación y el giro para que no se acumulen de un elemento a otro
  33.       resetMatrix();
  34.       //esta es la separación horizontal entre cada módulo
  35.       x = x + 35;
  36.       //y aumentamos la variable 'n' a cada ciclo para animar el giro y el color
  37.       n= n+0.001;
  38.     }
  39.     //separación vertical entre cada línea de módulos
  40.     y = y+35;
  41.   }
  42. }
  43.  
  44. //definimos nuestra función módulo, que toma un parámetro: 'col'
  45. void modulo(float col) {
  46.   //el parámetro sirve para modificar el color
  47.   fill(col, 35, 50);
  48.   stroke(100);
  49.   //rectángulo con tres esquinas redondeadas y una en pico
  50.   rect(0, 0, 20, 20, 10, 10, 10, 0);
  51. }

Leave a Comment.