Design a site like this with
Get started

ICM · Week 5

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 Code into Functions & Re-Writing a Function with Variables and Plugging in Values

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.

My Reorganized Bouncing Ball Code

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:

My Reorganized House Code

Link to My Week 5 Assignment

House Ver. 2

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s