Lecturer:   Zsófia Ruttkay PhD, Senior research fellow, e-mail: ruttkayATmome.hu

Time:         Thursday 9-12.50 :interactive lectures followed by parctical work
                  First occasion: 24 September

Location:    Room B102

Course home:   http://create.mome.hu/ruttkay/STD2/

Description:
The main goal of this course is to learn to design and implement algorithms - that is, processes for the computer to be performed. This requires two types of skills:

• designing the generation process of a static or changing image in an abstract, algorithmic way;
• writing it down in a programming language and letting the computer perform the algorithm.

The course will use visual designs (partly from STD1) 'to be drawn and animated' by the computer, as vehicle of learning the design and implementation of algorithms. The programming language to be learnt and used is processing, which is on the one hand particularly suited for artists, and on the other hand, is an elegant full-fledged language well representing the major characteristics of other, more advanced computer programming languages. Hence, by the end of the course, students will have acquired:

• attitude, knowledge and skills to do 'algorithmic design', as a construction mechanism of patterns and motions;
• basic knowledge and skills of the processing language, allowing students to do own, creative programming as well as learn further programming.

Prerequisites:
Nothing in maths or programming, but basic familiarity with computer usage, and interest in and motivation for learning programming. Doing together with STD1 course on Visual Mathematicsis recommended.

Equipment:
Notebook and own laptop, if you have one. But there are PCs to work with.

Assesment:   

• active participation at lectures and lab works (20%),
• homeworks (50%)
• a final on-spot exam-like programming task (30%)
• in order to get the credit, one has to perform at least 60%

Course book:    Learning Processing "Find a friend in code".
                         by Daniel Shiffman
                         2008, Morgan Kaufmann

The processing site:    www.processing.org

Other resources:

• a basic and complete reference of the language elements on-line and locally
• The learning secion on the processing site with tutorials and examples.
• Design Programming course by Rob Saunders.
  A systematic discussion of topics for a semester course, using the same book we use.
• Processing: A Programming Handbook for Visual Designers and Artists
  Casey Reas and Ben Fry (Foreword by John Maeda).
  Published August 2007, MIT Press. 736 pages. Hardcover.
  all codes on-line -- educational copy can be ordered from MIT Press

Students:
  

Lectures

24.09:    Getting started: shapes, color and reaction to mouse

Topics:

• introduction: why to learn programming?
• schedule, where we aim at, and way of working: starting on time, be active, switch off mobile, shut laptop
• monsters, ball droppings, and more in processing
• have fun in getting your ideas visualized: start with the end: what do you want to see?
  Make sketches - design an algorith - program
• idea - algorithm - program - and what it ( not) produces
• why just processing: free - open source - visual - 'simple Java' - but full-fledged and typical programming language
• specifying pixel coordinates
• colors: grayscale, RGB (red-green-blue), transparency
• using the prcessing environment, making sketches
• basic shapes: point(), line(), rect(0, ellipse()
• colors: stroke(), fill(), background() see example
• drawing with the mosue mouseX see examples
• dynamic control mosuePressed() and keyPressed() see example
• putting all together: dynamic Zoog see example

Assignments:

1. Fill in the form and send it back asap
2. Send a recent digital photo, unless you did already for STD1
3. Make a static drawing using shapes (circle, rectangle, lines) and colors.
   If you are taking STD1, draw Fibonacci squares, spirals ...
   Otherwise you might consider to design an abstract face, or a monster ...
4. Make your drawing dynamic , it should react in one way or another to the mouse: some form may change, move, colors vary ...

01.10:   The real stuff: variables

Topics:

• A puzzle: Think of a number, do some calculations ... and I find out the end-result!
• Variables: primitive data types, names, initialization
• Arithmetic operators
• Using variables, see: example_4_2 , changing value: example_4_3 , many varibales: example_4_4
• system variables, most used ones: frameRate, frameCount, width, height, key, keyPressed, mousePressed,mouseX, mouseY, pmouseX, pmouseY see: example_4_6
• Giving value by random() example_4_7

Resouces:

Learning materail
• Rob Saunders slides till page 47 on variables and conditionals
  
  Further links
• Some more puzzles of finding out numbers are here (in Hungarian).
• About the history of Pong, and a java applet

Exercises:

1. What data would you need to design a one-person against the system Pong game? Write the variable declarations for a program which plays Pong.
2. make variants of Exercise 4_3 such as:
   • ball moving faster
   • ball moving from right to left
   • ball not moving but changing size
   • ball following the mouse and growing meanwhile
3. make a program which draws 4 circles nicely arranged on the screen, independent of the size
   make use of arithmetic assignments in draw() to decide the centers of the circles
4. draw a circle with 2 smaller, touching circles inside such that the sum of their radii is the radius of the big circle
5. make an anitaed version of the previous drawing, by changing the radius of the inscribed circles

Assignments:

1. Make a parametric version of your design. Use comments for telling about the role of variables.
2. Change some of these parameters by some mouse and key input, e.g. moving in different directions for different keys, changing shape/size/colour.
3. Add some randomness to the 'look' and behaviour of your creature.

08.10:   Conditionals and loops -- Plygons and polylines

Topics:

• Three reasons to make a variable:
  • the value will change in the code,
  • will be used often in the code,
  • you want to explore different designs by changing the value;
• Homeworks with variables revisited
  • fourCircles
  • threeCircles
  • yingYang
• Boolean expressions
• Controlling the flow of the program by conditionals: bouncing ball: example_5_1 , bouncing ball: example_5_2 , bouncing ball: example_5_3
• Logical operators, rollover: example_5_3 and mouse pressed condition example_5_4
• Using boolean variables
• bouncing ball: example_5_6
• threeMoingCircles
• yingYangMoving
• yingYangPulsing
• Polygons and polylines
• regPoly -- sin(), cos(), beginShape(), endShape()
• diagPoly
• equiSpiral

Resouces:

Exercises:

1. make variants of example_4_5 such as:
   • the rectangle remains white at the end;
   • the rectangle keeps changing color in a cyclic way;
   • the reactangle keeps changing RGB colors
2. Determine if a number is between 0 and 25, 26 and 50, or greater than 50. Write out the result.
3. Example 4-3 moved a circle across the window. Change the sketch so that the circle only starts moving once the mouse has been pressed. Use a boolean variable.
4. colour the two halves of your screen different based on the position of your mouse (if - else)
5. colour the four quarters of your screen different, based on theposition of the mouse
6. animate the previous coloring
7. Rewrite Example 5-3 so that the squares fade from white to black when the mouse leaves their area.
   Hint: you need four variables, one for each rectangle’s color.
8. Make a stair-like pattern of rectangles
9. Draw a meander
10. Draw a sinus line
11. Change the density and size of the simus waves

Assignments:

1. Make a design by placing identical shapes on a grid
2. Make your design animated: change colour, pulse, objects move

15.10:   Using the for () construct

The entire morning was spent on discussing different realizations of previous homeworks with for ().
Then everybody started to work on the exrecises, and getting help.

You find the series of exercises here, most of them with reference to code, to see step-by-step different usage of one or multiple for() constructs.
Assignments:

1. Go through all the exercises, one after the other. First make efforts to write code yourself. Try to modify the code for the previous exercises each time. Only if you get really stuck, look up my code (where available).
2. Make the exercises without given code yourself by all means. Try to make your program short, efficient and well commented.

NOTE: At the beginning of the next class you will be challanged to make a similar exercises on spot.

22.10:   Functions - provided ones, and own ones to be defined

Topics:

• What is a function? Using and defining functions - see course notes pp 1-23 by Rob Saunders.
• Some useful ready-made mathematical functions: sqrt(), dist(), sin(), cos() ... plus already knwon ones like line(), size(),...
• Some trigonometry - polar coordinates - osciallantion - waves
• Drawing an Archimedian spiral see example
• Coordinate transformations - see course notes by Rob Saunders.
• Examples of transformations - rotating rectangle
• rotating two squares

Exercises/Assignments:

1. Look at tour old creature code, and make it simpler by using own functions to draw (parts of) itvariants of your creatures
2. Put your creatures, in smaller size and may be rotated positions on a grid.
3. Make your creature react to the mouse, but depending on distance to it.
4. Draw different spirals - change colour, shape
5. Make a grid (tesselation) with different shapes/colours/orientations at grid points. You may want to use random().
6. Make a design with multiple shapes e.g. on a smaller grid (3x3), and make the shapes animated differently by using transformation functions.
7. Make a single square tile design, and create different tesselation patterns, as it was shown in STD1.
   Here is my code to start with.

29.10:    NO LECTURE

05.11:   Objects of a kind: Arrays and Objects

Topics:

• Recap of what you already know:
  1. embedded for loop - drawing diagonals in a polygon
  2. mouse action, collision Pong revisited
• Bouncing balls - gravity and friction
• Arrays - course notes pp. 1-36 by Rob Saunders
• Interaction with tiles - orientattion stored in 2D array
• Objects and Methods - course notes pp. by Rob Saunders
• Two cars - example of two Car instances
• Many cars - array of Car objects

Exercises/Assignments:

1. Make two balls bouncing - see on-line exercise
2. Modify the previous exercises to allow any number of balls bouncing - use Ball[] arrays
3. Develop further the Pong game: change the speed, make your own variant
4. Make a class for your creature
5. Make a crowd of your creatures, with variants

12.11:   Application

Exercises/Assignments:

1. Make a population of emotional creatures - here is the descritption with hints.
2. Work on own project.

19.11:   Exercises of arrays and objects

26.11:    NO LEXTURE

Make the try-out exam at home:

1. You find the tasks - here . At the final exam there will be similar tasks. This try-out is homework, to be evaluated and discussed on the 1 December 13.30 lecture, instead of the usual Thursday one.

1.12 at 13.30:    CONSULTANCY

03.12:    On-spot exam programming