Prompt of This Week’s Assignment
- explore re-organizing your code
- aim to keep setup( ) and draw( ) as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself
Working on the Worksheet Questions and Assignment
Going through the questions of this week’s worksheet, reorganizing the code of the example Zoog portrait into functions helped me practice grouping and laying out code in a more easily understandable way without needing to add in comments explaining each element. I was also then able to plug in variables (ex. function greenEyes(x, y, w, h)), and then use the functions I created multiple times by plugging in different arguments when calling it.
Reorganizing the bouncing ball code (worksheet question 4), I separated the code into three functions — bounce( ), move( ), and display( ), each controlling a different aspect of the ball respectively. In my function draw( ), I used the bounce function to define the x, y, and color change speed, along with calling the move( ) and display( ) functions to allow the ball to show up and move.
For the assignment this week, I decided to restructure the code of my week 2 assignment in which I created a house along with moving clouds and a bird that follows the mouse. I made a minor adjustment to my code so that the clouds bounces back in the opposite direction after hitting the edges of the canvas instead of letting them go off the canvas as what I had before. After that, I started out by creating functions for each element, and then calling the functions in the draw( ) function. But to keep the draw( ) function even simpler, I further grouped various parts together, such as all the elements of the house into a house( ) function instead of having the roof, body, windows, door, etc separated as individual functions. For the moving elements (clouds and bird), I also further grouped the movement to the element by calling the move functions inside the object functions I created, and removing them from the draw( ) function. I also grouped the two clouds together as I had them separated before as their display and moving speed are all different. Bellow is a screenshot of my reorganized and structured code:
Stephanie's ITP Blog 