Learning Goals: Students will be able to modify and document an existing Java program in Processing to include their own sprite animation, and create and edit an HTML page to display their Processing sketch and describe their modifications.
This aligns with CSTA Standards: 2-AP-19: Document programs in order to make them easier to follow, test, and debug. 2-NI-05: Explain how information is stored, transmitted, and displayed on the internet.
- Sign up into your GitHub account
- Then fork this repository
- Create your own animated sprite with Piskel
- When your completed your sprite (about 4-12 frames of your animation) select Export > Zip > Download Zip
- Locate the zip file and open it to unzip the folder.
- Create a copy of the starter code in the Sprite2Darray.pde file. Paste into a processing sketch and save the sketch.
- Change the name of the folder with your sprites in it to "data" and put that folder into the folder of your processing code.
- Modify the code to the needs of your sprite files, program requirements (below), and creative preferences.
- When you are happy with the program, copy and paste it back into GitHub
- Upload all of the image files into your github repository.
- You will also need to modify
index.htmlto customize your website with it's own title, headline and footer. When you are happy with your program, push your finished project up to GitHub. - The final step is to submit the URL for your website to google classroom. You can find more specific instructions with pictures on how to submit your assignment on slides 50 to 52 of the apjavaProcessing slide presentation. Don't hesitate to ask for help if your aren't sure how something is suppose to work.
Assessment Criteria
| Criteria | Excellent (10 pts) | Good (7 pts) | Needs Improvement (5 pts) |
|---|---|---|---|
| Functionality | The sprite animation works smoothly and moves correctly. | Minor bugs, but the sprite animation works. | Major issues;sprite does not animate properly. |
| Customization | The student replaced the sprite and modified movement significantly. | The student replaced the sprite but only made small modifications. | Minimal or no customization. |
| Code | Comments Clearly explains all parts of the program. | Some comments are missing or unclear. | Few or no comments. |
If your program works in Processing but not on GitHub, check this list for possible solutions. If your program still isn't working on GitHub let your instructor know.