Tutorial básico y algo "medio" de Processing y un juego que he creado

[fre3men]

Hola,

Me he atrevido a realizar mi primer "tutorial" de programación!!! enfocado al uso de Processing.js* (http://www.processingjs.org).

* Puede ser Processing a secas y crear aplicaciones para Windows/Linux/Mac y applets de java. Aunque lo chulo es poder hacer aplicaciones para CANVAS!

Este tutorial excede por 1000 los caracteres permitidos al escribir un tema aquí, así como que lo tengo "formateado" con código BBC de mi web con colores que quedaría horroroso aquí. Por ello, y espero que no moleste os pongo sólo el enlace: http://www.heroquest.es/index.php?topic=7375

Además he creado un juego (proyecto en desarrollo pero totalmente jugable), es como un super comecocos del HeroQuest, pero más bestia, y todo son objetos. Los fantasmas son monstruos con su rango de búsqueda, velocidad, vida, imagen... (Aunque la IA la tengo que mejorar bastante). Las paredes también son objetos y puedo diseñar un sin fin de mapas.... El tema del juego es este (ahora lo tengo sólo como applet de java, se requiere la máquina virtual de java): http://www.heroquest.es/index.php?topic=7366

Espero que os guste :)

Un saludo.

[crazykenny]

Muchas gracias por el aporte, fre3men.
Saludos.

[Josich]

Tiene mucha coña el videojuego de HeroQuest.

Buen trabajo.

[cachupila]

Hola. Estoy desesperada con Processing.  Tengo un objeto que he modificado con un ejemplo de  Processing y necesito multiplicarlo con "clases" y  moverlo tipo viento. También que lleve una foto de fondo. ¿Cómo lo hago? AYUDA!!!

PFont f;


float r = 50;
float theta = 50;


float w = 20;
float h = 20;

void setup() {

  size(500,500); 
  background(255); 
  smooth();
}

void draw() { 
 

  float x = r * cos(theta);
  float y = r * sin(theta);
  background(255);
 

  noStroke(); 
  fill(250,250,8); 
  ellipse(x =250, y =250, 70, 70); 
 
stroke(60,120,54); 
  fill(255);
  bezier (250,310,240,260,250,500,400,470);
 

noStroke(); 
  fill(20,130,5);;
arc (300,400,10,80,20,60);

  translate(width/2, height/2);
  noFill();
  stroke(0);
  ellipse(0, 0, r*1.5, r*1.5);


  int totalBoxes = 16;
 

  float arclength = 0;


  for (int i = 0; i < totalBoxes; i ++ ) {
 

    arclength += w/2;
   

    float theta = arclength / r;   
    pushMatrix();


    translate(r*cos(theta) , r*sin(theta));
   

    rotate(theta);
   

    fill(255);
    rectMode(CENTER);
    rect(0, 0, w, h);
    popMatrix();
   

    arclength += w/2;
  }
}

[fre3men]

Hola. Estoy desesperada con Processing.  Tengo un objeto que he modificado con un ejemplo de  Processing y necesito multiplicarlo con "clases" y  moverlo tipo viento. También que lleve una foto de fondo. ¿Cómo lo hago? AYUDA!!!

No pides nada! ¿Cómo lo hago? o querías decir... ¿me lo hacéis?

En este código, tienes la clase Flor para instanciar tantos objetos como quieras, ya te he puesto un sistema para que la posición sea aleatoria o donde tu digas (mediante sobrecarga de funciones, tienes dos funciones como constructor). Lo que no está es el movimiento, a parte que no he entendido si quieres que estén en un sitio fijo y se mueva la flor como si le golpeara el viento, o que aparezca desde un lado y se muevan a otro como si el viento las hubiera arrancado y las moviera por el aire. En tal caso, deberás buscar a un físico y/o matemático.

Código [Seleccionar] Expand

/* @pjs preload="http://www.fondosypantallas.com/wp-content/uploads/2010/07/premium-wallpaper-11.jpg"; */

// Variables globales
int cantidadFlores = 10;
ArrayList flores = new ArrayList();
PImage fondoPantalla;

// Función de inicialización
void setup() {

size(500,500);
smooth();

// Instanciamos una cantidad de flores
for (int i = 0; i < cantidadFlores; i++) {
flores.add(new Flor()); // Si no pasamos el parámetro X e Y, será aleatorio
}

fondoPantalla = loadImage("http://www.fondosypantallas.com/wp-content/uploads/2010/07/premium-wallpaper-11.jpg");
 
}

// Función principal
void draw() {

background(255); // Si la imagen que cargamos ocupa todo el lienzo, esto no será necesario (pero no molesta)
image(fondoPantalla, 0, 0);

// Recorremos todas las flores que pueda contener nuestro array de flores
for (int f = 0; f < flores.size(); f++) {    
Flor flor = (Flor) flores.get(f);
flor.run();
}
}

// Clase Flor
class Flor {
float r = 50;
float theta = 50;
float w = 20;
float h = 20;

int posX, posY;

// Constructor 1
Flor() {
float tempX, tempY;

tempX = random(0, width);
int x = int(tempX);
tempY = random(0, height);
int y = int(tempY);

this.posX = x;
this.posY = y;
}

// Constructor 2
Flor(int x, int y) {
this.posX = x;
this.posY = y;
}

// Método para "procesar" la flor (la dibujaremos y podremos darle movimiento en el futuro...)
void run() {
this.render(); // Dibujamos la flor
}

// Método para dibujar nuestra flor
void render() {

pushMatrix();
translate(this.posX, this.posY);

float x = r * cos(theta);
float y = r * sin(theta);

noStroke();
fill(250, 250, 8);
ellipse(0, 0, 70, 70);

stroke(60, 120, 54);
noFill(); // Importante para que la forma del tallo no tape con un color de relleno al cerrarse el dibujo
pushMatrix();
translate(-width/2, -height/2); // Para no liarnos ahora mirando las coordenadas ya establecidas
bezier(250, 310, 240, 260, 250, 500, 400, 470); // Arghhhh
popMatrix();

noStroke();
fill(20, 130, 5);
arc (50, 150, 10, 80, 20, 60);

noFill();
stroke(0);
ellipse(0, 0, r*1.5, r*1.5);

int totalBoxes = 16;
float arclength = 0;

for (int i = 0; i < totalBoxes; i++ ) {

arclength += w/2;
float theta = arclength / r;

pushMatrix();
translate(r*cos(theta) , r*sin(theta));
rotate(theta);  
fill(255);
rectMode(CENTER);
rect(0, 0, w, h);
popMatrix();
 
arclength += w/2;
}

popMatrix();
}
}

Puedes copiar el código y pegarlo en http://sketch.processing.org para ver el resultado (tal como está, aparecen 10 flores de forma aleatoria).

Se ha tenido que tocar el código de dibujo, pues utilizabas el centro y a partir de ahí valores fijados, así como rellenos que tapaban los demás dibujos (y partes de otros como el tallo que al cerrarse lo rellenabas de blanco).

La clase la he dejado preparada para que puedas manipularla mejor añadiendo nuevos métodos. Verás que tienes una función (método) que se llama run, ahí se puede implementar el movimiento.

He usado arraylist para poder dimensionar la cantidad de flores que habrá por pantalla de forma fácil.

Si pones una imagen grande de fondo de pantalla, puedes ajustarla cambiando los valores 0  image(fondoPantalla, 0, 0); si pones valores negativos, desplazarás la imagen cogiendo un trozo (el tamaño del lienzo). Dejándolo a cero, la imagen se carga desde la esquina superior izquierda.

Sea para lo que sea, (espero que no sea con fin lucrativo, porque entonces llamame tonto por trabajar gratis ;D), deberías aprender que hace el código, no tendría que haber puesto el código (aunque falte el movimiento), pero bueno, ahí lo tienes, AUNQUE NO TENGA MUCHO QUE VER CON EL TITULAR DEL TEMA.

[cachupila]

Muchas gracias. Lo voy a intentar, No sabes lo que te lo agradezco. Te cuento: es un trabajo de facultad. Hasta ahora han utilizado Flash del que si hay libros y tutoriales en español buenos, pero es el primer año de processing y , sin tener ni idea, tenemos que hacer esto por nuestra cuenta. Muchas gracias, a ver si con lo que me has dado soy capaz de aprender y hacer algo. Si me desespero mucho volveré a pedirte auxilio.

[fre3men]

Hola, te contesto por aquí.

Añade/modifica el código que te puse con esto:

Código [Seleccionar] Expand

// Método para "procesar" la flor (la dibujaremos y podremos darle movimiento en el futuro...)
void run() {
this.movement(); // Añadimos movimiento al objeto
this.render(); // Dibujamos la flor
}

// Método para mover el objeto
void movement() {
float tempX = this.posX - sin(frameCount / 0.5);
float tempY = this.posY - sin(frameCount / 0.7);
this.posX = int(tempX);
this.posY = int(tempY);
  }

Como no soy físico ni matemático, esas fórmulas son algo pachangeras, pero da "algo" de sensación de viento. A mi esto (por ejemplo): http://www.todoexpertos.com/categorias/ciencias-e-ingenieria/fisica/respuestas/350048/movimiento-ondulatorio me suena a chino! Pero como verás, el código que creé ya estaba preparado para insertar el movimiento de forma muy fácil, aunque para que estuviera mejor habría que hacer más cosas, como eliminar el objeto al llegar a un extremo y hacer que aparezcan nuevos, o volver a una posición inicial el objeto o que salga desde la otra esquina... En si se puede aplicar muchas cosas (según lo que busques). El código de arriba mueve las flores como si estuviesen arrancadas por el viento (para movimiento ondulatorio fijadas en tierra, pues lo dicho, con mis conocimientos matemáticos no te puedo ayudar), pero ya tienes el ejemplo de como añadir el movimiento ;).

El código es prácticamente el mismo:

Código [Seleccionar] Expand

/* @pjs preload="http://www.fondosypantallas.com/wp-content/uploads/2010/07/premium-wallpaper-11.jpg"; */

// Variables globales
int cantidadFlores = 10;
ArrayList flores = new ArrayList();
PImage fondoPantalla;

// Función de inicialización
void setup() {

size(500,500);
smooth();

// Instanciamos una cantidad de flores
for (int i = 0; i < cantidadFlores; i++) {
flores.add(new Flor()); // Si no pasamos el parámetro X e Y, será aleatorio
}

fondoPantalla = loadImage("http://www.fondosypantallas.com/wp-content/uploads/2010/07/premium-wallpaper-11.jpg");
 
}

// Función principal
void draw() {

background(255); // Si la imagen que cargamos ocupa todo el lienzo, esto no será necesario (pero no molesta)
image(fondoPantalla, 0, 0);

// Recorremos todas las flores que pueda contener nuestro array de flores
for (int f = 0; f < flores.size(); f++) {   
Flor flor = (Flor) flores.get(f);
flor.run();
}
}

// Clase Flor
class Flor {
float r = 50;
float theta = 50;
float w = 20;
float h = 20;

int posX, posY;

// Constructor 1
Flor() {
float tempX, tempY;

tempX = random(0, width);
int x = int(tempX);
tempY = random(0, height);
int y = int(tempY);

this.posX = x;
this.posY = y;
}

// Constructor 2
Flor(int x, int y) {
this.posX = x;
this.posY = y;
}

// Método para "procesar" la flor (la dibujaremos y podremos darle movimiento en el futuro...)
void run() {
this.movement(); // Añadimos movimiento al objeto
this.render(); // Dibujamos la flor
}

// Método para mover el objeto
void movement() {
float tempX = this.posX - sin(frameCount / 0.5);
float tempY = this.posY - sin(frameCount / 0.7);
this.posX = int(tempX);
this.posY = int(tempY);
  }
 
 
// Método para dibujar nuestra flor
void render() {

pushMatrix();
translate(this.posX, this.posY);

float x = r * cos(theta);
float y = r * sin(theta);

noStroke();
fill(250, 250, 8);
ellipse(0, 0, 70, 70);

stroke(60, 120, 54);
noFill(); // Importante para que la forma del tallo no tape con un color de relleno al cerrarse el dibujo
pushMatrix();
translate(-width/2, -height/2); // Para no liarnos ahora mirando las coordenadas ya establecidas
bezier(250, 310, 240, 260, 250, 500, 400, 470); // Arghhhh
popMatrix();

noStroke();
fill(20, 130, 5);
arc (50, 150, 10, 80, 20, 60);

noFill();
stroke(0);
ellipse(0, 0, r*1.5, r*1.5);

int totalBoxes = 16;
float arclength = 0;

for (int i = 0; i < totalBoxes; i++ ) {

arclength += w/2;
float theta = arclength / r;

pushMatrix();
translate(r*cos(theta) , r*sin(theta));
rotate(theta); 
fill(255);
rectMode(CENTER);
rect(0, 0, w, h);
popMatrix();
   
arclength += w/2;
}

popMatrix();
}
}

[tomilofano]

Buenas, la verdad que me gustó mucho tu tutorial y me pareció muy claro. Te cuento que estoy cursando la secundaria y tengo que utilizar Processing y tuto me resolvió muchos conflictos. Pero aun tengo dos. Espero que me puedas ayudar con estos problemas, bueno te los digo:
Yo en skecth tengo un rectangulo, bueno ahora yo quiero poner tal condición y cuando se cumple, quiero que desaparezca el cuadrado ese (Osea no pintarlo del mismo color sino que desaparezca, que se valla)
Bueno ese es uno, y el otro:
tengo cierta condición, y que cuando se cumpla, se empiece a ejecutar otra pestaña de processing.
Bueno, esos son mis conflictos, espero que me puedas ayudar a resolverlo !
Desde ya muchas gracias !
Saludos, Tomás !

[LAIONEL]

MUCHACHOS BUENAS NOCHES QUE PENA MOLESTARLOS  ES QUE TENGO UNA DUDA MAS BIEN UN INCONVENIENTE PARA UNA COMPILACION EN PROCESING

SE SUPONE  QUE ME TOCA HACER EL JUEGO DE LA VIDA !  YA ESTA CREADO ! EN SI EL JUEGO ! 
AHORA EL INCONVENIENTE ES EL SIGUIENTE :
AL INCIAR EL ME DEBE  QUE COLORAR UNAS POCISIONES  YA ALEATORIA MENTE COSA QUE NO HE PODIDO LES  AGRADESERIA MUCHISIMO QUE  ME COLABOREN CON ESTE  TEMA  DE   ANTE MANO MUCHISIMAS  GRACIAS

*CODIGO * :

int width = 600; // Ancho
int height = 400; // Alto
int dotsize = 10; // Tamanho de los cuadrados
boolean field[]; // Campo
int dwidth; // Cuadrados por linea
boolean stop = true; // ¿Esta parado?
int fsize; // Tamanho del array de campo

/* Dibuja una cuadrcula */
void gen_background() {
  stroke( 0 );
  for ( int x = 0 ; x < width ; x += dotsize ) {
    line( x, 0, x, height );
  }
  for ( int y = 0 ; y < height ; y += dotsize ) {
    line( 0, y, width, y );
  }
}

/* Prepara el escenario */
void setup() {
  size( width, height );
  dwidth = width / dotsize;
  fsize = (height / dotsize) * dwidth;
  field = new boolean[ ( width * height ) / ( dotsize * dotsize) ];
}

/* Cuenta los "vecinos" */
int count_elements( boolean f[], int p ) {
  int i = 0 ;
  if (p + 1 >= dwidth) {
    if (f[ (p + 1 - dwidth) ]) {
      i++;
    }
  }

  if (p >= dwidth)
    if (f[ (p - dwidth) ]) {
      i++;
    }
  if (p - 1 >= dwidth ) {
    if (f[ (p - 1 - dwidth) ]) {
      i++;
    }
  }
  if (p > 0) {
    if (f[ (p - 1) ]) {
      i++;
    }
  }
  if (p + 1 < fsize) {
    if (f[ (p + 1) ]) {
      i++;
    }
  }
  if (p + 1 < fsize - dwidth ) {
    if (f[ (p + 1 + dwidth) ]) {
      i++;
    }
  }
  if (p - 1 < fsize - dwidth ) {
    if (f[ (p - 1 + dwidth) ]) {
      i++;
    }
  }
  if (p < fsize - dwidth ) {

    if (f[ (p + dwidth) ]) {
      i++;
    }
  }
  return i;
}

/* Obtiene el siguiente array */
void getNextArr( boolean f[], boolean o[] ) {
  int last = ( width * height ) / ( dotsize * dotsize ) ;
  boolean flipFlop = !o[0];
  for ( int i = 0 ; i < last ; i++ ) {
    int v = count_elements(o, i);
    f [ i ] = ((o[ i ] && v > 1 && v < 4) ||
      ( v == 3 ) );
  }
}

/* Muestra el campo */
void show_field( boolean f[] ) {
  fill( 0 );
  int i = 0;
  for( int x = 0 ; x < width ; x += dotsize ) {
    int j = 0;
    for ( int y = 0 ; y < height ; y += dotsize ) {
      if ( f[ ( dwidth * j) + i ] ) {
        rect( x, y, dotsize, dotsize );
      }
      j++;
    }
    i++;
  }
}

/* Funcion por defecto */
void draw() {
  background( 255, 255, 255 );
  if (!stop) {

    boolean old[] = field;
    field = new boolean[ (width * height) / ( dotsize * dotsize) ];
    getNextArr( field, old );
  }
  gen_background();
  show_field( field );
}

/* Activa/Desactiva una casilla con el raton */
void mousePressed() {
  stop = true;
  int pos = ( mouseY / dotsize * dwidth ) + ( mouseX / dotsize );
  field[ pos ] = !field[ pos ];
}

/* Para/Reanuda con el teclado */
void keyPressed() {
  stop = !stop;
}