Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
Mastering openFrameworks: Creative Coding Demystified
Mastering openFrameworks: Creative Coding Demystified

Mastering openFrameworks: Creative Coding Demystified: openFrameworks is the doorway to so many creative multimedia possibilities and this book will tell you everything you need to know to undertake your own projects. You'll find creative coding is simpler than you think.

eBook
€8.99 €28.99
Paperback
€37.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Mastering openFrameworks: Creative Coding Demystified

Chapter 2. Drawing in 2D

Drawing is one of the main capabilities of openFrameworks. Here, we consider the basics of 2D graphics, including drawing geometric primitives, working with colors, and drawing in an offscreen buffer. In this chapter we will cover:

  • Geometric primitives

  • Using ofPoint

  • Coordinate system transformations

  • Colors

  • Using FBO for offscreen drawings

  • Playing with numerical instability

  • Screen grabbing

Drawing basics


The screens of modern computers consist of a number of small squares, called pixels (picture elements). Each pixel can light in one color. You create pictures on the screen by changing the colors of the pixels.

Note

Graphics based on pixels is called raster graphics. Another kind of graphics is vector graphics, which is based on primitives such as lines and circles. Today, most computer screens are arrays of pixels and represent raster graphics. But images based on vector graphics (vector images) are still used in computer graphics (for details, see the Images basics section in Chapter 4, Images and Textures). Vector images are drawn on raster screens using the rasterization procedure.

The openFrameworks project can draw on the whole screen (when it is in fullscreen mode) or only in a window (when fullscreen mode is disabled). See how to set screen modes in the main.cpp and setup() sections in Chapter 1, openFrameworks Basics. For simplicity, we will call the area where openFrameworks...

The background color of the screen


The drawing on the screen in openFrameworks should be performed in the testApp::draw() function (see the testApp.cpp section in Chapter 1, openFrameworks Basics). Before this function is called by openFrameworks, the entire screen is filled with a fixed color, which is set by the function ofSetBackground( r, g, b ). Here r, g, and b are integer values corresponding to red, green, and blue components of the background color in the range 0 to 255. Note that each of the ofSetBackground() function call fills the screen with the specified color immediately.

Tip

You can make a gradient background using the ofBackgroundGradient() function. See its description in the The triangles cloud example section in Chapter 7, Drawing in 3D.

You can set the background color just once in the testApp::setup() function, but we often call ofSetBackground() in the beginning of the testApp::draw() function to not mix up the setup stage and the drawing stage.

Pulsating background example...

Geometric primitives


In this chapter we will deal with 2D graphics. 2D graphics can be created in the following ways:

  • Drawing geometric primitives such as lines, circles, and other curves and shapes like triangles and rectangles. This is the most natural way of creating graphics by programming. Generative art and creative coding projects are often based on this graphics method. We will consider this in the rest of the chapter.

  • Drawing images lets you add more realism to the graphics, and this is considered in Chapter 4, Images and Textures.

  • Setting the contents of the screen directly, pixel-by-pixel, is the most powerful way of generating graphics. But it is harder to use for simple things like drawing curves. So, such method is normally used together with both of the previous methods. A somewhat fast technique for drawing a screen pixel-by-pixel consists of filling an array with pixels colors, loading it in an image, and drawing the image on the screen (see its description in the Creating...

Using ofPoint


Maybe you noted a problem when considering the preceding flower example: drawing primitives by specifying the coordinates of all the vertices is a little cumbersome. There are too many numbers in the code, so it is hard to understand the relation between primitives. To solve this problem, we will learn about using the ofPoint class and then apply it for drawing primitives using control points.

ofPoint is a class that represents the coordinates of a 2D point. It has two main fields: x and y, which are float type.

Note

Actually, ofPoint has the third field z, so ofPoint can be used for representing 3D points too (we use this capability in Chapter 7, Drawing in 3D). If you do not specify z, it sets to zero by default, so in this case you can think of ofPoint as a 2D point indeed.

Operations with points

To represent some point, just declare an object of the ofPoint class.

ofPoint p;

To initialize the point, set its coordinates.

p.x = 100.0;
p.y = 200.0;

Or, alternatively, use the constructor...

Coordinate system transformations


Sometimes we need to translate, rotate, and resize drawings. For example, arcade games are based on the characters moving across the screen.

When we perform drawing using control points, the straightforward solution for translating, rotating, and resizing graphics is in applying desired transformations to control points using corresponding mathematical formulas. Such idea works, but sometimes leads to complicated formulas in the code (especially when we need to rotate graphics). The more elegant solution is in using coordinate system transformations. This is a method of temporarily changing the coordinate system during drawing, which lets you translate, rotate, and resize drawings without changing the drawing algorithm.

Note

The current coordinate system is represented in openFrameworks with a matrix. All coordinate system transformations are made by changing this matrix in some way. When openFrameworks draws something using the changed coordinate system, it...

Colors


Up until now we have worked with colors using the functions ofSetColor( r, g, b ) and ofBackground( r, g, b ). By calling these functions, we specify the color of the current drawing and background as r, g, and b values, corresponding to red, green, and blue components, where r, g and b are integer values lying in the range 0 to 255.

Tip

When you need to specify gray colors, you can use overloaded versions of these functions with just one argument: ofSetColor( gray ) and ofBackground( gray ), where gray is in the range 0 to 255.

These functions are simple, but not enough. Sometimes, you need to pass the color as a single parameter in a function, and also do color modifications like changing the brightness. To solve this problem, openFrameworks has the class ofColor. It lets us operate with colors as we do with single entities and modify these.

ofColor is a class representing a color. It has four float fields: r, g, b, and a. Here r, g, and b are red, green, and blue components of a...

Drawing with an uncleared background


By default, the screen is cleared each time before testApp:draw() is called, so you need to draw all the contents of the screen inside testApp::draw() again and again. It is appropriate in most cases, but sometimes we want the screen to accumulate our drawings. In openFrameworks, you can do this by disabling screen clearing using the ofSetBackgroundAuto( false ) function. All successive drawings will accumulate on the screen. (In this case you should call ofBackground() rarely, only for clearing the current screen).

This method is very simple to use, but is not flexible enough for serious projects. Also, currently it has some issues:

  • In Mac OS X, the screen can jitter.

  • In Windows, screen grabbing does not work (more details on screen grabbing can be seen in the Screen grabbing section later in this chapter)

Tip

See an example of using this method in the The bouncing ball example section in Chapter 6, Working with Sounds.

So, when you need to accumulate drawings...

Using FBO for offscreen drawings


FBO in computer graphics stands for frame buffer object. This is an offscreen raster buffer where openFrameworks can draw just like on the screen. You can draw something in this buffer, and then draw the buffer contents on the screen. The picture in the buffer is not cleared with each testApp::draw() calling, so you can use FBO for accumulated drawings.

In openFrameworks, FBO is represented by the class ofFBO.

The typical scheme of its usage is the following:

  1. Declare an ofFbo object, fbo, in the testApp class declaration.

    ofFbo fbo;
  2. Initialize fbo with some size in the testApp::setup() function.

    int w = ofGetWidth();
    int h = ofGetHeight();
    fbo.allocate( w, h );
  3. Draw something in fbo. You can do it not only in testApp::draw() but also in testApp::setup() and testApp::update(). To begin drawing, call fbo.begin() . After this, all drawing commands, such as ofBackground() and ofLine(), will draw to fbo. To finish drawing, call fbo.end(). For example, to fill fbo with...

Screen grabbing


Sometimes it is desirable to save the picture drawn by your project in the file. You can do it using tools of your operating system, but it's more comfortable to do it right in your project. So let's see how to save the contents of your project screen to an image file.

For such purposes, we need to use the ofImage class for working with images. Though the class is considered in Chapter 4, Images and Textures, for screen grabbing, it is just enough to understand that the ofImage object holds an image.

The following code saves the current screen to file on the pressing of the Space bar. It should be added to the testApp::keyPressed() function as follows:

//Grab the screen image to file
if ( key == ' ' ) {
  ofImage image;  //Declare image object

  //Grab contents of the screen
  image.grabScreen( 0, 0, ofGetWidth(), ofGetHeight() );  

  image.saveImage( "screen.png" );  //Save image to file
}

The parameters of the image.grabScreen() function specify the rectangle of the grabbing...

Additional topics


In this chapter, we have considered some of the basic topics of 2D drawing. For reading further on openFrameworks 2D capabilities, we suggest the following topics:

  • Drawing text using the function ofDrawBitmapString() or the class ofTrueTypeFont. See the openFrameworks example examples/graphics/fontShapesExample.

  • Drawing filled shapes using the functions ofBeginShape(), ofVertex(), and ofEndShape() . See the openFrameworks example examples/graphics/polygonExample.

  • Creating PDF files with openFrameworks drawings. Such files will contain vector graphics suitable for high-quality printing purposes. See the openFrameworks example examples/graphics/pdfExample.

For deeper exploration of the world of 2D graphics, we suggest the following topics:

  • Using Perlin noise for simulating life-like motion of objects. See Appendix B, Perlin Noise.

  • Using the algorithmic method of recursion for drawing branched structures like trees.

If you are interested in playing with generative art, explore the...

Summary


In this chapter we learned how to draw geometrical primitives using control points, perform transformations of the coordinate system, and work with colors. Also, we studied how to accumulate drawings in the offscreen buffer and considered the generative art example of using it. Finally, we learned how to save the current screen image to the file.

In the next chapter we will continue learning 2D graphics and will consider one powerful method of generating fascinating animations and drawings – particle systems.

Left arrow icon Right arrow icon

Key benefits

  • Create cutting edge audio-visual interactive projects, interactive installations, and sound art projects with ease
  • Unleash the power of low-level data processing methods using C++ and shaders
  • Make use of the next generation technologies and techniques in your projects involving OpenCV, Microsoft Kinect, and so on

Description

openFrameworks is a powerful programming toolkit and library designed to assist the creative process through simplicity and intuitiveness. It's a very handy software library written in C++ to reduce the software development process, helping you to kick-start creative coding. With the help of C++ and shaders support, openFrameworks allows for the processing of all kinds of media information with your custom-developed algorithms at the lowest possible level, with the fastest speed. "Mastering openFrameworks: Creative Coding Demystified" will introduce you to a world of creative coding projects, including interactive installations, audio-visual, and sound art projects. You will learn how to make your own projects using openFrameworks. This book focuses on low-level data processing, which allows you to create really unique and cutting-edge installations and projects. "Mastering openFrameworks: Creative Coding Demystified" provides a complete introduction to openFrameworks, including installation, core capabilities, and addons. Advanced topics like shaders, computer vision, and depth cameras are also covered. We start off by discussing the basic topics such as image and video loading, rendering and processing, playing sound samples, and synthesizing new sounds. We then move on to cover 3D graphics, computer vision, and depth cameras. You will also learn a number of advanced topics such as video mapping, interactive floors and walls, video morphing, networking, and using geometry shaders. You will learn everything you need to know in order to create your own projects; create projects of all levels, ranging from simple creative-code experiments, to big interactive systems consisting of a number of computers, depth cameras, and projectors.

Who is this book for?

If you are a visual artist, designer, or programmer interested in creative coding with openFrameworks then this book is for you. Basic knowledge of object-oriented programming, such as C++, Java, Python, and ActionScript 3, would be helpful.

What you will learn

  • Install openFrameworks in Windows, Mac OS X, and Linux
  • Load images and videos from files, and learn rendering and low-level processing
  • Learn to use sound samples, sound synthesizing, and how to record sounds from a microphone
  • Work with 3D graphics, including shaders
  • Extend your project with additional graphics, sound, networking, and computer vision functionality with the help of numerous openFrameworks addons
  • Create distributed projects, which work on a several computers by synchronizing via OSC protocol
  • Leverage computer vision basics, including optical flow, and perspective transformations
  • Use depth cameras, like Microsoft Kinect, for creating interactive walls.

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Sep 23, 2013
Length: 364 pages
Edition : 1st
Language : English
ISBN-13 : 9781849518055
Category :
Languages :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Sep 23, 2013
Length: 364 pages
Edition : 1st
Language : English
ISBN-13 : 9781849518055
Category :
Languages :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total €26.97 €81.97 €55.00 saved
OpenFrameworks Essentials
€24.99
Cinder Creative Coding Cookbook
€41.99
Mastering openFrameworks: Creative Coding Demystified
€37.99
Total €26.97€81.97 €55.00 saved Stars icon
Banner background image

Table of Contents

11 Chapters
openFrameworks Basics Chevron down icon Chevron up icon
Drawing in 2D Chevron down icon Chevron up icon
Building a Simple Particle System Chevron down icon Chevron up icon
Images and Textures Chevron down icon Chevron up icon
Working with Videos Chevron down icon Chevron up icon
Working with Sounds Chevron down icon Chevron up icon
Drawing in 3D Chevron down icon Chevron up icon
Using Shaders Chevron down icon Chevron up icon
Computer Vision with OpenCV Chevron down icon Chevron up icon
Using Depth Cameras Chevron down icon Chevron up icon
Networking Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.4
(14 Ratings)
5 star 57.1%
4 star 28.6%
3 star 7.1%
2 star 7.1%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




Yoichi Nagashima Nov 19, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Since I really like this cool book, I recommend this book to young people who aim to media art.I think the author of this book is a young and ambitious researcher. And he is enjoying - not only professional programming, but also difficult collaboration with artistic fields.As a professor, I want to recommend this book to students who aim to media design.For beginners, this is good text book of "C++ programming" for the first time, and this book is full of exciting samples - for performance, for installations and systems generating a multi-media in real time.Because I have enjoyed "Processing", I did not have experienced "openFrameworks". But I am thinking that I will try to learn "openFrameworks" with this book.
Amazon Verified review Amazon
Leslie P Nov 20, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Mastering openFrameworks is full of very useful explanations that are not in the openFrameworks documentation. Each chapter has a nice introduction and background information for the topic, and how it can be used in a project. The explanation of computer vision and OpenCV was helpful. My favourite chapters were on particles and 3d drawing, you can get some very cool visuals going very quickly.I found the “drawing in 3D” chapter especially useful. The sample code was clean, clear, and a great tool to get started and it really helped me delve into the 3D capabilities of OF, which I had never really explored before.This book caters to the building blocks needed for creative coding applications and covers a lot of necessary topics. If you DO have OF/C++ experience, this book is not too rudimentary to be useful—it’s actually a great reference.
Amazon Verified review Amazon
James Ashley Mar 25, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is as good as a tech book can get. The examples are relevant and easy to follow. The writing is clear. The details are meticulous and explain the finer points of "creative coding" without hitting you over the head. A great companion book for Josh Noble's "Programming Interactivity".
Amazon Verified review Amazon
Mathias Paumgarten Oct 24, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book provides well insight from setting up openFrameworks projects and controlling simple input ways such as keystrokes and clicks, over image and video manipulation, all the way to first steps of shader programming for 3D (openGL) projects.The book is split into brief chapters, each covering at least one example from setup to the finish of execution.If you are interested into entering the world of creative coding and generative art, this book will give you a good insight and lead you along your first steps.However, in my opinion, a basic understanding of programming and C++ in specific should be present.
Amazon Verified review Amazon
Ronaldo Lombardi Mar 11, 2020
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Ele trata de muitos assuntos importantes para quem deseja usar o framework e aborda de forma simples. Gostaria de ter achado este livro antes :) Estou devorando. Obrigado ao autor.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.