Cinder Creative Coding Cookbook

Cinder Creative Coding Cookbook

Overview of this book

Cinder is one of the most exciting frameworks available for creative coding. It is developed in C++ for increased performance and allows for the fast creation of visually complex, interactive applications."Cinder Creative Coding Cookbook" will show you how to develop interactive and visually dynamic applications using simple-to-follow recipes.You will learn how to use multimedia content, draw generative graphics in 2D and 3D, and animate them in compelling ways. Beginning with creating simple projects with Cinder, you will use multimedia, create animations, and interact with the user.From animation with particles to using video, audio, and images, the reader will gain a broad knowledge of creating applications using Cinder.With recipes that include drawing in 3D, image processing, and sensing and tracking in real-time from camera input, the book will teach you how to develop interesting applications."Cinder Creative Coding Cookbook" will give you the necessary knowledge to start creating projects with Cinder that use animations and advanced visuals.

Cinder Creative Coding Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Getting Started

Introduction

Creating a project for a basic application

Creating a project for a screensaver application

Creating a project for an iOS touch application

Understanding the basic structure of an application

Responding to mouse input

Responding to key input

Responding to touch input

Accessing files dropped onto the application window

Adjusting a scene after resizing the window

Using resources on Windows

Using resources on iOS and OS X

Using assets

Preparing for Development

Introduction

Setting up a GUI for tweaking parameters

Saving and loading configurations

Making a snapshot of the current parameter state

Using MayaCamUI

Using 3D space guides

Communicating with other software

How it works...

There's more...

See also

Preparing your application for iOS

Using Image Processing Techniques

Introduction

Transforming image contrast and brightness

Integrating with OpenCV

Detecting edges

Detecting faces

Detecting features in an image

Converting images to vector graphics

Using Multimedia Content

Introduction

Loading and displaying video

Creating a simple video controller

Saving window content as an image

Saving window animations as video

Saving window content as a vector graphics image

Saving high resolution images with the tile renderer

Sharing graphics between applications

Building Particle Systems

Introduction

Creating a particle system in 2D

Applying repulsion and attraction forces

Simulating particles flying in the wind

Simulating flocking behavior

Making our particles sound reactive

Aligning particles to a processed image

Aligning particles to the mesh surface

Creating springs

Rendering and Texturing Particle Systems

Introduction

Texturing particles

Adding a tail to our particles

How it works…

Creating a cloth simulation

Texturing a cloth simulation

Texturing a particle system using point sprites and shaders

Connecting the dots

Connecting particles with spline

Using 2D Graphics

Drawing 2D geometric primitives

Drawing arbitrary shapes with the mouse

Implementing a scribbler algorithm

Implementing 2D metaballs

Animating text around curves

Adding a blur effect

Implementing a force-directed graph

Using 3D Graphics

Introduction

Drawing 3D geometric primitives

Rotating, scaling, and translating

Drawing to an offscreen canvas

Drawing in 3D with the mouse

Adding lights

Picking in 3D

Creating a height map from an image

Creating a terrain with Perlin noise

Saving mesh data

Adding Animation

Animating with the timeline

Creating animation sequences with the timeline

Animating along a path

Aligning camera motion to a path

Animating text – text as a mask for a movie

Animating text – scrolling text lines

Creating a flow field with Perlin noise

Creating an image gallery in 3D

Creating a spherical flow field with Perlin noise

Interacting with the User

Introduction

Creating an interactive object that responds to the mouse

Adding mouse events to our interactive object

Creating a slider

Creating a responsive text box

Dragging, scaling, and rotating objects using multi-touch

Sensing and Tracking Input from the Camera

Capturing from the camera

Tracking an object based on color

Tracking motion using optical flow

Object tracking

Reading QR code

Building UI navigation and gesture recognition with Kinect

Building an augmented reality with Kinect

Using Audio Input and Output

Generating a sine oscillator

Generating sound with frequency modulation

Adding a delay effect

Generating sound upon the collision of objects

Visualizing FFT

Making sound-reactive particles

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Using assets

In this recipe, we will learn how we can load and use assets.

Getting ready

As an example for this recipe, we will load and display an asset image.

Place an image file inside the assets folder in your project directory and name it image.png.

Include the following files at the top of your source code:

#include "cinder/gl/Texture.h"
#include "cinder/ImageIO.h"

Also add the following useful using statements:

using namespace ci;
using namespace ci::app;
using namespace std;

How to do it…

As an example, we will learn how we can load and display an image asset. Perform the following steps to do so:

Declare a ci::gl::Texture object:
```
gl::Texture image;
```

In the setup method let's load the image asset. We will use a try/catch block in if it is not possible to load the asset.

    try{
        image = loadImage( loadAsset( "image.png" ) );
    } catch( ... ){
        console() << "asset not found" << endl;
    }

In the draw method we will draw the texture. We will use an if statement to check if the texture has been successfully initialized:
```
if( image ){
  gl::draw( image, getWindowBounds() );
    }
```

How it works…

The first application uses an asset Cinder, which will try to find its default assets folder. It will begin by searching the executable or application bundle folder, depending on the platform, and continue searching its parent's folder up to five levels. This is done to accommodate for different project setups.

There's more…

You can add an additional assets folder using the addAssetDirectory method, which takes a ci::fs::path object as a parameter. Every time Cinder searches for an asset, it will first look in its default asset folder and then in every folder the user may have added.

You can also create subfolders inside the assets folder, for example, if our image was inside a subfolder named My Images, we would type in the following code snippet in the setup method:

try{
     image = loadImage( loadAsset( "My Images/image.png" ) );
}catch( ... ){
     console() << "asset not found" << endl;
 }

It is also possible to know the path where a specific folder lies. To do this, use the getAssetPath method, which takes a ci::fs::path object as a parameter with the name of the file.

Cinder Creative Coding Cookbook

Cinder Creative Coding Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Cinder Creative Coding Cookbook

Using assets

Getting ready

How to do it…

How it works…

There's more…