Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

openFrameworks 007 - graphics


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

openFrameworks 007 - graphics

  1. 1. openFrameworks graphics
  2. 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
  3. 3. Graphics ofPixels ofImage ofBitmapFontofGraphics ofTrueTypeFont ofPixelUtilsofPolyLine ofTesselator ofPath ofRenderCollectionofPolyUtils ofCairoRenderer
  4. 4. 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!
  5. 5. 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; }}
  6. 6. Render to PDF
  7. 7. Image loading ofPixels ofImage ofGraphicsLoad images of a variety of types and draw themon screen. Resize, crop, rotate, save to file, etc..To draw an image on screen create a ofImagemember and call it’sloadImage(string file) function. In yourtestApp::draw(), call my_img.draw(0,0)
  8. 8. 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());}
  9. 9. 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("")) { ofLog(OF_LOG_ERROR, "Error while loading image"); }}void testApp::draw(){ my_img.draw(0,0, ofGetWidth(), ofGetHeight());}
  10. 10. 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()
  11. 11. 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();
  12. 12. ResizingUse ofImage::resize(int new_width, int new_height)to resize the image.if(!my_img.loadImage("")) { ofLog(OF_LOG_ERROR, "Error while loading image");}my_img.resize(100,100);
  13. 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. 14. 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);
  15. 15. 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);
  16. 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("")) { 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. 17. Saving back to diskUse ofImage::saveImage(string file) to save theimage back to disk. This example writes athumbnail to disk. Note that it handles image typeconversion.if(!my_img.loadImage("")) { 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. 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);
  19. 19. ofImage recapConstructorsofImage(const string& filename)ofImage(const ofPixels_<PixelType>& pix)ofImage(const ofFile& file)Texture relatedvoid allocate(int w, int h, ofImageType type)void clear()void setUseTexture(bool use)bool isUsingTexture()ofTexture& getTextureReference()void bind()void unbind()
  20. 20. 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)
  21. 21. ofImage recapTexture compressionvoid setCompression(ofTexCompression compression)Get pixelsofColor_<PixelType> getColor(int x, int y)PixelType* getPixels()ofPixels_<PixelType>& getPixelsRef()
  22. 22. 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)
  23. 23. ofImage recapAnchor pointsvoid setAnchorPercent(float xPct, float yPct)void setAnchorPoint(float x, float y)void resetAnchor()Generalbool isAllocated()void reloadTexture()float getWidth()float getHeight()
  25. 25. 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.
  26. 26. 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.
  27. 27. 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(...)float ofEllipse(...) void ofVertexes(...)float ofLine(...) void ofEndShape(...)
  28. 28. 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);
  29. 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);
  30. 30. ofEllipse(160,120,100,50); ofEllipse(160,120,50,100);ofSetCircleResolution(6); ofNoFill();ofEllipse(160,120,50,100); ofEllipse(160,120,50,100);
  31. 31. 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);
  32. 32. 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); );
  33. 33. 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();
  34. 34. 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();
  35. 35. 3D SphereofNoFill(); ofNoFill();ofSphere(160,120,50,50); ofSphere(160,120,50,100);
  36. 36. 3D BoxofNoFill(); ofNoFill();ofBox(160,120,10,50); ofBox(160,120,10,120);
  37. 37.