DSA

1. DSA Processing

2. Links • Processing.org • My Processing page • Ben Fry • Ben Fry’s 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 <http://reas.com> int num = 120; float mx[] = new float[num]; float my[] = new float[num]; 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 i=1; i<num; i++) { mx[i-1] = mx[i]; my[i-1] = my[i]; } // Add the new values to the end of the array mx[num-1] = mouseX; my[num-1] = mouseY; for(int i=0; i<num; i++) { ellipse(mx[i], my[i], 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. x Graphics Model 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