Category: Uncategorized

‘Nature of Code’ final project proposal

The idea I have for the final project is basically re-creating the game called ‘Breaktout’. It is a very well-known game and I am sure that everyone has played this game at one point in their lives.

I have been brain-storming about the final project idea for a while. I was certain that I will be creating another game. I started thinking for games that would make use of most of the material we have covered in class. I thought of games like Pac-man, asteroid hunter, sudoko, etc. Most of the games I thought of were not a good choice for the final project because of the compressed time frame and/or did not make use of enough material that we covered in class.

I started searching online for game with some kind of animation and I finally saw the ‘breakout’ game image on one of the websites. This is the URL of the website:

“I Need Practice Programming”: 49 Ideas for Game Clones to Code

The game is number 33 on the website and it has weird name. They called it ‘Arkanoid’.

Before I finally decided on re-creating the game, I listed all the material that I would probably use in the code. Here is the list I came up with;

1. Objects
2. Functions
3. For loops and nested for loops
4. If statements and nested if statements
5. Lists/Arrays
6. Use of external resources (for example; images and sound)
7. Vectors

I decided to re-create the game as it will be a perfect project for the time frame and it also involves most of the material we covered/learnt in class. Also, another factor that made me satisfied with re-creating this game is that it targets a very broad range of people. Little children (boys or girls), teens, adults.

Here is a photo of a very simple breakout game. (Photo taken from wikipedia);

I do not believe that the game has a specific design or an ‘original’ design so I will make my own design for the game, using a background picture and use different colors for the bricks, the paddle and the ball. I will be thinking about the shapes I will be using to draw the elements of the game but I guess the paddle will have a rectangular shape, the is going to be spherical and the bricks will also be rectangular with a small angle in its corners. I might also use images for the elements of the game if I found good ones.

Also, one of my main goals when  coding this game is to not hardcode a lot of the values. Some of the values will need to be hardcoded when assigning variables and coordinate positions but I will try as much as I can to make everything automated so that if a variable value is altered everything else also changes and the game continues to function properly with everything in place.

There are some issues that I expect to be facing during the coding part of the game. One of the issues I expect to encounter is actually drawing the bricks without hard coding anything. I have been thinking about this issue and I think a probable solution will be making a list within a list (2D array) to store the bricks and then use a display function to draw the bricks on the screen.

I hope I will be done with coding the game in the time frame given and most importantly produce a fully functional game with a great design.

Connected Worlds

Firs of all, let me say that the Connected Worlds exhibit was the best exhibit we visited until now. I was very excited to see the exhibit when we arrived at the NY Hall of Science and I was literally amazed when I finally saw it in real life.

At first, I started wondering why did it take the developers of the exhibit so long to make it ready. I mean four years is an extremely long time for a a single project. However, when I actually discovered all the features, animations and interactions it made a lot of sense to me that four years was not a long time frame for such a complex project.

It took me a while to understand what is going on and how to actually interact with the screens and the floor but I believe by the time we had to leave the exhibit I understood most of the features of the exhibit. The water flowing from the waterfall to the different environments was pretty straight forward and it was the most obvious interaction of the exhibit. I think the interaction or simulation that took me the most time to discover and understand was actually creating the seed. When I discovered how can the user actually create the seed every thing else followed up smoothly.

If I would add any other features to the exhibit for the connected worlds 2.0 project, I would add sound or some kind of sound effects which is very clear to the user. Also, maybe making the screens have a 3D nature would also be a great idea. The downside of this idea is that users will have to be wearing 3D glasses but I think the advantage of seeing everything in 3D while in the exhibit and having to hear clear sound effects outweighs this disadvantage. Also, the exhibit becomes even more fun if you have friends to whom you can play around with. Having other people playing and collaborating with you is key for maximum enjoyment. I think of it as trying to plant and make all the environments pretty looking and this would be kind of hard and not as fun if the user were to be alone.

I truly loved the exhibit. I think it is the most cool simulation exhibit I have ever went to. I really think this project is outstanding and I would rate it as a 10/10 project.

Assignment #7 documentation

For this assignment, we had to use vectors and forces to create some kind of simulation. I chose to make another game using vectors, acceleration and forces. I created a simple game that is a basketball-like game but without actual players. The game consists of a ball falling from the air and long rod with a basket. The user needs to use the space bar to make the ball stay in the air and not fall otherwise the game ends and the user loses. The goal of the game is to get the ball to go through the basket.

I started off with creating the basket and the ball as two individual objects. The basket object was very simple. I just used the rect() function to draw the basket and second rect() function to create the long rod.

Creating the ball as an object involved a more complex code. The ball had attributes like its position, speed and acceleration. Here is the code showing the attributes that the ball has and how the ball bounces off the walls of the screen:

<script src=”https://gist.github.com/rha257/6aaab142b46e036855d1.js”></script>

After that was done, I created a keyPressed function() to allow the user to control the ball. By pressing the space bar, the ball jumps in the air and also the user can use the left and right arrows to move the ball in different directions. This part was pretty straight forward. The code for this section is here:

<script src=”https://gist.github.com/rha257/e1619b3bee4233f68b90.js”></script>

As a conclusion, the main issue I had with this game is checking for the winning condition (whether the ball went through the basket top to bottom). It took me some time to figure out how to check for this condition. I came up with an if statement which does a great job for checking if the ball actually went through the basket top to bottom. This if statement is in included in the ball object code, specifically in the this.move() function. I checked if the ball actually was between the boundaries of the basket and if the ball was falling downwards at the same time when it crossed the boundaries of the basket.

It was a fun task to do and the main thing is that I learnt a more efficient way of writing code using vectors instead of explicitly using x and y components all the time.

 

Rockwell Labs

Today, we had our forth field trip with professor Shiffman and it was to the Rockwell labs. The lab work environment and projects was very similar to the Second story lab that our class went to yesterday. The main difference is that the number of members in the team working in the Second story labs is 6 people (I believe) while the Rockwell labs have more than 100 people working synergistically. This makes it obvious that Rockwell labs are dealing with more projects at a certain period of time. Also, another difference is that most of the projects that the Rockwell labs are dealing with are more of an architectural/design/interactive combo type projects. In my opinion, the projects that Rockwell labs have done in the past are far more complex than the second story lab. I really liked the google project. It seemed very unique and interesting. Another thing that I liked about the Rockwell labs is that every individual in the team is a specialist in a specific field yet they all work together for a specific project and aid each other to create a brilliant project.

Assignment 6

For assignment 6, I did not really write any code for that. I have searched for some data about soccer and I could not really find any good websites. I am getting my head around the data topic because for me it seems very complex for some reason. I am still unsure how to obtain the correct url to use in a code and how can search more efficiently for data I am interested in.

I looked through the list of data sources that professor Shiffman included in the wiki of the github website and I found some interesting source of data named ‘Numbers’. I opened the website and I really liked the idea and tried to figure out how can I use it as my source of data but I was not able to do so. I will be consulting professor Shiffman about this and hope to get my head around this topic so I can use a part of it in my final project which I do not really know what is it going to be about yet!!

First of all, I want to speak about our visits to the American Museum of Natural History and the other visit to the Second story. I will start with the AMNH trip first.

AMNH trip

As we arrived to the museum and I saw the two giant dinosaurs at the main entrance of the museum, I was thinking to myself, “This is going to be a fun trip”. I never seen such a structure before and it really did astonish me. I took a lot of photos of the two dinosaurs and tried coming close enough to them to see if the bones they were made of were actually real dinosaur bones. I do not really know if the bones were real but they looked pretty real to me.

We only walked around a small portion of the museum but I actually learnt a lot of new stuff especially in the microbiome part of the museum. The touch screen with the video of the girl was very cool and I wonder how much effort it would actually take a person to build something like this. It was very informative too along with it being interactively great.

The final part of the trip was the most interesting and exciting part. The Planetarium. I remember that I went to a very similar planetarium when I was a child in a place called “The scientific center” in Kuwait but it was not as large as the one in AMNH. It was also about galaxies and the universe but I really loved the one AMNH. The design of the large screen and the quality and resolution of it is incredible. Also, the sound quality was very good and of course the content of the short film was very informative. I think making the planetarium show more interactive would be a hard task as I could imagine. I think the screen would not rather be on the sides of the room rather than the ceiling so that people can actually touch it and some ind of effects can happen but this idea would not make the planetarium show as beautiful in my opinion. The fact that the film was about space and that the audience had to look up in the ceiling made it much more eye appealing and realistic.

It was a very informative and incredible visit for sure.

Second story trip

First of I want to start by saying the that the guys we met at the Second story lab were very cool and seem to be very good at what they do. When we arrived at the lab and saw the prototypes they made and kept in the lab, I remembered the engineering course “Design and Innovation” that I took last J-term. One of the main differences between the course we took in Abu Dhabi and the Second story team that is present in the working procedure and the prototyping process and coming up with the final project is making the project for a client. I wonder how much pressure do they go through the press of making these projects especially if they have a limited time to complete it. When they told us that they only had 2 weeks for some of the projects they undertook, I was surprised that they actually were able to finish these projects on time.

I believe the amount of pressure, work and fun they are having along the way when working on a project is extraordinary. I really liked the project with the lights changing as the user(s) move the butterfly shaped objects. It seems very interesting to learn more about it and how they actually implemented it. To be honest, if I had the time to apply for an internship in their lab I would do it. But of course because I am an Engineering major, I have no time to do much but hopefully at some point (maybe in the summer) I can apply for an internship either in their lab or a similar lab in New York.

Assignment 5

This assignment was pretty cool. I saw some examples from the github website and decided to make a program that takes input from the user to do some certain effect. I chose this specific task because I have already used images and sounds in my previous homework so I decided to create something that I just learnt.

The code is pretty simple to understand and easy to implement. I started with creating a ball object of random size and color. Then I created a variable called input and another variable called vol. I used the input variable inside the setup function for me to then use the AudioIn() function which looks for sound input. I used the vol variable outside the setup function to use it for getting the value or level of the sound of the user.

The rest of the code is straightforward. If the volume of the sound the user has created surpassed 0.2, balls will be created on the screen. Also, I used the volume or level of the sound coming from the microphone to change the radius of the balls created from the sound. The colors of the ball were randomly assigned too.

I am happy about the course so far. I learnt a lot of stuff from the trips and from professor Shiffman as I think he is doing a great job making this course move forward and teaching new stuff all the time in such a very compressed semester. I am really looking forward to the few remaining seminars and the final project!!!

 

When we arrived at the museum of math, I was surprised of not actually seeing any antiques, biographies and statues of mathematicians or any old machines that mathematicians have used in the past (like primitive calculators). Instead, the museum was pretty modern and only had one old cipher machine that was loaned from another museum.

The exhibitions in the museum were very cool and interesting especially the tricycle with square wheels. I think the design of this exhibitions was very interesting to know more about. I think it would be very interesting for me to know more about the math and physics that explain the behavior of the tricycle when it is moving without deviation from its pre-determined path.

(The assignment)

Once more, for this assignment I have created a game. This game is quite different from the previous two. The main logic of the game is to pick  up 10 healthy eggs falling from random position from the top of the screen and avoiding the rotten eggs. If the user picks up 3 rotten eggs, he/she loses the game.

The main goals I have set before creating the game  were as follow:

1. Use arrays and objects
2. Make a better quality design of this game and how it looked like
3. To make the game more fun to play and in somehow more lively

The first goal was not an issue and I used a pretty similar method to the method professor shiffman used in class on Friday to demonstrate the use of the arrays and the push function in the bouncer program.

The second goal was accomplished by adding a background photo, a photo for the egg picker and finally photos of healthy and rotten eggs. I have used the loadImage() function to load the images to p5 and the image() function to actually display the image at a specific position on the screen.

For the third goal, I incorporated sound effects in the game. When the user picks up a rotten egg, a buzzer like sound will beep to indicate a wrong pick and another sound to indicate a good pick. I have used the loadSound() function to load the sound effects to the program and the play() function to play the sound when an egg is picked.

The main issue I had with creating this game was actually adding the sound effects because p5 did not seem to recognize the loadSound() function for some reason and I had to search online for the same until I found it that I had to uncomment some specific line of code in the library file. After, I have done this, the code ran properly.

Another issue I ran in to was to actually upload the game to the web editor. The web editor was not able to locate the images and sound files I have uploaded to the code so I had to seek help from professor shiffman who shared with me a link showing the steps of how to upload the game to my directory in the web so that the code could run properly. You can check out the game using this URL:

rha257.nyuad.im

It was another fun task to carry out and I learned new stuff about p5 like the sound functions. In general, the game was fine to create and hopefully I will creating more games for the next tasks.

 

(Updated Blog Post)

For this homework we had to use Object Orientated Programming (OOP) to create some sort of animation or simulation. The OOP syntax in javascript was completely new to me so this homework was more complicated than the previous ones. I chose to create another game but this time with no involvement of any balls.

Initially, I started working on a boat racing game but after a while I got in to a lot of issues that I was not able to solve so I decided to comment all the pieces of code that involved a second boat in the game and left only one boat. The issues I ran in to look very simple so I am not sure if it is actually simple and I can’t just do it for some reason or the issues are actually hard. One of the issues was changing the position of the second boat created. I didn’t want to use the random function because it is a poor option as the two boats can still be on top of each other or rather very close to each other (for example, to overlap). I thought of using for loops and increment the value of the y axis for every object I instantiate but for some reason both the web editor and the desktop editor crashed when I did so.

After spending some time to work on those issues I decided to rather think of another game that involves boats. I thought of using the same boat game but with only one boat and creating rocks in the river that act as obstacles facing the boat. If the boat, hits any of the rocks, the user loses but if the user makes it to the finish line he wins.

I faced another issue that perplexed me. I am not able to implement the if statement that decides whether the boat has collided with a rock or not. I cannot get it to work for some reason. I think it is a very simple issue but for some reason I cannot get it to work. I know why my if statement does not and I know that it is completely wrong but I cannot think of anyway else to check if the boat collided with a rock. I though of using trigonometry and measure the distance between the rock and the boat and if the distance is equal to the distance of the radius of the rock and the width/2 of the boat then a collision must have occurred I could not get that to work too. I left this issue open and I saved my code in github as “The boat game (Not fully completed)”.

Also, I have a bug in the code which at first I was concerned about and thought I had to fix but then I realized that it can actually be a part of the game. If the boat moves towards the green land on each side of the river it should stop. However, the boat stops completely from moving on the x axis because I assigned vy to be 0 in the code in the situation where the boat hits the land’s edge. The boat can still move to the front though, so I decided to leave it this way to make the game even harder.

Everything else in the code is running smoothly and perfectly. I hope I can figure out how to detect if a collision occurs between the boat and a rock by tomorrow morning. Otherwise, I will be reaching out to Daniel for help with this issue.

(UPDATE) Finally, I was able to solve the issues I had with game. After Thursday’s class things became clearer and I was able to solve the issue using the dist() function to detect if there were any collision between the boat and any of the rocks.

 

 

Once again, I really struggle to think of a task to do for this homework. I thought of improving my bouncing ball and modify it so I can make it more interactive with user through some kind of game. I turned down this idea because the game I thought of making will take me a lot of time to implement because I will need to work with classes and objects.  I decided to implement this kind of game for a later time. Another idea that came up was making a Sudoko game but when I realized how complicated the winning conditions of Sudoko I instantly turned down the idea because I will need at least two-three days to implement it. After a few minutes from turning down the Sudoko game idea, I remembered how tough next semester will be, (basically the spring semester of the sophomore year for the Engineering students is hell) I decided to make a game that links the new stuff we covered today in class (functions, if statements plus I used some keyCodes) with how NYU is a very tough school especially with issuing homeworks and tasks.

Basically the game consists of a ball that bounces off the edges of the screen and the user’s tasks is to use the arrows of the keyboard to move a rectangle at the bottom of the screen to catch the ball before it bounces off the bottom edge of the screen. The ball represents the huge amount of homeworks that NYU students receive on a daily basis. The rectangle represents the poor NYU students who are trying their best to deal with all these homeworks they are receiving from every class they are in. The edges of the wall represent the classes (or the courses).

Most parts of code that were in the bouncing ball program were inherited to this game code. So, I still have the same variables with the addition of a few variables that describe the x and y position of the rectangle, the speed of the rectangle on the x-axis and the width and height of the rectangle. I also added a variable (gameStatus) which is (sometimes) called a ‘flag’. I created this variable so that I can let the program know when should the game continue and when should it stop running (when the user loses).

Here are the list of variable:

<script src=”https://gist.github.com/rha257/2a0902bd73ac2815fc91.js”></script>

Notice that I have commented out one variable off the list. This variable was supposed to measure the time elapsed since the program started and depending on how much time elapsed until the user have lost the game, the program would issue the user a score. However, I was not able to do that because p5 is not recognizing what is ‘second()’ although this function is included in the list of references on the p5 website.

Moving on with the code, I have created a function called KeyPressed() so that I can add the conditional statements required to move the rectangle using the keyboard arrows. After that was done, I created another function called simpleGameLogic() which defines the logic of the game and its rules.

I had some issues when I was writing the code. For example, my main issue was to make the ball bounce off the rectangle instead of just continuing to fall to the ground. The issue was regarding the syntax I used in the if statement which I am not sure if it’s a p5 issue or this is how javascript works. The code did not work when I used this:

if (((y+(r/2) > height-recth) && (rectx<x<(rectx+rectw))) {

But it worked for me when I changed it to this:

if (((y+(r/2) > height-recth) && (rectx<x) && (x<(rectx+rectw)))) {

It seems weird to me and I don’t get why wouldn’t it work for the first piece of code.

In conclusion, it was a pretty interesting task for me and it went smoothly with some minor issues here and there but in general writing the code went smoothly.

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>