Text changing color when rectangle is drawn

Using Cinder
1

Hi all,
I am new to Cinder after using Processing for several projects, but am evaluating Cinder to see if it might be a better choice for some new projects. I’ve been going through what tutorials I can find (although many are apparently outdated) and experimenting with some of the sample files.

I’m trying to draw text and simple shapes to the screen. I started with the “TextBox” sample code and removed the portion dealing with using the mouse to change the size of the text box. I’m setting the text box background color to red and the text color to white; this works fine (see below).

However, if I then try to draw a blue rectangle as well, the text box background disappears and the text turns to blue, even though the rectangle is drawn after the text box. Why is this happening?

Thanks for any help you can offer!

#include “cinder/app/App.h”

#include “cinder/app/RendererGl.h”
#include “cinder/gl/gl.h”
#include “cinder/gl/Texture.h”
#include “cinder/Text.h”

using namespace ci;
using namespace ci::app;
using namespace std;

class SimpleTextApp : public App {
public:
void setup() override;
void mouseDown( MouseEvent event ) override;
void update() override;
void draw() override;
void textBoxRender();

gl::TextureRef      mTextTexture;
vec2                mSize;
vec2                pos;
Font                mFont;
TextBox  textBox;

};

void SimpleTextApp::setup()
{
mFont = Font( “Arial”, 24 );
mSize = vec2( 200,40);
textBoxRender();
}

void SimpleTextApp::textBoxRender()
{
textBox.setColor( Color(1, 1, 1 ) );
textBox.setBackgroundColor( Color( 1, 0, 0 ) );
textBox.setFont(Font(mFont));
textBox.setAlignment(TextBox::CENTER);
textBox.setSize(vec2(mSize.x, mSize.y));
textBox.setPremultiplied(true);
textBox.setText(“TEXT TEXT TEXT”);
mTextTexture = gl::Texture2d::create( textBox.render() );
}

void SimpleTextApp::mouseDown( MouseEvent event )
{
}

void SimpleTextApp::update()
{
}

void SimpleTextApp::draw()
{
gl::clear( Color( 0, 0, 0 ) );
gl::setMatricesWindow( getWindowSize() );
gl::enableAlphaBlending();

if (mTextTexture)
{
    gl::draw( mTextTexture );
}

gl::color( Color (0, 0, 1) );
gl::drawSolidRect(Rectf(100, 100, 300, 300));

}

CINDER_APP( SimpleTextApp, RendererGl )

TextBoxOutputs
TextBoxOutputs1000×390 36.1 KB

2

OpenGL is a big state machine. When you set the colour state with gl::color it will stay that way until you change it. Cinder has some convenience methods to temporarily change state and restore it afterwards, but you should get in the habit of explicitly setting state for your draw calls to avoid confusion.

if (mTextTexture)
{
    gl::ScopedColor color { Colorf::white() }; // Set the color to white
    gl::draw( mTextTexture );

} // At this point the color will be restored
  // to what it was prior to the call creation 
  // of the gl::ScopedColor object

gl::ScopedColor color { Colorf ( 0, 0, 1 ) };
gl::drawSolidRect(Rectf(100, 100, 300, 300));
3

Thank you so much for a quick and helpful response!