Welcome

This site contains many samples and prototypes that I have developed. All the code for the samples are available on bitbucket and people are free to do with it what they will. Ideally its best if you use the latest version of the Chrome browser, I tend to use the latest available APIs and features as I prototype and learn new subjects.

If you like what you see, why not chip in $1 to my patreon if you feel inclinded.


2D Prototypes

Various experiments using just Javascript, CSS and HTML Canvas. Some are preludes to making more complicated 3D prototypes.

  1. Spring Movement Using spring physics as a movement driver.
  2. Irregular Hex Grid Recreation of Oskar's Irregular Grid.
  3. Marching Squares : Animated Process An animated sample of how the algorithm works.
  4. Marching Squares : Traverse Noise Using the keyboard to move around 2D noise as it gets rendered my MS algorithm.
  5. Keyframe Curve Movement Trying to animate movement on a hermite curve with key frames.
  6. Moving Timeline Experimenting with how to draw a numbered grid as it scrolls.
  7. Keyframe Events Want to have events trigger during a key frame animation.
  8. Alchemy Symbol Generator Recreating procedurally generate symbols originally in php.
  9. Wave Function Collapse Basic sample of the algorithm using text as tiles.
  10. Quad Tree Generate random points and place them it in a quad tree, then visualize grid.
  11. Bezier Splines Curve tool with real time animation while editing the spline.
  12. 1$ Recognizer Playing with the $1 2D shape / gesture recognizer.
  13. Trig Functions Visualize trig functions like: sin, cos, tan
  14. Lemniscate Bernoulli Animation on this specific curve
  15. Watts Curve Animation on this specific curve

3D Fungi Prototypes

Fungi is a 3D / Game engine built from sratch using Javascript(ES6) and WebGL 2. I tend to do most of my 3D prototypes using fungi since its built around the purpose of rapid prototyping.

  1. Trilinear Interpolation 8 Point transformation lattice for manipulating meshes.
  2. Marching Cubes : Animated Process Demonstrating the algorithm scanning grid and generating a mesh based on perlin 3d.
  3. Ray Intersection How to handle Ray intersections on various 2d/3d shapes.
  4. Spring Physics Applying springs to specific bones to procedurally animation parts of a character.
  5. IK Rigs Recompute animation data to work with various models using inverse kinematics.
  6. ProtoForms v1.0 Procedurally generate 3D Characters that can be animated and used for prototyping.
  7. ProtoForms v2.0 Procedurally generate 3D Characters that can be animated and used for prototyping.
  8. Spring Terrain Using spring physics to move points to generate textures as you use keyboard to move around perlin noise.
  9. Gerstner Waves Algorithm that simulates ocean waves.
  10. Various IK Solvers Created a few single pass solvers to replicate the IK motion from a ubisoft GDC talk.
  11. Pivot Transform How to use a pivot point and a quaternion to transform a mesh in a shader.
  12. Globe Points (A) Spacing points on a sphere and using a Texture map to highlight points.
  13. Globe Points (B) Another example but using fibonacci to define points on sphere.
  14. Animation Cubic Interpolation Inspired by Overgrowth's GDC talk on using 2 poses and cubic interpolation to generate animation cycles.
  15. Space Ship Controller Just woke up one day and just wanted to try to make a space ship fly around.
  16. Hand Controller Quick example of how to control fingers on a rigged hand.
  17. Capsule Morphing Demonstrating how to great vertex groups, then using various ways with positioning, scaling and bezier curves to change the shape of a capsule into something else with the use of a GLSL Shader.

Three.js Prototypes

When doing professional work, I opt to use three.js instead of fungi.

  1. Wave Function Collapse Using 3D model tiles, the algorthm will connect them together to procedurally generate a road system.

3D Shader Prototypes

Using fungi, i sometimes try to spend some time learning GLSL to create shaders, plus how to render 3D Objects.

  1. Phong Lighting Basic lighting : Ambient, Diffuse and Specular.
  2. Toon Lighting Render things to be more cartoon like.
  3. Toon Metal ported a unity toon shader to that webgl/glsl, originally by minionsart.
  4. Parallax Glitter porting a unity shader to webgl/glsl rendering textures with parallax.
  5. EyeBall porting a unity shader to webgl/glsl, originally by minionsart.
  6. Halftones exeriment on learning how to generate halftones on a mesh.
  7. Dithering a different way to do shading with pixel pattern that change by depth.
  8. SDF Texture Halftones a sample of how to use SDF textures to do halftone shading.
  9. Voronoi Edge Texture Node ported blender's shader node into something usable in webgl.
  10. Voronoi F1 & Noise Texture Nodes porting blender's shader nodes into something usable in webgl.
  11. Toon Halftones A custom toon shader that uses a code based color ramp, specular light and direction rim shadows while using halftones has a way to transition between colors.

UI Web Components

I enjoy putting together UI components from scratch using Javascript, CSS and HTML. I sometimes need a way to control prototypes.

  1. Property Panel A slide out panel with editable rows of other ui components.
  2. Timeline Animation Timeline rendered with HTML canvas for controlling and viewing animation time.
  3. GChat Modal Many years ago I made a webbased chat tool for work, i recreated gchat web interface for it.

Misc

Just Random extra stuff.

  1. Animation Curve Editor Tool I thought about making so I can generate animation curves.
  2. Node Editor Web Based example of nodes that can be tied together.
  3. Noise Generator Visual tool to see what noise looks like when merged together.
  4. Shader Blocks My attempt at a webbased shader forge like tool.
  5. Puggle A webbased recreation of a mini game called Puggle.
  6. Svg Paper prototyping a white board app using svg as the renderer.