Code

Projects that involve coding, software design and development. (Dev Notes)

Featured Projects

Pano Preview
An app designed to quickly preview an equirectangular image tile as a 360° panorama. (HTML, CSS, JavaScript, WebGL)

Launch the App

Pattern Preview
A Chrome Extension designed for the visualization of patterns and textures in a simple, feature-rich interface. (HTML, CSS, JavaScript, WebGL)

Visit the Chrome Web Store

Compare
An interactive image comparison app based on the 'Juxtapose' project. (PHP, JavaScript)

Demo 1: Ana (Illustration to Photo) Demo 2: Anne (Illustration to Photo)

LightTable
An interactive photo gallery. (PHP, SVG, JavaScript)

Demo 1: Decks Demo 2: Teams Demo 3: ColorSplash

3D View
A lightweight web app for viewing terrain models created with evelation data and satellite imagery. (C/C++, HTML, CSS, JS, WebGL)

Mountain Pass Desert Facility Big Valley

Inspiration
A protoype for an interactive book about Inspiration.

View Prototype (Adobe Publishing Platform)

Anatomy of Typography
An interactive prototype for learning about typography.

View Prototype (Adobe XD Preview)

Social App
An interactive prototype for for a social media app.

View Prototype (Adobe XD Preview)

Back to Titanic
Splash page for a video trailer.

View Prototype

Vicious Circles
A generative art and animation project. (Created with SVG and JavaScript)

View Demo Video

Vector Gallery
A prototype image gallery to display vector graphics. (HTML, CSS, JS, SVG)

Web Prototype (Local Server)

Code Snippets

Various experiments, samples and snippets of code.

Plugins/Extensions
Plugins and extensions to jQuery

Duplicate Element Remove Class via RegEx Toggle Attribute/Attribute Value

SVG: Basic Elements
Drawing Basic SVG Shapes

The RECT Element The CIRCLE Element The ELLIPSE Element The LINE Element The POLYLINE Element The POLYGON Element The PATH Element The TEXT Element

SVG: Presentation
Presentation Attributes & CSS

Simple Shapes A - No Presentation (Default Fill Color) Simple Shapes B - Styling with SVG Presentation Attributes Simple Shapes C - Styling with Internal Style Sheets (CSS) Simple Shapes D - Styling with External CSS Simple Shapes E - CSS Overrides Presentation Attributes

SVG: Strokes & Fills
Defining Shape Attributes

Stroke (and related attributes) Fill (and related attributes) Fill: fill-opacity attribute Fill Pattern: Graph Paper Fill Pattern: Diagonal Lines Fill Pattern: Diagonal Crosses

SVG: Additional Elements
Other "useful" elements

The G Element (Groupings) The USE Element (Re-use Graphic Elements) The USE Element Again (Loading External SVG) The SYMBOL Element (Graphic Templates) The IMAGE Element (Loading Images) The A, ANCHOR Element (Hyperlinks in SVG) The ForeignObject Element (Inserting HTML into SVG)

SVG: Inside HTML
Using SVG with HTML

SVG in HTML - Inserting SVG into Web Pages

SVG: Masking & Clipping
Defining Shape Attributes

Masking a bitmap with SVG text (SVG) Masking a video with SVG text (HTML5)

SVG: Filter Tests
Experimenting with Filters

feGaussianBlur on Video (Applying an SVG blur to a video clip)

SVG: Scripting
JavaScript/ECMAScript

Create SVG with JavaScript (Generate SVG <text> Element) Button Test/Mouse Events (Testing Various Methods to Build Buttons)

SVG: jQuery
Manipulating SVG with jQuery

Create SVG with jQuery (Generate a simple SVG file) Manipulating SVG: Test A Manipulating SVG: Test B Replacing HTML Text with SVG

SVG: Animation
Declarative animation with SMIL, the ANIMATE element and related elements

Animate XML Attributes Animate CSS Attributes Animate XML/CSS Attributes (Animating multiple attributes and shapes) Synchronized Animation (Synchronizing the motion of two shapes) Repeating Animation (Repeating motion n times) Repeating Indefinitely (Creating a constant animation loop) Break the Indefinite Loop (Canceling a constant animation loop)

SVG: Misc. Projects
Assorted SVG-related expirements and projects

Basic 3D Cube Basic 3D Cubes (Re-use with USE) Basic 3D Cubes from External SVG (Import with USE; restyle with CSS)