This chapter introduces various basic tasks that can be performed with Cinder through compiling, running, changing, and discussing some of the sample applications.
We have already tested our setup by compiling and running the QuickTime sample application. Now, we are going to see what is possible with Cinder by compiling other samples and discussing what is so special about them.
We will go through samples that show most of the functionalities that will be discussed throughout this book. There will be many parts that are not clear and not easy to explain yet, but do not worry, we will try to understand them during the following chapters.
Here is a list of some of the examples that we are going to discuss. Go to your Cinder samples folder (/Users/You/cinder/samples/ on Mac OS X and C:cindersamples on Windows, if you have followed the tutorial in the previous chapter).
- BasicApp (
samples/basicApp) - BezierPath (
samples/bezierPath) - CairoBasic (
samples/CairoBasic) - CaptureTest (
samples/captureTest) - EaseGallery (
samples/EaseGallery) - TextBox (
samples/TextBox) - ArcballDemo (
samples/ArcballDemo) - Earthquake (
samples/Earthquake) - AudioGenerative (
samples/AudioGenerative)
Go to your Cinder samples folder (/Users/You/cinder/samples/ on MAC and C:cindersamples on Windows, if you have followed the tutorial in the previous chapter).
There will be a folder with the name BasicApp. Take a look at what's there inside. If you are a Mac OS X user, open the project file at xcode/basicApp.xcodeproj. Windows users should open the project file from vc10asicApp.sln. Compile and run the project.
As we can see, a window with a black background appears. It seems that there is nothing there except pure blackness and an infinite void. But that's not true! Grab your mouse and try to fill the void by pointing and clicking-and-dragging anywhere on the black surface of the application window. An Orange line appears. Yes, it is a very basic drawing program that allows you to draw a continuous line. Line is one of the basic 2D geometric shapes that can be created with Cinder.
Let's try to change the color of the line. Close the window and click on the basicApp.cpp file located in the Source directory of the sample project found in the project navigator or project file tree browser of the chosen IDE. Navigate to a place in the code where you can see the following:
void BasicApp::draw()
{This is the place where the actual drawing procedures of the program are defined. Go to the following lines of code:
// We'll set the color to orange glColor3f( 1.0f, 0.5f, 0.25f );
This is the place where the color of the line can be changed. It is done by using a function called glColor3f. From the name of the function it is possible to tell that it uses OpenGL, changes color, and uses three float values for that. It is known that RGB color values consist of three components that are R (red), G (green), and B (blue). In this function, 0.0 is the minimal possible value for each component and 1.0 is the maximum.
Let's change the color of the line to red. We will need to set the red component of the color to maximum (1.0) and all others to minimum (0.0). So it will look like the following:
glColor3f( 1.0f, 0.0f, 0.0f );
The reason why we use the dot-zero-f notation is that we want to tell the compiler that we are passing floating-point constants to the function. I will not dig into this here, as there are a lot of online resources about that on the Internet.
Now save, compile, run, and draw. Well done! You made your first custom line of code with Cinder! Let's continue with another example right away!