hello games parte 4 - aceleración

En el ultimo post el código quedo algo así, donde se le dio la animación a nuestro personaje, por medio de asignarle una velocidad a nuestro objeto.

int posX;


void setup(){
  
posX=300;
  
  size(400,400);
  smooth();
}


void draw(){
  
  //se altera la varaible de la posicion
  posX+=1;
  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);
}

pero que tal que quisiéramos que la velocidad cambiara, para esto tendríamos que hacer que la velocidad sumada a la posición en X fuese una variable. Por lo que en vez de poner posX+=4 se podria hacer una variable de velocidad y sumarse a la posibilidad, de esta manera.

//se declaran las variables de posición y velocidad

int posX,velX;

void setup() {

  size(400,400);

//se inicializa la variable de posición 

  posX=300;

//se inicializa la variable de velocidad

  velX=1;

  smooth();

}

void draw() {

  //se altera sumando al variable de velocidad a la posición en X

  posX+=velX;

  //se pone un fondo rosa

  background(217,71,135);

  //se dice que se use blanco como relelno para las figuras

  fill(255,255,255);

  //se dice que no se pongan bordes a las figuras a dibujar

  noStroke();

  //se dibuja el circulo, el que seria nuestr personaje

  ellipse(posX,200,40,40);

}

Teniendo la velocidad en una variable sera mas facil de cambiar la velocidad cuando queramos. Por ejemplo en caso de que queramos que la velocidad cambie mientras se ejecuta el programa. Para lograr esto podríamos dar una variable de aceleración, recuerden que la velocidad es el cambio en la posición de un objeto en un determinado tiempo, pero si este movimiento es cada vez mayor o menor, se va a generar una aceleración en el movimiento del objeto.

Para lograr esto pondré la posición inicial en 0, esto es solo para poder ver el efecto de la aceleración mas fácilmente. Al igual que velocidad voy a guardar la aceleración en una variable, pero como vieron anteriromente no es que sea algo necesario sino que es más adecuado, ya que en caso de ser necesario será más fácil el cambio de la variable, además de que será más comodo el escribir el código. 

Además pondré la velocidad en 0, algunos tal vez se preguntaran porque hago esto, pero ya que el movimiento que se va a hacer es de aceleración, implica que el cuerpo inicialmente esta en reposo y por consiguiente no tiene velocidad, es decir que esta sea igual a 0.

También como la aceleración esta constantemente sumándose a la velocidad, se necesitara manejar números más pequeños que los enteros, es decir que se requiere manejar decimales, por lo que iniciare la variable de aceleración en 0.1. Para declara una variable de este tipo, se declara como float o double. 

por lo que el código sería algo así.

//se declaran las variables de posición velocidad y aceleración

//se declaran como decimales por medio del float

float posX,velX,acelX;

void setup() {

  size(400,400);

//se inicializa la variable de posición 

  posX=0;

//se inicializa la variable de velosidad

  velX=0;

  acelX=0.1;

  smooth();

}

void draw(){

código...

}

Habíamos dicho que la velocidad era el movimiento que tenía un cuerpo en una determinada unidad de tiempo. Pues la aceleración es el cambio de la velocidad en la unidad de tiempo, por ejemplo, si tenemos un carro que entre el segundo uno y dos avanza 5mts pero entre el segundo dos y 3 avanza 10 mts, significa que el carro tuvo una aceleración de 5m por segundo, es decir que se le suman 5 metros a la velocidad por segundo que tiene el carro.

En cuanto al código del draw, sería algo similar al anterior, en donde ademas de sumársele la velocidad a la posición, se requerirá de sumarle la aceleración a la velocidad. 

Dejando así el código:

//se declaran las variables de posición velocidad y aceleraci´n

float posX,velX,acelX;

void setup() {

  size(400,400);

//se inicializa la variable de posición 

  posX=0;

//se inicializa la variable de velosidad

  velX=0;

  acelX=0.1;

  smooth();

}

void draw() {

  //se suma la aceleracion a la velocidad

 velX+=acelX;

  

  //se altera sumando al variable de velocidad a la posición en X

  posX+=velX;

  //se pone un fondo rosa

  background(217,71,135);

  //se dice que se use blanco como relelno para las figuras

  fill(255,255,255);

  //se dice que no se pongan bordes a las figuras a dibujar

  noStroke();

  //se dibuja el circulo, el que seria nuestr personaje

  ellipse(posX,200,40,40);

}

---

más proyectos en flavourmachine.com best way to waste your time

  

hello games parte 3- animación

Pero por el momento, nuestro programa no esta haciendo nada interesante simplemente esta dibujando un circulo en la pantalla. Pero que tal si quisiéramos que el circulo se mueva. Ya vimos que el cambio de valor en una variable, asociada la posición de un objeto, puede permitirnos poner este objeto en deferentes partes de la pantalla. Entonces para hacer que un objeto se anime, tendríamos que hacer que la variable asociada a su posición, o al valor que deseemos alterar, valla variando a medida que corre el programa. 


Para nuestro ejemplo, haré que el circulo se desplace en el eje X, es decir de manera horizontal. Como ya tenemos una variable asociada para la posición en X de nuestro objeto voy a trabajar sobre esta. Recordaran que anteriormente había dicho que el código que esta dentro del draw(), va a ser llamado cada frame del programa, lo que implica que podemos aprovechar esta función para poder hacer cambios en nuestras variables, durante la ejecución.


Para nuestro caso voy a sumarle a al variable, así el circulo se mover hacia la derecha. lo que nos daría un código algo así.


void draw(){
  //se altera la variable de la posicion
  posX=posX+1;
  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);


  
}




De esta forma, como el codigo de draw esta siendo llamado constantemente y en este código se encuentra la instrucción que le dice a la variable posX que se le sume 1, cada vez que se llame el código de draw se  le sumara 1 a posX y así el circulo será dibujado cada vez más a al derecha.


Habrán visto que para la sumatoria de la variable pues posX=posX+1, esto significa que posX es igual a el valor que tiene más uno. Pero esto también se puede escribir de otras formas más abreviadas, que dicen lo mismo pero es solo para escribir mas rápido el código. Por ejemplo para este código el posX=posX+1 podría haberse escrito posX++, que significa que a posX se le suma uno, esta instrucción también esta de manera negativa, donde se le dice al programa que la variable se le reste uno, este ultimo se muestra de manera variable--, o en nuestro caso posX--. Aunque en nuestro ejemplo el ponerlo negativo haría que el circulo se moviere hacia la izquierda, pero eso se explica un poco mejor adelante. 


Pero estas abreviaciones solo sirven para sumar o restar uno, en caso de querer hacer esto con otras cifras, solo es cuestión de usar el operador +=, que implica que a la variable se le sume una determinada cantidad. Digamos que nuestro código fuese posX=posX+20, esto podría ser abreviado como posX+=20, que implicaría que a posX se le suma a su valor actual 20. Aunque este operador no solo esta para sumar también sirve para cualquier operación aritmética, por lo que existe el -= para la restarle, *= para multiplicar al valor actual y /=para dividir el valor de la variable.


por lo que el draw de el código podría ponerse de esta forma.



int posX;


void setup(){
  
posX=300;
  
  size(400,400);
  smooth();
}


void draw(){
  
  //se altera la varaible de la posicion
  posX+=1;
  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);

}


La velocidad desde términos físicos, se define como el desplazamiento vectorial de un objeto por unidad de tiempo. Lo que es completamente aplicable a nuestro modelo, dondo vemos que el objeto (el circulo), se mueve 1 pixel cada frame sobre el eje X, que se podría ver como una velocidad de 1px/frame en el eje X. esto implica que si en vez de poner


posX+=1;


pusiéramos


posX+=4;


El objeto se movería mas rápido, porque este ahora estaría sumando 4 px a su posición, lo que implicaría una velocidad de 4px/frame, la cual es más rápida que nuestra antigua velocidad de 1px/frame.

---

más proyectos en flavourmachine.com best way to waste your time

hello games parte 2 - variables

en el post anterior el código quedo algo así:

void setup(){

  

  

  size(400,400);

  smooth();

}

void draw(){

  background(217,71,135);

  fill(255,255,255);

  //este sera el personaje

  strokeWeight(4);

  stroke(255,180,20);

  ellipse(200,200,40,40);

  

  //se selecciona el nuevo color

  fill(0,0,255);

  //se colorean los bordes de rojo

  stroke(255,0,0);

  //se dibuja un cuadrado en la pos 100,100

  //este cuadrado es de relleno azul y con bordes rojos

  rect(100,100,30,30);

  

}

Pero parte de este código fue solo para dar algunos ejemplos de como dibujar elementos. Así que eliminaremos algunas partes para seguir con la construccion del juego y la vamos a dejar de esta forma:

void setup(){

  

  

  size(400,400);

  smooth();

}

void draw(){

  //se pone un fondo rosa

  background(217,71,135);

  //se dice que se use blanco como relelno para las figuras

  fill(255,255,255);

  //se dice que no se pongan bordes a las figuras a dibujar

  noStroke();

  //se dibuja el circulo, el que seria nuestr personaje

  ellipse(200,200,40,40);

  

}

En este momento lo único que hace el programa es dibujar un circulo blanco de 40x40 pixeles en el centro de una pantalla rosa. Recuerden que si quieren cambiar las dimensiones del circulo solo es cambiar los últimos dos números de el comando ellipse(). así que si se quiere tener un ovalo no se pondría ellipse(200,200,40,40); sino ellipse(200,200,10,45); así la elipse será delgada en su ancho extensa en su largo.

Pero por el momento, en nuestro programa solo se están dibujando los elementos y no sucede nada mas, pero que tal si quisiéramos animarlos.  Para esto tendríamos ya que empezar a trabajar con variables. Las variables en la programación son iguales que en las matemáticas, simplemente son un valor que no es fijo, es decir que puede variar a medida que pase el tiempo.

En este momento el circulo se esta dibujando así ellipse(200,200,40,40); eso significa que siempre se va a dibujar de 40x40 pixeles en la posición X,Y de 200,200. Pero si dijéramos que uno de los valores del comando fuera variable y fuese algo como esto ellipse(X,200,40,40); eso implicaría que se dibujaría un circulo de 40x40 pixeles en la altura en Y de 200 pixeles y estaría ubicado en algún lugar en X, es decir que su posición de manera horizontal es indefinida y puede variar.

Pero supongo que varios se preguntaran como se expresa esto en programación de manera en que lo entienda el computador. Pues no es muy complicado, la variable en el computador se maneja como un espacio de memoria en el sistema que puede tener información y la cual puede ser alterada, esto significa que para usar una variable en no de nuestros programas hay que decirle al computador que se necesita abrir un espacio en la memoria para guardar unos datos, esto se llama declaración de variables, en este punto es donde se dice como se va a llamar la variable, que tipos de datos va a albergar (números enteros, decimales, letras, 

imágenes, sonidos). 

Para ver un ejemplo de esto vamos a hacer que el circulo de nuestro programa se mueva a la derecha. Para esto primero habrai que declara las variables, es decir abrir el espacio en la memoria para la variable. que seria algo así:

//se dice que se crea un variable que se va a llamar posX que 

//tendrá inicialmente un valor de 

//200 y que va a ser de tipo entero.

int posX=200;

void setup(){

  código...

}

void draw(){

código...

}

La variables siempre se deben declarar antes del setup(), hay ciertos casos que lo pueden poner dentro del draw el setup o dentro de unos segmentos de código llamados, métodos o funciones, pero eso es mas avanzado y se vera en otros posts más adelante. Por el momento solo declaren las variables antes del setup() como en el ejemplo. También Es bueno que sepan que una variable no necesariamente requiere de valor inicial, el código de nuestro programa podría ser algo así.

//se dice que se crea un variable que se va a llamar posX de tipo entero pero no se dice //cuanto vale

int posX;

void setup(){

//se el asigna el valor de 200 a la variable

posX=200;

 código...

}

void draw(){

código...

}

Poner lo anterior es legal para processing y seria total mente valido, lo diferente es que la variable al momento de ser creada no tiene valor inicial, no ballan a confundir esto con que la variable valga cero o algo así, porque no es así si una variable no vale nada es igual a null, es decir a nulo, porque en los computadores 0 se considera como un valor, como un tipo de número. Algunas veces es preferible inicializar la variables y otras no, pero eso depende del programa que se este haciendo, pero en mi opinión, siempre o al menos la mayoría de los casos, es mejor darle un valor inicial a la variable.

La forma de manejar las variables puede cambiar entre lenguajes, dependiendo como se declaren, en algunos lenguajes se puede hacer que no se puedan modificar, que solo se puedan leer por algunas partes del programa o puede que no se requiera decir de que tipo es la variable, pero todo esto depende es del lenguaje que se maneje. Aunque lo que si es igual en todos los casos, es que todas estas características (si se puede leer, escribir, de que tipo es, etc), son todas estipuladas al momento de declarar la variable, es decir cuando se crea.

Pero la variable no esta haciendo nada por el momento, si vale 200, pero eso no esta haciendo ningún cambio en nuestro programa. pero si digamos se la asignamos a a la posición en X del circulo, va a comenzara a tener alguna función en nuestro programa.


void draw(){
  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);

  }

Con la variable controlando la posición en X del circulo, significa que al cambiar el valor de la variable el circulo se  pondrá en un sitio diferente. Para ver esto se puede cambiar el valor de posX digamos a 300, lo que debería hacer que el circulo se dibujara más hacia la derecha. 

Además una variable puede ser usada para varios propósitos por ejemplo que tal que quisiéramos poner un cuadrado en la misma posición X, pero en otra altura. En ese caso se podría poner el cuadrado en la altura deseada y para su posición en X ponemos la variable. Lo que daría un código así.


void draw(){
  
  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);

 //se dibuja un cuadrado en la misma posicion en x que el                      //circulo pero en otra altura
  rect(posX,300,20,20);
}

Aunque esto ultimo del cuadrado no lo necesitaremos por ahora en el programa, simplemente era para dar ejemplos de como utilizar variables. Por  lo que nuestro código por el momento quedaría algo así.



int posX;


void setup(){
  
posX=300;
  
  size(400,400);
  smooth();
}


void draw(){


  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);


}

---

más proyectos en: flavourmachine.com

hello games parte 1-poniendo objetos en la pantalla

Comenzare con la creación de un pequeño juego, este va a tratar sobre un personaje ubicado en la mitad de pantalla, el cual tendrá que esquivar unas balas que van a salir de las paredes de la ventana. El desarrollo del juego va a ser dividido en varios  post para así dar énfasis en los diferentes elementos.

Comenzaríamos con este código:

Tal vez se vea algo intimidante, pero este pedazo de código es bastante sencillo. 


Se divide igual que en el post anterior, que seria en el setup(), el cual es el código que se llama solo al iniciar el programa y el draw() que es el código que se va a llamar constantemente hasta que acabe de ejecutar el programa.

void setup(){

  

  

  size(400,400);

  smooth();

}

void draw(){

  

  background(217,71,135);

  

  fill(255,255,255);

  //este sera el personaje

  ellipse(200,200,40,40);

}

En el setup(), se ubican dos comandos nuevos, esta el smooth() que hace que todo lo dibujado se vea mas suave, es decir menos pixelado y el size() que dice que tan grande va a ser la pantalla, primero se pone el ancho y luego el alto, esto es algo que se repite en casi todos los comandos de programación, cada vez que se pida las medidas de un objeto primero va el ancho luego el alto y si es el caso luego iría la profundidad.

El draw() es aun mas simple, simplemente se pide que ponga un fondo por medio del comando background al cual se le especifica el color a través de las medidas en RGB. Estas medidas se dan en ese mismo orden, es decir 

background(cantidad de rojo,cantidad de verde,cantidad de azul);

Las medidas RGB se dan de 0 a 255, es decir que si R,G y B están todas en 255 es que esta todo lleno de color y esto generara blanco, si todas están en 0, no hay color y dará negro, si solo R y B están llenas se dará un morado. Sacar los colores puede ser algo complicado por lo que se puede usar la herramienta de color selector de processing, que se puede encontrar debajo de tools en la barra de herramientas.

Cada vez que se haga referencia a colores en la programación, muchas veces se hace por esta forma, dando las medidas de RGB. Existen otras maneras de dar colores como la hexadecimal pero eso lo veremos más adelante.

Después, por ultimo se le pide al programa que pinte un circulo blanco, el color se decide por medio de el comando fill(), también especificando el RGB y el circulo se especifica con ellipse.


También se darán cuenta que al final del comando background(R,G,B); se pone punto y coma, eso siempre es necesario ponerlo al final de cada instrucción, ya que esto es lo que le dice al computador cuando es que debe terminar una tarea especifica, si no se pone se va a generar un error. Así que hay que ponerla después de cada comando e instrucción.

Ellipse tiene cuatro parámetros, los primeros dos son la posición es decir X, Y y los otros dos son el ancho y el largo. Esta manera de pintar en la pantalla es bastante común, primero se dan las coordenadas y luego las medidas, dando primero siempre los datos de X y luego los de Y, entonces en el caso de ellipse es ellipse(posX,posY,ancho,alto). Se que dije que no me especificaría en comandos de los lenguajes y posteriormente será así, pero esto era para una introducción a la manera de poner objetos en la pantalla. Ya que este método también se usa para poner cuadrados, imágenes, o los diferentes puntos que conformen un dibujo creado por programación. Al final del post pondré estos comandos di desean buscarlos en la referencia de processing igualmente las imágenes y los dibujos por vectores puede que si se expliquen un poco mas a fondo más adelante.

Las coordenadas en Processing inician sus puntos 0,0 en la esquina superior izquierda. pero estas cambian un poco a las coordenadas corrientes del plano cartesiano. En processing las coordenadas en Y se reducen hacia arriba y aumentan para abajo, mientras que X se reduce para la izquierda y aumenta a la derecha. 

http://processing.org/learning/drawing/

http://processing.org/learning/drawing/imgs/1.5.jpg

También hay que aclara que la forma de pintar en processing es tal como si fuera una persona dibujando en un canvas, en este caso se le dijo pinte todo el fondo de rosa y luego con la pintura blanca, pinte un circulo en el centro. Pero si pasáramos el background al final. es decir:

void draw(){

  

  

  

  fill(255,255,255);

  //este sera el personaje

  ellipse(200,200,40,40);

  

  background(217,71,135);

}

En este caso no se vería nada excepto un fondo rosado, esto es porque se le esta pidiendo que pinte el circulo y luego se le dice que ponga un fondo encima. Es decir que el circulo si lo dibuja pero no se puede ver porque esta debajo del fondo y así para todo lo que se dibuje, lo que se ponga después en el código, quiere decir que va a ser dibujado después y por consiguiente encima de lo que ya se a puesto en la pantalla.

volviendo al código original

void draw(){

  

  background(217,71,135);

  

  fill(255,255,255);

  //este sera el personaje

  ellipse(200,200,40,40);

  

  

}

Se puede ver que al ejecutarse el código tiene un pequeño borde negro, este al igual que el fil también se puede modificar, pero este no se da por el fill() sino por stroke(R,G,B) que da el color de la linea y strokeWeight(tamaño) que define el grosor de la misma.

void draw(){

  

  background(217,71,135);

  

  fill(255,255,255);

  //este sera el personaje

  strokeWeight(4);

  stroke(255,180,20);

  ellipse(200,200,40,40);

  

  

}

Esto dibujara lo mismo pero esta vez el circulo tendrá un borde mas grueso y de color naranja. También hay que aclarar que estos comandos afectan a todas las figuras que se dibujen, es decir que si luego dibujan un cuadrado, este también será blanco con un borde grueso naranja, si desean cambiarlo tendrán que volver a llamar el comando de stroke y de fill.

un ejemplo de esto seria

void draw(){

  

  

  background(217,71,135);

  fill(255,255,255);

  //este sera el personaje

  strokeWeight(4);

  stroke(255,180,20);

  ellipse(200,200,40,40);

  //se dibuja un cuadrado en la pos 100,100

  rect(100,100,30,30);

  

}

Esto va a dibujar el cuadrado con los mismos colores y bordes que el circulo pero imaginemos que quisiéramos que el cuadrado a diferencia del circulo fuera azul y de borde rojo. Entonces el código seria algo así:

void draw(){

  background(217,71,135);

  fill(255,255,255);

  //este sera el personaje

  strokeWeight(4);

  stroke(255,180,20);

  ellipse(200,200,40,40);

  

  //se selecciona el nuevo color

  fill(0,0,255);

  //se colorean los bordes de rojo

  stroke(255,0,0);

  //se dibuja un cuadrado en la pos 100,100

  //este cuadrado es de relleno azul y con bordes rojos

  rect(100,100,30,30);

  

}

Si no se quiere tener fondo o borde se pueden poner los comandos noFill() y el noStroke(). Si se quiere alterar la transparencia solo es poner un comando mas en el RGB que indique el alfa.

Fondo con transparencia: fill(234,44,124,125); el ultimo numero indica el alfa, en este caso es un fondo con opacidad del 50%, si no se pone este numero, processing va a tomar como default que vale 255, es decir que no tiene transparencia.

stroke con transaprecia: stroke(234,43,111,200); tiene las mismas normas mencionadas para el fill.

Por el momento nuestro código quedaria así:



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

void draw(){

  background(217,71,135);

  fill(255,255,255);

  //este sera el personaje

  strokeWeight(4);

  stroke(255,180,20);

  ellipse(200,200,40,40);

  

  //se selecciona el nuevo color

  fill(0,0,255);

  //se colorean los bordes de rojo

  stroke(255,0,0);

  //se dibuja un cuadrado en la pos 100,100

  //este cuadrado es de relleno azul y con bordes rojos

  rect(100,100,30,30);

  

}

comandos extra mensionados:

imágenes: image();

cuadrados: rect();

dibujos (este se da por medio de varios comandos): 

beginShape(),vertex(),bezierBertex(),endShape()

---

más proyectos en: flavourmachine.com