Processing

void setup() {
   size(200, 100);
}

void draw() {
   text ("Hello world", 10, 10);
}

tipus_de_variable nom_de_variable;

void setup() {
   nom_de_variable = valor_inicial;
}

void draw() {
}

boolean a;

void setup() {
   a = true;
   a = false;
}

int index;

void setup() {
   index = 0;
}

int index;
int doble;

void setup() {
   index = 0;
   doble = 0;
}

void draw() {
   println ("index: "+ index +" valor doble: " + doble);
   index = index + 1;
   doble = index * 2;
}

println ("index: "+ index +" valor doble: " + doble);

float decimal;

void setup() {
   decimal = 0.0;
}

int a;
int b;
float result;

void setup() {
   a = 11;
   b = 2;

   result = a / b;
   println ("a/b = " + result);
   
   result = 11 / 2;
   println ("a/2 = " + result);
   
   result = a / 2.0;
   println ("a/2 = " + result);
}

a/b = 5.0
a/2 = 5.0
a/2 = 5.5

int[] int_array;

String text;

void setup() {
   text = new String ("Hello");
   println (text);
}

void setup() {
   text = new String ("Hello");
   text = "bye!";
   println (text);
}

color c;

void setup() {
   c = color (255, 0, 0);
}

void draw() {
   background (c);
}

color c;

void setup() {
   c = color (255, 120, 60);

   println ("Direct value: " + c);
   println ("Hexadecimal value: " + hex(c));
}

Direct value: -34756
Hexadecimal value: FFFF783C

• AA: Valores entre 00 y FF (0 a 255 en decimal), definen el canal alfa, o lo que es el mismo, la transparencia del color.

• RR: Valores entre 00 y FF (0 a 255 en decimal), definen el canal rojo.

• GG: Valores entre 00 y FF (0 a 255 en decimal), definen el canal verde.

• BB: Valores entre 00 y FF (0 a 255 en decimal), definen el canal azul.

void setup() {
   size(300, 200);
}

void draw() {
   textSize (30);
   text ("Hello world", 10, 30);
}

String message;

void setup() {
   size(300, 200);
   
   message = new String ("Hello world");
}

void draw() {
   textSize (30);
   text (message, 10, 30);
}

String message;
int size;

void setup() {
   size(300, 200);
   
   message = new String ("Hello world");
   size = 10;
}

void draw() {
   textSize (size);
   text (message, 10, 30);
}

String message;
int size;

void setup() {
   size(300, 200);
   frameRate (1);
   
   message = new String ("Hello world");
   size = 10;
}

void draw() {
   textSize (size);
   text (message, 10, 30);
   size = size + 1;
}

String message;
int size;
color c;

void setup() {
   size(300, 200);
   frameRate (1);
   
   message = new String ("Hello world");
   size = 10;
   c = color (100, 100, 100);
}

void draw() {
   background (c);
   textSize (size);
   text (message, 10, 30);
   size = size + 1;
}

String[] message;
int size;
color c;

void setup() {
   size(300, 200);
   frameRate (1);
   
   message = new String [2];
   message[0] = new String ("Hello");
   message[1] = new String ("world!");
   size = 10;
   c = color (100, 100, 100);
}

void draw() {
   background (c);
   textSize (size);
   text (message[(size % 2)], 10, 30);
   size = size + 1;
}

• Definimos la variable array, que contiene información de tipo string.

• message = new String [2]: inicializamos el array y decimos que tendrá lugar para 2 elementos de tipo string.

• message[0] = new String ("Hello"): inicializamos cada una de las posiciones (en este caso el elemento 0) con un dato de tipo string. Aquí lo que puede sorprender es que volvemos a hacer un newString, pero recordad que es porque para crear una cadena de texto normal, también teníamos que hacerlo de esta manera. En el caso de un entero o un decimal, pondríamos directamente el valor. Repasad el ejemplo que está en el apartado de arrays para verlo más claro.

• Una vez tenemos los dos textos cargados en el array, uno en la posición 0 y otro en la posición 1, hay que buscar la manera de que se vayan alternando. En nuestro caso, aprovecharemos la variable size, que se va incrementando, y la función módulo (%). Al hacer el cálculo (size % 2) nos está devolviendo el valor 0 cuando el valor size es par o 1 cuando es impar, y por lo tanto, lo podemos aprovechar para seleccionar qué elemento del array enseñamos en cada momento.

int time_now;
int time_old;
int time_delta;

void setup() {
   size (400, 150);
   frameRate (20);

   time_now = 0;
   time_old = 0;
   time_delta = 0;
}

void draw() {

   time_now = millis();
   time_delta = time_now - time_old;
   time_old = time_now;

   background(0, 0, 0);

   textSize (30);
   text (time_delta, 50, 35);
   text ("ms", 130, 35);
}

//frameRate (20);

int time_now;
int time_old;
int time_delta;
float sec;

void setup() {
   size (400, 150);
   //frameRate (20);

   time_now = 0;
   time_old = 0;
   time_delta = 0;
   sec = 0;
}

void draw() {
   
   time_now = millis();
   time_delta = time_now - time_old;
   time_old = time_now;
   sec = time_delta / 1000.0;

   background(0, 0, 0);

   textSize (30);
   text (time_delta, 50, 35);
   text ("ms", 150, 35);
   text (sec, 50, 70);
   text ("segons", 150, 70);
}

int time_now;
int time_old;
int time_delta;
float sec;
float fps;

void setup() {
   size (400, 150);
   //frameRate (20);

   time_now = 0;
   time_old = 0;
   time_delta = 0;
   sec = 0;
   fps = 0;
}

void draw() {
   
   time_now = millis();
   time_delta = time_now - time_old;
   time_old = time_now;
   sec = time_delta / 1000.0;
   fps = 1.0 / sec;

   background(0, 0, 0);

   textSize (30);
   text (time_delta, 50, 35);
   text ("ms", 170, 35);
   text (sec, 50, 70);
   text ("segons", 170, 70);
   text (fps, 50, 105);
   text ("FPS", 170, 105);
}

color c_black;
color c_white;
color c_green;
color c_red;
color c_blue;

void setup() {
   size(500, 400);
   c_black = color (0, 0, 0);
   c_white = color (255, 255, 255);
   c_green = color (0, 255, 0);
   c_red = color (255, 0, 0);
   c_blue = color (0, 0, 255);
}

void draw() {
   background (c_black);
   rect (10, 10, 100, 100);
}

void draw() {
   background(255, 255, 255);
   fill (0, 0, 0);

   ellipse (ball_x, ball_y, ball_radius, ball_radius);

   if (ball_x < 800){
      ball_x = ball_x + 1;
   }else{
      text ("STOP", 400, 200);
   }
}

• if (ball_x < 800): comprobamos si la posición de la bola en le eje x es inferior a 800, que es la anchura de nuestra ventana.

• Si la condición se cumple, la bola todavía no ha llegado al final de la ventana, incrementamos la variable ball_x para que la bola continúe avanzando.

• Si la condición no se cumple, la bola ha llegado al final, saltamos al bloque de código que hay en el else, y en este caso escribimos un texto en la pantalla y ya no incrementamos la variable de la posición de la bola.

size(400, 400);

void draw() {
   background(255, 255, 255);
   fill (0, 0, 0);

   text ("Height: "+height+", Width: "+width, 10, 15);
   ellipse (ball_x, ball_y, ball_radius, ball_radius);

   if (ball_x < width){
      ball_x = ball_x + 1;
   }else{
      text ("STOP", 400, 200);
   }
}

if (ball_x < width)

ball_x = ball_x + 1;

int ball_x;
int ball_y;
int ball_radius;

void setup() {
   size(400, 400);
   frameRate (20);

   ball_x = 200;
   ball_y = 10;
   ball_radius = 10;
}

void draw() {
   background(255, 255, 255);
   fill (0, 0, 0);

   ellipse (ball_x, ball_y, ball_radius, ball_radius);

   if (ball_y < height){
      ball_y = ball_y + 10;
   }else{
      text ("STOP", width/2, height/2);
   }
}

// Time variables
int time_now;
int time_old;
int time_delta;

// Ball variables
int ball_x;
int ball_radius;
float ball_y;
float ball_y_old;
float ball_y_speed;
float ball_y_speed_old;
float ball_y_acceleration;

void setup() {
   size(400, 400);
   frameRate (20);

   //Time init
   time_now = 0;
   time_old = 0;
   time_delta = 0;

   //Ball init
   ball_x = 200;
   ball_y = 10.0;
   ball_y_old = 10.0;
   ball_radius = 10;
   ball_y_speed = 0.0;
   ball_y_speed_old = 0.0;
   ball_y_acceleration = 9.8;
}

time_now = millis();
time_delta = time_now - time_old;
time_old = time_now;

   if (ball_y < height){
      ball_y_speed = ball_y_speed_old + (ball_y_acceleration * (time_delta/1000.0));
      ball_y = ball_y_old + (ball_y_speed_old * (time_delta/1000.0)) +
      ( (ball_y_acceleration * (time_delta/1000.0) * (time_delta/1000.0)) / 2.0 );

      ellipse (ball_x, ball_y, ball_radius, ball_radius);

      ball_y_speed_old = ball_y_speed;
      ball_y_old = ball_y;
   }else{
      text ("STOP", width/2, height/2);
   }

• Calculamos la velocidad que tiene que tener en función de la velocidad anterior y el tiempo que ha pasado. Fijaos que estamos dividiendo la variable time_delta entre 1.000,0, puesto que este valor es en milisegundos y nosotros lo necesitamos expresado en segundos.

• Calculamos la nueva posición utilizando la ecuación que hemos visto.

• Dibujamos la bola en la posición nueva que acabamos de calcular.

• Actualizamos el valor de las variables antiguas con las que hemos calculado ahora, de esta manera ya estaremos preparados para hacer el próximo cálculo.

int ball_x;
int ball_y;
int ball_radius;

void setup() {
   size(800, 400);
   frameRate (20);

   ball_x = 10;
   ball_y = 200;
   ball_radius = 10;
}

void draw() {
   background(255, 255, 255);
   fill (0, 0, 0);

   ellipse (ball_x, ball_y, ball_radius, ball_radius);

   if (ball_x < 800){
      ball_x = ball_x + 1;
   }else{
      text ("STOP", 400, 200);
   }
}

int ball_x;
int ball_y;
int ball_radius;
int inc_x;
int inc_y;

void setup() {
   size(800, 400);
   frameRate (20);

   ball_x = 10;
   ball_y = 200;
   ball_radius = 10;

   inc_x = 5;
   inc_y = 2;
}

void draw() {
   background(255, 255, 255);
   fill (0, 0, 0);

   ball_x = ball_x + inc_x;
   ball_y = ball_y + inc_y;

   ellipse (ball_x, ball_y, ball_radius, ball_radius);

   if ( (ball_x <= 0) || (ball_x >= width)) {
      inc_x = inc_x * -1;
   }
   if ( (ball_y <= 0) || (ball_y >= height)) {
      inc_y = inc_y * -1;
   }
}

text ("Mouse position:\n  X: "+mouseX+"\n  Y: "+mouseY,10, 20);

float ball_x;
float ball_y;
float dir_x;
float dir_y;

ball_x = width/2.0;
ball_y = height/2.0;
dir_x = 1.0;
dir_y = 1.0;

• ball_*: nos sirve para indicar la posición actual de la bola y está inicializada en el centro de la ventana.

• dir_*: indica hacia dónde se moverá la bola; de momento decimos que se mueva hacia abajo a la derecha.

ball_x = ball_x + dir_x;
ball_y = ball_y + dir_y;
ellipse (ball_x, ball_y, 10, 10);

void draw() {
   background(0, 0, 0);
   text ("Mouse position:\n  X: "+mouseX+"\n  Y: "+mouseY,10, 20);

   dir_x = mouseX - ball_x;
   dir_y = mouseY - ball_y;

   ball_x = ball_x + dir_x;
   ball_y = ball_y + dir_y;
   ellipse (ball_x, ball_y, 10, 10);
}

float ball_x;
float ball_y;
float dir_x;
float dir_y;
boolean run;

void setup() {
   size(400, 400);
   frameRate (20);

   ball_x = width/2.0;
   ball_y = height/2.0;
   dir_x = 1.0;
   dir_y = 1.0;
   run = false;
}

void draw() {
   background(0, 0, 0);
   text ("Mouse position:\n  X: "+mouseX+"\n  Y: "+mouseY,10, 20);

   if (run == true){
      dir_x = mouseX - ball_x;
      dir_y = mouseY - ball_y;

      ball_x = ball_x + dir_x;
      ball_y = ball_y + dir_y;
   }
   ellipse (ball_x, ball_y, 10, 10);
}

• Hemos añadido la variable run, que utilizaremos para indicar si la bola se tiene que mover o no. De momento la hemos dejada inicializada con el valor false, de manera que, aunque movamos el ratón, la bola no se moverá.

• Hemos añadido un bloque if...else que comprueba el valor de la variable run. En el supuesto de que el valor sea true, calculamos el movimiento que tiene que hacer la bola del mismo modo que habíamos visto en el ejemplo anterior.

void mousePressed() {
   run = true;
}

void mousePressed() {
   if (mouseButton == LEFT){
      run = true;
   }else{
      if (mouseButton == RIGHT){
         run = false;
      }
   }
}

void mouseWheel(MouseEvent event) {
   float incr = event.getAmount();
   println(incr);
}

Figura 34. Rueda del ratón

• El valor 1 indicará la velocidad más lenta.

• El valor 100 indicará la más rápida, que será la velocidad con que se está moviendo ahora la bola.

float vel;

vel = 100.0;

text ("Mouse position:\n  X: "+mouseX+"\n  Y: "+mouseY+"\n  Vel: "+vel,10, 20);

void mouseWheel(MouseEvent event) {
   float incr = event.getAmount();

   vel = vel + incr;
   if (vel < 1.0){
      vel = 1.0;
   }
   if (vel > 100.0){
      vel = 100.0;
   }
}

if (run == true){
      dir_x = mouseX - ball_x;
      dir_y = mouseY - ball_y;

      dir_x = (dir_x * vel) / 100.0;
      dir_y = (dir_y * vel) / 100.0;

      ball_x = ball_x + dir_x;
      ball_y = ball_y + dir_y;
}

void setup() {
   size(800, 331);
   frameRate (20);
}

void draw() {
}

PImage img;

void setup() {
   size(800, 331);
   frameRate (20);

   img = loadImage ("background.JPG");
}

void draw() {
   image (img, 0, 0);
}

• JPG: Es el formato que utilizaremos más, nos permite cargar imágenes y mantener una medida de fichero reducida.

• GIF: Puede ser útil para imágenes pequeñas con detalles muy finos como los de los iconos, por ejemplo, pero el uso más interesante es que podremos cargar imágenes animadas y ver esta animación al ejecutar el programa.

• PNG: este formato nos permite trabajar con imágenes con zonas transparentes, cosa que nos puede dar bastante juego. Veremos un ejemplo a continuación.

PImage img;
PImage ball;

void setup() {
   size(800, 331);
   frameRate (20);

   img = loadImage ("background.JPG");
   ball = loadImage ("ball.jpg");
}

void draw() {
   image (img, 0, 0);
   image (ball, 20, 20);
}

PImage img;
PImage ball;
PImage ball_alfa;

void setup() {
   size(800, 331);
   frameRate (20);

   img = loadImage ("background.JPG");
   ball = loadImage ("ball.jpg");
   ball_alfa = loadImage ("ball.png");
}

void draw() {
   image (img, 0, 0);
   image (ball, 20, 20);
   image (ball_alfa, 300, 20);
}

void draw() {
   image (img, 0, 0);
   image (ball, 20, 20);
   image (ball_alfa, 300, 20);
   image (ball_alfa, 550, 60, 100, 100);
}

void setup() {
   size(400, 400);
   frameRate (20);
}

void draw() {
   background(0, 0, 0);
   ellipse (0, 0, 80, 40);
}

void setup() {
   size(400, 400);
   frameRate (20);
}

void draw() {
   background(0, 0, 0);
   fill (255, 255, 255);
   ellipse (300, 50, 80, 40);

   fill (255, 0, 0);
   rotate (HALF_PI/2);
   ellipse (300, 50, 80, 40);
}

rect (5, 5, 2, 2);

void draw() {
   background(0, 0, 0);
   fill (255, 0, 0);
   stroke (255, 0, 0);
   rect (5, 5, 2, 2);

   noFill ();
   stroke (0, 0, 255);
   rect (5, 5, 2, 2);
}

void draw() {
   background(0, 0, 0);
   fill (255, 0, 0);
   stroke (255, 0, 0);
   rect (5, 5, 2, 2);

   translate (5, 0);
   noFill ();
   stroke (0, 0, 255);
   rect (5, 5, 2, 2);
}

Figura 54. Transformaciones y origen de coordenadas (5)

• Desplazamos el origen de coordenadas a la posición (5, 0).

• Dibujamos el cuadrado teniendo en cuenta las nuevas coordenadas de referencia.

Figura 55. Transformaciones y origen de coordenadas (6)

void setup() {
   size(400, 400);
   frameRate (20);
}

void draw() {
   background(0, 0, 0);
   fill (255, 0, 0);
   stroke (255, 0, 0);
   rect (150, 150, 100, 100);

   noFill ();
   stroke (0, 0, 255);
   rect (150, 150, 100, 100);
}

noFill ();
stroke (0, 0, 255);
rotate (radians (30));
rect (150, 150, 100, 100);

noFill ();
stroke (0, 0, 255);
translate (150, 150);
rotate (radians (30));
rect (150, 150, 100, 100);

noFill ();
stroke (0, 0, 255);
translate (150, 150);
rotate (radians (30));
rect (0, 0, 100, 100);

void setup() {
   size(400, 200);
   frameRate (20);
}

void draw() {
   background(0, 0, 0);
   rect (20, 20, 20, 20);
   translate (100,50);
   rect (20, 20, 20, 20);
   ellipse (20, 50, 15, 15);
}

void setup()
{
   size(400, 200);
}

void draw()
{

import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;

void setup()
{
   size(400, 200);
}

void draw()
{

Minim minim;
AudioPlayer player;

void setup()
{
   size(400, 200);

   minim = new Minim(this);
   player = minim.loadFile("buzzer.mp3");
}

void setup()
{
   size(400, 200);

   minim = new Minim(this);
   player = minim.loadFile("buzzer.mp3");

   player.play();
}

void draw()
{
   player.play();
}

void mousePressed() {
   player.play();
}

void setup()
{
   size(400, 200);
}

void draw()
{
   background (0, 0, 0);
}

import controlP5.*;

import controlP5.*;

ControlP5 userinterface;

void setup()
{
   size(400, 200);

   userinterface = new ControlP5 (this);
}

void setup()
{
   size(400, 200);

   userinterface = new ControlP5 (this);

   userinterface.addButton ("button11", 1, 20, 20, 100, 100);
}

void controlEvent(ControlEvent theEvent) {

   if(theEvent.isController()) {

      println("control event from : "+theEvent.controller().name()+", value :
                                    "+theEvent.controller().value());

      if(theEvent.controller().name().equals("button1")) {
         println ("BUTTON PRESSED");
      }
   }
}

import controlP5.*;

ControlP5 userinterface;

int ball_x;
int count;

void setup()
{
   size(400, 200);

   userinterface = new ControlP5 (this);
   userinterface.addButton ("button1", 1, 20, 20, 100, 100);

   ball_x = 20;
   count = 0;
}

void draw()
{
   background (0, 0, 0);

   text ("Pressed "+count+" times", 150, 60);
   ellipse (ball_x, 150, 20, 20);
}

void controlEvent(ControlEvent theEvent) {
   if(theEvent.isController()) {
      println("control event from : "+theEvent.controller().name()+", value :
                                    "+theEvent.controller().value());

      if(theEvent.controller().name().equals("button1")) {
         println ("BUTTON PRESSED");
         pressedButton1();
      }
   }
}

void pressedButton1(){
   ball_x = ball_x + 10;
   count = count + 1;
}