En la anterior entrada vimos como pintar un pixel en pantalla y también como pintar muchos aleatoriamente. Incluso pintar pixeles creando pequeños degradados para simular el movimiento de una lluvia de estrellas (bueno, algo así).
En esta nueva entrada vamos primero a ver un sencillo ejemplo en el que creamos un fondo degradado (en rojo, verde y azul). Un degradado a negro.
La intención de crear primero un degradado es ver como puede hacerse de forma sencilla y más tarde pasar a crear lo que se conoce como «raster bars». Unas barritas que cambian de color, que se mueven por pantalla en horizontal o en vertical e incluso que pueden cruzarse parar generar lo que se conoce como el «Patrón de Moiré».
Si te interesa el origen de las raster bar mira aquí: www.youtube.com/watch?v=I0YmJluYb6Q.
Pero antes de eso mejor crear unos degradados y entender su funcionamiento.
Puedes bajar el código del degradado aquí: degradado.zip
No se incorpora ninguna función nueva de modo que pasamos a ver el código que realizará esto (con otro titulo en la ventana, eso fue un error, no es una rasterbar y si un simple degradado):
#include <SDL.h>
#include <stdbool.h>
int main(int argc, char ** argv) {
SDL_Window * ventana;
SDL_Renderer * render;
SDL_Event evento;
bool quit = false;
// El color inicial de la barra será negro como el fondo. Será una barra que cambiaremos de color y repetiremos en el eje y.
int r,g,b,a;
r = 1;
g = 1;
b = 1;
a = 255;
// La posición inicial
int x,y;
x = 0;
y = 0;
SDL_Rect barra;
barra.x = 0;
barra.y = 0;
barra.w = 320;
barra.h = 1;
SDL_Init(SDL_INIT_VIDEO);
Uint32 flags = SDL_WINDOW_OPENGL; // Otros ejemplos SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE | ...
ventana = SDL_CreateWindow("degradado",SDL_WINDOWPOS_UNDEFINED,SDL_WINDOWPOS_UNDEFINED,320,255,flags);
if (ventana == NULL) { printf("No se pudo crear la ventana: %s\n", SDL_GetError()); return 1; }
render = SDL_CreateRenderer(ventana, -1, 0);
// Para que se vea lo meto en 3 for. Este primero mostrará degradado rojo
int z;
for (z = 1; z < 255; z++) {
r = z; g = 0; b = 0;
barra.y = y;
SDL_SetRenderDrawColor(render, r, g, b, a);
SDL_RenderFillRect(render, &barra);
SDL_RenderDrawPoint(render, x, y);
y = y+1;
}
SDL_RenderPresent(render);
SDL_Delay(1000);
y=0;
// Este segundo mostrará un degradado verde
for (z = 1; z < 255; z++) {
r = 1; g = z; b = 0;
barra.y = y;
SDL_SetRenderDrawColor(render, r, g, b, a);
SDL_RenderFillRect(render, &barra);
SDL_RenderDrawPoint(render, x, y);
y = y+1;
}
SDL_RenderPresent(render);
SDL_Delay(1000);
y=0;
// Este tercero mostrará un degradado azul
for (z = 1; z < 255; z++) {
r = 1; g = 1; b = z;
barra.y = y;
SDL_SetRenderDrawColor(render, r, g, b, a);
SDL_RenderFillRect(render, &barra);
SDL_RenderDrawPoint(render, x, y);
y = y+1;
}
SDL_RenderPresent(render);
while (!quit) {
SDL_WaitEvent(&evento);
switch (evento.type) {
case SDL_QUIT:
quit = true;
break;
}
}
}
Sobre esto simplemente comentar algunas cosillas.
La declaración de la variable flags de tipo Uint32 que usaremos desde ahora para añdir allí los flags de la ventana así: «windowflag1 | windowflag2 | …». Puedes ver aquí los flags: wiki.libsdl.org/SDL_WindowFlags
Hemos de mirar la chicha del degradado aquí:
int z;
for (z = 1; z < 255; z++) {
r = z; g = 0; b = 0;
barra.y = y;
SDL_SetRenderDrawColor(render, r, g, b, a);
SDL_RenderFillRect(render, &barra);
SDL_RenderDrawPoint(render, x, y);
y = y+1;
}
SDL_RenderPresent(render);
SDL_Delay(1000);
y=0;
Un for con variable z que se inicializa a 1 y terminará cuando z deje de ser menor que 255.
Eso permite pasar por el for las veces necesarias para pintar en pantalla el degradado (255 ya que es el alto en px de la pantalla que hemos creado).
Cada vez que entra pinta la barra con un color(aunque no lo muestra en pantalla). El color cambiará y en el caso del código solo cambiará el color rojo de valor (de 1 a 255). El 1 es negro, el 255 es rojo puro.
Cuando el for termina (z deja de ser menor que 255) se mostrará el render (con SDL_RenderPresent(render); )
Y así 3 veces teniendo en cuenta que hemos de cambiar el valor de y y ponerlo a 0 para que dibuje de nuevo.
He puesto 3 for para que se vea que lo que vamos a cambiar es el valor de r,g y b cada vez siendo lo que cambia el valor de z.
Dejamos de lado el degradado y pasamos a las rasterbar, … aunque pensándolo mejor, mejor no aún.
Una vez se controlan los degradados podemos pasar a crear esas barritas molonas. Pensaba que esta entrada no quedaría tan grande y por tanto pensaba en poner aquí también el código pero … mejor en otra futura entrada para no saturar mucho.
Saludos cordiales.
