Andrew Fraticelli
 
Graphic / Game / Interaction / VR developer
 
Web + Mobile focused
Click for CV
Contact: andrew.fraticelli@gmail.com
Graphic / Game / Interaction / VR developer
Experienced HTML5: JavaScript, Canvas, optimizing for mobile
Experienced WebVR, GLSL, ThreeJS
Also familiar with Firebase, Unity, Flash, iOS Swift, PHP
 
Passion for making tools to enable creativity
Strong planning & documentation skills
Strong debugging & problem-solving skills
Bilingual (English/French)
 
2 years VR app development in JavaScript, ThreeJS
1 year iOS app development in Swift, GLSL
8 years at Fidel(ID) Innovation+Design in HTML5, Flash
DEC in Multimedia Integration from College De Maisonneuve
VR
Unity
Animation
Procedural
Man-Made Object

Man-Made Object is a virtual reality music video, set to a song by Lemon Demon.

The video was animated by me using a combination of procedural animation and Unity's timeline feature; the graphical assets were made by me in Libfive, Blender, and procedurally within Unity.

Some of the effects used in the real-time version weren't compatible with Unity's spherical output mode, so in order to render a 360-degree version for YouTube, I also created a GLSL-based post-processing tool, capable of blurring an equirectangular image properly in sphere space.

GLSL
Scheme/LISP
Libfive
Blender
Unity
Distance Function sculptures & shaders

These are examples of models I made by writing signed distance functions. Some of them have been converted from Scheme representation to meshes using the library Libfive, and others are represented as GLSL shaders and raytraced in realtime.

The meshed models were cleaned up in Blender, and each have a custom Unity material shader defining their surface properties rather than textures, to allow for displaying at arbitrarily high resolution.

Unity
Mobile
Game
Tool
Motorcity: Drive

Motorcity Drive was a Unity 3D game produced for web and iOS in 2012, created to promote a Disney original series.

As the game's lead programmer, I was responsible for:

  • Creating a system that allowed the team to create and script the path the player would take through the level, and the events that would occur in the gameplay and scenery
  • Optimizing the complex graphics and effects for a smooth framerate on older mobile hardware
  • Tuning the gameplay and movement to recreate the show's signature sense of breakneck speed while still remaining playable
Flash
Networked
Virtual World
Server-side
WeMuv

WeMuv was a multi-user virtual world for kids, based around the concept of rewarding players for performing real-world exercise, as measured by the game's proprietary WeMuv pedometer.

In this project I was responsible for:

  • Creating most of the virtual world system, including creating the back-end server code that allowed the various users to interact in a shared virtual world
  • Developing the encrypted password system that the physical pedometers used to securely encode a user's progress for entry into the site
  • Creating a large number of games for the users to play in the world, and a secure high score system for them
  • Integrating and optimizing the provided art and animations into interactive aspects of the game world
VR
Mobile
JavaScript
Networked
Creative
SculpTogether

SculpTogether is an online virtual reality art program I created, written for the Altspace platform. Users can draw ribbons in the air around them, and create and stretch geometric shapes, all while their friends are drawing in the same space with them.

A wide variety of input methods are supported, to accomodate all of the platforms that can access Altspace, including:

  • Leap Motion hand-tracking camera (including skeletal gesture recognition)
  • desktop VR spatial controls
  • mobile VR head-direction & wand controls
  • non-VR mouse controls

Both the rendering (ThreeJS via Unity) and the networking (Firebase) are optimized for performance on mobile devices, so users on all hardware configurations can participate in spaces together.

VR
JavaScript
GLSL
Tool
Raytracing A-Frame component

This is a component that I contributed to Mozilla's A-Frame VR component registry, which allows developers to easily add fully 3D real-time raytraced objects to an otherwise-polygonal scene.

The view of the raytraced object is always live and accurate, even per eye (so, fully stereoscopic and perspective-correct).

I wrote the three shaders provided in the example scene as well.

VR
Mobile
JavaScript
Networked
Game
Altspace Invasions

Altspace Invasions is a series of "room escape"-style puzzle games I created, to be played cooperatively by groups of users in virtual reality.

The puzzles are designed to encourage teamwork; most are solved more easily by two people sharing their information from different vantage points, or standing in different places to operate different parts of the same machine.

The wide variety of puzzles required implementing many different types of user interfaces, all of which had to be easy to use regardless of the input hardware used by the players.

Each puzzle also had to be properly networked over Firebase, so multiple players interacting with it simultaneously could not accidentally bring it into an impossible or contradictory state due to internet latency.

Both scenes also include dynamically-animated characters, who respond to their circumstances and to the presence of players nearby.

HTML5
Mobile
Game
Server-side
Snowmen, Quick!

This is a social promotion I created, which takes the form of a simple comedic game with unpredictable results.

The player is asked to try and assemble a snowman using a catapult, a task whose difficulty will always produce silly-looking snowmen, which they can then share on social media with a single button press.

The game features an original soundtrack by me, and a comedic assistant character who tries to rush you, to keep the tone of the game appropriately light-hearted.

The game runs on desktop and mobile browsers, with support for minimizing a mobile browser UI. The social media features use an original solution to allow users to post image content to their feeds WITHOUT having to authorize any apps, for both Twitter and Facebook.

VR
JavaScript
Creative
Tool
Room-building A-Frame component

This is a component I created for Mozilla's A-Frame VR framework, to allow users to easily construct and edit a virtual building layout, either by typing out declarative HTML, or using A-Frame's built-in graphical editor.

It is still a work in progress, but it already contains many tools and shorthands to help make the common task of laying out interconnected rooms as simple as possible, and also remains intercompatible with other A-Frame objects.

iOS
Swift
GLSL
Creative
SquishToon

Squishtoon is a unique animation program I invented, designed to be easy to use. It uses GLSL shader code to allow users to warp and deform their photographs and art in real time on a mobile device.

The tasks I had to undertake to complete this program include:

  • Conception and planning of how it should work
  • Implementing the math behind it into the necessary GL code to perform its effects
  • Integrating libraries to render the final video and publish it to YouTube
  • Designing an interface that clearly lays out all its features without overwhelming the user
  • Producing instructional and promotional documents and videos
VR
JavaScript
GLSL
Toy
Witch's Brew

Witch's Brew is a short VR toy I made for the Mozilla Fantasy Experience Challenge. The background model was made by Johannes Rasinkangas for use in the contest, but everything else (including the sounds!) was made by me.

Users can interact with the tools in front of them, and experience a variety of magical effects. The potions can be poured or drunk, the cauldron can be stirred or splashed, and drinking the witch's brew from the spoon can transform you in various ways depending on which potion you added!

The liquid of the cauldron is simulated in a rendertarget operated on by several shaders, allowing the user to mix and match the potions in colourful swirls, and to get the liquid in the pot spinning with the spoon, just for fun.

HTML5
Mobile
Game
Procedural
Kayla's Downhill Escape

This was a mobile-friendly HTML5 game created to promote a Disney made-for-TV movie. The game features an endless dynamically-generated curved hill, with obstacles, bonuses, and scenery placed in randomized but appropriate locations.

As the lead programmer, I implemented:

  • The physics system for handling momentum and jumps while going up and down slopes (and what 'unrealistic' tweaks to make to it for gameplay fun)
  • The generation of random level layouts that were varied and unpredictable but tuned to never be unfair to the player
  • The graphical rendering system that could generate complex, layered scenes with dynamic curved graphics on demand while running smoothly on very old mobile hardware in a 2D Canvas
  • Dynamic animations for various effects, such as the pursuing avalanche (and its clouds of snow particles, and screen shake), all optimized for old mobile hardware