Identificar los fundamentos de la programación en Processing para diseñar algoritmos básicos mediante códigos creativos y visuales. 

 Juguemos

Como ya explicamos en el apartado 1, Processing fue creado pensando en los artistas y diseñadores. Una práctica habitual entre los artistas, que se da también en el juego, es explorar las diferentes posibilidades de cada nuevo descubrimiento. Este puede ser buen momento para detenerse y experimentar.

Vamos a hacer pequeñas modificaciones a nuestro programa para ver qué usos podemos darle.

Cambiemos los puntos por otra cosa.

//variables

int margen = 20; //espacio entre la ventana y los puntos

int columnas = 16; //número de columnas

int espacios = columnas-1; //número total de espacios

int a = espacios; // para el bucle 1

int b = espacios; // para el bucle 2

float distancia = (width - margen*2.0)/espacios; //calcula la distancia entre columnas

//setup

size(300, 300);

strokeWeight(1); // grosor de línea: 1 px

noFill(); // sin relleno

//bucle 1

while (a >= 0) {

  //bucle 2

  while (b >= 0) {

    //coord. x = suma al margen la distancia entre puntos mult. por el nº de espacios

    //parámetros ellipse: x, y, ancho, alto

    ellipse(margen + distancia * b, margen + distancia * a, 20, 20);

    b = b-1;

  }

  a = a -1;

  b = espacios;

}

//variables

int margen = 20; //espacio entre la ventana y los puntos

int columnas = 16; //número de columnas

int espacios = columnas-1; //número total de espacios

int a = espacios; // para el bucle 1

int b = espacios; // para el bucle 2

float distancia = (width - margen*2.0)/espacios; //calcula la distancia entre columnas

//setup

size(300, 300);

noFill(); // sin relleno

//bucle 1

while (a >= 0) {

  //bucle 2

  while (b >= 0) {

    // circunferencia gris

    stroke(100); // color de línea gris medio

    strokeWeight(1); // grosor de línea: 1 px

    ellipse(margen + distancia * b, margen + distancia * a, 20+a+b, 20+a+b);

    // punto blanco

    stroke(255); // color de línea blanco

    strokeWeight(5); // grosor de línea: 5 px

    point(margen + distancia * b, margen + distancia * a);

    b = b-1;

  }

  a = a -1;

  b = espacios;

}

¿Qué hemos cambiado? Dentro del bucle 2 encontramos lo siguiente: 

La función stroke() modifica el color de la línea. En nuestro ejemplo, toma como parámetro el número 100. Cuando el parámetro es, como ahora, un número del 0 al 255, se asigna a la línea un tono de gris más o menos claro según sea la cifra: 0 es negro, 255 es blanco, con toda la escala de grises intermedios. Así que estamos asignando un color gris a los elementos que vamos a dibujar.

La función strokeWeight(1) ya la conocemos, sabemos que establece una anchura de un píxel para la línea.

La función ellipse() sigue igual con una modificación: los dos últimos parámetros (alto y ancho de la elipse) tienen un valor de 20+a+b. Tomo ya sabemos que los valores de a y b van cambiando al ejecutarse los bucles, el tamaño de cada circunferencia será diferente, dependiendo de la posición que ocupen en la ventana. Más pequeños cuanto más arriba y a la izquierda, más grandes abajo y a la derecha.

Además también hemos vuelto a dibujar la red de puntos, esta vez en color blanco:

Es importante saber que en Processing las funciones se ejecutan en orden, de arriba a abajo. Si en la línea 16 establecemos un color de línea gris, todas las formas que estén por debajo de la línea 16, serán de ese color (a menos que lo modifiquemos), pero el color gris no se aplicará a los objetos por encima de la línea 16. Por eso, para cambiar el color a 255 (= blanco) y el grosor a 5px, tenemos que escribir esas funciones antes de definir el elemento que tomará esos parámetros.

En nuestro programa, cada ciclo del bucle dibuja primero una circunferencia gris, luego un punto blanco. Si tenemos claro en qué orden realiza la tareas nuestro programa será más fácil obtener exactamente el resultado que deseamos.

int margen = 20; //espacio entre la ventana y los puntos

int columnas = 16; //número de columnas

int espacios = columnas-1; //número total de espacios

int a = espacios; // para el bucle 1

int b = espacios; // para el bucle 2

float distancia = (width - margen*2.0)/espacios; //calcula la distancia entre columnas

//setup

size(300, 300);

noFill(); // sin relleno

//dibujar rectángulos a partir de su centro

rectMode(CENTER);

//bucle 1

while (a >= 0) {

  //bucle 2

  while (b >= 0) {

    //color de línea igual que el fondo

    stroke(200);

    //color de relleno aleatorio

    fill(random(255));

    strokeWeight(1); // grosor de línea: 1 px

    rect(margen + distancia * b, margen + distancia * a, distancia, distancia);

    b = b-1;

  }

  a = a -1;

  b = espacios;

}

De nuevo hemos cambiado sólo unos pocos elementos. En lugar de puntos o circunferencias, hemos dibujado cuadrados mediante la función rect(), que toma cuatro parámetros: coordenada x, coordenada y, ancho y alto. En nuestro ejemplo hemos establecido tanto el ancho como el alto del mismo tamaño que la distancia entre columnas, para llenar todo el espacio. El color de línea se ha establecido en el mismo color que el fondo (stroke(200)). Hay una pequeña diferencia entre la forma como se define la posición de una elipse y de un rectángulo en Processing. La elipse se define a partir de su centro; el rectángulo a partir de su esquina superior izquierda. Como a veces es conveniente establecer la posición de un cuadrado o un rectángulo a partir de su centro, disponemos de la función rectMode(CENTER). Por último, la función fill() establece el color de relleno para los objetos. De la misma manera que en stroke(), una cifra de 0 a 255 equivale a diferentes tonos de gris. Si te fijas, no hemos pasado a la función fill() una cifra, sino otra función: random(255). Ésta genera cada vez un número aleatorio distinto entre 0 y 255, lo que explica que cada cuadrado tenga un tono de gris diferente. 

//variables

int margen = 20; //espacio entre la ventana y los puntos

int columnas = 16; //número de columnas

int espacios = columnas-1; //número total de espacios

int a = espacios; // para el bucle 1

int b = espacios; // para el bucle 2

float distancia = (width - margen*2.0)/espacios; //calcula la distancia entre columnas

//setup

size(300, 300);

noFill(); // sin relleno

rectMode(CENTER);

//bucle 1

while (a >= 0) {

//bucle 2

while (b >= 0) {

stroke(200);

fill(random(255), random(127), random(63) );

strokeWeight(1); // grosor de línea: 1 px

rect(margen + distancia * b, margen + distancia * a, distancia, distancia, a, b, a, b);

b = b-1;

}

a = a -1;

b = espacios;

}

Dos cambios mínimos en los parámetros de fill() y rect() producen este resultado tan diferente.

En primer lugar, hemos pasado a fill() tres parámetros en lugar de uno. Si un sólo parámetro se traduce en un tono de gris, al pasarle tres estamos definiendo la proporción de rojo, verde y azul que tendrá el relleno. Al igual que en el Ejemplo 4 usamos una función random() para establecer cifras aleatorias, pero si te fijas verás que la cifra para rojo es random(255); la del verde, random(127) y la del azul random(63). Esas cifras indican el valor máximo que puede devolver la función, de manera que la probabilidad de que el valor rojo predomine en la mezcla es el doble que para el verde, y cuatro veces mayor que para el azul. Eso explica que haya bastantes objetos rojos, menos verdes y casi ningún azul.

El otro cambio es que hemos pasado a rect() no cuatro, sino ocho parámetros. Los cuatro últimos establecen el grado de redondeo de cada esquina del cuadrado, y los hemos asociado a las variables a y b, cuyo valor como sabéis va cambiando en cada ciclo de cada bucle.

Como habéis visto en estos ejemplos, partiendo de un mismo esquema y mediante modificaciones sencillas en el código podemos obtener resultados sorprendentes.

¿Qué has aprendido?

• Que pequeños cambios en un programa pueden producir resultados muy diferentes.

• A añadir cierto grado de aleatoriedad controlada a nuestros sketches.

• Las funciones rect(), ellipse(), stroke(), fill() noFill(), rectMode() y random()

• En el Cuaderno de Informática

1. ¿Cómo se ven los videojuegos por dentro?
   
   

   • Investiga cómo se representan los personajes y escenarios en un videojuego utilizando figuras geométricas simples.

   • Busca ejemplos de videojuegos que utilizan gráficos basados ​​en vectores y compártelos con la clase.

2. Creando figuras con código:
   
   

   • Investiga qué es un vector en programación y cómo se usa para posicionar objetos en un juego.

   • Explora cómo se pueden dibujar personajes o escenarios con líneas y elipses .

2️⃣ Actividad en Grupo: “Simulación y Movimiento”

📌 En la interfaz de procesing

• Empleando bucles anidados, diseña una red de 40 columnas x 40 filas de puntos de grosores aleatorios entre 2 y 10 píxeles (pista: las funciones strokeWeight() y random() combinadas, serán la clave). Tal vez necesites consultar la Referencia de Processing para saber más sobre random().

• Haz que el color de cada fila de puntos sea más claro que el de la anterior, partiendo del negro.

• Prueba diferentes tamaños de ventana y observa qué ocurre con los espacios entre filas y columnas.

1) Lee atentamente la fase de induccion de la actividad y  simula los 4 ejemplos alli inscritos.

2) Entrega del trabajo individual debidamente diligenciado en el cuaderno de innovacion tecnologica.

3) Entrega la solucion del trabajo grupal, pera ello puedo hacer uso de la red, Si utiliza IA por lo menos explica cada linea de codigo.