Homework 1

To me, Computations are very important. I am a Mechanical Engineering major and so I make a lot of computations. Since I joined NYUAD, I have taken 14 courses and 11 of them involved computations to a very large extent. I find that mathematical computations are the most fun to work with because for the most part it requires you to think about the problem so deeply and sometimes you need to be creative. I feel that carrying out computations improves one’s problem solving skills and it is very crucial for me to be good at problem solving because of my major.

For this very first assignment I had no idea what to do for the static design part and it took me a while until I decided on what to make. Unlike the static design, it did not take me a very long time to decide on what I am going to make for the animated design. So, let me start first with static design:

Empire state building. The empire state building is the third tallest building in New York. It is around 380 meters long. The empire state building is just stunning. It has a very unique design and in my opinion it is the number one landmark in New York. That is why I chose to make a drawing of this beautiful building for my static design.

Here it is:

<iframe src=”http://p5ide.herokuapp.com/view/568c43544b1e570300c165d7″></iframe>

Writing the code was pretty straight forward and I did not really have any difficulties writing it. The code required some thinking about what coordinates to use for each rectangle. Also, the size of each rectangle was important so that the design of the building would look very similar to the real building.

For the animated design, I chose to make a ball that bounces off the edges of the screen. In addition to bouncing off the edges of the screen, every time the mouse was pressed the background color would change and the path of the ball would also change and the ball would move faster. The code for this part of the homework was more complicated than the static design because it involved some if statements.

I started off by creating 5 variables, x and y to represent the position of the center of the ball, vx and vy to represent in the velocity of the ball in x and y directions and finally r which represents the diameter of the ball so that I do not hardcode the value of the size of the ball in the code later on.

Then, I created the setup function with the size of the screen and the background color of the screen included so that the path of the bouncing ball is drawn too. I moved on to the draw function which was a little more complex as I already mentioned. I created the ellipse and the fill function to give the ball an interior color. I thought it would be a more pleasing to the eye if the ball continuously changed color, so I used the random() function in the fill. For the ball to move, I used these two equations,

x = x + vx;

y = y + vy;

where x, y, vx and vy were pre-assigned. For the ball to bounce, I used ‘if’ statements. So the way it works is, every time the x coordinate is equal to the width of the screen minus the radius of the ball which is r/2. Here are the ‘if’ statements I used:

if ((x>width-r/2)||(x<0+(r/2))){
vx = vx*-1
}
if ((y>height-(r/2))||(y<0+(r/2))){
vy = vy*-1
}

The rest of the code was pretty simple. I just created the mousePressed() function so that every time the mouse was pressed, the ball would move faster and change its path along with the background changing its color randomly.

The main challenge I had with the animated design code was to make the ball to bounce exactly when it reaches the edge of the screen and not to bounce after half of the ball has already crossed the edge of the screen. This was a very minor issue though. The code was fairly simple and did not require more complex functions and methods like the use of loops and OOP.

Here is the animated design:

<iframe src=”http://p5ide.herokuapp.com/view/568c60562fc10703003b5647″></iframe>