Lections on OpenFrameworks

Two-dimensional graphics

Denis Perevalovperevalovds@gmail.com

See in-depth details in my book

“Mastering openFrameworks”

Book’s 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 imagesin 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 ThicknessofSetLineWidth(float lineWidth)line thickness in pixels

Fill / no fill shapeofFill() - FillofNoFill() - 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 Variablesfloat px; // top linefloat py;float qx; // indentfloat 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

CollageCollage (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 imageofImage 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 fromhttp://uralvision.blogspot.com/2010/03/4.html

The original image was taken fromhttp://ayesha5.files.wordpress.com/2008/06/sun-flower2.jpg

Rotate image

in the draw ()

ofPushMatrix (); // Remember the transformation matrixofRotate (10.0); // Rotation in degrees of the left upper hand. angleimage.draw (0.0, 0.0); // DrawofPopMatrix (); // 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 pictureofRotate (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 transparencyTypically, 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 * R1G = (1-alpha) * G0 + alpha * G1B = (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 cut-out background

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

Image formats, keeping transparency

1. Formats that allow transparency storepng-24 - Best quality / size / speedunpackingbmp-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 variablesofImage image; // Imagefloat angle = 0.0; // Angle of rotation

// Initialize void testApp:: setup () { image.loadImage ("texture.png"); // Png - with transparencyangle = 0.0;}

// Update the statevoid testApp:: update () {angle + = 0.1; // Rotation

}

Example: rotating sunflowers

// Drawvoid testApp:: draw () {// Enable transparencyofEnableAlphaBlending ();

// 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); // MoveofRotate (angle); // RotationofScale (1.0 + 0.2 * i, 1.0 + 0.2 * i);// Increase the size ofimage.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 colorofSetColor(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 * R0G = g / 255.0 * G0B = b / 255.0 * B0A = a / 255.0 * A0

That is why, to display an image without any changes, useofSetColor(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// Drawvoid testApp:: draw () {float w = image.width;float h = image.height;ofBackground (0, 0, 0);// Set the background colorofEnableAlphaBlending ();// 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 transparencyofSetColor (255, 255, 255);// Opaqueimage.draw (w, h);

ofSetColor (255, 255, 255, 128);// Translucent image.draw (w / 2, h / 2);

ofSetColor (0, 255, 0, 128);// Translucent, only the green channelimage.draw (w / 2, h + h / 2);ofDisableAlphaBlending ();// Disable transparency}

Result

Draw in the buffer

How to draw the path of motion of the pendulumObjective: 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 previous2. buffer is displayed on the screen3. drawn on the screen itself the pendulum

Working with buffer drawing

To work with the buffers drawing OpenFrameworks best to use the addonofxFBOTexture.

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 project2. 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, butit 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 bufferbuffer.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 screenThe 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.