Tecnogramers

Comenzamos con un lenguaje de programación gratuito, creado por Casey Reas y Ben Fry para gente creativa que persiga fines gráficos muy visuales. Puedes descargar el programa  aquí . Tutorial de Processing (I) - Tu primer programa en Processing Tutorial de Processing (II) - Cómo se trabaja Tutorial de Processing (III) - Uso de variables Tutorial de Processing (IV) - Iteraciones Tutorial de Processing (V) - Propiedades de la forma Tutorial de Processing (VI) - Estructura setup y draw En construcción Tutorial de Processing (VII) Tutorial de Processing (VIII) Tutorial de Processing (IX) Tutorial de Processing (X)

Movimiento de parámetros Si en el paso anterior vimos cómo programar el movimiento de un objeto, en este caso vamos a provocar movimiento por cambio de parámetros de forma (ancho y alto), movimiento circular y rotación de objetos. Movimiento por cambio de parámetros de forma (ancho y alto) Veamos cómo podemos incrementar gradualmente el diámetro de un círculo. Como vemos en el siguiente código, el parámetro que se varía es el radio del círculo (radio = radio + 0.5;), mientras que su posición es fija (ellipse(200,200,radio,radio);). float radio=10; void setup (){      size (400,400);      background(0);      smooth(); } void draw (){      noStroke();      fill (255);      ellipse(200,200,radio,radio);      radio = radio + 0.5; }   Movimiento circular o cómo mover una figura siguiendo una circunferencia Observa la siguiente figura: a = h*cos (angulo) x = pos_x + radio* cos(angulo); o = h*sin (angulo) y = pos_y +radio* sin(angulo);   Y ahora observa el siguiente código, donde cre...

Movimiento Poner una figura en movimiento significa que hay un cambio de posición de la misma. Para generar esto, se debe introducir una variable que varíe la posición de la figura en cualquiera de sus ejes. Como veréis en el siguiente código, primero definimos las variables, después vendrá void setup () y más adelante void draw (). Los que más nos interesa conocer son: float vel = 0;  Declaración de variable que “controla” la velocidad ellipse (pos_x, pos_y+vel, diam, diam); el cambio de posición se va a dar en el eje y vel++; indica el incremento de la variable vel en cada loop. NOTA: vel++ equivale a vel = vel+1 int pos_x = 200; int pos_y = 0; int diam = 100; float vel = 0; void setup( ){      size (400,400);      smooth(); } void draw ( ){      background (0);      noStroke();      fill(255);      ellipse (pos_x, pos_y+vel, diam, diam);      vel++; }     Ejercicio: prueba a modificar el código anterior para que el movimiento de la esfera sea ascendente.   ...

Processing permite trabajar en dos modos de programación: uno estático y otro dinámico. En el primer modo, se escriben las instrucciones en orden descendente pero sin una organización externa, mientras que en el segundo modo de programación el código se organiza en estructuras. Hasta el momento, las instrucciones que se han escrito en Processing no han sido separadas de acuerdo con el modo de programación: (1) instrucciones de configuración e inicialización del programa y (2) instrucciones de dibujo. En este capítulo, el alumno aprenderá a separar las instrucciones de acuerdo con su funcionalidad, así como a interactuar con el programa a partir del uso del mouse y el teclado. Podemos decir que todos los programas tienen un flujo (serie de instrucciones), un inicio y un fin. Por ejemplo: Paso 1. Doy las condiciones de inicio Paso 2. Sigo las instrucciones, una y otra vez, hasta que el programa termina En un ejemplo más concreto, podemos tener no solo condiciones de inicio, sino también ...

  La escala de grises Digitalmente, el color negro corresponde al valor 0 y el color blanco al valor 255. Esto quiere decir que existen, entre estos dos valores, 254 diferentes colores que podríamos representar. Dichos valores corresponden entonces a una escala de grises. Con esto en mente, debemos inicialmente comprender tres instrucciones adicionales, mediante las cuales podremos aplicar la escala de niveles de gris. Estas instrucciones son background(), fill() y stroke().   El background La instrucción background() permite definir la escala de grises deseada que utilizaremos para el fondo de pantalla donde se desplegarán cada una de las formas geométricas utilizadas. Ejemplo: background(10);   El stroke La función stroke() permite definir la escala de grises deseada para los contornos de las formas geométricas. Ejemplo: stroke(255); La función stroke() permite trabajar con los contornos de las formas, existiendo la función noStroke(), que hace desaparecer totalmente el...

Iteraciones - Instrucciones repetitivas La instrucción for  La instrucción for es utilizada cuando sabemos de antemano el número de veces que debemos repetir un conjunto de instrucciones. Se trata de un bloque que está definido de la siguiente manera: for (inicialización, condición, actualización) { // Este es el conjunto de instrucciones que se ejecutan // n número de veces } La estructura del for debe de tener los tres elementos de la iteración (inicialización, actualización y condición), representadas de manera implícita en la propia estructura iterativa. Prueba con el siguiente código: for (int x = 20; x <= 380; x = x+20) { line (x, 20, x, 380); } int x = 20;  nos dice el inicio. x <= 380;  ejecuta la instrucción hasta que x = 380 x = x+20; c ada vez que se ejecuta la  instrucción x se incrementa en 20 { line (x, 20, x, 380); }; conjunto de instrucciones que se repiten   Comprueba el resultado de este otro código: for (int x = 20; x <= 380; x = x+20) { for (int y = 2...

Uso de variables La variable es un elemento frecuentemente utilizado en programación informática. El  concepto básico de variable se relaciona con la capacidad de poder almacenar un valor dentro del programa. Este valor podrá utilizarse y modificarse en la ejecución del programa. Con Processing vamos a trabajar con distintos tipos de datos, siendo el tipo de dato un atributo que indica qué datos se van a procesar, es decir, qué tipo de información podemos almacenar en el identificador y qué operaciones podemos realizar. Los tipos de datos comunes son: enteros, flotantes (decimales), caracteres, cadenas de caracteres, etc.   Enteros (int): permiten modelar características cuyos valores posibles son los valores numéricos de tipo entero. Ejemplos: int x = 40; int k = ‐90;   Reales (float): permiten representar valores de tipo real. Ejemplos: float m = 10.03; float h = 0.75;   Caracteres (char): permiten representar caracteres. Ejemplos: char letra = ‘a’; char uno = ...

Cómo se trabaja con Processing En esta entrada vamos a ver cómo se trabaja con Processing desde lo más básico: las instrucciones, los comentarios en el código, el tamaño del lienzo o superficie de dibujo, coordenadas y dibujo de diversas formas básicas (punto, línea, rectángulo y elipse). Instrucciones Son los elementos estructurales del programa. Todas las instrucciones deben finalizar con “;” Ejemplo: point (100,100);   Comentarios Son usados para hacer notas (apuntes) entre las líneas de código, que por lo general facilitan la comprensión del programa. Para hacer comentarios de una línea se debe iniciar el comentario con “//” Ejemplo: //int v ‐ velocidad de desplazamiento. Para hacer comentarios que requieren más de una línea, se debe iniciar el comentario con “/*” y finalizarlo con “*/” Ejemplo: /* Esta instrucción dibuja 20 líneas y modifica el color según con la posición en el eje y */   Tamaño del lienzo o superficie de dibujo Para establecer el tamaño del lienzo es nec...

Tu primer programa en Processing Cuando se abre el programa Processing por primera vez, sorprende la sencillez de la interfaz: el área larga es el editor de texto, y los botones de la parte superior forman la barra de herramientas. En la parte inferior está el área de mensajes (para mensajes de una línea) y debajo la consola (para aspectos más técnicos). Escribe lo siguiente en el editor: ellipse(50, 50, 80, 80); Esta línea de código significa “dibuja una elipse, con el centro situado a 50 píxeles del margen izquierdo y 50 del margen superior. Ahora haz click en el play de la parte superior. Si has escrito el código correctamente, verás un círculo en la ventana de visualización. De lo contrario, el área de mensajes se volverá roja y mostrará los posibles errores cometidos.   Uno de los aspectos más complicados al empezar a programar es que debes ser muy especifico con la sintaxis. El software de  Processing  no siempre es lo suficientemente inteligente como para saber lo que quiere...