OpenGL in Cinder

Q: What are two types of surfaces in images in Cinder?

There are two types of surfaces, an 8-bit unsigned integer, and a 32-bit floating point high dynamic range version.

Introduction

Hello ninja,
We access our CPU almost daily because of the structures of our computers. But have you ever wondered how to access your graphic card or graphic processing unit in your devices or systems?

In this article, we will learn how to access graphics on your computers using OpenGL in Cinder. We will learn the basics of the implementation of OpenGL in Cinder.

About Cinder

An open-source library called Cinder was created to enhance the C++ language's capability for advanced visualisation. It can be seen in many ways as a C++-based substitute for tools like the Java-based Processing library, Microsoft Silverlight, or Adobe Flash.

It was developed by Andrew Bell, Hai Nguyen, and The Barbarian Group in 2010.
One of the most intriguing frameworks for creative coding is Cinder. It is made in C++ for improved performance and enables rapid development of interactive applications with complex visuals.
Cinder frameworks include different categories, which are computational geometry, maths, audio, video, images, and graphics.

We all have graphic cards or GPU in our devices or laptops. Just like we have our device structures built to access our CPU. We also need something to access this huge Graphic processing system. This is where the concept of OpenGL in Cinder comes in.
OpenGL in Cinder is a specification used as a graphical programming standard. This standard is maintained by Khronos Group. To understand what OpenGL in Cinder is, we first need to learn some basics.

OpenGL is a graphics API. We all know that API stands for an Application programming interface. OpenGL in Cinder is a graphics API that allows us to work on graphics by calling out functions. OpenGL in Cinder especially allows access to our graphic processing Unit (GPU), the graphics card in our laptops.

Thus OpenGL in Cinder allows us to control our GPU or graphics card to a certain extent.
OpenGL in Cinder is supported on Windows and Mac. You can use OpenGL in Cinder via Angle as well.

Getting Started

Now that you know what OpenGL in Cinder is, let’s learn how to implement it to perform basic graphical programming.
We will look into a basic example of displaying a black blank screen using OpenGL in Cinder

Implementation

#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"

// Includes all common headers in OpenGL in Cinder 
#include "cinder/gl/gl.h"

using namespace ci;
using namespace ci::app;

// Create a class and public function
class BlackScreen : public Screen 
{
  	public:
	void draw() override;
};

void BlackScreen::draw()
{
	gl::clear();
}

// Display the output by calling out the class and library.
CINDER_SCREEN( BlackScreen, RendererGl )

Explanation

The above-written code looks like basic C++ code. The difference is in the names of the libraries and how we call out the class to display.
You will notice that we have used the library as a parameter while calling out the class. We have used the syntax where we have written “CINDER_” and the function name and used the class name and library name as parameters.
This will display a blank black screen as an output.

Convenience Functions

Convenience functions in OpenGL in Cinder are used to quickly implement something we want on the screen. As the name suggests, convenience means executing something without facing difficulty. The meaning of the word is the sole purpose of these functions.

These are included in the ci::gl. The gl::clear() in the above example was a convenience function. To understand how to use convenience functions in detail, we will look into the below example of creating circles on the screen of different colors.

Implementation

#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"

// Includes all common headers in OpenGL in Cinder 
#include "cinder/gl/gl.h"

using namespace ci;
using namespace ci::app;

// Create a class and public function
class BlackScreen : public Screen 
{
  public:
	void draw() override;
};

void BlackScreen::draw()
{
	// Code for clear black Screen
	gl::clear();

	// Vec2 value setting for the function
	vec2 center = getScreenCenter();
	float r = 100;

	// Code for Red color
	gl::color( Color( 1, 0, 0 ) ); 
	gl::drawSolidCircle( center + vec2( -r, r ), r );

	// Code for Green color
	gl::color( Color( 0, 1, 0 ) ); 
	gl::drawSolidCircle( center + vec2( r, r ), r );

	// Code for Blue color
	gl::color( Color( 0, 0, 1 ) ); 
	gl::drawSolidCircle( center + vec2( 0, -0.73 * r ), r );
}

// Display the output by calling out the class and library.
CINDER_SCREEN( BlackScreen, RendererGl )

Explanation

We are creating circles of different colors on the center of the screen using the convenience functions.

We will understand the code step by step. Most of the code lines would be clear by the comments in the code input itself.

Added preprocessers to insert all common headers in Cinder.
Created a class and public function to perform the task.
We send gl::clear() to get a blank screen.
We used vec2 to set screen dimensions.
We used gl::color() to set the colour of the circles.
We used gl::drawSolidCircle() to draw the circles.
We set two parameters inside gl::drawSolidCircle() to set the size and location of circles to be drawn.

NOTE: you will notice we have used vec2, representing floating point vectors with two components.

Transformations

The meaning of graphics is the representation of data in any form. But in today’s world, graphics means much more than that. We use it in cinemas, in videography, in photography, in web development, and in what not. These are the domains that draw the attention and interest of people. So, we have learned how to create a basic graphics program using OpenGL in Cinder. Let’s now learn how to draw something interesting on the screen using OpenGL in Cinder.

The term transformations in the field of graphics mean translation, scaling, rotation, etc. Imagine all the cool stuff you can do with shapes and figures; those operations come under transformation. Like, look at the image below.

As you can see in the image, we can perform such transformations using OpenGL in Cinder. We use a matrix system of 4x4 in transformation. This broadly means that we work in grids like the ones in our cameras.

We will learn transformations using OpenGL in Cinder in 2D in this article.

Functions Used

Before we dive into examples and their code implementations for transformations. Let’s strengthen our basics by learning about standard functions used for transformation.

The main functions we use for transformation using OpenGL in Cinder in 2D are:

gl::translate() - It works like a keypad where you use this function to move the cursor for action. It works on the current grid or model. It takes the getwindowsize(), getwindowheight(), etc., as parameters.
gl::scale() - It changes the dimensions of the figures or shapes.
gl::rotate() - It changes the angle of the figures or shapes.

A few standard functions we use for transformation using OpenGL in Cinder in 2D are:

gl::setMatricesWindow() - This adjusts the matrix system of 4x4 on which the transformation will work to the window. This means that the matrix model will work according to your screen display.
gl::pushModelMatrix() - It is the stack of matrices to save the model. This is used to make changes to the default matrix model of transformation.
gl::popModelMatrix() - It is the stack of matrices to bring the model back to its default setting. This means that the cursor of our program will be according to the default of the model matrix of 4x4.

Now that we have learned about the basics let's look into some interesting examples for better understanding.

Example One

We will create hollow circles in a circle with different colored boundaries and a white circle at the center. We will use a stack of matrices for the same.

Input

#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"

// Includes all common headers in OpenGL in Cinder 
#include "cinder/gl/gl.h"

using namespace ci;
using namespace ci::app;

// Create a class and public function
class ColourCircles : public Screen 
{
  public:
	void draw() override;
};

void ColourCircle::draw()
{
	gl::clear();

	// Use push to set the model matrix.
	gl::pushModelMatrix();

	// Use the translate function to move to the window center
	gl::translate( getWindowCenter() );

	int circlesCount = 16;
	float r = getWindowHeight() / 2 - 30;

	for( int i = 0; i <  circlesCount; ++i ) {
	float rel = i / (float)circlesCount;
	float angle = rel* M_PI * 2;
	vec2 offset( cos( angle ), sin( angle ) ); 

	// Use push to set the model matrix under the for a loop.
	gl::pushModelMatrix();

	// Use translate to move
	gl::translate( offset * r );

	// Set the color using the HSV color parameter
	gl::color( Color( CM_HSV, rel, 1, 1 ) );

	// Draw the circles according to the model matrix.
	gl::drawStrokedCircle( vec2(), 30 );

	// Set the Model matrix to default by using pop-under the for loop.
	gl::popModelMatrix();
	}

	// Code for a white circle at the window center
	gl::color( Color( 1, 1, 1 ) );
	gl::drawSolidCircle( vec2(), 15 );

	// Set the Model matrix to default using pop
	gl::popModelMatrix();
}

// Display the output by calling out the class and library.
CINDER_SCREEN( ColourCircle, RendererGl )

Explanation

We will understand the code step by step. Most of the code lines would be clear by the comments in the code input itself.

Created a class and public function to draw on the screen.
Used push and pop at the start and end of the program to adjust the graphical model matrix to the screen display.
Used the translate function to move the model matrix for transformation according to the display screen as necessary.
Set a few basic operational programming for the dimensions of the circle.
Used for loop to iterate the circles. We used the push and pop inside the for loop to adjust the window and model matrix.

Example Two

We will create lines of different colors in a circle. We will use a stack of matrices for the same.

Input

#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"

// Includes all common headers in OpenGL in Cinder 
#include "cinder/gl/gl.h"

using namespace ci;
using namespace ci::app;

// Create a class and public function
class ColourLines : public Screen 
{
  public:
	void draw() override;
};

void ColourLines::draw()
{
	gl::clear();

	// Use push to set the model matrix.
	gl::pushModelMatrix();

	// Use the translate function to move to the window center
	gl::translate( getWindowCenter() 

	int linesCount = 32;
	float radius = getWindowHeight() / 2 - 30;

	for( int i = 0; i < linesCount; ++i ) 
	{
	float rel = i / (float)linesCount;
	float angle = rel * M_PI * 2;
	vec2 offset( cos( angle ), sin( angle ) 
	);

	// Use push to set the model matrix under the for loop.
	gl::pushModelMatrix();

	// Use translate to move
	gl::translate( offset * radius );

	// Rotate by current angle
	gl::rotate( angle );

	// Change the dimension of lines.
	gl::scale( 8, 0.25f );

	// Set the color using the HSV color parameter
	gl::color( Color( CM_HSV, rel, 1, 1 ) );

	// Draw the circles according to the model matrix.
	gl::drawSolidCircle( vec2(), 20 );

	// Set the Model matrix to default by using pop-under for loop.
	gl::popModelMatrix();

	// Set the Model matrix to default using pop.
	gl::popModelMatrix();
}

// Display the output by calling out the class and library.
CINDER_SCREEN( ColourLines, RendererGl )

Explanation

We will understand the example code step by step. Most of the code lines would be evident by the comments in the code input itself. There is very little difference between examples one and two, which are as follows:

We have used all three main functions of transformation: translate, scale, and rotate.
Firstly, we have moved the model matrix to the screen as set by the for loop using the translate function.
Then, we rotated the model matrix by a certain angle using the rotate function till the loop ended.
Then, we changed the dimension of the model matrix according to the screen till the loop ended.

Frequently Asked Questions

What is Cinder?

Cinder is an open-source programming library that gives the C++ language advanced visualization abilities. It was released as a public tool in 2010.

What is the use of Cinder?

Cinder makes the library more appropriate for heavily abstracted projects, including art installations, commercial campaigns, and other advanced animation work.

What are two types of surfaces in images in Cinder?

There are two types of surfaces, an 8-bit unsigned integer and a 32-bit floating point high dynamic range version.

What is the method to copy images in Cinder?

The clone method is the most commonly used method to create a new image from the already available one.

How to load and draw images in Cinder?

We can load and draw an image in Cinder using loadimage().

Conclusion

This blog has covered a lot of information about OpenGL in Cinder. We learned a few ways to use OpenGL in Cinder to perform graphical programming. Want to know more about Cinder? Refer to our blogs,

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! Also, refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.