Durante este segundo trimestre estamos aprendiendo a programar. Para iniciarnos en este mundo, comenzamos nuestras prácticas en Processing.
Processing es un lenguaje de programación basado en Java que está diseñado para el desarrollo de arte gráfico, animaciones y aplicaciones gráficas de todo tipo.
Para comenzar hicimos una serie de dibujos geométricos y una serpiente que sigue la dirección del ratón.
Simplemente con copiar el programa en nuestra pantalla de Processing, ya estará listo. Aquí podemos ver cómo le he cambiado el color a la línea mediante "stroke". Los números de dentro del paréntesis corresponder al color. Si variamos los números, cambiará el color de nuestra línea.
Estas figuras geométricas siguen la figura del ratón mientras éste se va moviendo. Podemos cambiar la figura si sustituimos triangle por ellipse, circle...
Ahora crearemos la serpiente. Podemos hacerle las modificaciones que queramos al programa, como la velocidad, los colores o el tamaño de los círculos. Os dejo las modificaciones que le hice yo y que me resultan bastante interesantes.
¡Y llegamos a la mejor parte! ¡La creación de nuestro propio videojuego!
Vamos a intentar que Newton atrape el mayor número de manzanas posibles. Tendremos un contador de manzanas, una cuenta atrás y un modo aleatorio que hará que las manzanas caigan por distintas partes de la pantalla. Cada vez que consigamos atrapar una manzana, cambiará la imagen. Las imágenes deben encontrarse en la misma carpeta en la que tenemos guardado el programa.
Aquí os dejo los comandos para la creación del juego y el juego en marcha.
Recordad que podéis poner las imágenes que queráis, el tiempo que estiméis oportuno o que incluso podéis hacer que caigan dos objetos a la vez. ¡Imaginación al poder!
String[] imFiles = {"fondo.png", "manzana.png", "newton1.png", "newton2.png"};
PImage[] im = new PImage[4];
int nX = 0; // Coordenada X, Newton
int nY = 0; // Coordenada Y, Newton
float mY = 0; // Coordenada Y, manzanas
int mX = 15; // Coordenada X, manzanas
float mV = 0; // Velocidad Y, manzanas
float mA = 0.05; // Aceleracion Y, manzanas
int p = 0; // Puntos conseguidos
boolean pCount = true; // Almacena si se pueden contar puntos o no
long t = 0; // Almacena el tiempo
void setup() {
size(500, 500);
nY = height - 135;
t = millis();
// Carga las imagenes
for(int i = 0; i < 4; i = i + 1) {
im[i] = loadImage(imFiles[i]);
}
}
void draw() {
background(200);
image(im[0], 0, 0, width, height); // Imagen de fondo
// Movimiento de la manzana
mV = mV + mA;
mY = mY + mV;
if (mY > height) {
mY = 15;
mX = int(random(width - 20));
mV = 0;
pCount = true; // Al lanzar una nueva manzana, se podran volver a contar puntos
}
fill(255);
// Deteccion de la colision
if (mY + 50 > nY && mY < nY + 135) {
if (mX + 40 > nX && mX < nX + 128) {
fill(255, 0, 0);
// Si hay colision, incrementa un punto
if (pCount) p = p + 1;
pCount = false; // En cualquier caso, cada vez que se entre
// aqui, ya no se pueden contar puntos
}
}
image(im[1], mX, mY); // Manzana
if(pCount) {
image(im[2], nX, nY); // Newton buscando manzanas
} else {
image(im[3], nX, nY); // Newton alcanzo una manzana
}
// Contabilizacion del tiempo
float timer = (millis() - t) / 1000;
// Fin del juego (GAME OVER)
if (timer >= 30) {
noLoop();
}
// Muestra el tiempo en la pantalla
fill(0);
textSize(20); // Incrementa el tamaño de la fuente de texto
text("Tiempo: " + (30 - timer), 10, 25);
// Muestra los puntos en pantalla
fill(0);
textSize(20);
text("Manzanazos: " + p, 3 * width / 5, 25);
}
void keyPressed() {
// Incrementa las coordenadas en 3 unidades
if (keyCode == RIGHT) {
nX = nX + 25;
}
// Decrementa las coordenadas en 3 unidades
if (keyCode == LEFT) {
nX = nX - 25;
}
// Limita el valor de la coordenada X
if (nX < 0) {
nX = 0;
}
if (nX > width - 20) {
nX = width - 20;
}
}
Por último, creamos un reloj que está sincronizado con la hora del ordenador. Lo personalizamos cada uno a nuestro gusto. Yo en particular sustituí los números por bolas de billar. En la copia que os dejo aquí abajo la posición de reloj es horizontal, pero también lo podéis poner en vertical si queréis.
PImage im[] = new PImage[10]; // Array para 10 imagenes
String imFile[] = {"0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"};
PImage dospuntos;
void setup() {
size(480, 70); // 6 digitos en tres filas y dos columnas
dospuntos = loadImage("dospuntos.JPG");
for (int i = 0; i < 10; i = i + 1) {
im[i] = loadImage(imFile[i]);
}
}
void draw() {
background (0,255,0);
int h = hour();
int h_dec = int(h / 10);
int h_uni = h - h_dec * 10;
image(im[h_dec], 0, 0);
image(im[h_uni], 70, 0);
image (dospuntos, 140, 0);
int m = minute(); // Toma los minutos del reloj del ordenador y almacenalos en una variable
int m_dec = int(m / 10); // Extrae el digito de mayor peso de los minutos (decenas)
int m_uni = m - m_dec * 10; // Extrae el digito de menor peso de los minutos (unidades)
image(im[m_dec], 170, 0); // Muestra el digito de las decenas
image(im[m_uni], 240, 0); // Muestra el digito de las unidades
image (dospuntos, 310, 0);
int s = second(); // Toma los segundos del reloj del ordenador y almacenalos en una variable
int s_dec = int(s / 10); // Extrae el digito de mayor peso de los segundos (decenas)
int s_uni = s - s_dec * 10; // Extrae el digito de menor peso de los segundos (unidades)
image(im[s_dec], 340, 0); // Muestra el digito de las decenas
image(im[s_uni], 410, 0); // Muestra el digito de las unidades
}
Espero que os haya gustado y os haya resultado útil.
A día de hoy estamos programando con Arduino, un lenguaje que es prácticamente igual al de Processing, pero las órdenes en lugar de recibirlas el ordenador y hacerlas, las realiza una placa.
