Archiv der Kategorie ‘OpenGL‘

Krink

Over the weekend and on monday I created an bunch of visual and non-visual C experiments. Here is one of the programs that came out particularly nicely. I’ve only bothered compiling it on OSX but it would be easy to port over to windows since it uses glut. You have a few choices for viewing:

Look at stills on flickr:

Watch the short video:

Download the Application:

KrinkApp

Download the Xcode Project:

Krink

I don’t want to post all the code here since there are a few files and it would be kind of confusing – if you’d like to see all the code, download the Xcode project. I will highlight a few parts though:

Some code snippets:

Circle.h

typedef struct Circle{
	float x;
	float y;
	float vx;
	float vy;
	float dist;
	Color *col;
	int id;
	void (*update)(struct Circle *c);
} Circle;
 
Circle makeCircle();
static void update(Circle *c);

The interesting thing here is the function pointer member of the struct. Later on in Circle.c we point all new Circle structs update member to Circle.c’s static update function:

#include "main.h"
#include "Circle.h"
 
Circle makeCircle(){
 
	Circle c;
	c.x = rand() % width;
	c.y = rand() % height;
	c.vx = rnd() * 8 - 4;
	c.vy = rnd() * 8 - 4;
	c.dist = 10 + rnd() * 100;
	c.col = makeColor();
	c.update = update; 
	c.id = 0;
 
	return c;
}
 
static void update(Circle *c){
 
	c->x += c->vx;
	c->y += c->vy;
 
	if (c->x > width) c->vx *= -1, c->x = width;
	if (c->y > height) c->vy *= -1, c->y = height;
 
	if (c->x < 0) c->vx *= -1, c->x = 0;
	if (c->y < 0) c->vy *= -1, c->y = 0;
 
	glVertex2f(c->x , c->y);
}

Here’s a snippet from main.h:

typedef struct {
	float r;
	float g;
	float b;
	float a;
} Color;
 
extern Color *makeColor();

and then later in main.c we define makeColor():

Color *makeColor(){
	static Color colors[COLOR_NUM] =
	{{0.765, 0.902, 0.875, 0.2},
		{0.039, 0.059, 0.075, 0.2},
		{0.247, 0.251, 0.259, 0.2},
		{0.345, 0.514, 0.549, 0.2},
		{0.929, 0.878, 0.671, 0.2},
		{0.851, 0.965, 1.000, 0.2},
		{0.498, 0.247, 0.149, 0.2},
		{0.090, 0.098, 0.078, 0.2},
		{0.545, 0.584, 0.486, 0.2},
		{0.157, 0.180, 0.133, 0.2}};
 
	return &colors[rand() % COLOR_NUM];
}

For some reason I decided to encapsulate all the colors into a function that would then spit out a pointer to a random value in the static colors array – so there are only every COLOR_NUM color struct instances no matter how many particles (Circle struct instances) there are. Lots of other ways to do this same thing I guess… I got the colors from my drawings, I speed coded a little AS3 to grab a few random values from a given MovieClip and write the struct initializations. The actionscript is funny because I coded it javascript style for some reason:

var panel = addChild(new Sprite());
 
var bit = new BitmapData(sample.width, sample.height, false, 0);
 
bit.draw(sample);
 
var cols;
 
stage.addEventListener(MouseEvent.CLICK, function(){
	cols = "{";
	for (var i = 0; i<10; i++){
		var c = bit.getPixel(int(Math.random() * sample.width), 
							 int(Math.random() * sample.height));
		cols += toArray(c);
		panel.graphics.beginFill(c);
		panel.graphics.drawRect(0, i * 20, 20, 20);
	}
	cols = cols.substr(0,cols.length-2) + "};";
	trace(cols);
});
 
var alph = 0.2;
function toArray(c){
	var r = (c >> 16) & 0xFF;
	r /= 0xFF;
	var g = (c >> 8) & 0xFF;
	g /= 0xFF;
	var b = c & 0xFF;
	b /= 0xFF;
	return "{"+r.toFixed(3)+", "+g.toFixed(3)+", "+b.toFixed(3)+", " + alph + "},\n";
}

13. April 2011 | ActionScript, C, Glut, OpenGL, xcode | Comments (2)

C Glut OpenGL & Xcode Project

Two people asked me about OpenGL C and Xcode this last week. So I figured I’d make a quick video to show an easy way to get up and running.

Little Mistake
Note that you should change the Active Architecture of your project to i386. I forgot to do that in the video. It will still work if you don’t do this, but you’ll get some loading errors in the console… so, make this change after you’ve watched the video:

The first 3 minutes of this video show everything you need to know, the next 7 minutes is just me sort of rambling about a few things that you may or may not need to know, so feel free to just watch the first 3 minutes and then go and code some OpenGL.

Source for template is at bottom of post.

Links:
Red Book
stdlib.h
vbl sync

Here is the source for the 2D template, once you’ve got your project set up, just copy it into main.c and compile.

#include <math.h>
#include <stdlib.h>
#include <stdio.h>
 
#include <GLUT/glut.h>
#include <OpenGL/OpenGL.h>
 
int mouseX = 0;
int mouseY = 0;
int width;
int height;
 
void init(){
	glPointSize(60.0);
}
 
void render() {
	//glClear(GL_COLOR_BUFFER_BIT);	
 
	glColor4f(1, 1, 1, 0.5);
	glBegin(GL_POINTS);
	glVertex2i(mouseX, mouseY);
	glEnd();
 
	// you need this (see double buffering)
	glutSwapBuffers();
}
 
void resize(int w, int h) {
	glClear(GL_COLOR_BUFFER_BIT);
	width = w;
	height = h;
	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);
 
	width = 640;
	height = 480;
	glutInitWindowSize(width, height);
	glutCreateWindow("Template");
	//glutFullScreen();
	//glutSetCursor(GLUT_CURSOR_NONE); 
 
	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 prevent tearing
	GLint sync = 1;
	CGLSetParameter(CGLGetCurrentContext(), kCGLCPSwapInterval, &sync);
 
	init();
 
	glutMainLoop();
 
	return EXIT_SUCCESS;
}

05. April 2011 | C, Glut, OpenGL, xcode | Comments (0)

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:

//
//  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 | ActionScript, C++, OpenGL | Comments (5)

zReference

Archiv der Kategorie ‘OpenGL‘

Krink

C Glut OpenGL & Xcode Project

Sand Dollar in OpenGL/C++

Search

Recent Posts

Categories

Archives