1. Computer Science I Text input. Transformations. Yet another jigsaw. Classwork/Homework: Create new application making use of transformations.

2. Text input There are Libraries, including Java libraries available. However, here is a basic way. – Note: pressing a key does not immediately cause anything to appear. – Uses 3 String variables – This is a start (stem) of a program. More planning needed.

3. Global variables and setup String prompt = "Type your name: "; String myText = ""; String answer = ""; void setup(){ size(600,400); textSize(30); fill(0); //text will be black }

4. The draw function void draw(){ background(255); text(prompt+myText,10,10,width,height); if (answer.length() >0) { text("Hello, "+answer, 10, 80); // more could go here, including stopping input }

5. void keyPressed() { if (keyCode == BACKSPACE) { if (myText.length() > 0 ) { myText = myText.substring( 0, myText.length()- 1 ); } } else if (keyCode == DELETE) { myText = "" ; } else if (keyCode == ENTER) { answer = myText; } else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) { myText = myText + key; }

6. More complex example Choose from among 3 photos (all taken in Cuba) Use a Boolean variable picking to distinguish making the choice from the rest. – Could have introduced another phase.

7. String method How to choose if a string in within a string. Player types in "night club", want to check if "club" is present. Use indexOf – Returns the index if it is present – Returns -1 if not My decision on what to do if none of 3 valid choices are present. – I pick one. – Could be improved!

8. String determineChoice(String answer) { String choice; if (answer.indexOf("club")>=0) {choice = "cubanightclub.jpg";} else if (answer.indexOf("plaza")>=0) {choice = "cubaplaza.jpg";} else if (answer.indexOf("cafe")>=0) {choice = "cubaoutdoorcafe.jpg";} else {choice = "cubaplaza.jpg";} return choice; }

9. While loop Repeats loop body based on condition. while (condition) { } So…you probably need to make sure that the condition gets changed in the loop Note: the draw function is invoked repeatedly, so this may work for situations in which in other languages, you may need a while.

10. Transformations translate, rotate, scale – rotate is done in terms of origin, so it probably is necessary to do a translate first … of coordinate system Change future drawing operations Successive transformations operate as a stack and can use pushMatrix and popMatrix to save and to undo.

11. Remember smileyfaces? void setup(){ size(600,400); smiley(100,200,100,50); translate(300,200); rotate(PI/3.0); smiley(0,0,100,200); //changed x, y } void smiley(int x, int y, int w, int h){ fill(255,255,255); ellipse(x,y,w,h); noFill(); arc(x,y,w/2,h/2,.25*PI,PI*.75); fill(0,0,0); ellipse(x-w*.25,y-h*.25,w/10,h/10); //left eye ellipse(x+w*.25,y-h*.25,w/10,h/10); //right eye }

12. Another variation Stores away current coordinate system using pushMatrix. Draws first smiley. Uses translate and rotate to tilt smiley. Restores original coordinate system using popMatrix. Performs scaling. Using same parameters as first one, draws what will be a smaller ellipse, in different position.

13. Just show setup void setup(){ size(600,400); pushMatrix(); smiley(100,200,100,50); translate(300,200); rotate(PI/3.0); smiley(0,0,100,200); popMatrix(); scale(.5,.3); smiley(100,200,100,50); }

14. Notes Some effects (perhaps all) can be achieved with variables, but it can be easy (easier) way. BUT…AND combined effects of transforms can be complex.

15. Classwork / Homework Experiment with these tools. Design, plan and implement new project. Upload to moodle