3D Simulation of AUI Campus


Computer Graphics Class


Project code on Github

Picture 1: birds’ eyes view over the rendered scene.

Introduction

Simulating real world places is always really interesting because it allows experiencing their sight from anywhere in the planet, and if done right it can help solve some interesting optimization problems that otherwise would take a much longer time. My project is about implementing a 3D model of a small part of AUI campus.

After learning how to manually create a cube and a pyramid during the first part of the course, it became obvious that making any kind of more complex shapes would be extremely hard, the challenge would be more on finding out where each point of an objects geometry is rather than learning new and more complex computer graphics generation techniques.

So, the first question that came into my mind: is there any way to make 3D models using a wellknown software, and then rendering them using Java code? The question was first answered by Dr. Kevin Smith, who told me to look up .obj files. After some research I discovered that it is indeed possible, and that there are multiple files types (including .obj) dedicated to storing objects information. However, due to their simplicity .obj files are preferred for people that just started to learn openGL.

This is when I found the very good YouTuber ThinMatrix, who made a Java Game Engine from scratch and who explains very nicely how he went through every single step. He made a file called objLoader.java that reads our .obj files and transforms them into Matrices ready to be used in our Java Engine. After reading and understanding his code, it was clear that the basic things that we learned in the course will no longer cut-it, and it was time to use more sophisticated tools to work on our projects.

Picture 2: the project’s rendered models.

Used tools

  • Eclipse to run the Java Engine that is used to render the modeled objects, as well as the terrain, lights, water, the sky, etc.
  • Photoshop to make UV Maps (used for projecting a 2D image to a 3D model's surface for texture mapping)
  • Sketch-UP and Blender for 3D modelling.

It is important to note that the Java Engine is made by ThinMatrix, a YouTuber that makes a tutorial series on how to create a 3D Java game with OpenGL using the library LWJGL (Light Weight Java Game Library).

Link to his YouTube channel: https://www.youtube.com/user/ThinMatrix

In-depth Explanation of the tools usage

Now that I’ve found an object parser, I had to start making the 3D objects needed for my project. This is when I downloaded Blender. This software is used to make really sophisticated video games, so it was no surprise that it was hard to use, and in my case I used it to make 3D models of objects and to use UV Mapping to put texture on them.

Picture 3: untextured Models in Blender.

Learning how to do so was very time consuming. In fact, it was so time consuming that I changed the software I use to model my objects, and this is when I downloaded Sketch-Up. Sketch-Up is very easy to use and is very intuitive, however, it does not support UV Mapping which is an essential part of the Java Game Engine that ThinMatrix made. So, I had to convert my Sketch-Up project to a blender project. Thankfully, I’ve found a person who made a plug-in just for this (pros of using an open source software). I was excited at first, but then I found out that using this method didn’t really convert the sketch-up project 100% as it was originally. Unnecessary details were created. Extra edges and vertices were added, and half of the model didn’t render in the Java Engine.

Picture 4: use of Sketch-Up to make a Building model that uses materials instead of UV Mapping.

Picture 5: problems encountered after importing a building model from Sketch-UP to Blender.

Picture 6: problems encountered after rendering the imported model from Sketch-Up to Blender.

I came to the conclusion that it would take less time to start from scratch and make a whole new model in Blender than trying to fix the messed up imported project from Sketch-Up to Blender. And this is when I went back to using Blender only, again. I already had previous experience with Photoshop, so it was easy for me to make UV Maps, I looked for the textures I wanted on my objects, I’ve put them where Blender would expect them, I adjusted the number of the texture tiles and I cropped real world photos and implement them in the textures.

Picture 7: use of Photoshop to make UV maps.

I am already familiar with Eclipse, so it was easy to create a project for the Java Game Engine, include all the necessary libraries, etc.

Picture 8: use of Eclipse to run the Game Engine.

Building a single building was a big hassle, it is what took most of my time on this project, but after every failed attempt I reinforced my knowledge about Blender and the end results turned-out to be pretty decent.

How close did I come to achieving my graphical goals?

Very close. I made a textured 3D model of the cafeteria building, a textured 3D model of the fountain next to it that contains shiny, reflective and rippling water, I used a textured terrain and moving clouds that use the skybox method (3D projection of textures to a cube that rotates). What I didn’t make is animating my character, or implement physical properties.

Picture 9: real photos incorporated into the textures of the building.

Picture 10: the building’s corresponding UV Map.

Picture 11: realistic water rendering contained in the fountain model.

How would I implement the things I didn’t?

Animations

Using blender I would create a “skeleton” inside my character’s “body”, it’ll be very simple and structured in such a way that if I move a “parent bone” I would move its “child bones” too. Suppose now that the bone of the middle section is the parent bone of 3 other bones: 1 for the head and 1 for each arm. Tilting the middle section forward would mean tilting the head and arms forward too. Of course the child bones are free to move without a problem.

This skeleton will not be rendered, it is just a way to facilitate animation, what will really be rendered is all of the vertices changing their position depending on what bone was moved. If we want our character to make a specific animation, we could make key frames in blender and then link the two together by making a program that modifies the position of each bone to go from the starting key frame to the ending key frame smoothly.

Physical Properties

For example, if I wanted to make a dynamic fountain, I would need to use a dynamic substance, one that uses particles to simulate water. Simulating water being shot from the fountain would require simulating the transfer of energy from one particle to another and then by including gravity into the equation the particles would come back to the surface after they reach a certain height.

Picture 12: Birds’ eyes view 2 over the rendered scene.

Website for

“Centre Ahli”

Volunteer Work

Project code on Github


Picture 1: website logos.

Introduction

I worked on building a website for “Centre Ahli”, a center that welcomes boys in precarious situations whose ages vary between 7 and 15 years.

To store information, I used a database and handled it using Microsoft SQL Server Management Studio. To program I used Visual Studio which allows using all of the technologies needed in one program.

The website is still under construction and is not available for the public right now.

Goals

  • To present the center to the public in a positive way.
  • To be international by using English, Arabic and French as the supported languages since a lot of the volunteers that come to the center to help are non-Moroccans.
  • To automate some tasks that are performed daily by the educators, such as:

    • Organizing activities with the children.
    • Adding children to those activities.
    • Subscribing volunteers to those activities.

Technology used

Client side:

  • HTML
  • CSS
  • JavaScript

Server side:

  • C#
  • ASP.NET
  • Microsoft SQL Server

Software:

  • Visual Studio
  • Microsoft SQL Server Management Studio
  • FileZilla

Front Page

The first things visitors see are some menus, a brief description of the center, a link to a more descriptive page if they wish to learn more about the center and some logos / graphics.

The language menu allows switching the website between different languages: English, French or Arabic.

The search / social media menu allows looking for information in the website or to get to the center's social media pages fast.

The main menu allows navigating to important pages in the website.

The blue mosque represents the actual mosque that is right next to the center and the little house represents the center itself, along side a shiny little sun and birds flying around to represent the peaceful environment that the center provides.

Next-up is a presentation video made by one of the volunteers.

After that a list of the latest activities is shown. A visitor can sort the activities by category. Clicking on an activity takes the visitor to the activity details page.

Finally, the footer displays some quotes by educators, the center's contact information and a contact form.

Picture 2: the front page.

Log-in

Picture 3: the log-in form.

In order to perform actions in the website such as making a comment, adding an activity as a volunteer, etc, one must create an account and log-in.

After loging-in

Profile

Picture 4: profile details.

Picture 5: more profile details.

The profile page provides useful information about a user:

  • Profile Picture
  • Details such as a biography
  • Notifications
  • Upcoming Activities
  • Created Activities
  • Attended Activities

Actions

Picture 6: the actions field and the user's name are added to the menu.

Depending on the type of account that has loged-in, the user will see a slightly different interface. The picture above shows the actions available for the educators. If the account is of type volunteer then only "Create Activity" will be available.

Add Child

If an educator clicks on the "Add Child" action menu they'll have access to a form that allows adding a child's information to the database.

Picture 7: the form that allows adding a child to our database.

Add Related Person to a Child

To add a relative such as a parent or sibling the educator can click on the "Add A Related Person To A Child" button. After that they'll need to pick a child, then fill in the form.

Picture 8: the form that allows looking for a specific child.

Picture 9: the form that allows looking for a specific child.

Create Activity

Both educators and volunteers can create an activity. After clicking on the "Create Activity" button in the action menu, users are invited to fill-in the activity details and add to it the children that will participate.

Picture 10: the form that allows creating an activity.

Activities

Activity page

An activity page is where all of its information is displayed:

  • Description
  • Location
  • Date
  • Participating Volunteers
  • Volunteers Attendance
  • Participating Children
  • Children Attendance
  • Comments

A page is also interactive in the sense that volunteers can add it to their upcoming activities, comment on it and have conversations with other volunteers in the comment section, and can be modified or deleted by the activity creator.

Picture 11: an activity page.

Picture 12: delete activity button (if the user is the owner).

Close Project

MP3 Player

Advanced Programming Class

Project code on Github


Picture 1: The main (center) panel of the MP3 player.

Introduction

I built a desktop application using Java that shows a graphic user interface (GUI) of an MP3 player. It has two main panels:

A big one in the center, which has three tabs:

  • Artist / Group
  • Style
  • Albums

A smaller one to the right, which has two blocks:

  • Playlist
  • Most recently played list

The center panel

If we select one tab in the center panel, songs are organized according to that tab. For example, if we click on the “Artist / Group” tab we will see all of the songs organized by the artist or group that created the songs. Clicking on the other tabs has a similar effect except that it organizes the songs by either style or album.

Picture 2: The Artist/Group Tab.

Picture 3: The Style Tab.

Picture 4: The Album Tab.

The right panel

The panel to the right has a dynamic couple of blocks:

  • The playlist block updates whenever we add a song to it. That happens if we click play on a song or group of songs (an album for example).
  • The most recently played list updates whenever a song is played by adding the last played song on the top of that list. We also have the ability to clear these two blocks if we don’t need the information that they hold anymore.

Picture 5: The playlist block is filled with songs that the user wants to play.

Picture 6: The most recently played list block is only filled with songs that have been played.

One more functionality

Finally, we can save the current state of the player by clicking on menu then save, this means the next time we come back we will see our playlist block and most recently played list block the same as before we got out of the MP3 Player.

Picture 7: Using the save button before exiting.

Picture 8: Example of a class that implements Serializable.

Picture 9: The two files that are stored on the hard drive after clicking save.

Picture 10: MP3 Player Project in Netbeans.

Picture 11: An overall look on the MP3 Player.

Close Project