Welcome to my portfolio site. Here you will find my work in Digital Media; web design/development, cross-platform games development, computer graphics projects and animation.
I hope you enjoy browsing through it!
'Haunted Hallway: The conclusion' is a Halloween themed browser-based game. The objective of the game is to avoid ghosts as the player makes her way across a dark haunted hallway. The player movement is restricted in the vertical direction and is controlled by the movement of the mouse. The game is over if the player collides with a ghost.
I was inspired by the Halloween decorations that many houses including my apartment building have put up for Halloween season. The design for my main player is inspired by Ms. Pacman. All characters in this game have been created by code.
The game duration is set to 60 seconds and if a player manages to avoid ghosts for this duration the game win scene is displayed in which, the ghosts disappear and some winning text comes up on the screen. There is also a surprise for the players in the end.The game can be restarted by pressing any key.
'It’s raining fish' is a browser-based, mouse-controlled game. The objective of the game is to collect as many green fish as possible and avoid or shoot the blue fish. Spacebar is used for shooting a fish and arrow keys for moving the boat. As a blue fish is shot two new ones are created in its place with slightly smaller sizes and this happens twice until the smallest fish is shot. Collecting a green fish gives you one point but shooting a green fish deducts one point.
This game was developed using p5.js and the p5.Play and p5.Sound libraries. Sound library enabled the addition of sound effects which make the game more pleasing.
‘Fun Splash’ is a browser-based 3D Aquarium Game. In this game the user is able to buy fish, feed them, clean the tank and earn money over time. This game is time based so if the fish are not fed beyond a certain amount of time they die. Over time the cleanliness of the tank also changes making the tank water darker.
The game uses local storage to keep track of some variables and read them back into the game when the game is played on the same machine and browser. I am storing the time at which the game was first played on a computer and saving it in local storage. Similarly, I am also keeping track of fish count and some other variables such as the type and state of fish.
I created this game in p5.js and used two libraries; WebGL and DOM.
DOM library is used for the UI elements of the game. The game has a shop screen which displays two fish types and buttons to buy those fish. When one of the buy fish button is clicked user either sees a confirm purchase screen or an insufficient funds screen depending on how much coins the user has.
Using Object oriented programming principles various classes were implemented for the development of this game. A message class was created to display a message about insufficient funds and an OK button which closes the message screen. A confirm Screen class was implemented to display a purchase confirmation screen with two buttons; yes and no. Yes button subtracts the coins, increases fish count and adds a new fish to the aquarium while the no button closes the confirm screen and cancels the purchase.
A StatusBar Class was implemented to display the top bar with fish count, coins count, happiness state and cleanliness state of the tank. StatusBar also displays a bar at the bottom with three buttons; shop, food and clean.
The values of cleanliness and happiness variables depend on the time passed since the last time user cleaned or fed the fish. Currently cleanliness level decreases after every 5 seconds and happiness decreases after every 10 seconds (the shorter time durations are used for testing/debugging purposes). Coin regeneration is based on time. The user gets 20 coins every 3 minutes.
Holo-verse is an interactive 3D holographic projection of outer-space that responds to music and changes with a person’s hand gestures.
The visuals are developed in p5.js and WebGL. Hand gesture interaction is added using leapmotion.js library.
The amplitude of the music controls the radius of rings around the central planet. While movement of a user’s hand above leap motion sensor is used to rotate a tiny satellite around the central planet. The stars are generated through a particle system and move autonomously.
The holographic projection is inspired by Pepper’s ghost illusion. To give the illusion of a 3D hologram the visuals are rotated 90 degrees and replicated four times on a screen. A thin clear plastic is used to make a pyramid which is placed in the middle of the 4 visuals. As the visuals on the screen reflect off all four sides of the pyramid a 3D hologram of the screen visuals can be viewed in the middle of the pyramid.
Holo-verse project set-up with Leap Motion
Web Design &
I developed responsive websites while working as ‘Webmaster’ at Lahore University of Management Sciences.
I designed and developed a website for my family business 'Saleem Jahangir Marquee'.
Tools used for design: Photoshop and Illustrator.
I worked on the development of 'Joe the Zombie,' a cross-platform game.
I was responsible for the complete software development lifecycle including documentation, implementation and testing. I coded various levels, added booster functionality, developed User Interface screens (such as game won, lost, tutorials) and coded time-based lives refill mechanism.
The game is available on app store and google play store.
Technologies used: Xcode, C++, Objective-C and Cocos2d-x.
I worked on ‘Clothes Simulation for Virtual Clothing’ as an individual Computer Graphics course project. It is created in Visual Studio 2010 with C++ and OpenGL library.
For creating the cloth simulation, mass-spring model for cloth simulation was followed to create a triangular mesh. Shear and bend springs were used to simulate the wefts and warp of woven cloth. Multiple forces act on each particle such as shear, stretch and bend energies of spring; frictional forces; wind; gravitational force and other damping forces. For each frame, implicit integration was used to calculate final positions and velocities of particles from the resultant of these forces acting on the particles.
Basic cloth simulation for this project was downloaded from: www.paulsprojects.net, Paul Baker. I extended the simulation to include stitching constraints which turned pieces of the simulated cloth into a shirt and skirt. I created a human body out of ellipsoids and introduced collision checks between cloth and ellipsoid as well as cloth to cloth self-collisions.
Skirt and Shirt
Skirt and Shirt Side View
Larger Body Size
I created a mobile drilling robot in C++ and OpenGL for my Computer Graphics course assignment.This was an individual assignment. The objective was to make a drilling robot mounted on a base which can be moved, rotated and drilled using keyboard controls.
I wrote functions to draw different figures which serve as parts of the robot. I used transformation matrices to place the parts together such that they can be translated and rotated.
Concept and Animation
3D Animation -> Particle Effects-> Environment Modeling -> Environment Texturing
The short animation below, was created for a university event called 'Think out of the Box'.
Concept, Graphics & Animation
Think out of the Box
Adobe Flash Professional
2D Key Frame AnimationDownload Video
Note: If you see a black box instead of a video, right-click on the box and press play.