2. Graphics
• The graphics part of OF lets you draw images,
lines, circles, paths etc..
• Pixel operations like crop, resize and scale.
• Other types like paths, polylines, tesselator, true
type fonts, bitmap fonts
4. Render to PDF
ofRenderCollection ofCairoRenderer
OF gives you render to PDF... out of the box! for
free!
Make a call to ofBeginSaveScreenAsPDF() to begin
drawing to PDF and ofEndSaveScreenAsPDF() when
ready. That’s it!
7. Image loading
ofPixels ofImage ofGraphics
Load images of a variety of types and draw them
on screen. Resize, crop, rotate, save to file, etc..
To draw an image on screen create a ofImage
member and call it’s
loadImage(string file) function. In your
testApp::draw(), call my_img.draw(0,0)
9. Image from web
You can also load images from an URL. Call the
ofImage::loadImage(string url) with the address of
the image.
This call is synchronous so waits until the image is
downloaded.
void testApp::setup(){
if(!my_img.loadImage("http://www.roxlu.com/assets/downloads/freakday.png")) {
ofLog(OF_LOG_ERROR, "Error while loading image");
}
}
void testApp::draw(){
my_img.draw(0,0, ofGetWidth(), ofGetHeight());
}
10. Altering pixels
ofImage and ofPixels have many functions to alter
the pixels. After manipulating the pixels with one
of the functions in the list below, never forget
calling update() to update the pixels so they
become visible.
You need to call update() after using:
setPixel()
11. Changing pixels
Use ofImage::setColor(r,g,b,a) to change the color
of a pixel. Make sure to call ofImage::update() after
using setColor(). To retrieve the value of a pixel
use
ofImage::getColor(int x, int y)
for(int i = 10; i < 200; ++i) {
for(int j = 10; j < 200; ++j) {
my_img.setColor(i,j,ofColor(255,0,0));
}
}
my_img.update();
12. Resizing
Use ofImage::resize(int new_width, int new_height)
to resize the image.
if(!my_img.loadImage("http://www.roxlu.com/assets/downloads/freakday.png")) {
ofLog(OF_LOG_ERROR, "Error while loading image");
}
my_img.resize(100,100);
13. Rotating
Use ofImage::rotate90(int times) to rotate the
image 90º a times number of times. no need to
call update() afterwards.
my_img.rotate90(0); my_img.rotate90(1); my_img.rotate90(2); my_img.rotate90(3);
14. Mirroring
Use ofImage::mirror(bool vertical, bool horizontal)
to mirror the image.
my_img.mirror(false,false); my_img.mirror(true,false);
my_img.mirror(false,true); my_img.mirror(true,true);
15. Cropping
Use ofImage::crop(int x, int y, int w, int h) to crop
the image.
int s = 80;
my_img.crop(s,s,my_img.width - s, my_img.height - s);
16. Crop from other image
Use cropFrom to get pixels from another image
and store them in your img object.
ofImage::cropFrom(ofImage& other,int x, int y, int w, int h)
ofImage of_logo;
if(!of_logo.loadImage("http://www.openframeworks.cc/wp-content/themes/ofw/images/ofw-logo.gif")) {
ofLog(OF_LOG_ERROR, "Error while loading OF logo image");
}
else {
my_img.cropFrom(of_logo,0,0,of_logo.width,of_logo.height);
}
17. Saving back to disk
Use ofImage::saveImage(string file) to save the
image back to disk. This example writes a
thumbnail to disk. Note that it handles image type
conversion.
if(!my_img.loadImage("http://www.roxlu.com/assets/downloads/freakday.png")) {
ofLog(OF_LOG_ERROR, "Error while loading image");
}
my_img.resize(100,100);
my_img.saveImage("thumb.png");
my_img.saveImage("thumb.jpg");
my_img.saveImage("thumb.gif");
18. Image anchor points
The image anchor point is the point around which
the image is drawn. Use
ofImage::setAnchorPercent(float,float) or
ofImage::setAnchorPoint(int, int)
my_img.loadImage("freakday.png");
my_img.resize(100,100); my_img.setAnchorPercent(1,1);
my_img.setAnchorPercent(0.5,0.5);
my_img.draw(ofGetWidth()*0.5,ofGetHeight()*0.5);
21. ofImage recap
Texture compression
void setCompression(ofTexCompression compression)
Get pixels
ofColor_<PixelType> getColor(int x, int y)
PixelType* getPixels()
ofPixels_<PixelType>& getPixelsRef()
22. ofImage recap
Altering the image
void setColor(int x, int y, ofColor_<PixelType> color)
void setFromPixels(const PixelType* pixels, int w, int h, ofImageType type, bool isOrderRGB = true)
void setFromPixels(const ofPixels_<PixelType>& pixels)
void setImageType(ofImageType type)
void resize(int w, int h)
void grabScreen(int x, int y, int w, int h)
void crop(int x, int y, int w, int h)
void cropFrom(ofImage_<PixelType>& otherImage, int x, int y, int w, int h)
void rotate90(int rotation)
void mirror(bool vertical, bool horizontal)
25. ofPixels
ofPixels
Similar to ofImage, but works directly with raw
pixels. Has functions like rotate, mirror, crop,
pastInto etc..
See ofPixels.h for a reference of the available
operations.
26. ofGraphics
ofGraphics
ofGraphics is the part of OF which mimics the
processing style of drawing functions. But besides
the regular drawing functions it contains lots of
general drawing related setter/getter functions.
27. ofGraphics
Drawing things
You can draw every shape you want using the
“raw” vertex functions and begin/end shape. Or
use the helper functions to draw circles, lines,
rectangles, ellipses and triangles. Some functions
you can use:
Simple shapes Custom shapes
void ofTriangle(...) void ofBeginShape(...)
void ofCircle(...) void ofVertex(...)
float ofEllipse(...) void ofVertexes(...)
float ofLine(...) void ofEndShape(...)
29. Reset state
When you call a function like
ofFill, ofNoFill,
ofSetCircleResolution it’s
called “changing the state”.
This state is used as long as
you change it again. So when
ofSetCircleResolution(50); you called ofNoFill all things
ofFill();
ofCircle(30, 35, 25); after this call will be drawn
ofCircle(170, 120, 30);
without a fill.
ofSetCircleResolution(5);
ofNoFill();
ofCircle(70, 35, 25);
ofCircle(130, 120, 30);
