The video synthesizer for desktop is the most elaborate in the book. It is discussed in the chapters from Chapter 2, Creating Your First openFrameworks Project, to Chapter 7, Distributed and Physical Computing with Networking and Arduino. It has a matrix pattern generator, shader-effect kaleidoscope, 3D rendering, GUI panel, and parameter automation, and can be controlled by the networking and Arduino devices.
The following is the project's code structure:
The project uses the
ofxGui(used in Chapter 3, Adding a GUI and Handling Keyboard Events) andofxOsc(used in Chapter 7, Distributed and Physical Computing with Networking and Arduino) addons. They are linked to the project in the first stage of its creation using the Pattern Generator wizard in Chapter 2, Creating Your First openFrameworks Project.The project's source files are
ofApp.handofApp.cpp. They are created and modified in Chapter 2, Creating Your First openFrameworks Project, and further extended in all chapters from Chapter 3, Adding a GUI and Handling Keyboard Events, to Chapter 7, Distributed and Physical Computing with Networking and Arduino. These source files are placed in thesrcfolder of the project.The shader's code files,
kaleido.fragandkaleido.vert, are created in Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders. They are placed in thebin/datafolder of the project.
The project works with the following data files stored in the bin/data folder:
settings.xml: This file stores the GUI state. It saves and loads automatically. It is implemented in Chapter 3, Adding a GUI and Handling Keyboard Events.collage.png: This is an image file, loaded and drawn in Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders.flowing.mp4: This is a video file, loaded and drawn in Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders.skvo.wav: This is a music track, loaded and played in Chapter 6, Animating Parameters.eeg.txt: This is a text file with neural data, loaded and parsed in Chapter 6, Animating Parameters.
Also, the project saves screenshots to the screen.png file by pressing Return (Enter) and saves/loads the GUI presets by pressing S and L. It is implemented in Chapter 3, Adding a GUI and Handling Keyboard Events.
The keys for controlling the project are the following:
|
Key |
Action |
Reference |
|---|---|---|
|
Esc |
This closes the application. It's a built-in feature of any openFrameworks application. |
- |
|
Z |
This toggles the visibility of the GUI panel. This also toggles the mouse input for 3D camera navigating. |
Chapter 3, Adding a GUI and Handling Keyboard Events, and Chapter 5, Creating 3D Graphics |
|
Return (Enter) |
This saves a screenshot to the |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
S |
This saves the GUI state to an XML file. The file is chosen by dialog. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
L |
This loads the GUI state from an XML file. The file is chosen by dialog. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
C |
This starts the camera to grab video frames. |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders |
|
P |
This plays/stops the music track |
Chapter 6, Animating Parameters |
A GUI consists of one GUI panel, which includes a number of sliders and checkboxes. For convenience, some controls are combined in GUI groups (Global, Primitive, and Mixer). They are described in separate subsections. Note the following conventions:
Notation 0..100 means that a slider takes integer values from 0 to 100
Notation [0, 100] means that a slider takes float values in from 0 to 100
All distances are measured in pixels. All angles are measured in degrees.
These sliders control the geometry of the matrix pattern:
|
Name |
Range |
Description |
Reference |
|---|---|---|---|
|
countX |
0..200 |
This controls the number of geometric primitives in the stripe pattern. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
stepX |
[0, 200] |
This controls the distance between geometric primitives along the X axis in the stripe pattern. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
twistX |
[-45, 45] |
This controls the rotation of each geometric primitive depending on its index in the stripe pattern. In Chapter 6, Animating Parameters, the slider's value is automated using data from the |
Chapter 3, Adding a GUI and Handling Keyboard Events, and Chapter 6, Animating Parameters |
|
countY |
0..50 |
This controls the number of stripe patterns in the matrix pattern. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
stepY |
[0, 200] |
This controls the distance between stripe patterns along the Y axis in the matrix pattern. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
twistY |
[-30, 30] |
This controls the rotation of each stripe pattern depending on its index in the matrix pattern. In Chapter 6, Animating Parameters, the slider's value is automated using data from the |
Chapter 3, Adding a GUI and Handling Keyboard Events, and Chapter 6, Animating Parameters |
|
pinchY |
[0, 1] |
This controls the scale of each stripe pattern depending on its index in the matrix pattern. In Chapter 7, Distributed and Physical Computing with Networking and Arduino, the slider's value is controlled by the |
Chapter 3, Adding a GUI and Handling Keyboard Events, and Chapter 7, Distributed and Physical Computing with Networking and Arduino |
This group of sliders controls the position of the matrix pattern of the screen and also sets the background brightness:
|
Name |
Range |
Description |
Reference |
|---|---|---|---|
|
Scale |
[0, 1] |
Size of the matrix pattern on the screen |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
Rotate |
[-180, 180] |
Rotation of the matrix pattern on the screen in degrees |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
Background |
[0, 255] |
Brightness of the screen background |
Chapter 3, Adding a GUI and Handling Keyboard Events |
This group of sliders and checkboxes controls the drawing of the geometric primitives in the matrix pattern:
|
Name |
Range |
Description |
Reference |
|---|---|---|---|
|
shiftY |
[-1000, 1000] |
This controls the shift of each geometric primitive along its local Y axis. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
rotate |
[-180, 180] |
This controls the rotation of the local coordinate system of each geometric primitive. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
size x, y |
Two sliders, each in [0, 20] |
This controls the width and height of each geometric primitive. This is not measured in pixels but as relative scaling. A value of 1 means no scaling. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
color r, g, b, a |
Four sliders, each in [0, 255] |
This controls the color of each geometric primitive. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
filled |
Checkbox |
If this checkbox is checked, then each geometric primitive is drawn as a filled figure. If not, only the contour of the primitive is drawn. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
|
type |
Checkbox |
This switches between the rectangle (checked) and triangle (unchecked) shapes of each geometric primitive. |
Chapter 3, Adding a GUI and Handling Keyboard Events |
This group of sliders and checkboxes controls video mixing of images, video files, and live camera frame and also controls the kaleidoscope effect, mixing of layers with 2D and 3D graphics, and deformation of a sphere in 3D.
|
Name |
Range |
Description |
Reference |
|---|---|---|---|
|
image |
[0, 255] |
This controls the blending value for the |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders |
|
video |
[0, 255] |
This controls the blending value for the |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders |
|
camera |
[0, 255] |
This controls the blending value for a live camera frame. The camera is disabled by default. To start it, press C. |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders |
|
kenabled |
Checkbox |
This enables the kaleidoscope shader effect. |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders |
|
ksectors |
1..100 |
This controls the number of kaleidoscope sectors. |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders |
|
kangle |
[-180, 180] |
This controls the orientation of the circular sector, which is grabbed from the picture and repeated to obtain the kaleidoscope effect. In Chapter 6, Animating Parameters, the slider's value is automated; it linearly increases with time. |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders, and Chapter 6, Animating Parameters |
|
kx |
[0, 1] |
This controls the relative X coordinate of the grabbed sector's vertex in the kaleidoscope effect. The value 0 means the left position, while the value 1 means the right position. In Chapter 6, Animating Parameters, the slider's value is automated using LFO based on the sine wave. |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders, and Chapter 6, Animating Parameters |
|
ky |
[0, 1] |
This controls the relative Y coordinate of the grabbed sector's vertex in the kaleidoscope effect. The value 0 means the top position, while the value 1 means the bottom position. |
Chapter 4, Working with Raster Graphics – Images, Videos, and Shaders |
|
show2d |
[0, 255] |
This controls the blending value for the 2D picture obtained from the image, video, camera, and matrix pattern (processed with the kaleidoscope effect if enabled). |
Chapter 5, Creating 3D Graphics |
|
show3d |
[0, 255] |
This controls the blending value for the 3D image of the sphere. |
Chapter 5, Creating 3D Graphics |
|
rad |
[0, 500] |
This controls the radius of the sphere. In Chapter 6, Animating Parameters, the slider's value is automated using the sound level. The sound level is measured from the |
Chapter 5, Creating 3D Graphics, and Chapter 6, Animating Parameters |
|
deform |
[0, 1.5] |
This controls the relative amplitude of the sphere's deformation by formulas. The value 0 gives no deformation, while the value 1 gives the deformation's amplitude equal to the sphere's radius. |
Chapter 5, Creating 3D Graphics |
|
deformFreq |
[0, 10] |
This controls the space frequency of the sphere's deformation by analytical formulas. In Chapter 6, Animating Parameters, the slider's value is automated using LFO based on Perlin noise. |
Chapter 5, Creating 3D Graphics, and Chapter 6, Animating Parameters |
|
extrude |
[0, 1] |
This controls the relative amplitude of the sphere's extrusion based on the texture's brightness. The value 0 gives no extrusion, while the value 1 gives the maximal extrusion's amplitude equal to the sphere's radius. |
Chapter 5, Creating 3D Graphics |
|
automate |
Checkbox |
This enables the automation of the following sliders: |
Chapter 6, Animating Parameters |