CSC 120 Introduction to Creative Graphical Coding, Fall 2015

Transcription

1 CSC 120 Introduction to Creative Graphical Coding, Fall 2015 Dr. Dale E. Parson, Outline in preparation for assignment 2. How to move your avatar in a function and give it X, Y, and scaling parameters. Below is my solution to assignment 1. I have highlighted in bold the portion that draws the avatar so I can show you how to move it into a function with parameters. I will place both sketches avatar and avatarfunction under S:\ComputerScience\Parson in case you want to get access to the code. 1 /************************************************************ 2 /* Author: Dr. Parson 3 /* Creation Date: 9/17/ /* Due Date: 9/26/ /* Course: CSC120 Intro. to Creative Graphical Coding 6 /* Professor Name: Dr. Parson 7 /* Assignment: 1. 8 /* Sketch name: avatar 9 /* Purpose: Animate an avatar using Processing. 10 *********************************************************/ // Modeled after int backgroundcolor = 0 ; // Wraps from 255 back to int avatarx = 0 ; // Move the avatar left-right-left in cycles. 16 int rangex = 0 ; // range X from 0 to 2*width-1 for avatarx update 17 int legx = 0 ; // How far is leg from X endpoint, range // Also use 2 * lexg offset to wiggle arms up & down (in Y coordinate); 19 // HIGHPOINTS: 20 // 1. Use % operator as outlined in handout to bounce avatar back & forth across 21 // screen using avatarx and rangex. Use legx to wiggle leg endpoints 22 // back & forth, arms up & down. 23 // 2. Use semi-transparency of grass and sky to pass through background light to dark, 24 // which also cycles smoothly from day-night-day. backgroundcolor used for both 25 // background gray scale and tree red/green mix void setup() { 28 size(750, 500); 29 background(backgroundcolor); 30 } void draw() { 33 //background(backgroundcolor); 34 //backgroundcolor = (backgroundcolor + 1) % 256 ; 35 // Make the background cyclic through light & dark, no jumps. 36 background(abs(backgroundcolor - 255)); 37 backgroundcolor = (backgroundcolor + 1) % 511 ; // PAINT BACKGROUND SCENERY.. 40 rectmode(center); 41 // Semi-transparent green grass uses the background's light-to-dark. 42 fill(0, 100, 0, 100); 43 rect(width/2, height*3/4, width, height/2); 44 // Semi-transparent blue sky uses the background's light-to-dark. 45 fill(0, 0, 100, 100); page 1

2 46 rect(width/2, height/4, width, height/2); // Create the building (library). 49 fill(108, 57, 15); 50 rect(width/2, height/4, width/2, height/3); 51 rect(width/2, height/2-35, width, height/3); 52 fill(100); 53 rect(width/2, height/2, width*2/3, height/5); 54 // Create poles leading into library, make one foreground later. 55 strokeweight(4); 56 stroke(200); 57 ellipsemode(center); 58 fill(255); 59 /* move this to foreground 60 line(width/4, height/4, width/4, height*3/4); 61 line(width*3/4, height/4, width*3/4, height*3/4); 62 arc(width/4, height/4, 50, 50, PI, 2*PI, PIE); 63 arc(width*3/4, height/4, 50, 50, PI, 2*PI, PIE); 64 */ line(width/3, height/3, width/3, height*2/3); 67 line(width*2/3, height/3, width*2/3, height*2/3); 68 arc(width/3, height/3, 40, 40, PI, 2*PI, PIE); 69 arc(width*2/3, height/3, 40, 40, PI, 2*PI, PIE); // Make the next poll be the same distance further. 72 int newx = (width/3 - width/4) + width/3 ; 73 // Do the same for its height -- shrink by same amount. 74 int newy = (height/3 - height/4) + height/3 ; 75 line(newx, newy, newx, height-newy); 76 line(width-newx, newy, width-newx, height-newy); 77 arc(newx, newy, 30, 30, PI, 2*PI, PIE); 78 arc(width-newx, newy, 30, 30, PI, 2*PI, PIE); // Draw the avatar. 81 nostroke(); 82 fill(240, 150, 150); 83 ellipse(avatarx, height/2, 50, 40); // head 84 quad(avatarx-5, height/2, avatarx+5, height/2, avatarx+10, height/2+40, avatarx-10, height/2+40); // neck 85 fill(0); // professor gown 86 ellipse(avatarx, height/2+60, 40, 80); // torso 87 stroke(0); 88 // stick arms & legs 89 strokeweight(8); 90 line(avatarx, height/2+60, avatarx-20-abs(10-legx), height/2+120); // left leg 91 line(avatarx, height/2+60, avatarx+20+abs(10-legx), height/2+120); // right leg 92 strokeweight(5); 93 line(avatarx, height/2+60, avatarx-40, height/2+20-2*abs(10-legx)); // left arm 94 line(avatarx, height/2+60, avatarx+40, height/2+20+2*abs(10-legx)); // right arm 95 strokeweight(2); 96 fill(0, 50, 255); 97 ellipse(avatarx-10, height/2-5, 10, 10); // avatar's right side of glasses 98 ellipse(avatarx+10, height/2-5, 10, 10); // avatar's right side of glasses 99 line(avatarx-5, height/2-5, avatarx+5, height/2-5); // glasses connector 100 line(avatarx-15, height/2-5, avatarx-22, height/2-8); // left earpiece page 2

3 101 line(avatarx+15, height/2-5, avatarx+22, height/2-8); // right earpiece 102 fill(0); 103 ellipse(avatarx, height/2+1, 5, 5); // nose 104 arc(avatarx, height/2+10, 20, 10, 0, PI); // mouth 105 quad(avatarx-30, height/2-15, avatarx+30, height/2-15, avatarx+15, height/2-30, avatarx-35, height/2-30); 106 // get ready for movement in next frame. 107 rangex = (rangex+1) % (width*2); 108 avatarx = width - abs(rangex - width); 109 legx = (legx+1) % 20 ; /* move this to foreground */ 112 // Create last pole leading into library. 113 strokeweight(6); 114 stroke(200); 115 ellipsemode(center); 116 fill(255); 117 line(width/4, height/4, width/4, height*3/4); 118 line(width*3/4, height/4, width*3/4, height*3/4); 119 arc(width/4, height/4, 50, 50, PI, 2*PI, PIE); 120 arc(width*3/4, height/4, 50, 50, PI, 2*PI, PIE); // fill(0, 100, 0) ; // dark green for some foreground trees 124 fill(255 - abs(backgroundcolor - 255), abs(backgroundcolor - 255), 0); 125 nostroke(); 126 triangle(0, 0, 100, 180, 0, 180); 127 triangle(0, 135, 100, 315, 0, 315); 128 triangle(0, 270, 100, 450, 0, 450); 129 fill(85, 73, 25); 130 rectmode(corner); 131 rect(0, 450, 20, height-450); // Put another tree on the right. 134 // fill(0, 100, 0) ; // dark green for some foreground trees 135 fill(255 - abs(backgroundcolor - 255), abs(backgroundcolor - 255), 0); 136 nostroke(); 137 triangle(width, 0, width-100, 180, width, 180); 138 triangle(width, 135, width-100, 315, width, 315); 139 triangle(width, 270, width-100, 450, width, 450); 140 fill(85, 73, 25); 141 rectmode(corner); 142 rect(width-20, 450, width, height-450); 143 } 144 The specific parts of my avatar do not matter for this explanation. The following points about the above bold code are important. 1) Every part of the avatar s body plots X relative to variable avatarx, which is the variable my first assignment uses to move the avatar by updating avatarx within draw(). 2) Every part of the avatar s body plots Y relative to the display height. 3) Width and height of ellipses and rectangles, and colors of fill and stroke, are just constant values. They do not use variables. page 3

4 Your solution to assignment 1 differs in details, but the basic outline above must apply to your solution 1 in order for it to work. Here is my solution to assignment 2, avatarfunction, which uses an if construct, a for loop, and a function named avatar to plot the avatar. I have highlighted all code that changed from my solution 1 so emphasize the changes. 1 /************************************************************ 2 /* Author: Dr. Parson 3 /* Creation Date: 10/4/ /* Due Date: 10/22/ /* Course: CSC120 Intro. to Creative Graphical Coding 6 /* Professor Name: Dr. Parson 7 /* Assignment: 2. 8 /* Sketch name: avatarfunction 9 /* Purpose: Animate an avatar using a function to scale & locate it. 10 *********************************************************/ // Modeled after int backgroundcolor = 0 ; // Wraps from 255 back to int avatarx = 0 ; // Move the avatar left-right-left in cycles. 16 int speedx = 4 ; // speed of motion, negative for left. 17 int legx = 0 ; // How far is leg from X endpoint, range float avscale = 2.0 ; // How much to scale avatar up or down. 19 int level = 1 ; 20 int leveldirection = 1 ; 21 // Also use 2 * lexg offset to wiggle arms up & down (in Y coordinate); 22 // HIGHPOINTS: 23 // 1. Use if and a function. 24 // 2. Use semi-transparency of grass and sky to pass through background light to dark, 25 // which also cycles smoothly from day-night-day. backgroundcolor used for both 26 // background gray scale and tree red/green mix void setup() { 29 size(750, 500); 30 background(backgroundcolor); 31 } void draw() { 34 // Make the background cyclic through light & dark, no jumps. 35 background(abs(backgroundcolor - 255)); 36 backgroundcolor = (backgroundcolor + 1) % 511 ; // PAINT BACKGROUND SCENERY.. 39 rectmode(center); 40 // Semi-transparent green grass uses the background's light-to-dark. 41 fill(0, 100, 0, 100); 42 rect(width/2, height*3/4, width, height/2); 43 // Semi-transparent blue sky uses the background's light-to-dark. 44 fill(0, 0, 100, 100); 45 rect(width/2, height/4, width, height/2); // Create the building (library). 48 fill(108, 57, 15); page 4

5 49 rect(width/2, height/4, width/2, height/3); 50 rect(width/2, height/2-35, width, height/3); 51 fill(100); 52 rect(width/2, height/2, width*2/3, height/5); if (level == 4) { 55 avatar(avatarx, height/2, legx,.25); 56 /* WILL ADD THIS LOOP LATER 57 for (int i = 0 ; i < 7 ; i++) { 58 avatar(avatarx + (i-3) * 13, height/2, legx,.25); 59 } 60 */ 61 } // This is the poll closest to the building. 64 strokeweight(4); 65 stroke(200); 66 ellipsemode(center); 67 fill(255); 68 int newx = (width/3 - width/4) + width/3 ; 69 // Do the same for its height -- shrink by same amount. 70 int newy = (height/3 - height/4) + height/3 ; 71 line(newx, newy, newx, height-newy); 72 line(width-newx, newy, width-newx, height-newy); 73 arc(newx, newy, 30, 30, PI, 2*PI, PIE); 74 arc(width-newx, newy, 30, 30, PI, 2*PI, PIE); if (level == 3) { 77 avatar(avatarx, height/2, legx,.5); 78 /* WILL ADD THIS LOOP LATER 79 for (int i = 0 ; i < 5 ; i++) { 80 avatar(avatarx + (i-2) * 25, height/2, legx,.5); 81 } 82 */ 83 } // Next pole 86 strokeweight(4); 87 stroke(200); 88 ellipsemode(center); 89 fill(255); 90 line(width/3, height/3, width/3, height*2/3); 91 line(width*2/3, height/3, width*2/3, height*2/3); 92 arc(width/3, height/3, 40, 40, PI, 2*PI, PIE); 93 arc(width*2/3, height/3, 40, 40, PI, 2*PI, PIE); if (level == 2) { 96 avatar(avatarx, height/2, legx, 1.0); 97 /* WILL ADD THIS LOOP LATER 98 for (int i = 0 ; i < 3 ; i++) { 99 avatar(avatarx + (i-1) * 50, height/2, legx, 1.0); 100 } 101 */ 102 } /* move this to foreground */ page 5

6 105 // Create last pole leading into library. 106 strokeweight(6); 107 stroke(200); 108 ellipsemode(center); 109 fill(255); 110 line(width/4, height/4, width/4, height*3/4); 111 line(width*3/4, height/4, width*3/4, height*3/4); 112 arc(width/4, height/4, 50, 50, PI, 2*PI, PIE); 113 arc(width*3/4, height/4, 50, 50, PI, 2*PI, PIE); if (level == 1) { 116 avatar(avatarx, height/2, legx, 2.0); 117 } // fill(0, 100, 0) ; // dark green for some foreground trees 120 fill(255 - abs(backgroundcolor - 255), abs(backgroundcolor - 255), 0); 121 nostroke(); 122 triangle(0, 0, 100, 180, 0, 180); 123 triangle(0, 135, 100, 315, 0, 315); 124 triangle(0, 270, 100, 450, 0, 450); 125 fill(85, 73, 25); 126 rectmode(corner); 127 rect(0, 450, 20, height-450); // Put another tree on the right. 130 // fill(0, 100, 0) ; // dark green for some foreground trees 131 fill(255 - abs(backgroundcolor - 255), abs(backgroundcolor - 255), 0); 132 nostroke(); 133 triangle(width, 0, width-100, 180, width, 180); 134 triangle(width, 135, width-100, 315, width, 315); 135 triangle(width, 270, width-100, 450, width, 450); 136 fill(85, 73, 25); 137 rectmode(corner); 138 rect(width-20, 450, width, height-450); // get ready for movement in next frame. 141 avatarx = avatarx + speedx ; 142 if (avatarx > width+70) { 143 speedx = -speedx ; 144 level = level + leveldirection ; 145 } else if (avatarx < -70) { 146 speedx = -speedx ; 147 level = level + leveldirection ; 148 } 149 if (level > 4) { 150 level = 3 ; 151 leveldirection = - leveldirection ; 152 } else if (level < 1) { 153 level = 2 ; 154 leveldirection = - leveldirection ; 155 } 156 legx = (legx+1) % 20 ; 157 } 158 page 6

7 159 void avatar(int avx, int avy, int legdist, float avscale) { 160 // Draw the avatar. 161 nostroke(); 162 fill(240, 150, 150); 163 ellipse(avx, avy, 50 * avscale, 40 * avscale); // head 164 quad(avx-5 * avscale, avy, avx+5 * avscale, avy, avx+10 * avscale, avy+40 * avscale, avx-10 * avscale, avy+40 * avscale); // neck 165 fill(0); // professor gown 166 ellipse(avx, avy+60 * avscale, 40 * avscale, 80 * avscale); // torso 167 stroke(0); 168 // stick arms & legs 169 strokeweight(8); 170 line(avx, avy+60 * avscale, avx-20 * avscale-abs(10-legdist) * avscale, avy+120 * avscale); // left leg 171 line(avx, avy+60 * avscale, avx+20 * avscale+abs(10-legdist) * avscale, avy+120 * avscale); // right leg 172 strokeweight(5); 173 line(avx, avy+60 * avscale, avx-40 * avscale, avy+20 * avscale-2*abs(10-legdist) * avscale); // left arm 174 line(avx, avy+60 * avscale, avx+40 * avscale, avy+20 * avscale+2*abs(10-legdist) * avscale); // right arm 175 strokeweight(2); 176 fill(0, 50, 255); 177 ellipse(avx-10 * avscale, avy-5 * avscale, 10 * avscale, 10 * avscale); // avatar's right side of glasses 178 ellipse(avx+10 * avscale, avy-5 * avscale, 10 * avscale, 10 * avscale); // avatar's right side of glasses 179 line(avx-5 * avscale, avy-5 * avscale, avx+5 * avscale, avy-5 * avscale); // glasses connector 180 line(avx-15 * avscale, avy-5 * avscale, avx-22 * avscale, avy-8 * avscale); // left earpiece 181 line(avx+15 * avscale, avy-5 * avscale, avx+22 * avscale, avy-8 * avscale); // right earpiece 182 fill(0); 183 ellipse(avx, avy+1 * avscale, 5 * avscale, 5 * avscale); // nose 184 arc(avx, avy+10 * avscale, 20 * avscale, 10 * avscale, 0, PI); // mouth 185 quad(avx-30 * avscale, avy-15 * avscale, avx+30 * avscale, avy-15 * avscale, avx+15 * avscale, 186 avy-30 * avscale, avx-35 * avscale, avy-30 * avscale); 187 } 188 Here are the important points to note about the changes highlighted in bold. A) I moved my avatar drawing into a function named avatar() at line 159 above. B) This function has parameters for the X location of the avatar called avx, Y called avy, the distance of the leg and arm wiggle in legdist, and a float scaling factor called avscale. I made it a float because it may be a fraction such as 0.5 for ½. C) I changed every instance of avatarx in the original code to avx, the name of the parameter. You can do this with the search-and-replace window of the Processing editor, although be careful that you do not Change all outside of this function. Parameter avx exists only inside this function. D) I changed every instance of height/2 in the original code to avy within the function, because height/2 gave the Y coordinate in the original. E) I multiplied the avscale times all of the fixed distance parameters in the original. For example, these two adjacent lines in the original: 98 ellipse(avatarx+10, height/2-5, 10, 10); // avatar's right side of glasses 99 line(avatarx-5, height/2-5, avatarx+5, height/2-5); // glasses connector became this in the above function: page 7

8 178 ellipse(avx+10 * avscale, avy-5 * avscale, 10 * avscale, 10 * avscale); // avatar's right side of glasses 179 line(avx-5 * avscale, avy-5 * avscale, avx+5 * avscale, avy-5 * avscale); // glasses connector Two important things to note are a) I did not use the avscale parameter while I was working on getting avx and avy to work, and b) when avscale is 1.0, it does not change the value from assignment 1. Expression avx-5 * 1.0 gives the same result as avatarx-5 in assignment 1. Multiplication and division have higher precedence than addition or subtraction, which means in this case that the multiplication by 1.0 happens first. However, when avscale is 0.5, it will halve the distances, and so on. The scaled distances apply to offsets from avx and avy as in this example, and they apply to width of figures such as rectangles and ellipses. F) I replaced variable legx in the original code with parameter legdist. I did not bother to scale the legdist because I wanted to see the effect. G) Now that there is a function that draws an avatar, I tested it using the line of code at line 96, which is where I had all of the avatar code in assignment avatar(avatarx, height/2, legx, 1.0); That is a function call to my new avatar function, similar to your calls to background(), stroke(), fill(), and other functions from processing s library. It passes the original values used in assignment 1 as arguments to the function, with 1.0 for avscale. I ran the program to make sure that I got exactly the same result before proceeding from here. Now I inserted four conditional calls to avatar at various places in the code, like this. These calls plot the avatar at various scales, and at different times in the sequence of plotting foreground and background scenery. Ignore the loops that are commented out for now. 54 if (level == 4) { 55 avatar(avatarx, height/2, legx,.25); 56 /* WILL ADD THIS LOOP LATER 57 for (int i = 0 ; i < 7 ; i++) { 58 avatar(avatarx + (i-3) * 13, height/2, legx,.25); 59 } 60 */ 61 } 76 if (level == 3) { 77 avatar(avatarx, height/2, legx,.5); 78 /* WILL ADD THIS LOOP LATER 79 for (int i = 0 ; i < 5 ; i++) { 80 avatar(avatarx + (i-2) * 25, height/2, legx,.5); 81 } 82 */ 83 } 95 if (level == 2) { 96 avatar(avatarx, height/2, legx, 1.0); 97 /* WILL ADD THIS LOOP LATER 98 for (int i = 0 ; i < 3 ; i++) { 99 avatar(avatarx + (i-1) * 50, height/2, legx, 1.0); 100 } page 8

9 101 */ 102 } 115 if (level == 1) { 116 avatar(avatarx, height/2, legx, 2.0); 117 } Level 2 is the original location of plotting the avatar. The function s arguments are the original values of the variables, with 1.0 for the scale, which plots at the original size. The only parameter change in the other calls is the avscale, which makes a bigger avatar at level 1 and smaller avatars at levels 3 and 4. I could have changed the first or second parameter to create offsets for avy or avy. In fact, the commented-out loops do that. We will go over them in class. H) Note these changes in variable definitions and variable updates at the top of the program and bottom of draw() respectively. 15 int avatarx = 0 ; // Move the avatar left-right-left in cycles. 16 int speedx = 4 ; // speed of motion, negative for left. 17 int legx = 0 ; // How far is leg from X endpoint, range float avscale = 2.0 ; // How much to scale avatar up or down. 19 int level = 1 ; 20 int leveldirection = 1 ; 140 // get ready for movement in next frame. 141 avatarx = avatarx + speedx ; 142 if (avatarx > width+70) { 143 speedx = -speedx ; 144 level = level + leveldirection ; 145 } else if (avatarx < -70) { 146 speedx = -speedx ; 147 level = level + leveldirection ; 148 } 149 if (level > 4) { 150 level = 3 ; 151 leveldirection = - leveldirection ; 152 } else if (level < 1) { 153 level = 2 ; 154 leveldirection = - leveldirection ; 155 } 156 legx = (legx+1) % 20 ; 157 } // THIS IS THE BOTTOM OF draw() I replaced all uses of the % modulo operator with an if statement, and I used another if statement to keep the value of level between 1 and 4 inclusive. These ifs are based on textbook examples we have already gone over. If you understand these individual steps, you will be able to extend your assignment 1 for assignment 2. Another handout explains assignment 2. We will go over my commented-out for loops in class. page 9

10 page 10