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.



 
 
 

5 Responses to “Sand Dollar in OpenGL/C++”

  1. KG
    22. January 2011 um 21:32

    I’m trying to abandon AS3 too.
    Good job ,zevan~

  2. nkint
    23. January 2011 um 03:40

    cool post!

  3. Jeremy
    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

  4. Zevan
    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.

  5. Jeremy
    23. January 2011 um 11:04

    Cool, thanks for the links & tips. The comp-sci series looks excellent.

    ~Jeremy

Leave a Reply

Spam protection by WP Captcha-Free