Beginning OpenGL on OS X

First I have to start with a quick explanation for people who don’t know what OpenGL is. OpenGL is NOT a language. In fact, OpenGL is merely a specification which is implemented in various languages. I have always used C++ and the GLUT library, it simplifies some things. Anyway, more info can be found with a quick google search if you are interested.

Today I am going to focus primarily on getting started using OpenGL on OS X instead of doing fancy things. A couple months ago I took a course on Computer Graphics at my university. The problem was that this professor was pretty much Windows only. Needless to say I was in trouble, I didn’t know C++ and had never worked with it. Here is what I learned about setting up a usable environment

Required software:
Mac OS X (This tutorial was written using 10.5.7 but the overall concepts should work in modern versions of OS X)
XCode 3.1

Required Skills:
None, it would probably help to know C++ but if you are just learning the language don’t worry. I don’t assume you know anything about C++, frankly I didn’t when I was first learning how to do this.

First thing is first, start up XCode and create a new Project (File->New Project)

Creating a new Project using OpenGL

Creating a new Project using OpenGL

You want to select Mac OS X and then Command Line Utility. Don’t worry if your XCode window doesn’t look precisely like that. I named my project Intro_To_OpenGL and saved it somewhere I can find it later.

Starting Your Project

Starting Your Project

The next step is to bring in the correct frameworks, you will need GLUT and OpenGL. To do this you can right click (Control Click if you do not have  a 2 button mouse) on the Intro_To_OpenGL in the Groups and Files browser and select Add->Existing Frameworks. Then select OpenGL.framework and GLUT.framework which are located in /System/Library/Frameworks. You can Command select the two frameworks or you can add them separately. Either way they need to be added to your Project.

After adding the frameworks.

After adding the frameworks.

After you have added the frameworks you can now start writing some code. You will see in the above I selected main.cpp. This is the main file of a C++ program. This simple program will just use this one file. Normally this is a pretty bad way of doing things but this program won’t be very long so we can get away with it.

The Code

//A couple includes

#include <iostream>//This is just for basic io, you really DON’T need it

#include <GLUT/GLUT.h>//GLUT Library, will make you life easier

#include <OpenGL/OpenGL.h>//OpenGL Library

//Let us create a function to initialize everything

void myInit(void){

glClearColor(1.0,1.0,1.0,1.0);//This determines the background color, in this case White

glMatrixMode(GL_PROJECTION);//Determines which matrix to apply operations to. Don’t worry about this for now just assume it has to be there

glLoadIdentity();//Loads the Identity matrix

gluOrtho2D(0, 640, 0, 480);//Set the size and projection of the buffer

}

//Now, lets tell it to display some stuff

void myDisplay(void){

glClear(GL_COLOR_BUFFER_BIT);//Clear the buffer

glColor3d(1,0,0);//Set the color for this polygon

glBegin(GL_POLYGON);//Let us begin drawing some points

//Specify the points

glVertex2i(100,50);

glVertex2i(100,130);

glVertex2i(150, 130);

glVertex2i(100,50);

glEnd();//Ok we are done specifying points

glFlush();//Write this out to the screen

}

int main (int argc, char **argv) {

glutInit(&argc,argv);//Init glut passing some args, if you know C++ you should know we are just passing the args straight thru from main

glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);//Specify the Display Mode, this one means there is a single buffer and uses RGB to specify colors

glutInitWindowSize(640, 480);//Set the window size

glutInitWindowPosition(100,100);//Where do we want to place the window initially?

glutCreateWindow(“My First Window”);//Name the window and create it

glutDisplayFunc(myDisplay);//Set the callback function, will be called as needed

myInit();//Initialize the window

glutMainLoop();//Start the main loop running, nothing after this will execute for all eternity (right now)

return 0;//Return from this function.

}

The output of this simple program

The output of this simple program

I hope this helps  you guys, this is just the basics if there is interest I will continue writing tutorials on more advanced things using OpenGL, GLUT, and C++. As a challenge, turn the background blue, draw a black octagon on top of it. Good luck.

Project: Ethernet Enabled Twitter Client

For my latest project I wanted to build a microcontroller powered device I could hang on my wall (or pin to at the time of writing this). I decided to build a Twitter reader, but not just any old “LCD connected to a PC” setup. No, I wanted this thing to be computer independent.

If you want to build one of these you’re going to need a few things…
1. Arduino Board
2. Arduino Ethernet Shield
3. Serial Enabled 20×4 LCD Screen
4. 5-9V Regulated Power Source

The Arduino USB Board is a great microcontroller to get you started and will allow you to build anything from notification systems to robots. The Ethernet Shield is a simple module that drops on top of the Arduino Board and allows the microcontroller to connect to an Ethernet connection and transfer data. The LCD screen I chose was serial enabled (simplifies our job immensely) so you just need to connect 3 wires to the display. You’re also obviously going to need a power source to power the whole thing (unless you want to tether the Arduino to your PC, but that defeats the purpose of a PC independent Twitter reader…now doesn’t it?) I was able to use a 5v regulated power adapter I had lying around but if you don’t have one of those I’d suggest getting the 9v adapter w/ barrel connector from SparkFun. Anyway, onto the build…

I started by wiring up 3 wires (+/-/signal) to my LCD screen as seen below.

LCD Screen

LCD Screen

Wired LCD

Wired LCD

Next I had to find a way to connect these wires into the Arduino without just jamming the stripped wire directly into the Arduino. I found some small pins (you can use old resistors or any component for that matter which has solid pins coming from it) and soldered them to the ends of the wires that I connected to the LCD display. I then plugged these pins into the Ethernet Shield and zip tied the wiring in place. I connected the signal wire to pin 2 and the power wires to 5v and GND.

Soldered Pins

Soldered Pins

Ethernet Shield

Ethernet Shield

Now I just took the Ethernet Shield and stacked it on top of the Arduino Board.

Arduino and Shield

Arduino and Shield

Stacked Shield

Stacked Shield

The next step was to power everything from a wall outlet. I found a regulated 5v power supply sitting on my desk that I wasn’t using. You have the option of powering the Arduino off the USB connector or through the barrel connector. The Arduino has a built in voltage regulator so that if you connect a power source to the barrel connector, it will be fed through this 5v regulator. If the power you’re feeding into the barrel connector is any lower than about 7v, the regulator won’t be able to properly supply the 5v. Because I already had an adapter that was outputting almost exactly 5v (and always make sure to check with a multimeter!) I soldered a USB connector onto the end of the supply. This way I could feed the Arduino Board my 5v without feeding it through the voltage regulator.

Arduino Connections

Arduino Connections

5v Power Supply

5v Power Supply

All Wired Up

All Wired Up

Ok, so now we’re done with the hardware. Now we actually need the code to make the Twitter Reader work. If you don’t already have the arduino software, you can download it from arduino.cc.

Here is my Arduino sketch I wrote for the twitter display: eTwitterLCD3.zip

Now, there are a few things you’re going to need to change to get this to run. At the top of the file you’ll see:

byte ip[] = { 192, 168, 1, 44 };
byte gateway[] = { 192, 168, 1, 254 };   //your router’s IP address
byte subnet[] = { 255, 255, 255, 0 };    //subnet mask of the network

You will need to change this to work on your network. The IP address doesn’t matter so long as it’s a valid IP and not in conflict with another device on your network.

A little further into the code you’ll find this:

client.println(”GET /statuses/friends_timeline/YOURTWITTERNAME.xml HTTP/1.0″);
client.println(”Authorization: Basic AUTH_KEY_GOES_HERE”);

This is the HTTP header that we are sending to twitter.com. Obviously for the first line you will enter your username before the “.xml”. For the second line we need to setup authentication with our twitter username and password. Basic HTTP authentication is simply the string “username:password” base64 encoded. So if your username was “foo” and your password was “bar”, you just need to base64 encode the string “foo:bar”, which would result in the authentication key of “Zm9vOmJhcg==”. For base64 encoding I simply just searched on google for a site that allowed you to enter a string and have it encoded to base64. It’s pretty easy to write a PHP script to do this as well, but I only needed to do it once so I just ended up using this site. Once you’ve got your authentication key entered into the sketch, upload it to your Arduino, connect an Ethernet cable, and you should be set to go. The Arduino will immediately begin pulling down your “friends” timeline and parsing out the most recent tweet. The software will automatically scroll between 2 pages if the tweet becomes that long.

Pinned to the Wall

Pinned to the Wall

Reading Tweets

Reading Tweets

There’s a few other options I’ve setup in the code that you can play around with. I’ve also tried to document the source code so you can better understand it, but if you really want to start learning how it works, just start hacking apart the code and playing around with the different functions. If you’re getting connection issues, keep in mind that Twitter will block requests for a few minutes if you request data too often. I’ve found a good minimum server contact interval to be around 2 minutes. Feel free to add to the code or change as you see fit. And don’t forget to post back here if you made something really cool using my code or the same basic idea. I’d love to see it or post updates with what you’ve come up with!

The Tech Junkies Episode #4


In this episode of The Tech Junkies, Ben and Eric discover a large wasp nest in Ben’s shed. Rather than taking the risk of taking down the nest themselves, The Tech Junkies build a remotely operated robot armed with cans of RAID that drives into the shed and takes the nest down.

[QuickTime (H.264) Download]-[XviD (AVI) Download]

Episode #4 Release Date

Episode #4 of The Tech Junkies has finally been completed and will be hitting the site on June 25th (this Thursday). For this episode we built a wasp killing robot that can take down an entire nest via remote operation. Make sure to hit up the site to grab/watch the new episode! We’ve also got some other footage filmed and are actively working on episode #5. Oh and if you haven’t checked it out yet, make sure to visit the TTJ forums (on the nav on the right). We’re looking for show ideas or any other general discussion you have about the show.

The Tech Junkies Episode #3


In this episode we take a look at WiFi extension methods and put various methods to the test to see how much of a boost you can get from home-made projects.

[QuickTime (H.264) Download]-[XviD (AVI) Download]

The Tech Junkies Episode #2


In this episode of The Tech Junkies we show various lock hacks including bump keys, lock raking, lock picking, and the masterlock shim. We also give a tour of Control Our Junk and go behind the scenes to show you how it works.

[QuickTime Download]-[XviD Download]

The Tech Junkies Episode #1


Our first episode features building an Internet controlled airsoft gun and what happens when you plug speakers into a wall outlet.

[QuickTime Download]-[XviD Download]

The Tech Junkies Episode #0


A preview of what’s to come.

[QuickTime Download]-[XviD Download]

New Site Live…Patience While We Build

The Tech Junkies have finally relaunched the site at ttjcrew.com! We are building the next generation of our site to feature all of the projects we work on, videos we shoot, music we record, and any other crazy things that come to mind. We’re currently working on pulling all the episodes up onto Vimeo for streaming directly from our site. We are also actively shooting episode #4 which should be released shortly. We’ve got plenty of projects to document and tons of cool stuff coming in the next few months, so stay tuned!

-The Tech Junkies Crew