SDL2 Pixel Drawing
Here's a quick tutorial in pixel drawing on Simple DirectMedia Layer 2.
Join the DZone community and get the full member experience.
Join For Freegreetings!
in “ handling keyboard and mouse events in sdl2 ," we saw how we could handle keyboard and mouse events to allow the user to interact with whatever we are displaying on the screen. in today’s article, we’ll learn how to draw individual pixels onto our window, and we’ll use mouse events to create a drawing program similar to a limited version of microsoft paint.
we’ll start off with some code similar to that in “ showing an empty window in sdl2 ":
#include <sdl.h>
int main(int argc, char ** argv)
{
bool quit = false;
sdl_event event;
sdl_init(sdl_init_video);
sdl_window * window = sdl_createwindow("sdl2 pixel drawing",
sdl_windowpos_undefined, sdl_windowpos_undefined, 640, 480, 0);
while (!quit)
{
sdl_waitevent(&event);
switch (event.type)
{
case sdl_quit:
quit = true;
break;
}
}
sdl_destroywindow(window);
sdl_quit();
return 0;
}
since we’re going to draw pixels directly rather than load an image, our course of action in this article is going to be a little different from past articles. first, we need a renderer, so we use sdl_createrenderer() as we have been doing all along:
but then, rather than creating a texture from a surface, we’re now going to create one from scratch using sdl_createtexture() :
sdl_texture * texture = sdl_createtexture(renderer,
sdl_pixelformat_argb8888, sdl_textureaccess_static, 640, 480);
we pass in several parameters. the first one is the renderer, and the last two are the width and height of the texture.
the second parameter, which we have set to sdl_pixelformat_argb8888 , is the pixel format. there are many possible formats (see sdl_createtexture() documentation), but in this case we’re saying that each pixel is a 32-bit value, where there are 8 bits for alpha (opacity/transparency), 8 bits for red, 8 bits for green and 8 bits for blue. these four items are collectively known as channels (e.g. the alpha channel), so each channel consists of one byte and it can range between 0 and 255. the arrangement below thus represents a single pixel:
alpha red green blue 8 bits 8 bits 8 bits 8 bits
the sdl_textureaccess_static defines a method of accessing the texture. since we’re storing our pixels in cpu memory and then copying them over to the gpu, static access is suitable. on the other hand, streaming access is used to allocate pixels in a back buffer in video memory, and that’s suitable for more complex scenarios.
finally, we initialise a set of pixels that we’ll be copying onto the window. when we draw stuff, we’ll modify these pixels, and then they’ll be copied onto the window to reflect the update.
we’ll need to clean up all the stuff we just allocated, so add the following just before the other cleanup calls at the end of the code:
delete[] pixels;
sdl_destroytexture(texture);
sdl_destroyrenderer(renderer);
at the beginning of the
while
loop, we may now add the following call:
sdl_updatetexture(texture, null, pixels, 640 * sizeof(uint32));
in this code, we are using
sdl_updatetexture()
to copy our pixels onto the window. we pass it our
texture
, a region of the texture to update (in our case
null
means to update the entire texture), our array of pixels, and the size in bytes of a single row of pixels (called the
pitch
). in our case, our window has a width of 640 pixels. therefore a single row consists of 640 4-byte pixels, hence the multiplication.
at the end of our
while
loop, we may now render our texture as we have done in previous articles:
sdl_renderclear(renderer);
sdl_rendercopy(renderer, texture, null, null);
sdl_renderpresent(renderer);
great. so far, we have…uh…this:
let’s clear the background to white, so that we can draw black pixels over it. we could do that using sdl_setrenderdrawcolor() as we did in “ handling keyboard and mouse events in sdl2 “. but since we can now manipulate pixels directly, let’s try something. first, add this at the top:
now, we can use the standard function
memset()
to overwrite our pixels. add this right after the declaration of
pixels
:
memset(pixels, 255, 640 * 480 * sizeof(uint32));
good, it’s white now:
now, let’s add some code to draw black pixels when the mouse is clicked. first, add the following flag at the beginning of
main()
:
bool leftmousebuttondown = false;
then, add this inside the
switch
statement:
case sdl_mousebuttonup:
if (event.button.button == sdl_button_left)
leftmousebuttondown = false;
break;
case sdl_mousebuttondown:
if (event.button.button == sdl_button_left)
leftmousebuttondown = true;
case sdl_mousemotion:
if (leftmousebuttondown)
{
int mousex = event.motion.x;
int mousey = event.motion.y;
pixels[mousey * 640 + mousex] = 0;
}
break;
right, so we’re keeping track of whether the left mouse button is pressed. when it’s pressed (
sdl_mousebuttondown
),
leftmousebuttondown
is set to true, and when it’s released (
sdl_mousebuttonup
),
leftmousebuttondown
is set to false.
if the mouse is moving (
sdl_mousemotion
) and the left mouse button is currently down, then the pixel at its location is set to black (or zero, which is the same thing). note that i intentionally left out a
break
statement at the end of the
sdl_mousebuttondown
case, so that the drawing code in
sdl_mousemotion
is executed along with its own.
so now we can draw our hearts out:
sweet! that was all we needed in order to draw pixels directly onto our window.
in this article, we learned how to draw pixels directly using sdl2. this involved first creating an sdl2 texture with a specified pixel format, then allocating an array to store those pixels, and finally copying the pixels from the array to the texture. we also used a variety of mouse events to allow the user to actually draw pixels onto the window with the mouse, which is like a simplified version of microsoft paint.
this article was originally posted on 13th february 2014 at programmer’s ranch. it has been slightly updated here. the source code for this article is available at the gigi labs bitbucket repository .
Published at DZone with permission of Daniel D'agostino, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments