Presentation is loading. Please wait.

Presentation is loading. Please wait.

© Calvin College, 2009 1 Being abstract is something profoundly different from being vague... The purpose of abstraction is not to be vague, but to create.

Similar presentations


Presentation on theme: "© Calvin College, 2009 1 Being abstract is something profoundly different from being vague... The purpose of abstraction is not to be vague, but to create."— Presentation transcript:

1 © Calvin College, Being abstract is something profoundly different from being vague... The purpose of abstraction is not to be vague, but to create a new semantic level in which one can be absolutely precise. - attributed to Edsger W. Dijkstra

2 © Calvin College, Methods ● Example Example ● Working with Methods – Defining animation methods Defining animation methods – Defining interaction methods Defining interaction methods – User-defined methods User-defined methods ● The Art of Computing The Art of Computing

3 © Calvin College, Example: Analysis (1) ● We’d like to build an interactive tool for drawing animated figures. ● The figures should include circles that grow/shrink. ● Some sample images are shown here.

4 © Calvin College, Example: Analysis (1 cont.) ● Features: – The environment should use animation to show figures changing; – The environment should support interactive drawing. – The geometric elements are ellipses. ● We’ll start with the restricted goal of animating a growing ellipse.

5 © Calvin College, Defining Animation Methods ● Animation is an illusion created by presenting carefully designed image frames at a sufficient frame rate. ● For our first iteration, we’d like to draw an expanding circle. For this, we need to: 1. Set up for the animation; 2. Draw each frame of the animation.

6 © Calvin College, Example: Design (1) ● Data Structures and Algorithm: Data: diameter (float) Setup: 1. Set up a 510x510 background 2. Set diameter = 0 Draw: 1. Clear the background. 2. Draw an ellipse in the center with diameter. 3. Increment diameter ● We expect to see the illusion of a growing ellipse.

7 © Calvin College, Example: Implementation (1) ● Relevant implementation tools: – animation methods: setup(), draw()

8 © Calvin College, Methods ● In Processing, programmers add new operations by defining methods. ● Using methods helps us to: – Modularize the program; – Create helpful procedural abstractions; – Improve readability; – Encourage reuse. ● To build new methods, we’ll use the same IID approach we’ve used before.

9 © Calvin College, Iteration 1.1: Set Up ● Analysis ● Design ● Implementation ● Test

10 © Calvin College, 2009 Method Definition Pattern returnType methodName(parameterDeclarations){ statements } – returnType is the type of value returned by the method or void if the method does not return a value; – methodName is the identifier that names the method; – parameterDeclarations is a comma-separated list of parameter declarations of the form type identifier that is omitted if there are no parameters; – statements is a set of statements that define the behavior of the method. 10

11 © Calvin College, final int WIDTH = 510, HEIGHT = WIDTH; float diameter; void setup() { size(WIDTH, HEIGHT); diameter = 0; }

12 © Calvin College, Iteration 1.2: Drawing Frames ● Analysis ● Design ● Implementation ● Test

13 © Calvin College, void draw() { background(255); float x = WIDTH/2, y = HEIGHT/2; ellipse(x, y, diameter, diameter); diameter += 2; }

14 © Calvin College, Example: Testing (1) ● The resulting output should give the illusion of a growing ellipse.

15 © Calvin College, Scope ● All identifiers have a scope. ● An identifier can be reused to identify two different variables so long as the variable scopes don’t overlap. ● Scoping rules: – Variables are in scope from where they are declared to end of that block. – Parameters are in scope throughout the method in which they are declared.

16 © Calvin College, final int WIDTH = 510, HEIGHT = WIDTH; float diameter; void setup() { size(WIDTH, HEIGHT); diameter = 0; } void draw() { background(255); float x = WIDTH/2, y = HEIGHT/2; ellipse(x, y, diameter, diameter); diameter += 2; }

17 © Calvin College, Defining Interaction Methods ● Processing supports user interaction using a set of pre-declared methods that respond to user-initiated events. ● User events include mouse and keyboard actions. ● For our second iteration, we’d like to allow the user to restart the ellipse animation in a spot specified using the mouse.

18 © Calvin College, Iteration 2 ● Analysis ● Design ● Implementation ● Test

19 © Calvin College, void mousePressed() { figureX = mouseX; figureY = mouseY; diameter = 0; }

20 © Calvin College, Iteration 3 ● Analysis ● Design ● Implementation ● Test

21 © Calvin College, void keyPressed() { background(255); }

22 © Calvin College, 2009 /** * expandingFigure displays an expanding/fading figure * with mouse-directed restarts and variable starting * points, and a keyboard-directed erase feature. * kvlinden Fall, 2009 */ int width = 510, height = width; float figureX, figureY, diameter; void setup() { size(width, height); background(255); smooth(); noFill(); figureX = width / 2; figureY = height / 2; diameter = 0; } void draw() { stroke(constrain(diameter/2, 0, 255)); ellipse(figureX, figureY, diameter, diameter); diameter += 2; } /** * Press the mouse anywhere to restart the expanding * figure centered at that point. */ void mousePressed() { figureX = mouseX; figureY = mouseY; diameter = 0; } /** * Press any key to erase the board. */ void keyPressed() { background(255); } 22

23 © Calvin College, User-Defined Methods ● Processing already knows about the animation and interaction methods. It declared them, it provides default definitions for them, it calls them. ● Processing also supports user-defined methods. ● For our next iteration, we’d like to allow the user to interactively create a resizable ellipse by pressing and dragging the mouse.

24 © Calvin College, Iteration 4 ● Analysis ● Design ● Implementation ● Test

25 © Calvin College, Parameters ● Parameters are variables provided by the calling context and used in the method. ● Parameter List Pattern: type identifier, type identifier, …

26 © Calvin College, void mouseDragged() { float diameter = 2 * computeDistance(figureX, figureY, mouseX, mouseY); fill(255); drawCircle(figureX, figureY, diameter); } void drawCircle(float x, float y, float diameter) { ellipse(x, y, diameter, diameter); }

27 © Calvin College, Returning Values ● The return type indicates the type of result the method produces. ● Methods that don’t return values specify void as the return type. ● Return pattern: return expression; - expression is a valid expression whose type is the same as (or is compatible with) the specified return type of the containing method

28 © Calvin College, void mouseDragged() { float diameter = 2 * computeDistance(figureX, figureY, mouseX, mouseY); fill(255); drawCircle(figureX, figureY, diameter); } float computeDistance(float x1, float y1, float x2, float y2) { float dx = x1-x2; float dy = y1-y2; return sqrt(dx*dx + dy*dy); }

29 © Calvin College, 2009 Documenting Methods ● If we expect other programmers to use our methods, we need to document them clearly. ● Document the purpose and assumptions of each method. 29

30 © Calvin College, /** * Compute the Euclidean distance from (x1, y1) to (x2, y2). * (This partially re-implements Processing's dist() method). * x1 the x coordinate of position 1 y1 the y coordinate of position 1 x2 the x coordinate of position 2 y2 the y coordinate of position 2 the distance from (x1, y1) to (x2, y2) */ float computeDistance(float x1, float y1, float x2, float y2) { float dx = x1-x2; float dy = y1-y2; return sqrt(dx*dx + dy*dy); }

31 © Calvin College, Scope (cont.) ● All identifiers have a scope. ● An identifier can be reused to identify two different variables so long as the variable scopes don’t overlap. ● Scoping rules: – Variables are in scope from where they are declared to end of that block. – Parameters are in scope throughout the method in which they are declared.

32 © Calvin College, float figureX, figureY, diameter; // code skipped here... void mouseDragged() { diameter = 2 * computeDistance(figureX, figureY, mouseX, mouseY); fill(255); drawCircle(figureX, figureY, diameter); } void drawCircle(float x, float y, float diameter) { ellipse(x, y, diameter, diameter); } float computeDistance(float x, float y, float x2, float y2) { float dx = x - x2; float dy = y - y2; return sqrt(dx*dx + dy*dy); }

33 © Calvin College, Methods Review

34 © Calvin College, Iteration 5 ● Analysis ● Design ● Implementation ● Test

35 © Calvin College, Continued /* figureDrawer allows the user to interactively * draw an ellipse by pressing the mouse on the * center point and dragging the mouse to specify * the radius. It sets transparent colors based on * x and y. * kvlinden Fall, 2009 */ float figureX, figureY, diameter; int eraseLine; // position of erase line void setup() { size(375, 625); background(255); smooth(); colorMode(HSB, 2 * PI, 100, 100); eraseLine = -2; } // There must be a draw method. void draw() { }

36 © Calvin College, Continued /** * Allow the user to draw an ellipse of arbitrary size * by pressing the mouse at the center point and dragging * the mouse to specify the radius. */ void mousePressed() { figureX = mouseX; figureY = mouseY; figureWidth = 0; figureHeight = 0; stroke(0); strokeWeight(1); } void mouseDragged() { float diameter = 2 * computeDistance(figureX, figureY, mouseX, mouseY); fill(computeColor(figureX, figureY, mouseX, mouseY)); drawCircle(figureX, figureY, diameter); } /** * Draw circle is a simple abstraction that draws circles * as ellipses with equal width and height. x x coordinate of the circle’s center point y y coordinate of the circle’s center point diamter the diameter of the circle */ void drawCircle(float x, float y, float diameter) { ellipse(x, y, diameter, diameter); }

37 © Calvin College, /** * Compute the Euclidean distance from (x1, y1) to (x2, y2). * (This partially reimplements Processing's dist() method). * x1 y1 x2 y2 the distance from (x1, y1) to (x2, y2) */ float computeDistance(float x1, float y1, float x2, float y2) { float dx = x1-x2; float dy = y1-y2; return sqrt(dx*dx + dy*dy); } /** * computeColor returns a color object based on the * figure's specifications. * sourceX the source's x coordinate sourceY the source's y coordinate targetX the target's x coordinate targetY the target's y coordinate a semi-transparent color based on the parameters */ color computeColor(float sourceX, float sourceY, float targetX, float targetY) { return color(PI + computeFacingAngle(sourceX, sourceY, targetX, targetY), 100, 100, 10); } // computeFacingAngle() from the text... Continued

38 © Calvin College,

39 © Calvin College, ● Publications: – The Art of Computer Programming – The TeXbook – 3:16 Bible Texts Illuminated ● “Programmers who subconsciously view themselves as artists will enjoy what they do and will do it better.” - Programming as an Art, 1974 Donald Knuth ( ) What’s the Big Idea images from stanford.edu


Download ppt "© Calvin College, 2009 1 Being abstract is something profoundly different from being vague... The purpose of abstraction is not to be vague, but to create."

Similar presentations


Ads by Google