Lections on OpenFrameworks

Two-dimensional graphics

Denis Perevalov [email protected]

See in-depth details in my book Mastering openFrameworks Books examples are free, see masteringof.wordpress.com

Display Settings
in main.cpp: ofSetupOpenGL(& Window, 1024,768, OF_WINDOW); 1024, 768 - screen sizes, OF_WINDOW - output window. To display full screen in 1280x1024:

ofSetupOpenGL(& Window, 1280,768, OF_FULLSCREEN);

Display Settings
Switching between full screen during the program (in the update ()): ofSetFullscreen(bool fullscreen) Example: by pressing the '1 '/ '2' - on / off full screen mode: void testApp:: keyPressed (int key) { if (key == '1 ') { ofSetFullscreen(True); } if (key == '2 ') { ofSetFullscreen(False); } }

Setting the background

ofBackground(int r, int g, int b) sets the background color (default is 128, 128, 128). Note: must be put in setup (), if enabled ofSetBackgroundAuto.

ofSetBackgroundAuto(bool bAuto) - Turns on / off cleaning mode images in each frame before calling draw () (default true).

Drawing Shapes
LineofLine(float x1, float y1, float x2, float y2) Rectangle ofRect(float x1, float y1, float w, float h) Circle ofCircle(float x, float y, float radius)

Triangle ofTriangle(float x1, float y1, float x2, float y2, float x3, float y3)
Ellipse ofEllipse Polygon ofBeginShape (), ofVertex (), ofEndShape () Smooth curve ofCurve

Drawing Shapes
Options: Drawing Color ofSetColor(int red, int green, int blue), where the numbers from 0 to 255. ofSetColor(int red, int green, int blue, int alpha) alpha is transparency, see below ofSetColor(int hexColor) 0x00ff00 means green Line Thickness ofSetLineWidth(float lineWidth) line thickness in pixels

Fill / no fill shape ofFill() - Fill ofNoFill() - Do not fill

Text output
- A simple text output, without setting the font and size: ofDrawBitmapString("Some text", 50, 50), // options: text and coordinates - To derive a normal font and size - to use ofTrueTypeFont: 1) copy bin / data font For example, verdana.ttf (There is a folder openframeworks) 2) declare: ofTrueTypeFont myFont; 3) in the setup (): myFont.loadFont ("verdana.ttf", 32 / * size * /); 4) in the draw (): myFont.drawString ("Good", 50, 50); - Output to a text console window: cout <<"Text" <<endl;

Example

This is what is called generative art and creative coding

Example
Declaring Variables float px; // top line float py; float qx; // indent float qy; float col; // color setup () ofBackground (255, 255, 255); ofSetBackgroundAuto (false); px = 320; py = 240; qx = 0; qy = 0; col = 0;

Example
update () px + = ofRandom (-1, 1); // ofRandom (a, b) - random value in [a, b] py + = ofRandom (-1, 1); qx + = ofRandom (-0.3, 0.3); qy + = ofRandom (-0.3, 0.3); if (px <0) px + = 640; if (px>= 640) px -= 640; if (py <0) py + = 480; if (py>= 480) py -= 480; if (qx <-30) qx + = 15; if (qx> 30) qx -= 15; if (qy <-30) qy + = 15; if (qy> 30) qy -= 15; col + = 0.02; if (col>= 256) col = col - 256;

Example
draw () int r = col; int g = int (col * 2) % 256; int b = 255 - col; ofSetColor (r, g, b); ofLine (px, py, px + qx, py + qy);

Drawing Images

Collage
Collage (From Fr.collage- Sticking) - technique in visual art, which consists in sticking to a substrate of objects and materials that differ from the basis of color and texture. Collage is also called the product is entirely made in this technique. (Wikipedia) And here we understand the placement of a collage of various images on the screen.

For a collage for you: -Load a pictures - Rotation - Transfer, - Change the size, - Transparency.

http://www.chinesecontemporary.com/hong_hao_5.htm

Loading and drawing images

ad image ofImage image; in the setup () image.loadImage ("texture.jpg"); // Load from disk // File should be in the bin / data in the draw () ofSetColor (255, 255, 255); // Why it is needed - see below // Transparency of the whole picture image.draw (100.0, 50.0); // Display // Upper left corner will be (100, 50)
This image can be downloaded from http://uralvision.blogspot.com/2010/03/4.html The original image was taken from http://ayesha5.files.wordpress.com/2008/06/sun-flower2.jpg

Rotate image
in the draw ()

ofPushMatrix (); // Remember the transformation matrix ofRotate (10.0); // Rotation in degrees of the left upper hand. angle image.draw (0.0, 0.0); // Draw ofPopMatrix (); // Restore matrix

Rotation around its center

in the draw () // Draw rotated, and that the center was at (200.0, 100.0) ofPushMatrix (); ofTranslate (200.0, 100.0);// Center of the picture ofRotate (20.0); // Rotation // Drawing with a shift: image.draw (-image.width / 2,-image.height / 2); ofPopMatrix ();

Transparency

Transparency for the pixels

To make a good collage of several images, you must remove the black background. This is done by using transparency for image pixels.

The use of transparency to the image pixels

If the channels Red, Green, Blue add channel Alpha, you can set the transparency of pixels. Alpha = 0 - pixel is transparent and invisible, Alpha = 255 - pixel is completely opaque. That is, you can simply cut out the background.

The scheme of mixing colors with transparency

Typically, data transparency is stored as a parameter "alpha". This "opacity". If the value of alpha fragment in [0, 1] (ie, alpha = Alpha / 255.0) the old color C0 blended with the color of a fragment of C1 by the formula R = (1-alpha) * R0 + alpha * R1 G = (1-alpha) * G0 + alpha * G1 B = (1-alpha) * B0 + alpha * B1 If alpha = 0 - new color is just the old C0. If alpha = 1 - a new color is the color of a fragment of C1. At intermediate values - the mixing of colors. If multiple objects overlap - the procedure is performed sequentially, from the far neighbor.

The scheme of mixing colors with transparency

Red square impose on black, white and blue. Impose three times with alpha: 0.3, 0.6, 1.0.

Methods of obtaining images with a cutout background

1. of the vector editor 2. "Smart" Edges in Photoshop or Gimp 3. hand - poor quality (aliasing, jagged edge)!

Image formats, keeping transparency

1. Formats that allow transparency store png-24 - Best quality / size / speed unpacking bmp-1932, tiff, tga. 2. Formats, which store 1-bit transparency (ragged edges): gif, png-8. 3. Does not keep transparency in principle: jpg.

Example: rotating sunflowers

// Declare variables ofImage image; // Image float angle = 0.0; // Angle of rotation // Initialize void testApp:: setup () { image.loadImage ("texture.png"); // Png - with transparency angle = 0.0; } // Update the state void testApp:: update () { angle + = 0.1; // Rotation }

Example: rotating sunflowers

// Draw void testApp:: draw () { // Enable transparency ofEnableAlphaBlending ();

// 2-d option with the exact function for transparency: // GlEnable (GL_BLEND); // GlBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
for (int i = 0; i <5; i + +) { ofPushMatrix (); ofTranslate (300.0 + i * 100.0, 300.0); // Move ofRotate (angle); // Rotation ofScale (1.0 + 0.2 * i, 1.0 + 0.2 * i);// Increase the size of image.draw (-image.width / 2,-image.height / 2); ofPopMatrix (); } ofDisableAlphaBlending (); // Disable transparency // GlDisable (GL_BLEND); }

Transparency of the whole image

It is also often used for collage transparency for the whole image (Layer). Pictured above is a collage, where some of the sunflowers are imposed with transparency. A two sunflowers also made fully transparent (ie invisible), respectively, Red, Blue and Green, Blue channels.

Transparency of the whole image

- Accomplishes this by setting the color ofSetColor(R, g, b, a), before drawing the image. The fact that the images are drawn with per-pixel multiplication of the components of the current color that can be conventionally written as follows: R = r / 255.0 * R0 G = g / 255.0 * G0 B = b / 255.0 * B0 A = a / 255.0 * A0 That is why, to display an image without any changes, use ofSetColor(255, 255, 255) before drawing images. Caution: If there was black, the image will be invisible. This is a fairly frequent "problem"!

Transparency of the whole image

// Draw void testApp:: draw () { float w = image.width; float h = image.height; ofBackground (0, 0, 0);// Set the background color ofEnableAlphaBlending ();// Enable transparency
// Current color affects the output texture // Namely, the texture separately to each multiplied by the R, G, B components // Color and has ignored its transparency ofSetColor (255, 255, 255);// Opaque image.draw (w, h); ofSetColor (255, 255, 255, 128);// Translucent image.draw (w / 2, h / 2); ofSetColor (0, 255, 0, 128);// Translucent, only the green channel image.draw (w / 2, h + h / 2); ofDisableAlphaBlending ();// Disable transparency }

Result

Draw in the buffer

How to draw the path of motion of the pendulum

Objective: to draft a swinging pendulum to add to paint, where he had been the center of the pendulum. It is as if the pendulum is at the center of a pencil that draws on the paper. How to do it? If memorize the trajectory as a broken and every time it displays on the screen - the program will work gradually slower and slower. The best way to solutions - to draw the trajectory of the pendulum at some off-screen buffer, and then give the buffer to the screen. This buffer is - how to display that we do not see. In contrast to the screen buffer will not be cleaned with each drawing the screen. FBO - Frame Buffer Object In this buffer you can draw on the screen, and then use the result as a texture - that is, display it as a screen or draw it in another buffer. You can do sophisticated multi-layer images, allowing to make the effects of "trace" of moving objects. To do this, painting a buffer in another, with varying opacity.

How to draw the path of motion of the pendulum

Then the algorithm of drawing in the draw () is as follows: 1. in the buffer is drawn straight line connecting the current position of the pendulum with the previous 2. buffer is displayed on the screen 3. drawn on the screen itself the pendulum

Working with buffer drawing

To work with the buffers drawing OpenFrameworks best to use the addon ofxFBOTexture. It consists of two files - ofxFBOTexture.h and ofxFBOTexture.cpp.
http://addons.openframeworks.cc/projects/list_files/ofxfbotexture

These files must be added to the project, like so: 1. Copy them into the src of the project 2. in VisualStudio poke right-click on the project in the menu - Add Existing Items and add them both. Correct copy all the addons folder openframeworks / addons, but it can be uncomfortable if the project should be mobile, that is collected on different computers.

Working with buffer drawing

... # Include "ofxFBOTexture.h"

... ofxFBOTexture buffer; // buffer for drawing off-screen

in the setup () // Create a buffer buffer.allocate (ofGetWidth (), ofGetHeight (), false // no autoclean every drawing - since will be there to collect pictures );

buffer.clear (0, 0, 0, 255) // clear black

// We must note that if you choose not black, then the buffer can be painted in the first color you use. How to fix the problem?

Working with buffer drawing

in the draw () buffer.begin (); // start drawing a buffer // procedures for drawing into the buffer - Is made as to the screen ... ofSetColor, ofLine, ...

buffer.end (); // end drawing to clipboard buffer.draw (0, 0) // output buffer to the screen // Else draw ... In this case, the procedure of drawing into the buffer will be from frame to frame (the way: that was a pendulum), and procedures for the rest of the painting - only appear in one frame (itself a pendulum with a rubber band).

Homework (*)
Draw a polygon filled with a (textured) with some images. Hint. Scheme of the function call: ofTexture tex = image.getTextureReference (); tex.bind (); glBegin (GL_QUADS); glTexCoord2f (...) glVertex2f (...) ... glEnd (); tex.unbind ();

Appendix: Video recording and publication of a running program

Capture video from screen

The program CamStudio - free software for capturing images from the screen and record a video. http://camstudio.org

For large scale exciting field capture rate may be very low. Do not forget to shoot your project set the Release, not Debug. Better to use the codec CamStudio Lossless codec, it is fast and does not spoil the image. But the files are large in size. Therefore, before publication, it is better to convert the file using VirtualDub to another codec, for example, XVID.

Publish your video

Where to publish: Youtube, Vimeo. Youtube - the most common, is integrated into many blogs, visible on devices iOS. Vimeo - video quality is superior to Youtube, so the professional work is often published simultaneously here and on Youtube.