See attachment
Writing for Interactive Media IGME-101: New Media Programming 1 Project 1: Mover Coder’s tools for this task: variables, conditionals, logical operators, event handler functions Inside your nm1programs/, duplicate the nm1copyRename/ folder to create a new working folder in nm1programs/ named “p1_YourName”. Functionality Overview As the program begins, you see a shape moving on the canvas. The bottom of the canvas has a control panel with buttons to control the movement speed of the shape, morph the shape, as well as a button to reset the shape to its original settings. The shape should have 2 different movement modes of your choice. You could have the shape fall and wrap, bounce, randomly jiggle, etc., as long as it never permanently escapes from the canvas area above the control panel in either mode. At least one of the two modes should change both x and y coordinates of the shape. The shape should have 3 different shape modes of your choice. You can choose ball, square, cross, X, diamond, boat, etc. Clicking the Morph button should change (random and/or cycle, your choices) the shape’s color, movement mode, and shape mode. Clicking the Reset button should set the shape’s location, speed, color, movement mode, and shape mode back to their original values. With each user click on the Morph button, the shape cycles fall-wrap/bounce movement and circle/square/cross shape modes in a randomized color. Speed is constrained to a positive number. The speed buttons should be continuous response (managed in draw()) and the Morph and Reset buttons should be event-driven response (managed in an event handler function). Code Structure Details Never forget: 1. A header comment at the top of the file IDs you, the date, and the assignment. 2. Declare global variables above the setup() function definition. Use descriptive names. 3. Declare non-trivial local variables at the top of their code block. Use descriptive names. 4. Comment non-trivial variables with their purpose as you declare them. 5. Comment major sections of code, and also any tricky individual statements. 6. Format code with indentation ("Format Document" or "Tidy" often) and blank lines between major sections. 7. Keep a tab for the p5js website open and refer to the Reference and Examples. Visual Notes: 1. Using the same mode for rectangular and elliptical shapes is recommended. 2. If you want to draw a rounded-corner rectangle, you can add a 5th number parameter to a rect() for corner radius. 3. While you may use button shapes that aren't basic rectangles, do boundary checking for simple rectangles that roughly match the button region. Initial Functional Foundation 1. Global variables: Declare and initialize values for at least: a. x and y coordinates b. speed c. shape color d. movement mode (boolean data type) e. shape mode You may define any other global variables you need (e.g. x & y direction), but be prudent. 2. setup() function: a. Canvas setup and any mode initialization (e.g. no stroke outlines). b. You should choose a text size (e.g. 24) as well. 3. draw() function: a. Set the background of the canvas. b. Set fill color to the shape color variable, then draw the appropriate shape (based on shape mode) at the location given by appropriate global variables for location. Get a single shape working in your foundation code, then add each additional mode until all are functional. c. Set a dark fill color and draw the rectangle background of the control panel at the bottom of the canvas. d. Draw the shapes that constitute the control panel UI buttons. The buttons can be rectangles or any reasonable shape. Remember to provide sufficient space between button groupings: · increase speed · decrease speed · morph shape · reset all to initial values e. Draw the text labeling the control panel UI: · "speed: " and the current value of the shape speed variable. Position between the 2 speed buttons. · "Morph" positioned on the morph button. · "Reset" positioned on the reset button. 4. Add a function to handle the mouse clicked event. For now, print the mouse location to the console. Check to make sure everything appears as desired, and that you are getting valid messages in the console when you click the mouse. Clean up any errors the console reports. Additional aspects of the draw() function – speed buttons and shape movement – are discussed in later sections of this document. Mouse Clicked Event Handling - Morph And Reset Edit the mouse clicked event handler function: 1. Use logical operators to check if the mouse location is within the rectangle of the Morph button. If true: a. Change (random and/or cycle, your choices) the shape’s color, movement mode, and shape mode. b. Print the values of the changed variables to the console. 2. Use logical operators to check if the mouse location is within the rectangle of the Reset button. If true: Set the shape’s location, speed, color, movement mode, shape mode, and any other global variables back to their original values. Run the program, trying the Morph and Reset buttons. Try clicking outside those buttons' rectangles and make sure no change is incorrectly triggered. Clean up any errors you find. More draw(): Continuous response for speed buttons Edit the draw() function to check the two speed buttons: Near the top of draw(), insert an if block that checks if the mouseIsPressed. Nest the following if-else block within that to check the speed buttons (get one button working before coding the rest): 1. Use logical operator expressions to check if the mouse location is within the rectangle of the increase speed button. If true: · Increase the shape speed variable by 0.1. Print the new speed to the console. 2. Use logical operator expressions to check if the mouse location is within the rectangle of the decrease speed button. If true: · Decrease the shape speed variable by 0.1. Use the code of your choice to prevent speed from being less than 0. Print the new speed to the console. Run the program, trying the speed buttons. You should see properly updated values in the buttons’ label and in the console. Try clicking outside those buttons' rectangles and make sure no change is incorrectly triggered. Clean up any errors you find. You can comment out the console.log statements for the speed values once you are sure all the buttons and variables work together correctly. More draw(): Shape movement Edit the draw() function to add two types of shape movement: At the end of draw(), add code that will update the shape’s location based on the boolean movement mode value and the speed value. You may need x and y direction global variables depending on the types of movement you choose to implement. Get a single movement mode working in your foundation code, then add the other one. At least one of the two modes should change both x and y coordinates of the shape. Use conditionals to make sure the shape never permanently escapes from the canvas area above your control panel rectangle in either mode – wrap, bounce (update any direction variables), or/and constrain the shape’s x and y coordinates. Account for the radius of your shape as you check the appropriate boundaries for smooth transitions at those edges. Submitting Your Work Save your work, zip the “p1_YourName” folder, and upload it to the appropriate assignment dropbox in MyCourses. Grading for P1: Mover Global variables for shape location coordinates, color, speed, modes, etc. initialized 5 Setup function: Singular mode settings done in setup (rather than needlessly repeated in draw) 5 Draw function: Fully-labeled control panel is always visible 4 Buttons for speed, morph, and reset drawn in well-placed and spaced locations 5 Label for speed incorporate current variable value 3 Conditional/s handles speed buttons when mouse is pressed 4 Boolean expressions check boundaries of speed buttons properly 4 Shape speed value properly updated when either speed button is pressed 4 Shape is drawn at location, speed, shape, and color of current variable values 5 Location (and if needed speed) and other appropriate movement variables are updated according to the current movement mode 4 Mouse click: Function created to handle mouse click event 5 If blocks to check if mouse position is within the buttons' boundaries 4 Boolean expressions check buttons' boundaries properly 5 Morph button changes the shape’s color, movement mode, and shape mode. Reset button sets the shape’s location, speed, color, movement mode, and shape mode back to their original values. Mode change: Two modes of movement; at least one of the two modes changes both x and y coordinates of the shape 5 The two movement modes are distinct and the shape never permanently escapes from the canvas area above the control panel 4 Three different shape modes 5 Style deductions? Header comments: Name, date, description of your program’s modes (up to -2 pts) Code comments: Explain major code sections or tricky statements (up to -2 pts) Variable naming and global declaration placement (up to -1 pts) Code formatting: clean alignment, and v-spacing (up to -1 pts) Total: 75 4 4080-528Spring 2009-2010 6