(Accounting for 5% of your final grade) I. Assignment Summary This assignment consists of three parts, which are independent programs (aka sketches in Processing’s term) that should run on their own. The purpose to have three parts lies in that with the first two parts, we’d like you to experience the inconvenience of doing things without defining your own methods, and then for the 3rd part, do the same things and integrate them easily by defining your own methods, so that you’ll be able to see the advantages of defining methods for doing jobs over without having methods. It is because of this, all three parts must be followed exactly as prescribed and submitted as independent running sketches (zipped in package though) for grading. It is expected that you start with Sketch 1, then do Sketch 2 and finally Sketch 3. All three parts need to be submitted for grading. Each of them requires you to do the followings respectively: Sketch 1: Without defining your custom method, create a background that will serve as the scene for characters Sketch 2: Without defining your custom method, create an interactable character that should be relevant to the scene created above (e.g. a rabbit vs. a garden) Sketch 3: Create your own custom methods to draw the scene and character, and then call them inside the draw() method to place multiple figures of the character in the scene with different sizes, locations, orientations, and interactions
Learning objectives
By doing this assignment, you will learn how to: (a) make use of Processing built-in methods to draw simple and complex shapes; (b) define and call custom methods to draw specific scenes and figures; (c) apply transformations in graphic drawing; and (d) mouse-interact with figures
Total Points: 15 (Assignment + Online Test) Please note each of the three parts below needs to be submitted. You’ll lost marks for Part I & II if submitting Part III only
II. Assignment Requirements (13 points): Tech Reqs*:
10 points
Part I- draw a scene without defining method
Part II- draw an interactable character w/t
Part III- drawing with custom
ECO Reqs**: 3 points
Tech points: 3 ECO points available: 1
defining method Tech points: 3 ECO points available: 0.5
methods Tech points: 4 ECO points available: 1.5
Description Draw a scene using the shapes and methods covered in class. Examples: a spaceship, forest, city. place all your code in setup() or draw() (if you have animations)
Draw a character using the shapes and methods covered in class. place all your code in the draw() method
Draw 8 of your character (part II) in the scene (part I), using methods and parameters. place your code for drawing in your own methods and call them in draw() method
Application Requirements
1. Use each of the following shape methods at least four times:
-ellipse -rect -line -arc -triangle
-.25 for each missed shape, max deduction of 0.5. 2. use each of the following methods at least two times:
-quad -curve
-.25 for each missed shape, max deduction of 0.5.
3. use 8 different fills -.25 for each missed shape, max deduction of 0.5. 4. use 4 different strokes -.25 for each missed shape, max deduction of 0.5. 5. use 4 different stroke widths -.25 for each missed shape, max deduction of 0.5.
1. Use at least four different shapes -.5 < 4 shapes.
2. Use at least 16 shapes (e.g., 4 times each of your 4 shapes). -.25-.5 depending on how many shapes missing.
3. Character should appear in the middle of the screen (at translated origin; see coding requirement #2) -.25 character appears elsewhere
4. Character rotates continuously based on mouseX, BETWEEN 45 degrees left and 45 degrees right. -.25 character rotates a different amount in either direction or character just tilts 45 degrees right and 45 degrees left but no values in between. -.75 character does not rotate at all.
5. Character scales continuously based on mouseY, between .5 and 2 times its original size. -.25 character scales a different amount or character just expands to twice and then half its size but no values in between. -.75 character does not scale at all.
1. Scene background is the background from part I. -.5 plain or no background.
2. Scene contains 8 instances of your character. -1 scene contains only one character. -.5 scene contains more than 1 but fewer than 8 characters.
-.25 any two characters have identical orientation or size.
2. At least 2 of the 8 characters interact with the mouse. The interaction must differ between the two characters. -1 no character interacts with mouse -.5 only one interacts with mouse. -0.25 mouse interaction of two characters is identical.
Coding Requirements
1. Store your 8 different fills and 4 different strokes in global variables. (e.g., color treeBark=color(255,120,3 0);
-0.5 if fewer than 8 global fill and 4 global stroke variables.
2. Comment on what each
chunk of code is supposed to draw. e.g. //draw the flower arc(width/2, height/2, 20,20, 0, PI); …etc.
-.25~-0.5 depending on how many portions of code uncommented.
1. Character must rotate and scale around its center. -.5 character rotates around a different pivot point.
2. Must TRANSLATE the character to the center of the screen so that the character is drawn at coordinates 0, 0. -.5 character is drawn directly at width/2, height/2, instead of being drawn at the translated origin.
3. Mouse interaction must use full width and height of the window. -.5 there are parts of the screen where moving the mouse does not affect the character rotation or scale.
1. Code that draws your background should be in a method called drawBackground(). -.5 background code not inside of a method.
2. Code that draws your character should be in a method called drawCharacter. -1.5 character drawing code not inside of a method.
3. drawCharacter method has four parameters: int x, int y, float scale, float rotation. Use these parameters to set the position, scale and rotation of the character within the method body. -.75 method has no parameter -.75 method body does not actually use these parameters to rotate, scale or position the character.
Effort, Creativity, Originality
1. Create a unique complex shape (e.g., flower, cloud) by layering together multiple (at least 4 different) simple shapes (e.g., ellipse, arc, rect). +.25-.5 depending on complexity/number of shapes used.
2. Add animations to objects in the scene, e.g. moving cloud, shining sun, swing flowers, etc. (+0.25-0.5 depending on complexity).
3. Other: you might think of some other idea for enhancing your scene! It may be worth points!
1. Use pushMatrix and popMatrix to isolate the rotation or create animation to a specific part of your character (e.g., the hand waves, wings flap, eyes blink, eye ball rolls, mouth opens & closes etc). +.25-.5 depending on how well the effect matches the design of your character
1. Position your characters throughout the scene in a way that makes sense. For instance, position characters so that they appear to be sitting on background objects, emerging from doorways, etc (instead of just having them placed randomly throughout the scene). +.5-.75 depending on complexity of placements
2. Design mouse interactions that cause the character to interact coherently with objects in the background. For example, a past student had a mountain goat character that appeared to walk up and down an angled slope as the
mouse moved up and down the screen. +.5-1 depending on complexity of interactions.
3. Use push and popMatrix so that you can independently manipulate the rotattion, scale and relative position of different parts of your character. Apply this by making different parts of the interactive characters react in different ways to the mouse. For instance, one student designed a dog character whose tail wagged from side to side and head nodded up and down as the mouse moved from the left to the right of the screen. +.5-1 depending on complexity.
* Tech Reqs stands for Technical Requirements, including Application Requirements and Coding Requirements ** ECO Reqs stands for Effort, Creativity, & Originality Requirements, they are *NOT optional bonu*s but required features as well. They are open-ended features though, aimed at giving you an opportunity to wield your extra effort based on your creativity and/or originality on top of meeting up Tech Reqs. This is what sets it apart from a purely computing science project but a SIAT one instead.
III. Submission and Grading Assignment Code (13 pts):
• It is an individual assignment. • The assignment consists of 3 parts. For each part, write a separate sketch inside a
different project folder. • Zip the 3 project folders (MUST be the folder NOT individual files) into a single Zip
File. Rename the zip file using the following naming standard: LabNumber_FirstName_LastName_AssignmentNumber_StudentNumber.zip , e.g. E104_John_Smith_Assignment1_1234567, and then upload it to the Canvas before or by the deadline.
• (Please note failure to follow the naming pattern for your project may result in a deduction of 0.25 pts)
• Your TA will then do check-off with you during the lab. • Before the deadline, you are allowed to resubmit if you feel necessary, and the last one
submitted will be graded. • No late submission will be accepted. If you do not complete the assignment by the
deadline, you will receive 0. You will also receive 0 for missing sketch or folder. • For a legitimate reason a late submission might be allowed pending discussion with your
TA before the deadline. You may be required to provide supporting documents. Follow-up Quiz for the Assignment (2 pts):
• To demonstrate that you learned the relevant concepts, you need to answer an online test regarding the work you’ve done.
• The test will be posted in Canvas and available immediately after the Assignment DUE TIME. You must get it done within 2 days after the Assignment DUE DATE, and you have 30 minutes to finish it once started. Please note once the online test is closed by the end of its schedule, there is no way to re-open it for any individual and therefore NO Make-Up is possible. So it is your responsibility to make sure you do it in time to get full credit for your assignment.
You are graded on completeness for the basic technical requirements and visual style evaluated by Effort, Creativity, Originality (ECO) of your assignment
IV. Follow-up Quiz for the Assignment (2 pts): To demonstrate that you learned the relevant concepts, you need to answer an online test regarding the work you’ve done. The test will be posted in Canvas and available immediately after the Assignment DUE TIME. You must get it done within 2 days after the DUE DATE, and you have 30 minutes to finish it once started. Please note once the online test is closed by the end of its schedule, there is no way to re- open it for any individual and therefore NO Make-Up is possible. So it is your responsibility to make sure you do it in time to get full credit for your assignment.
- III. Submission and Grading
