openFrameworks 007 - graphics

openFrameworks graphics

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

Graphics ofPixels ofImage ofBitmapFontofGraphics ofTrueTypeFont ofPixelUtilsofPolyLine ofTesselator ofPath ofRenderCollectionofPolyUtils ofCairoRenderer

Render to PDF ofRenderCollection ofCairoRendererOF gives you render to PDF... out of the box! forfree!Make a call to ofBeginSaveScreenAsPDF() to begindrawing to PDF and ofEndSaveScreenAsPDF() whenready. That’s it!

Render to PDFtestApp.cpp testApp.hvoid testApp::setup(){ class testApp : public ofBaseApp{ ofBackground(33,33,33); to_pdf = false; public:} bool to_pdf; }void testApp::draw(){ if(to_pdf) { ofBeginSaveScreenAsPDF("render.pdf"); } ofSetColor(0xFF, 0xFF, 0xFF); ofCircle(ofGetWidth()*0.5,ofGetHeight()*0.5,10); if(to_pdf) { ofEndSaveScreenAsPDF(); to_pdf = !to_pdf; }}void testApp::keyPressed(int key){ if(key == p) { to_pdf = !to_pdf; }}

Render to PDF

Image loading ofPixels ofImage ofGraphicsLoad images of a variety of types and draw themon screen. Resize, crop, rotate, save to ﬁle, etc..To draw an image on screen create a ofImagemember and call it’sloadImage(string ﬁle) function. In yourtestApp::draw(), call my_img.draw(0,0)

Image loadingvoid testApp::setup(){ if(!my_img.loadImage("freakday.png")) { ofLog(OF_LOG_ERROR, "Error while loading image"); }}void testApp::draw(){ my_img.draw(0,0,ofGetWidth(), ofGetHeight());}

Image from webYou can also load images from an URL. Call theofImage::loadImage(string url) with the address ofthe image.This call is synchronous so waits until the image isdownloaded.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());}

Altering pixelsofImage and ofPixels have many functions to alterthe pixels. After manipulating the pixels with oneof the functions in the list below, never forgetcalling update() to update the pixels so theybecome visible.You need to call update() after using:setPixel()

Changing pixelsUse ofImage::setColor(r,g,b,a) to change the colorof a pixel. Make sure to call ofImage::update() afterusing setColor(). To retrieve the value of a pixeluseofImage::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();

ResizingUse 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);

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);

MirroringUse 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);

CroppingUse ofImage::crop(int x, int y, int w, int h) to cropthe image. int s = 80; my_img.crop(s,s,my_img.width - s, my_img.height - s);

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);}

Saving back to diskUse ofImage::saveImage(string ﬁle) to save theimage back to disk. This example writes athumbnail to disk. Note that it handles image typeconversion.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");

Image anchor points The image anchor point is the point around which the image is drawn. Use ofImage::setAnchorPercent(ﬂoat,ﬂoat) 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);

ofImage recapConstructorsofImage(const string& ﬁlename)ofImage(const ofPixels_<PixelType>& pix)ofImage(const ofFile& ﬁle)Texture relatedvoid allocate(int w, int h, ofImageType type)void clear()void setUseTexture(bool use)bool isUsingTexture()ofTexture& getTextureReference()void bind()void unbind()

ofImage recapLoadingbool loadImage(string filename)bool loadImage(const ofBuffer& buffer)bool loadImage(const ofFile& file)Savevoid saveImage(string filename, ofImageQualityType comp = OF_IMAGE_QUALITY_BEST)void saveImage(ofBuffer& buffer, ofImageQualityType comp = OF_IMAGE_QUALITY_BEST)void saveImage(const ofFile& file, ofImageQualityType comp = OF_IMAGE_QUALITY_BEST)

ofImage recapTexture compressionvoid setCompression(ofTexCompression compression)Get pixelsofColor_<PixelType> getColor(int x, int y)PixelType* getPixels()ofPixels_<PixelType>& getPixelsRef()

ofImage recapAltering the imagevoid 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)

ofImage recapAnchor pointsvoid setAnchorPercent(float xPct, float yPct)void setAnchorPoint(float x, float y)void resetAnchor()Generalbool isAllocated()void reloadTexture()float getWidth()float getHeight()

ofImage recapImage quality (some) Image formatsOF_IMAGE_QUALITY_BEST OF_IMAGE_FORMAT_JPEGOF_IMAGE_QUALITY_HIGHT OF_IMAGE_FORMAT_PNGOF_IMAGE_QUALITY_MEDIUM OF_IMAGE_FORMAT_RAWOF_IMAGE_QUALITY_LOW OF_IMAGE_FORMAT_TIFFOF_IMAGE_QUALITY_WORST OF_IMAGE_FORMAT_HDR OF_IMAGE_FORMAT_TARGAImage types OF_IMAGE_FORMAT_BMPOF_IMAGE_GRAYSCALE OF_IMAGE_FORMAT_ICOOF_IMAGE_COLOROF_IMAGE_COLOR_ALPHA For more image formats see ofImage.hOF_IMAGE_UNDEFINED

ofPixels ofPixelsSimilar to ofImage, but works directly with rawpixels. Has functions like rotate, mirror, crop,pastInto etc..See ofPixels.h for a reference of the availableoperations.

ofGraphics ofGraphicsofGraphics is the part of OF which mimics theprocessing style of drawing functions. But besidesthe regular drawing functions it contains lots ofgeneral drawing related setter/getter functions.

ofGraphicsDrawing thingsYou can draw every shape you want using the“raw” vertex functions and begin/end shape. Oruse the helper functions to draw circles, lines,rectangles, ellipses and triangles. Some functionsyou can use:Simple shapes Custom shapesvoid ofTriangle(...) void ofBeginShape(...)void ofCircle(...) void ofVertex(...)ﬂoat ofEllipse(...) void ofVertexes(...)ﬂoat ofLine(...) void ofEndShape(...)

ofNoFill();ofTriangle(60,30, 200,200, 60,200); ofTriangle(60,30, 200,200, 60,200);ofCircle(170, 120, 30); ofNoFill(); ofSetCircleResolution(5); ofCircle(170, 120, 30);

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 ﬁll. ofSetCircleResolution(5); ofNoFill(); ofCircle(70, 35, 25); ofCircle(130, 120, 30);

ofEllipse(160,120,100,50); ofEllipse(160,120,50,100);ofSetCircleResolution(6); ofNoFill();ofEllipse(160,120,50,100); ofEllipse(160,120,50,100);

ofLine(10,120,310,100); ofSetLineWidth(5); ofLine(10,120,310,100);ofVec2f a(10,120); ofRect(40,50,230,130);ofVec2f b(310,100);ofLine(a,b);

Beziers and curvesofSetLineWidth(5); ofSetLineWidth(3);ofNoFill(); ofNoFill();ofCurve( ofBezier( 10,10 10,10 ,55,15 ,55,15 ,15,210 ,15,210 ,100,200 ,100,200); );

Custom shapesofBeginShape(); ofBeginShape(); ofVertex(140,40); for(float i = 0; i < 30; ++i) { ofVertex(130,40); float r = sin(i/30 * PI) * 70; ofVertex(100,100); float x = 180 + cos((i/30)*TWO_PI) * r; ofVertex(110,100); float y = 120 + sin((i/30)*TWO_PI) * r;ofEndShape(); ofVertex(x,y); } ofEndShape();

ofLove()ofBeginShape();for(float i = 0; i < TWO_PI; i+= 0.01*HALF_PI*0.5) { float r = (2 - 2*sin(i) + sin(i)*sqrt(abs(cos(i))) / (sin(i)+1.4)) * -40; float x = 180 + cos(i) * r; float y = 60 + sin(i) * r; ofVertex(x,y);}ofEndShape();

3D SphereofNoFill(); ofNoFill();ofSphere(160,120,50,50); ofSphere(160,120,50,100);

3D BoxofNoFill(); ofNoFill();ofBox(160,120,10,50); ofBox(160,120,10,120);

roxluwww.roxlu.com

http://www.roxlu.com	9123
http://roxlu.com	1553
http://www.openframeworks.cc	741
http://openframeworks.jp	76
http://roxlu.localhost	23
http://www.blog.rexgo.net	22
http://localhost	20
http://kindpire.com	14
http://translate.googleusercontent.com	5
http://webcache.googleusercontent.com	4
http://a0.twimg.com	2
http://www.roxlu.com.	2
https://twitter.com	2
http://honyaku.yahoofs.jp	1
http://www.roxlu.com HTTP	1
http://127.0.0.1	1
http://twitter.com	1
http://translate.yandex.net	1

openFrameworks 007 - graphics

by roxlu on Jul 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 11,592

Statistics

openFrameworks 007 - graphics — Presentation Transcript