1. Computer Science I More class examples. Paths. Jigsaw. Tolerance. Classwork/homework: Your class project. Post proposal for midterm project.

2. Moving a circle along a path Use mouse events, captured by – mousePressed – mouseDragged – mouseReleased to record positions (at some resolution) on screen. THEN use draw function for animation. NOTE: must distinguish phases of application. Added instructions.

3. Planning I defined [my] Location class – Includes getxp and getyp methods. Global variables, including an array for the Locations, and Boolean variables for managing phases and pathI index variable. setup draw mousePressed, mouseDragged, mouseReleased

4. Location[] path = {}; Boolean pathmade = false; //first phase Boolean started = false; int pathI = 0; //index into path String instructions = "Press mouse button down, drag, and release to make a path"; void setup() { background(255); size(600,600); fill(0); text(instructions,10,20); fill(255); }

5. Location objects just hold x and y values class Location { float xp; float yp; Location (float x, float y) { xp = x; yp = y; } float getxp() { return xp; } float getyp() { return yp; }

6. Note My implementation calls for getxp and getyp. Explicit access to object variables. Create and save Location objects because they will be reused. Choose to not clear screen. See next example for alternative.

7. The mouse functions respond to mouse events void mousePressed(){ //adds one point to path started = true; pathmade = false; path = (Location[]) append(path, new Location(mouseX,mouseY)); } void mouseDragged(){ // adds one point to path if (started){ // only if started path = (Location[]) append(path, new Location(mouseX,mouseY)); } void mouseReleased() //changes phase { started = false; pathmade = true; }

8. Now show draw function void draw() { //only does something if pathmade is true if (pathmade) { Location p = path[pathI]; path++; ellipse(p.getxp(),p.getyp(),20,20); if (pathI>=path.length) {pathI = 0;} }

9. Example: Variation on path following A picture (photo) travels on path. – I liked the image AND it is appropriate. The path is visible during construction (but not afterwards) Screen cleared when drawing image traveling – So… just one copy of image appears. Sections are NOT added to the path, but the old array reset to be empty, pointer set to 0.

10. Before (while) reading code Note: Location class definition as before. Much use of draw, mouseReleased, mouseDragged, mousePressed the same or very similar. Use of Booleans governs what phase it is – Constructing path – Drawing image Minor nicety: determine dimensions of image and adjust so middle of image travels on the path and dimensions drawn are proportional.

11. Another sketch with a class: Jigsaw Button class Piece class Note: there are inOver methods for buttons and pieces. This jigsaw program also has phases. For many games, and other programs, the checking of player moves should not be absolute, to the pixel level. This is termed allowing tolerance or margin.

12. Two checks if done for Player doing the puzzle: The mouseReleased method checks if positions of pieces is close enough. – Done in terms of relative to first piece – Tolerance check for x and for y The slow move back of all pieces is done in draw. Deltas calculated in mouseClicked. The draw determines if the first piece is close enough and then re-positions all pieces in the proper place.

13. More notes on Jigsaw Adapts to display size: creates a second PImage named panoramaA as modified copy of original panorama. The program makes the pieces by (virtually) cutting up the panoramaA PImage. Code in mouseDragged uses offsetX and offsetY to re-position the one jigsaw piece being dragged.

14. Exercise in reading code Download program from moodle and examine it. Don't read as you would a poem!

15. Preview A 2-D puzzle A choice of 3 linear puzzles

16. Classwork/Homework Study and experiment with the examples. Finish and upload your own classy project. Make posting with proposal for your midterm project. – Due March 7. – Can build on previous work or do something totally new.