First Technology Transfer
Digital Embedded and Information Systems Training and Consultancy
Web Technologies Training and Consultancy

Mastering Graphics and Interactive Programming using Processing

Duration: 5 Days

Intended Audience

This course is suitable for teachers with little or no prior programming experience in either programming, or computer graphics or multimedia programming . Its goal is to provide a starting point for those who wish to learn how to implement sophisticated interactive multimedia computer graphics based applications without having to master complex graphics programming frameworks such as OpenGL. This course should provide a sound foundation to programming computer graphics and the geometry underlying the implementation of computer graphics, as well as other media modalities such as audio and MIDI. It should also provide a starting point for learning about and experimenting with interactive multi-media creations.

Course Overview

The aim of this 5 day course is to provide a thorough introduction and confidence building experience for teachers, artists and designers wanting to explore the world of interactive media and Computer Graphics through the Processing framework. It is not aimed at media and computer graphics programming experts with extensive programming experience. Its goal is to convince those worried about the complexities of comuter graphics media programming that this is a subject that can be mastered by non-technologists and non-mathematicians. The goal is to "de-mistify" the subject and to encourage a creative and exploratory approach to discovering just what can be achieved. This course is suitable not only for teachers and artists, but also for parents, and teaching assistants and most people with an interest in computer graphics and a creative outlook. The most important background requirements are some familiarity with computers, curiosity and the love of puzzle solving and the graphic arts.

Unlike traditional programming courses this course introduces programming concepts such as variable, branching, looping , input output, and the use of modules as a natural part of the problem solving involved in constructing animated interactive computer graphics.

Another important aspect of this course is the introduction of basic design concepts and a notation based on simplified UML and flowcharts as an aid to structuring and tackling more ambitious projects.

Course Outline

Introduction to Processing and Computer Graphics

• background to Processing and basic concepts of microcontrollers
  • download and installation
  • why processing is based on Java
  • introduction to the Processing IDE (Integrated Development Environment)
  • structure of a typical Processing application
• introduction to Processing programming by Example
  • setting up the application using the setting() method
  • drawing something using the draw() method
  • drawing basic geometric shapes - retangles, ellipses,straight lines
  • hexadecimal numbers and their use in representing colour
  • RGB representation of colour values
  • filling shapes with colour - the fill() method
  • setting the colour and width of a line - stroke() and strokeWeight() methods
  • setting background colour - background() method
  • drawing curved lines - curve() method
  • vertices and shapes =- vertex() and curveVertex methods
  • detecting and responding to mouse and keyboard events
  • mouseX and mouseY variables
  • mousePressed(), mouseReleased() and mouseDragged() methods
  • keyPressed() method and key variables

Using libraries in Processing applications

• overview of libraries
• .jar (Java Archive) files and libraries
• survey with demonstrations of common processing libraries
  • Minim - audio library based on the JavaSound API
  • OCD (Obsessive Camera Direction) library for control and creation of 3D camera views
  • surfaceLib - for creating 3D surfaces
  • Physics - a basic particle physics engine
  • AI Libraries - libraries for various AI (Artificial Intelligence) programming tasks - useful in creating interesting interaction styles
  • surfaceLib - for creating 3D surfaces
• bluetoothDesktop - for sending and receiving data via Bluetooth networks
• proMidi - a library for sending and receiving MIDI information
• powering up the breadboard
• connecting up buttons, LEDs and resistors
• oscP5 - an implementation for processing of the OSC (Open Sound Control) protocol - used for communication between computers, sound synthesisers and other multimedia devices

Loading data, images and movies into Processing

• loading and displaying images
• loading and displaying video streams using the Movie class
• reading and writing files

Designing Programs

• using scenarios and use cases to help design an interactive application
• using flow charts to work out what a program is to do
• a gentle introduction to matters "object oriented"
• a small helping of UML

A more serious look at the Processing language and framework

• operands and operations
• arithmetic, logical and relational operations
• an introduction to arrays of data structures and their applications
• naming conventions
• loops
• graphics elements
• drawing commands
• geometrical objects
• attributes
• fonts and images
• interactivity - generating media output and responding to inputs
• manipulating collections of objects
• Arrays
• Multi dimensional arrays
• resizing arrays
• using arrays to store collections of things
• manipulation of arrays

Two Dimensional Geometry and 2D shapes

• Polygons
• Sine and Cosine waves
• Bezier curves
• responsive curves and polygons
• basic shape transformations - move, rotate, scale
• grids of shapes
• grouping and selecting shape objects

Graphical User Interface Elements

• Buttons
• labels, text field objects and choice objects
• managing collections of GUI elements

Image Processing

• displaying
• using signal processing filters
• manipulating bits on pixels
• creating and using paint brushes
• edge detection

Images in Motion

• basics of animation
• smooth and erratic motion
• generating effects and patterns with line traces
• transforming images interactively
• using double buffering to avoid image flicker
• realistic looking motion - friction, collisions, elastic motion

An Introduction to 3D Graphics

• Representing 3D objects as data
• Displaying 3D objects - projection and perspective
• How Processing supports 3D graphics
• Gentle introduction to 3D geometry
• Visibility of faces of 3D solids
• lighting and shading
• interactive manipulation of 3D objects

Sound and Audio

• Nature and uses of sound in interactive applications
• How computers represent and process sound
• Using the Minim audio processing library

Course format

The course is approximately involves approximately 40% teaching and 60% hands on practical work.