DSA

1
DSA

• Processing

2
Links

• Processing.org
• My Processing page
• Ben Fry
• Ben Frys Thesis on Computational Information
  Design
• Casey Reas site
• Casey Reas at UCLA

3
Favourites

• Zipcodes by Ben Fry
• Dreamlines by Leonardo Solaas
• Life automata by Chris Wallace

4
Origin

• Ben Fry and Casey Reas.
• Processing is a programming language and
  environment built for the electronic arts and
  visual design communities. It is created to teach
  fundamentals of computer programming within a
  visual context and to serve as a software
  sketchbook. It is used by students, artists,
  designers, architects, and researchers for
  learning, prototyping, and production.
• Processing is a Object oriented language with a
  specific domain of multimedia. Programs are
  translated in to Java, compiled and executed
  seamless in the simple but effective Development
  environment. Once written, an application can be
  exported as a Java applet for inclusion in a
  website, or as a Java application.

5
Variables are typed just as they are in Java
// Storing Input // by REAS lthttp//reas.comgt
int num 120 float mx new floatnum
float my new floatnum void setup()
size(200, 200) smooth() noStroke()
fill(255, 153) framerate(60) void
draw() background(51) // Reads
throught the entire array // and shifts the
values to the left for(int i1 iltnum i)
mxi-1 mxi myi-1 myi
// Add the new values to the end of the array
mxnum-1 mouseX mynum-1 mouseY
for(int i0 iltnum i) ellipse(mxi,
myi, i/4, i/4)
Array declaration
Setup called once at the start
HSV model fill colour for shapes
Draw called once every frame
Model is sequence of x,y values, oldest first
Update model by losing the oldest and adding the
mouse position
Finally render the model as circles, oldest
smallest.
6
Processing syntax

• Like java
• Comments
• Control structures
• Assignment
• Strongly typed variables
• Simple class definition
• Extensive library of functions to
• Set state of animation
• Draw graphics (2D and 3D)
• Get mouse input
• File and web interaction

7
Animation Program Structure

• Code executes in a framework which calls
  functions at points in the processing loop
• Start setup()
• Each frame draw()
• Draw updates the Display window
• Fresh canvas (buffer) at the start of draw()
• Graphics commands update the canvas
• When draw terminates, the canvas is written to
  the Display Window

8
Integrated Development Environment

• Syntax and language-aware editor
• Colour-code syntax
• Bracket matching
• reserved words linked to reference manual
• Generally good diagnostics
• Extensive language examples
• Fast edit-compile-execute cycle
• Generate Java applet and application code
• Include Java code

9
Graphics Model
x
y

• Very powerful set of graphics primitives for line
  graphics
• 2-d and 3-d models OpenGL
• image and video manipulation
• RGB and HSB colour models
• Interaction from mouse and keyboard and serial
  port
• Extensive font library
• Graphics drawn through a transformation matrix
  (2-d or 3-d) with matrix stack

10
Model- based animation
Processing manages
Screen
render
Canvas
User defined
visualise
Model
User input
e.g. Spring
External data source