Food4Rhino

upperwave - SVG Animation is developed by Joshua Schaefer, upperwave, 2024.

Generate vector graphic animations (SVG) for web projects with animated 3D geometries in short workflows for high image quality and fast web page loading times.

Feel free to upload your animations to Instagram and link #upperwave / @upperwave to share your work with the Community.

Installation setup:

Open Rhino and Grasshopper, click on "File" at the top left, "Special Folders" and "Components Folder" and add the file "UpperwaveAnimation.gha" to this folder. Open the properties by right-clicking on the file and select the "Unblock" box next to Security at the bottom of the window and apply the setting. Rhino may need to be restarted and then the add-on is ready for use. If you want to remove the add-on, you can open the folder and delete the file. Rhino may need to be closed for this.

Further developments:

In future, there will be extended camera setting and SVG setting options. There will also be tools and instructions for interactive SVG animations with JavaScript, so that, for example, a building can be rotated with a slider or the height of a horizontal sectional plane through a building can be controlled by the user with a slider. This gives the user more control over the animation and allows them to control and select a frame using a slider.

Workflow and Guideline:

Step 0 - Overview

Geometries and/or the camera can be animated. In contrast to the conventional animation of a slider in Grasshopper, all frames within a data tree are calculated in this add-on, whereby a list / a data tree branch corresponds to a frame. Individual frames can be selected and viewed using a branch selector (such as "Tree Branch" or "Tree Branch in Percent"). An understanding of working with data trees is therefore very helpful. The function of animating a slider may be added in the future, as this does not require any knowledge of data trees.

• Animated Geometries (there can be multiple geometries per frame):   one branch = one frame (one data tree = complete animation)   
• Animated Camera (there can only be one camera per frame):  one item = one frame (one list = complete animation)

Step 1 - Animation

Use a "Time Calculator" Component to generate animation values from 0-1. These values can be used to animate geometries or the camera. If, for example, a geometry or the camera is to be rotated by 360 degrees, these values can be changed with the "Remap Numbers" and "Construct Domain" components so that the values do not range from 0-1, but from 0-360 degrees. With the "Graph Mapper" component and the Bezier type, the values can also be interpolated in order to move geometries faster or slower at certain points in time. If the camera is to be rotated around a box, the target domain can be set from 45 to 405 degrees, for example, to achieve an isometric view in the starting position.

If a cube is rotated from 0 degrees to 360 degrees, the "Loop Transition" setting should be set to True to avoid double frames. This is because the geometry would otherwise return to its original position in the last frame and the first and last frames would be identical, creating a small delay. If the first and last frames are not identical, the setting can be left at False so that the last frame is displayed correctly.

Step 2 - Make 2D

Generate 2D curves from 3D geometries. Make sure that the data structures are correct. Currently it is only possible to generate a parallel projection.

Step 3 - Processing

If round geometries are used, generated curves must then be converted to lines using "Reconstruct Curves". The "Tree Branch by Index" or "Tree Branch in Percent" components can be used to preview the animation.

Step 4 - SVG Animation

Generate SVG data with additional SVG settings and export an SVG file.

In this first version, the geometries of all frames are taken as a whole and scaled within the view box so that the geometries are always visible. This means that geometries cannot disappear from the field of view. If geometries cover large distances, the geometries are therefore displayed very small in the viewBox. Enhanced camera functionality will be released in future versions.

Current Use Cases:

• create 2D animations from animated 3D geometries (breps, lowpoly meshes or curves / lines)
• animated icons/symbols
• animated waiting sequence graphics
• animated architectural concepts
• animated concept graphics
• animated visualisation of a three-dimensional work
• isometric / orthographic projection
• svg-export

Have fun testing and creating your SVG animations!

- Joshua