Hi. I'm Murali

I am a Full Stack Developer who likes building scalable solutions




Slots Challenges

ReactJS PHP

Designed and implemented the core logic in PHP for a robust challenges framework in Zynga Hit It Rich! Slots game. This has been extended and used for multiple features, all configurable from a single feature-rich admin page made in React JS. Unfortunately I can not share any more info as this is an active prject in Zynga.

Elasticache Migration

AWS Lambda Functions Python

Devised migration plan for moving volatile keys from internal Memcached solution to AWS Elasticache. Wrote AWS Lambda functions in Python to handle automatic replacement of bad nodes. Unfortunately I can not share any more info as this is an active prject in Zynga.




YouSpot Chrome Webstore

AngularJS NodeJS Spotify API

I listen to a lot of YouTube song mixes to discover new music. But of the 20 odd tracks in the video, I usually like only a couple of them. So, I created this chrome extension which parses YouTube page data and adds them to your Spotify playlist of choice.

During this project, I had to find solutions for problems that I had never faced before. Dealing with CORS, especially in the Chrome Extension context was quite chalenging. This was also the first time I had used an OAuth flow (for Spotify Integration).

Image here shows a screenshot of a YouTube page with the YouSpot extension overlaid on the right side. The extension shows the songs that were parsed from the page that match a song name in Spotify. I chose most of the songs (green = selected, grey = unselected) and added them to one of my existing (or new) playlist in Spotify.




JS RayTracer Github

ThreeJS AngularJS NodeJS

In this project I created a Three.js scene where users could add objects in any x,y,z coordinate. Then when we hit Render, it sends this data to a NodeJS server, which does a RayTracer calculation to figure out photorealistic ambient, specular and diffuse values for each pixes in the resulting image.

One of the cool things about this project was that I created very nice and extensible Data Structures like Sphere Shape, Phong Shader, Point Light etc. This project has a lot of potential and I plan to work on this a lot more sometime in the future.

Image here shows a screenshot of the working app. We have a simple scene with a single point light, 2 balls and a blue plane. When we hit render, it goes to the server, computes a photorealistic image and sends the data back as a png image through a web socket.




Shapes AI Game Github

Unity AI NodeJS

In this project, we created a game where we controlled a simple shape that required us to solve puzzles. The interesting thing was that some puzzles were only partially solvable by the player, the remaining part required a companion AI.

This AI would analyze the expected final state and the data it has at hand and figure out all possible ways in which it can succeed and then use the most optimal solution. If player changes state during this time, the AI would recompute its state.

Image here shows a screenshot of the player shape on its route to solve one of the puzzles. After this, the AI would have gone on to solve the rest of the puzzle




Kinect Soccer

C++ MS Kinect OpenGL

This is a graduate special problem that I did to track finger position using Microsoft Kinect (and OpenNI) and simulate soccer with it. Fingers are tracked using their position in 3D space (with depth information tracked by Kinect IR sensors). The slope of fingers is calculated in XY and YZ planes by approximation of an over-constrained problem.

This is then rendered in 3D through OpenGL. One of the challenges that I faced was that the Kinect provided gave high confidence values to depth information. I had to use neighboring pixel values to calculate my own confidence values so as to reduce jittering.

Image here shows a screenshot of the different states by which the RGB and depth info of the fingers is translated into fake legs in the 3D world




JS Rendering Pipeline Live Demo

JavaScript Rendering NodeJS

In this project, I created the rendering pipeline in JavaScript in a single HTML page. The user can change position of object and lights in 3D space through the browser and see results immediately. The steps involved are world transformation, lighting calculation, view transformation, perspective transformation, z-clipping, culling, z-sorting and resterization.

I use a library called Sylvester to do matrix calculations and Raphael for rasterization. The native HTML5 canvas element created blurry lines due to anti-aliasing. In the future, I plan to access pixel data and implement Bresenham's line drawing algorithm to render it in canvas.

Image here shows a screenshot of a 3D plane which is rendered as a series of pixels after going through the rendering pipeline. Click the Live Demo above to play with these values in real time.




Forest L-System Live Demo Github Writeup

JavaScript L-Systems ThreeJS

In this project, we created different types of tree structures using L-systems. In a forest, many such trees compete for light and fight against gravity (resulting in sagging trees due to "geotropism")

We used Three.js for rendering the forest and a Turtle to draw the trees using grammar rules from the L-system theory.

Image here shows a screenshot of a snapshot of the forest after a few iterations of randomized seed distribution. Redder colors are older trees and generally taller. They grow and die, leaving the younger ones to thrive after a certain time, resulting in a very dynamic environment. Try out the Live Demo link above to see it in action




Commonwealth Games Network Visualization

Flash Network

A huge network of routers had to be built for live TV feed transmission from different stadiums during the Games. The tool that I developed helped identify suitable positions for backup links, bandwidth utilization of every link and points of failure in the network. It also helped track primary and backup paths of individual TV feeds and provided a simple interface to monitor large amounts of live information in a browser window.

Image here shows a screenshot of data for one stadium. The color of the line between two routers represents the average utilization of all the links in that bundle, while feed paths are shown in glowing colors. The selected bundle contains 3 links, one of which carries the blue feed as shown in the table.