• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
openFrameworks 007 - graphics
 

openFrameworks 007 - graphics

on

  • 36,297 views

 

Statistics

Views

Total Views
36,297
Views on SlideShare
12,487
Embed Views
23,810

Actions

Likes
7
Downloads
187
Comments
0

27 Embeds 23,810

http://www.roxlu.com 11257
http://www.openframeworks.cc 7610
http://openframeworks.cc 1887
http://roxlu.com 1828
http://openframeworks.jp 627
http://noa99kee.tistory.com 242
http://v1.roxlu.com 198
http://www.blog.rexgo.net 33
http://kindpire.com 27
http://localhost 27
http://roxlu.localhost 23
http://translate.googleusercontent.com 12
http://openframeworks.kr 7
http://greekfellows.hateblo.jp 7
https://twitter.com 6
http://webcache.googleusercontent.com 4
http://www.roxlu.com. 2
http://a0.twimg.com 2
http://magmajo-dev.tistory.com 2
http://pinterest.com 2
http://web.archive.org 1
http://translate.yandex.net 1
http://twitter.com 1
http://127.0.0.1 1
http://honyaku.yahoofs.jp 1
http://www.roxlu.com HTTP 1
http://www.pinterest.com 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

openFrameworks 007 - graphics openFrameworks 007 - graphics Presentation Transcript

  • 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 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)
  • 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 file) 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(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);
  • 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()
  • 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(...)float ofEllipse(...) void ofVertexes(...)float 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 fill. 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