Sand Dollar in OpenGL/C++
Awhile back I created a small experiment to showcase the speed of BitmapData.copyPixels in flash. Using BitmapData.copyPixels you can draw thousands of things to the screen a time. The original experiment draws 5,000 white rectangles:
Click to see original flash version:
I’ve been trying to think up a nice and simple OpenGL post for this site… porting this Sand Dollar thing from AS3 seemed to be a good idea. The OpenGL version is exactly like the flash one except it is fullscreen, has anti-aliased circles instead of rectangles and draws 15,000 elements instead of 5,000. You can download the application for your mac below. I actually started off doing OpenGL on the PC, so it would actually be pretty easy for me to make a windows version (especially since I used glut), maybe I’ll add one for download later on…
Download Mac Version of Sand Dollar Application
Here is the source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | // // main.cpp // SandDollar // // Created by Zevan Rosser on 1/22/11. // #include <iostream> #include <GLUT/glut.h> #include <OpenGL/OpenGL.h> #define _USE_MATH_DEFINES #include <cmath> #define P_WIDTH 100 #define P_HEIGHT 150 #define NUM_POINTS P_WIDTH * P_HEIGHT // using namespace std; // for debugging with cout typedef struct { float r, g, b, a; } Color; typedef struct { float x; float y; } Pnt; int mouseX = 0; int mouseY = 0; int width, height; Pnt points[NUM_POINTS]; Pnt easePoints[NUM_POINTS]; Color colors[NUM_POINTS]; void setupPoints(){ int inc = 0; int hw = width / 2; int hh = height / 2; const float STEP = 2.399976; const float toRads = M_PI / 180.0; for (float i = 0; i < P_WIDTH; i++){ for (float j = 0; j < P_HEIGHT; j++){ float t = j * STEP; float r = (i + 5.0) * 4.0; float xp = hw + r * cos(t * toRads); float yp = hh + r * sin(t * toRads); Pnt p = {xp, yp}; Pnt pe = {xp, yp}; points[inc] = p; easePoints[inc] = pe; Color col = {1.0, 1.0, 1.0, 0.1}; colors[inc] = col; inc++; } } glEnableClientState(GL_VERTEX_ARRAY); glEnableClientState(GL_COLOR_ARRAY); glVertexPointer(2, GL_FLOAT, 0, easePoints); glColorPointer(4, GL_FLOAT, 0, colors); } inline float angle(float x0, float y0, float x1, float y1){ float dx = x0 - x1; float dy = y0 - y1; return atan2(dy, dx); } inline float dist(float x0, float y0, float x1, float y1){ float dx = x0 - x1; float dy = y0 - y1; return sqrt(dx * dx + dy * dy); } Pnt repel(float xp, float yp){ float d = dist(xp, yp, mouseX, mouseY); if (d < 400.0){ float ang = angle(xp, yp, mouseX, mouseY); xp = mouseX + 500 * cos(ang); yp = mouseY + 500 * sin(ang); } Pnt pnt = {xp, yp}; return pnt; } void init(){ glPointSize(20.0); } void render() { glClear(GL_COLOR_BUFFER_BIT); Pnt p; for (int i = 0; i<NUM_POINTS; i++){ p = repel(points[i].x, points[i].y); easePoints[i].x += (p.x - easePoints[i].x) * 0.02; easePoints[i].y += (p.y - easePoints[i].y) * 0.02; } glDrawArrays(GL_POINTS, 0, NUM_POINTS); glutSwapBuffers(); } bool firstResize = true; void resize(int w, int h) { width = w; height = h; if (firstResize){ setupPoints(); } glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0, w, 0, h, -1, 1); glScalef(1, -1, 1); glTranslatef(0, -h, 0); } void idle() { glutPostRedisplay(); } void mouse(int x, int y){ mouseX = x; mouseY = y; } int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE); glutInitWindowSize(640, 480); glutCreateWindow("Sand Dollar"); glutFullScreen(); glutPassiveMotionFunc(mouse); glutDisplayFunc(render); glutReshapeFunc(resize); glutIdleFunc(idle); glEnable (GL_BLEND); glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glDisable(GL_DEPTH_TEST); glEnable (GL_POINT_SMOOTH); glHint (GL_POINT_SMOOTH_HINT, GL_NICEST); // VBL synching GLint sync = 1; CGLSetParameter(CGLGetCurrentContext(), kCGLCPSwapInterval, &sync); init(); glutMainLoop(); return EXIT_SUCCESS; } |
There are a few things I want to point out from the above code snippet:
typedef struct{ float x, y; } Pnt; // then to make one and set the x and y values: Pnt p = {100.0, 100.0};
To me this is much cleaner than:
struct Pnt{ float x, y; }; // kind of annoying struct Pnt p = {10.0, 10.0};
Another trick is turning on anti-aliasing for points :
glEnable (GL_POINT_SMOOTH); glHint (GL_POINT_SMOOTH_HINT, GL_NICEST);
This will turn GL_POINTS into circles (at least on the mac). You can then change the size of the circles using glPointSize().
The last thing I want to point out is that I’m using vertex arrays instead of lots of calls to glVertex*(). In OpenGL we might do things like this:
glBegin(GL_LINES); glVertex2f(10.0, 10.0); glVertex2f(100.0, 100.0); glEnd();
… the problem is when you have hundreds or thousands of vertex values, that ends up being lots of function calls to glVertex*(). So we can use vertex arrays:
glEnableClientState(GL_VERTEX_ARRAY); glEnableClientState(GL_COLOR_ARRAY); glVertexPointer(2, GL_FLOAT, 0, easePoints); glColorPointer(4, GL_FLOAT, 0, colors);
and then to draw we do:
glDrawArrays(GL_POINTS, 0, NUM_POINTS);
The OpenGL docs for these few functions are actually really easy to understand, so I won’t bother explaining them in detail here… put simply we enable vertex array for vertex values and color values, associate arrays for both and then draw lots of points.
22. January 2011 um 21:32
I’m trying to abandon AS3 too.
Good job ,zevan~
23. January 2011 um 03:40
cool post!
23. January 2011 um 06:05
Hi Zevan,
This is a nice demo of openGL’s prowess. Recently, I’ve been looking into using openGL for data visualizations. Cinder and openFrameworks are great options, though it would be nice to have a better understanding of scripting pure openGL. What resources did you found most useful when starting with openGL & glut?
Thanks,
~Jeremy
23. January 2011 um 09:55
@KG thanks, I wouldn’t say I’m abandoning AS3 though, I like it as a language and it’s still my main source of income đŸ˜‰ Still lots of flash work out there.
@nkint thanks.
@Jeremy Having lots of Processing/Java experience helped when I first started C/C++ and OpenGL back in 2005 (I think). As far as resources, http://nehe.gamedev.net/ and the OpenGL Red Book are excellent. If you’re already a programmer C/C++ isn’t as big a deal as everyone seems to thnik it is. I would say it’s important to understand pointers and “pass by reference vs pass by copy”. Know that Vectors are around if you need growable arrays. It’s important to understand typedef and how it can clean up your code on medium to large sized projects…. actually as I write this I realize there is lots of stuff to understand… it’s all fun though and doesn’t take very long to learn. Last year at some point I descovered an entertaining resource for C. It’s a series of video lectures for an undergrad class in Australia – his explanations of abstraction, binary and other important topics are funny and amazing… check it out: Richard Buckland Videos.
23. January 2011 um 11:04
Cool, thanks for the links & tips. The comp-sci series looks excellent.
~Jeremy