Images In Cinder

Draw and Load an Image

If you want to draw and load images in Cinder, you need to follow this code-

// App's setup() method
gl::Texture texture = loadImage( "codingninjas.jpg" );

// and in your App's draw()
gl::draw( texture );

You can also try this code with Online C++ Compiler

Run Code

The first line initializes a new OpenGL texture using loadimage(). This function loads the various formats available in Cinder. The second line draws the gl. texture() using OpenGL.

Surface

There are two types of surfaces-

• 8-bit unsigned integer
• 32-bit floating point high dynamic range version.
   

This means each color component - red, green, blue, and sometimes alpha - is represented using these two types. There are referred to as, Surface8u and Surface32f, respectively.

The job of a Surface is to replicate a channel. A channel is the grayscale image of a colored image, made up of only one of the primary colors that form the colored image. Generally, we can deal with something other than individual channels. It may become necessary in some cases.

The method to create a Surface from a Channel is given below.

Surface surface( channel );

You can also try this code with Online C++ Compiler

Run Code

Copying Images

The clone method is the most commonly used method to create a new image from the already available one. It creates a copy of an already existing image.

The syntax of how to copy images is written below-

newSurface = oldSurface.clone();

You can also try this code with Online C++ Compiler

Run Code

Manipulating Surfaces

Something you could do with a Surface is walking the pixels, that is, iterate over each RGB value to operate on it. For better understanding, let us see a simple example; we'll invert all the pixels on a Surface:

// Load the image
Surface bitmap( loadImage( "image.jpg" ) );
Area area( 0, 0, 500, 500 );

// Get the area
Surface::Iter iter = surface->getIter( area );

// Manipulate the Surfaces
while( iter.line() ) {
   while( iter.pixel() ) {
      iter.r() = 255 - iter.r();
      iter.g() = 255 - iter.g();
      iter.b() = 255 - iter.b();
   }
}

You can also try this code with Online C++ Compiler

Run Code

In the above code, we construct an instance of a helpful class, Surface::Iter, which is used to iterate the pixels of an Area of a Surface.

Frequently Asked Questions 

What is Cinder? When was it released?

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 Images in Cinder. We learned about the different image formats, how to draw and load images, copy images, and manipulate images. Want to know more about Cinder? Refer to our blogs-

• Audio In Cinder
• Graphics In Cinder
• Cinder Basic Shaders
• Image Sampling
   

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Coding!