The Exciting Adventures of Fred Herring

Language: C#
Tools and resources: XNA, Photoshop, TortoiseSVN
Requirements: .NET Framework 4, XNA Framework Redistributable 4.0
Team Project: 6 programmers and 6 artists

Description:

"The Exciting Adventures of Fred Herring" is counter-intuitive puzzle game with RPG elements which plays with player's expectations. The game is built upon a very strange but unique idea. It features pixel graphics and has a very simple gameplay style while putting the player in very difficult situations. As soon as you discover its flavor it shows a contrast between its appearance and its gameplay. The game illustrates an excellent balance between its rewarding side and the difficulty of the puzzles by letting the player to succeed even when they don't expect that. The game puts the player in control of Fred Herring who suffers from insomnia. The ultimate goal is to explore the house, collect the sleeping pills and find the mystery behind the character.The game does not have a predefined gameplay path, the player being able to solve tasks in almost any order. The search for the sleeping pills will take the player through different environments ranging from TV world, to Food land, Space and Dream world. 

The game is free and available for download from:  The Exciting Adventures of Fred Herring

Data Visualization Web Site – World Population

Languages and tools: PHP, JavaScript, Ajax, HTML

API: Google Maps API

URL: http://worldpopulation.azurewebsites.net/

Location of the original data: http://download.maxmind.com/download/worldcities/worldcitiespop.txt.gz

Location of the country abbreviation data: http://161.111.170.202/herb/countrycodes.html

Description:

- The purpose of this web application is to provide a quick overview of the population distribution within a country and if taking into consideration the size of circles in the heatmap, an overview of the population density.

- The application is built using the Google Maps API and uses their visualization library in addition to the default functionality provided by the API.

- The application needs to pieces of information as input: the name of the country and the population limit. The population limit is very important since it is the decisive factor when creating the visualization. The application will consider when building the visualization only the cities in the chosen country which have a population above the population limit.

- For a very detailed representation, it is necessary to use a low limit, which means the application will consider more cities when building the heatmap.

Data manipulation:

- The application uses the MySQL database provided by Windows Azure which is automatically linked to the web-site. It contains two tables, one which was populated with data from the original data source using Navicat and one additional table which contains a match between the country abbreviation and the name of the country. The second table was needed because I wanted to give the user the possibility of searching a country by its name instead of its abbreviation.

- Once the country value was entered, and the user hits “Search”, the application will use the second table to find the corresponding abbreviation for the input country.

- Then, using that abbreviation, it queries the original data for different information like name of the city, latitude, longitude and population which are then used to implement the actual visualization.

- In order to create the tables in my database and fill in the data, I set up the connection to my database using Navicat and then using the built-in Import Wizard, I parsed the input data source and I populated both tables.

Features:

- The application uses the latitude, longitude and the population value for each city from the database to build a heatmap layer which illustrates the population density. Google Maps API builds the visualization considering the weight of each point which in my case is the population and the location of the point. 

- The main web page provides three different settings which can be used to customize and enhance the visualization depending on the input used. The first two offers two sliders for the user to change the radius scale of the circles which are used in the representation and a slider which changes the opacity of the visualization. The third setting is the Dissipation which, if it is checked it will adjust the represented data depending on the zoom level.

- To obtain a much better representation of the data, the application maps the population values to a custom interval which depends on the extreme population values. Each population value will be mapped to the interval [0, maxPopulation/minPopulation].

Demo: World Population - Data visualization

Website: http://worldpopulation.azurewebsites.net/

Data Visualization Application – World population

Platform: Windows 8 Metro

Language: C#, XAML

Description:

- The application offers a unique and innovative way of visualizing a huge amount of demographical and geographical data.

- The visualization of the data is created at run-time based on each search the user has made.

- The application needs two input values, the name of the country and the maximum population value (The visualization will contain data for cities with population below the chosen population value).

- The main page also allows the user to sort the resulted cities by different means: alphabetically, by population or by geographical coordinates and each selection the user makes will result in a new animation of the data visualization.

- To find out information about a specific value which is represented in the visualization, each bar, when it is being clicked updates additional details about the selected city.

- Also by clicking the name of the cardinal direction an average of the population in the selected region will be calculated and displayed in the information area providing a brief idea about how population is spread in that country.

- The application consists of two different pages, one which provides the actual data visualization and the second one, a statistics page. This statistics page is updated in real-time during each search and provides accurate information about the most searched countries and most frequent cities which resulted after the queries.

- The statistics page displays two lists: the most searched countries can contain unlimited entries and displays the country name and the number of hits while the second list contains the top 20 cities which have been displayed.

Features:

- The application manages to illustrate both the geographical data which is the city name and its location but also the population value by separating the cities in 4 dials based on the 4 cardinal directions (This is achieved by averaging the latitude values and longitude values of all the resulted cities and comparing each city location with the average coordinate).

- The application offers a helpful autocomplete feature for the country input;

- The application uses a couple of services which update or retrieve data from the cloud database (The application uses a couple of tables in the database in order to store the search statistics and therefore it uses a couple of different services to manipulate data).

- The statistical data is updated in real-time so any time a user accesses the statistics page he will see the latest data.

- The information from the database is retrieved by the web services in XML format.

Demo: World Population

Spelling Corrector

Language: C/C++

Solution: Dynamic programming

Description:

The application may represent a solution for a search engine which suggests a possible correction for an input of English words.

The correction is done using an English dictionary which consists of 8000 words, each line containing a word and the frequency of that word in use.

Terminology used:

 1.  Editing distance
     - The number of elementary operations that has to be applied on the first string in order to obtain a new string which exists in the dictionary (Elementary operations: insert a character anywhere in the string, delete any character from the string and replace a character by any other character).

 2.  Fixing one word
      - Done using the dictionary and the editing distance
      - The correction is the word which has the minimum editing distance comparing to the word which is being fixed
      - For two words with the same editing distance the application will pick the one with the maximum frequency

 3.  Fixing a string

      - The program first removes all spaces from the string keeping the order of characters

      - Then it inserts spaces in every possible combination and computes the sum of editing distances (ted) and the sum of frequencies for all the corrected words (tf)

      - Picks the correction based on the "ted" and "tf" numbers considering the following rules

                                 - minimum "ted"

                                 - for equal "ted" pick the correction with the minimum number of word

                                 - for equal "ted" and equal number of words pick the correction with the maximum "tf"

Solution:

I obtained substrings of the initial string by taking away the first character one by one. Then, I went through the entire dictionary for each substring and found the correction based on the "Fixing one word".

To keep track of the entire information I have found, I use a matrix of structures each storing an integer, a string and a number for frequency. The information from the dictionary is stored in a map variable.

From one iteration to another I keep an auxiliary matrix "previous" because two consecutive words in dictionary can  have a couple of repeating characters and this will help me to skip the already calculated areas of the matrix.

To get the optimal correction, I used a dynamic programming algorithm by going through the matrix diagonal by diagonal and updating the values (using a Memoization  technique).

 Demo: Spelling Corrector

3D Software Based Renderer

3D Software Based Renderer

Language: C++

API: GDI

Features:

Import multiple OBJ models

Wireframe rendering

Render using one constant color

Idle rotation

BackFace culling

Double buffering

Per-vertex shading using the Lambertian illumination model

Specularity for the illumination model

Interpolation using barycentric coordinates

Per-polygon shading using the Lambertian illumination model

Description:

The “Software Renderer” is a demo application which implements concepts like a graphics pipeline, double buffering, hidden-surface removal (back-face culling) and lighting. The graphics pipeline contains vertex processing, triangle setup, occlusion culling, interpolation and rasterization. It is slightly modified for each of the demo’s display modes in order to get a slightly better performance but it contains the same steps.

Double buffering is done manually using bitmaps, which gives the programmer full control. The lighting implementation uses a reflectance model which contains ambient light, one diffuse light and one specular light.

Brief guide:

Demo: 3D Software Based Renderer

OpenGL Point Light Shadow Mapping

Light and Shadows – Tech Demo

Languages: C++, GLSL

API: OpenGL 3.3

Tools and resources: GLFW, GLEW, Assimp, GLM

Implementation:

The algorithm works in two different phases:

1.      The first phase is the rendering to the depth map. The algorithm cycles through each face of the depth map and fills it like a 2D depth texture. Then for each light source, a virtual camera is used to be able to render the scene from the light point of view. For this, a unique Projection matrix is built having a 90 degree field of view, and for each direction the light is facing, a custom View matrix. 

The rendering in this step uses a very basic vertex shader which only does the transformations according to the virtual camera and a pixel shader which does nothing because the filling of the depth buffer is done automatically after calling glEnable(GL_DEPTH_TEST).

2.      The second phase and the most demanding one is the actual rendering. This is done in a single pass, the pixel shader being responsible for sampling the depth cube map. Because the sampled value is a depth value in [0, 1] interval, the vector from the point light to the pixel currently being processed needs to be converted so an actual comparison can be possible. In order to obtain this, the vector needs to be projected using the projection matrix of the virtual camera and converted to normalized device coordinates. After the comparison is done, the pixel can be decided if it is in shadow or not (A Survey on Methods for Omnidirectional Shadow Rendering. 2011).

To achieve a greater realism of the scene, a PCF method was implemented. It first transforms the vector direction into a texel position. Then it takes samples from around the obtained texel, translates them into a more suitable range, and the blends between the selected texels.

Cube face size: 1024

Filter: PCF – soft shadows

Cube face size: 1024

Filter: No – hard shadows

Cube face size: 256

Filter: No – hard shadows

Cube face size: 256

Filter: PCF – soft shadows

Demo: OpenGL Point Light Shadow Mapping

2D Sketchpad

Language: C++

API: GDI

Features:

Draw geometric shapes using mouse (click and drag)

Support lines, filled/unfilled rectangles, filled/unfilled circles,

Filled/unfilled ellipses, filled/unfilled squares,

Unfilled polygons

Eraser to modify canvas

Double buffering

Save and load bmp files

Modify existing shapes – change color or delete a shape by selecting it from a list

Free draw mode – continuous line/ points

Change eraser color and size

Clear canvas function

Brief user guide:

Description:

The application provides some basic shapes to be drawn. The drawing is done by clicking and dragging and it can be filled or unfilled. All the shape drawing and filling is done using custom written functions.

The application uses double buffering, implemented using bitmaps. The application is able to draw custom built polygons, simply by recording the mouse click position and adding the point to polygon points list. The back-buffer custom built also, represented by a “VideoMemory” class instance.

The erasing option can be customized by changing the eraser size or by using it as a square brush with a color different than the background.

There is a function for clearing the canvas, for saving it as a “.bmp” file or opening an existing one.

A list of shapes is maintained by the application, and allows the users to select a drawn shape and change its appearance (by changing the fill color or by changing the outline color and width).

Demo: Youtube Demo

3D OpenGL Engine Demo

Fractal terrain rendering – Interactive 3D Environment

Languages: C++, GLSL

API: OpenGL 3.3

Tool and resources: GLFW, GLEW, Assimp, GLM

Rendering techniques:

     1)      Terrain rendering

                        Fractal generated terrain

                                      Tri-planar texturing

                                      Distance based texture level of detail

     2)      Water rendering

                       Normal mapping

                        Displacement mapping

     3)      Sky and clouds rendering

                                     Gradient sky dome

                        Parallax scrolling

Key characteristics:

•       Environment

•       Free first person navigation

•       Third person navigation

•       Quad-tree for fast terrain frustum culling

•       Fractal terrain

•       Procedurally generated terrain based on parameters: size, roughness and height scale

•       Adjustable level of detail based on the number of iterations in the generation algorithm

•       Unique terrain shape

Screenshots:

1. Terrain

        Roughness=1.0                             

        Height scale=1.5

        Iterations=11

        Roughness=1.0

  Height scale=1.5

  Iterations=7

         Roughness=0.8

   Heightscale=2.5

   Iterations=11

         Roughness=1.3

    Heightscale=1.3

    Iterations=10

- Texturing level of detail based on the distance to the camera
- Tri-planar texturing to solve the issues when texturing high slope terrain

High-slope terrain:

    - Texture level of detail - Far

    - low-detail texture

       

    - Texture level of detail - Near

    - high-detail texture

2. Water

• Two displacement maps
• Two normal maps
• Per-pixel lighting
• Effect of moving water with adjustable waves in terms of speed and scale

High level of displacement

Low level of displacement

3.  Skydome

      Parallax scrolling clouds: Two layer of dynamic clouds moving at different speeds to create the illusion of depth.

     Gradient skydome: interpolates between the horizon color and the top color of the skydome based on the local height of the sphere model

Demo: Youtube Demo