https://drajmarsh.bitbucket.io/supershapes.html # Loading - please wait... This page requires a reasonably modern HTML5 browser with both Javascript and WebGL enabled. [browsers] If this message is not soon replaced by an interactive 3D model, then it is likely that your browser does not support this web app. Check your JavaScript Console for specific error messages. SUPERSHAPES: Examples * Sphere * Rounded Cube * Modern Vase * DoughBoy Sextuplets * Giant Boots * Goblet * Butterfly * * Cockel Shell * Snail Shell * Rams Horn * Settings Data * Export Geometry... * * Load Settings... * Save Settings... * * Edit Settings as JSON... * * Store Settings as Default... * Clear Default Settings... Shape * Shape TypeT * Spherical Harmonics1 * 3D SuperFormula2 * Super Ellipsoid3 * Super Toroid4 * Elliptic Torus5 Color * Surface ColorC * Monotone6 * Surface Normals7 * Longitude Angle8 * Latitude Angle9 * UV Texture0 * * Blueprint Theme Random * Slider Settings * Normal Increments * Finer Increments * * Real-Time Update * Show Buttons Reset TRANSITIONSx Easing Function ( ) None ( ) Linear ( ) Sinusoidal ( ) Exponential ( ) Cubic ( ) Quintic ( ) Stretchy ( ) Elastic --------------------------------------------------------------------- Transition Speed sec [ ] SECTION/PROJECTION PLANEx Project Shape Clip Shape 3D VIEW SETTINGSx Projection Fit to Canvas DISPLAY SETTINGSx SHAPE SETTINGSx Shape Type ( ) Spherical Harmonics ( ) Super Formula ( ) Super Ellipse ( ) Super Toroid ( ) Elliptic Torus --------------------------------------------------------------------- Mesh Resolution [ ]Higher Resolution Quadruples the number of points within the surface grid. This can slow down mesh regeneration on some devices. Surface Color ( ) Monotone ( ) Surface Normals ( ) Longitude Angle ( ) Latitude Angle ( ) UV Texture --------------------------------------------------------------------- Silhouette Effect px [ ] Adjusts a dark band around the outside of the shape. Not all browsers implement thick lines or support the available range. INFORMATIONx * About * 3D View * Data Entry * Credits Overview The aim of this app is to let you interact with a range of parametric shape generation algorithms, using the adjacent sliders to adjust parameters and see their effects in real-time. As a starting point, use the examples menu as a basis and the 'Randomize' button () to explore different shapes. The shape parameter sliders are specific to each algorithm whereas the shell parameters allow you to stretch and offset the generated surface into shell-like forms. It should be fast enough on most modern computers and tablets, but you can turn off real-time updating if you need to. Background This is another HTML5 version of one of my Java applets. This one grew out of some experiments using spherical harmonics as a way of doing real-time diffuse lighting and shading simulations. As I tend to only really understand stuff when I can see it, I did a quick viewer in Processing a while ago to help make sure I was getting all the calculations correct. Some of the visualisations and shapes started to look reasonably interesting, so I polished it up a bit and then did this WebGL version. As the basic infrastructure was already there, it seemed logical to add in some other shape types as well. Spherical Harmonics are really interesting as they can be used to reduce what is usually an inordinately expensive integration of the diffuse lighting environment into a series of much faster dot products. This is done by approximating the diffuse lighting environment, given as a complex luminous distribution over an intergrating sphere, with a matrix of Spherical Harmonics coefficients. Using this instead of a standard diffuse surface reflection model can make very detailed and realistic diffuse lighting effects possible in close to real-time. Robin Green explains it better and in much more detail in Spherical Harmonic Lighting: The Gritty Details. Development This viewer was probably most inspired by Paul Bourke's page on Spherical Harmonics, as well as the many other supershapes viewers written by others. As a lot of my visualisations of building performance involve overlaying analysis data on coloured grids within a 3D model, I figured it was worth spending some time on the generation and animation of them as a way of developing and testing my own grid libraries. Interesting Features I guess the most interesting features of this app are as follows: * Animating the shape transitions entirely on the GPU using interpolating shaders, * Developing SVG-based data sliders that scale and interact reasonably well across desktop and mobile, * Doing a fair bit of work with the parameters of each shape so that the random generation is a bit smarter, * Getting my silhouette calculations to work fast enough in Javascript, and * Implementing an app-wide Undo/Redo system. --------------------------------------------------------------------- (c) Dr. Andrew J. Marsh, 2014. View Manipulation You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup. Rotation: Drag with the left/right button or a single finger, or use the arrow keys. Panning: Drag with the middle button or two/three fingers, or use the A and D keys. Zooming: Use the scroll wheel or pinch with two fingers, or use the W and S keys. --------------------------------------------------------------------- NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press. Keyboard Modifiers The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements. Shift Key: Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times. Ctrl or Meta Key: Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times. --------------------------------------------------------------------- NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility. Credits This page uses the following frameworks/components: Bootstrap v3.3.2 Copyright (c) 2011-2015 Twitter, Inc. - github.com/twbs, http://getbootstrap.com/ (LICENSE) Bootstrap-popover-x v1.4.0 Copyright (c) 2014, Kartik Visweswaran, Krajee.com, https://github.com/kartik-v/bootstrap-popover-x (LICENSE) jQuery v1.11.2 Copyright (c) jQuery Foundation and other contributors, https://jquery.com/ (LICENSE) JSON Editor Copyright (c) 2015 Jos de Jong - github.com/josdejong https://github.com/josdejong/jsoneditor/ (LICENSE) JSURL Copyright (c) 2011 Bruno Jouhier - github.com/Sage https://github.com/Sage/jsurl/ (LICENSE) KnockoutJS v3.2.0 Copyright (c) Steven Sanderson and the Knockout.js team, http://knockoutjs.com/ (LICENSE) Knockstrap v1.2.0 Copyright (c) 2013 Artem Stepanyuk - github.com/faulknercs, http://faulknercs.github.io/Knockstrap/ (LICENSE) lightgl.js Copyright (c) 2011 by Evan Wallace - https://github.com/evanw https://github.com/evanw/lightgl.js/ (LICENSE) SnackbarJS Copyright (c) 2014 Federico Zivolo - github.com/FezVrasta http://fezvrasta.github.io/snackbarjs/ (LICENSE) split-pane.js Copyright (c) 2014 Simon Hagstrom - github.com/shagstrom https://github.com/shagstrom/split-pane/ (LICENSE) x [ ] --------------------------------------------------------------------- File Format [] Include: [ ]Surfaces [ ]Outlines [ ]Vertex Normals [ ]Texture Coordinates [ ]Vertex Colours Unfortunately most browsers automatically download remotely generated files into a default location, typically a 'Downloads' folder in your user area, and do not let you overwrite existing files. This is why a new filename appears above every time you see this dialog. If you would like to see a File Save As dialog, you need to specifically set your browser to prompt you for the location of each download within its advanced settings. Why no File Save As dialog ? Cancel Save File x Edit Settings as JSON [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] Text Share Cancel Read Data [uv_grid] [shadow]