CSC 120 Introduction to Creative Graphical Coding, Fall 2017

Transcription

1 CSC 120 Introduction to Creative Graphical Coding, Fall 2017 Dr. Dale E. Parson, Assignment 1, Implementing and testing an automated avatar in Processing. This assignment is due via D2L Assignments Assignment 1 avatar by 11:59 PM on 29 September. When using Processing on the Kutztown campus Windows computers, make sure to start out every time by setting your Processing Preferences -> Sketchbook Location to U:\Processing. The U:\ drive is a networked drive that will save your work and make it accessible across campus. If you save it to your desktop or the lab PC you are using, you will lose your work when you log out. You must save it to the U:\ drive. If you do not have a folder 1 called Processing under U:\, you must create one using the Windows Explorer. Processing Preferences is under the File menu on Windows. If you will be downloading Processing 3.X and running it using an off-campus computer (do not use version 2.X for assignments), you can copy your project sketch named avatar to a flash drive on one machine, and then copy it from the flash drive to another Processing sketch folder. Create your avatar folder by running File -> Save As -> avatar after setting up your sketch folder. Once you have created your avatar sketch, write the following code as outlined in class: 1. Create some immobile background scenery. (Hint: Plot this before the avatar.) 1 Another name for a folder is a directory. page 1

2 Keep them opaque, differing colors. 2. Create an avatar that is not the textbook s Zoog and is not Parson's avatar. Call pushmatrix() before starting the avatar to save the window based x,y coordinate system. Call translate( ) with coordinates for the center of the avatar s body. 0,0 is now its reference appoint; use the center of its body for this approximate reference point. Optional bonus points 1.5 for using scale, another 1.5 for using rotate for the avatar. Use at least one shape from "2D Primitives" (on the manual page) that Zoog does not use. Zoog uses ellipse, line, and rect. Note use of rectmode and ellipsemode; I recommend CENTER. Use variations in color. Use variations in alpha. Use at least 5 distinct shapes, meaning at least 5 body parts for the avatar. Call popmatrix() before resuming display of foreground scenery; it restores 0,0 to left,top. 3. Create some immobile foreground scenery. (Hint: Plot this after the avatar.) Keep them opaque, varying colors across time. 4. Your avatar must move horizontally and/or vertically at some rate. 5. Your avatar MUST wrap back around to the other side of the window, OR bounce back in opposite, when hits window's edge. Example: if you have a variable xloc for the X location of some part of your avatar, and you want to move it to the right by adding a positive variable offset to xloc, you can do this: xloc = (xloc + offset) % width The % operator takes the remainder of an integer division. If (xloc + offset) is less than width, then (xloc + offset) % width is the same as (xloc + offset). If (xloc + offset) is greater than or equal to width, then (xloc + offset) % width gives a remainder that is less than width and wraps around to the left side of the window. Adding a negative offset (or subtracting a positive offset) is more complicated because xloc + offset may go negative, and the result of the % operator differs in different languages when one of its numbers is negative. If the negative number is small, you can ensure wrap-around with this expression: xloc = (xloc + offset + width) % width // In case offset is negative. An example may help. Assume the width is 380, xloc is 0 (the left pixel column), and offset is -1. Then (xloc + offset + width) % width ( ) % % So, subtracting 1 from 0 leads to 379, the right-hand column. Now, assume the width is 380, xloc is 379 (the right pixel column), and offset is 2. Then (xloc + offset + width) % width ( ) % 380 page 2

3 761 % // 380 goes into 760 twice with a remainder of 1 Note that the leftmost column is an X of 0 and the second column is 1. You can just plug in the formula (xloc + offset + width) % width and not worry about the math too much. For vertical wrap-around use a yloc and window height in the formula. You could also use an if programming construct, which we will get to soon. Use it like this: xloc = xloc + offset ; if (xloc >=width) { xloc = 0 ; } // wrap from right to left side of display. if (xloc < 0) { xloc = width 1 ; } // wrap from left to right side of display // Use a similar approach with yloc and the display height variable for vertical movement. 6. Your avatar must have some "body part" that wiggles, grows/shrinks, or moves in some manner, without becoming disconnected from the avatar. Step 6 may use the modulo operator (%), which gives the remainder of division, to wrap back around to its starting point. It may use if instead. Instead of using width or height in a formula such as (xloc + offset + width) % width, you could use the maximum distance that you want the feature to move away from its starting point in place of width. Use colors and alpha (stroke() and fill() and background()), strokeweight(), and a variety of shapes. Get into creating a composition. Consult and use some functions to make your animation exciting. Grading: Each of the above 6 steps is worth 15% each (90% total). I will give half credit for step 4 if wrap-around does not work. That leaves 10%. 5 of these points are for compositional effort, by which I mean creating a scene that is a composition, as opposed to just a random collection of graphical features that satisfy the above requirements. Students have done campus scenes, city scenes, scenes in space with a flying avatar, an others. Create an actual scene. The remaining 5 points are for documentation in the form of comments. Use the following comment block at the top of your sketch, as required by the CSC department. Fill in each field with appropriate comments. /************************************************************/ /* Author: /* Creation Date: /* Due Date: /* Course: /* Professor Name: /* Assignment: /* Sketch name: /* Purpose: ************************************************************/ Also, within your setup() and draw() functions, add some comments using the // comment delimiter to describe the avatar body part you are plotting, similar to how the textbook author describes Zoog. page 3

4 We will have some time in class for working on this project. If you do not get it done in class, you will have to complete it as homework. I expect it to be to me by the due date. I will deduct 10% for each day it is late, and will not accept it after the end of 10/2. TURNING IT IN: When your work is completed, you can use the Windows Explorer to find the file avatar.pde in your U:\Processing\avatar folder. Drag avatar.pde into the Assignment 1 avatar assignment dropbox under our course s D2L account by the due date. If you find you have created an error, you can drop an updated avatar.pde into the dropbox. It will not accept file drops after the first class following the due date. Assignment 1 avatar is under Assessments -> Assignments in our D2L account. Additional notes (NOT required for the assignment): I have used a way to ramp the background color up and down from black to white and then back down again smoothly, without jumping straight from white-to-black or black-to-white. You could use this same approach to make your avatar ricochet off of the window s edges instead of wrapping around. I have this at the top of my avatar sketch: int backgroundcolor = 0 ; // Wraps from 255 back to 0. Originally I had this as the first two lines of my draw() function: background(backgroundcolor); backgroundcolor = (backgroundcolor + 1) % 256 ; The second line advances backgroundcolor from 0 (black) through 255 (white). The expression (backgroundcolor + 1) % 256 evaluates to backgroundcolor for values 0 through 255, since the integer quotient of the division (backgroundcolor + 1) % 256 for values 0 through 255 is 0 and the remainder is (backgroundcolor +1) ; the % operator gives the remainder. However, when backgroundcolor is 255, then (backgroundcolor + 1) is 256; 256 / 256 gives a quotient of 1 with a remainder of 0. So, backgroundcolor wraps from 255 to 0. We went over this in class and in page 2 above. Visualize it like this: In computer music & audio we call this a rising sawtooth waveform. I found it aesthetically unpleasing because of the jump directly from a pure white background (daytime at 255) to pure black (nighttime at 0). I wanted a gradual ramp from night to day and again from day to night, like a real day. After a little experimenting I hit on this formula, which does not require using an if statement that we will see in the next chapter. background(abs(backgroundcolor - 255)); backgroundcolor = (backgroundcolor + 1) % 511 ; page 4

5 The second line now cycles the value in variable backgroundcolor from 0 through 510 and then back to 0. Variable backgroundcolor is still a sawtooth, as shown below. background(abs(backgroundcolor - 255)); backgroundcolor = (backgroundcolor + 1) % 511 ; Subtracting 255 in the expression backgroundcolor subtracts 255 from the sequence of values 0 through 510, leading to a sequence -255 through 255. Finally, the abs(backgroundcolor 255) code uses Processing s absolute value function to flip the sign of the negative values to positive. In other words, -255 becomes 255, -254 becomes 254, and so on, while the non-negative values remain unchanged. We wind up with a so-called triangle waveform. You could use the same approach to vary a x location variable from width-1 down to 0 and then back up to width-1 instead of wrapping around, or to vary a y location variable from height-1 down to 0 and then back up to height-1 instead of wrapping around. You could also vary smaller offsets for body parts to wiggle this way instead of snapping back to a starting position. You do not need to use this information in assignment 1, but you may need to use it in a later assignment. page 5