FROSTxHASH BETA v0.61

Features

• Build it 100% here in the browser without installation.
• NEW! fxhash gif thumbnail support.
• 99% compatibility with projects created with PureSpider Template - please report any missing features to me!
• Duplicate file handling: no worries about duplicate frames increasing project size.
• Layers within Layers - Variations can have multiple sub-layers (folders) with a mixture of static and animated elements.
• Sound Layers - Layer audio loops to create a generative soundtrack. Pause/Play with space bar.
• Animation support - Frame-by-frame animation is here! It accepts a series of frames or even sub layers each with their own frames and fps. (See the Flamingo example folder below)
• GIF export (for animated Canvas projects). Automatic perfect looping or manually clipable.
• Export with G or X or D — Each does the same thing. Stands for "Gif", "eXport", and "Download," respectively.
• Multiple render engine options depending on needs: HTML and/or Canvas.
• Features/Traits are updated to work with the new fxhash update (from April 2023)
• ??? Open to feature requests, just send me a message (@frostbitten) or drop into the discord.

Project Considerations

Folder Prep

For the most part you can drop a project folder meant for the PureSpider template right into here and it'll work.

However, you really should provide a configuration file named project.yaml and define a title for your project.

Your project title will show up in the exported GIFs/PNGs. Otherwise, they will all get the generic name Project-2025-06-07.

A very basic configuration file you can edit can be downloaded here:
⬇️project.yaml

When it comes to editing the configuration file any plain text editor will work. But, if you're on Windows I highly suggest using Notepad++ (Download from notepad-plus-plus.org). It makes editing a lot easier for non-coders by simply providing some color coding.

For a more advanced example project file you can copy and paste below. Note that anything after a # hash mark on a line is considered a "comment" and gets ignored when the config gets loaded:

Environment Tests

• App version v0.33
  
  • macOS 10.13.6
    • Safari 13.1.2
      ✔️ Works almost perfectly*
      (* Safari automatically uses backup HTML renderer instead of Canvas if filters are needed. In such case no gif/png export.)
  • iOS 14.6 (iPad 7th Gen)
    • Safari 14
      ✔️ Works fairly well*
      (*⚠️ HTML renderer can be a bit slower. Canvas performs well.)

• App version v0.29
  
  • Windows 10 (v10.0.19044 Build 19044)
    • Google Chrome 109.0.5414.120 (64bit)
      ✔️ Works as expected
  • macOS 10.13.6
    • Safari 13.1.2
      ⚠️ Works mostly*
      (*Safari does not support filters in Canvas projects)
    • Firefox 109.0.1 - 64bit
      ✔️ Works as expected
    • Opera 95.0.4635.25 (x86_64)
      ✔️ Works as expected
    • Google Chrome 109.0.5414.119 (x86_64)
      ✔️ Works as expected
  • iOS 14.6 (iPad 7th Gen)
    • Safari 14
      ⚠️ Works partially*
      (*⚠️ Safari does not support filters in Canvas projects. HTML renderer has coding bug at this time.)

Update Log

• May 8, 2025
  
  • fxhash gif thumbnail support! 🎉
    Currently:
    • Consistent frame time is needed. (Duplicate frames at higher fps can be a workaround)
    • Consistent frame count is needed.
    • GIFs can be maxiumum of 50 frames.
    • Maxiumum fps is 20fps.
    
    Use these capture settings:
    
    • Trigger: Programatic trigger useing $fx.preview()
    • Target: From <canvas>...
    • Canvas CSS selector: #output-canvas
    • GPU support: Shouldn't be needed, Disabled
    • GIF Capture: Enabled
    • Capture Interval: 1.0s
    • Frame Count: Depends on how long your animations are.
    • Playback FPS: This is the FPS you want the GIF to play at.
• February 14, 2025
  
  • Transparency in gif export support.
• February 12, 2024
  
  • Make project.yaml totally optional. Now users can drop the "layers" folder and it will work.
• December 31, 2023
  
  • Sort assets by name, don't rely on them being pre-sorted.
• December 20, 2023
  
  • Update to latest fxhash.js api.
• June 10, 2023
  
  • Update audio handling. The previous update broke audio layers that have more than one variant.
• April 30, 2023
  
  • Update features format to work with the new fxhash update (from April 2023)
• April 29, 2023
  
  • Minor documentation updates
  • Update gradient-map filter to take a gradient-map-type option. Default is table for smooth gradients and what was used previously. Now we can also use the discrete type to ensure there is no blending between colors.
• April 27, 2023
  
  • Minor documentation updates
• March 10, 2023
  
  • Update transformation filter to work in html renderer.
  • Add new option to filter 'override-if'. Allows overriding a filter's feature value based on a layer. Helpful for overriding useless features for layers that use a "None" (blank or invisible) variant.

    -   type: gradient-map
        name: "Color Filter"
        override-if:
            -   feature: Layer 1
                value: None
                override: N/A

  • Some code optimization.
• March 9, 2023
  
  • Add info about achieving perfect gapless audio loops.
  • Replace dash (-) and underscore (_) in feature names and values. You can disable this with the config option: fake-space-replace: false.
  • Change default dither-mode to just "Atkinson" since "Atkinson-serpentine" was creating an edge on the left side of the gif.
  • Add new undocumented filter for transforming a layer (canvas only)
  • Fix some output rendering handling. Needs revision still. Currently if a view-size is smaller than artwork the output will also be that view-size. It should be an option to use reduced or original size in output.
  • Change remaining canvas-based asset cache to createImageBitmap.
• March 8, 2023
  
  • Utilize a customized version of gif.js to allow for more export compression options.
    
    • netsize: 16 Between 1-256. Default is 256. Defined as "number of colours used" by the algorithm creator. Reducing this will lower gif file size. However I've found the output color palette size remains 256.
    • gif-quality: 1 Between 1-30 where 30 is a faster render time / lower quality and 1 is slowest but best. Low quality doesn't seem to reduce file size.
• March 7, 2023
  
  • Animated gradient map / color cycle now considered when calculating loop length. This ensures a full color cycle!
  • Also in gradient maps: Fixed sharp color edge between end and restart of color cycle when using "smooth" animation transition.
  • Fix bug in ticker when recording gif. Previous it was incorrectly ticking by 2 centiseconds (cs). Now it ticks by 1cs. But if the gif frame ends up only 1cs long it is saved as 2cs to preserve speed.
  • Update frame delay calculation to round to nearest centisecond. Add extra parentheses to calculations for clarity and surety.
• March 6, 2023
  
  • Canvas renderer performance updates.
    
    • Render to offscreen canvas to build up layers before drawing final render to display canvas. (No use of workers yet)
    • Use createImageBitmap for resized assets.
    • When resizing assets only store the resized version.
• Feb 13, 2023
  
  • Fix a bug where oversized animated variations wouldn't generate small version of assets.
• Feb 11, 2023
  
  • Add language to terms allowing charitable sales without revenue sharing
• Feb 9, 2023
  
  • Add "Publishing Config" section
• Feb 7, 2023
  
  • Update export tool for touch devices: double-tap to open an export screen. Various screens throughout export process now have buttons to compliment the keyboard shortcuts as well.
• Feb 6, 2023
  
  • Redo perfect loop calculator. Now we calculate the loop length for each layer then find the lowest common multiple.
  • Add [i] shortcut key to toggle an information panel about the loop length.
  • Update demo project "face"
  • Absolute minimum of primary royalty split changed to 10% for launch. Plan is to decrease over time, never increase.
  • Backup render engine automatically deploys in certain environments for projects using advanced features.
• Feb 4, 2023
  
  • Standardize sort order of layer variations across browsers. Fixes issue of different browsers producing different generative results. Tested and verified consistency across macOS safari, firefox, chrome, opera and Windows 10 chrome and firefox.
• Feb 3, 2023
  
  • Special features which don't work in all browsers now get a warning and require acknowledgment. Specifically svg filters.
  • Added createImageBitmap polyfill to allow older safari browsers to work.
  • Ensure each library file has proper license included.
• Jan 28, 2023
  
  • Terms and conditions are now required to be accepted before zip export.
• Jan 26, 2023
  
  • Undocumented feature updated: "Color cycle," "palette shift," or "gradient map" whatever you want to call it—has been updated to allow arbitrary numbers when defining the filter "transition," not just "smooth." No transition is the default which mimics the old school color cycle technique.
• Jan 24, 2023
  
  • Found and fixed a problem with the handling of jpeg images. Zipping would fail to identify jpeg images and crash.
  • Trim occasional extra "-" and "_" off beginning and end of names.
  • Maximum display size now an option and enforced via "view-size" (in pixels) config. For people who are generating print-quality work to be also viewable on a normal device. Default is 1920.
  • Found and fixed a problem when rebuilding canvas scene (during export). "updateFns" array, which runs with every frame and updates each layer, was not always cleared before rebuilding.
• Jan 22, 2023
  
  • Export with "g" or "x" or "d" (for "Gif", "eXport", and "Download").
  • Exporter detects if iteration is animated or not and then generates appropriate format (GIF vs PNG)
  • Exported filename now uses project title followed by the first two and last two characters from iteration hash, followed by CRC32 hash of the iteration hash.
  • Animated palette shift was found to be broken and was fixed.
    🤓 Tech notes: The process that builds this website had automatically renamed some necessary functions and variables. To account for this we now reference them as properties in a Tools object. Any tool that references another tool needs to be "built" by wrapping it in a function where we can inject the Tools without worry about the actual "Tools" object variable name (since that gets renamed too).
• Dec 3, 2022
  
  • Mostly working. Compatibility with PureSpider template seemingly achieved - Capable of building and testing projects, not production ready.