Heos Caleido
Workflow
1. Load image: Open or drag any image onto the source panel. The tool accepts PNG, JPG, GIF, and most common formats.
2. Choose symmetry: Pick a wallpaper group from the Symmetry dropdown. Each generates a different tiling pattern from the same source.
3. Adjust gizmo: Drag the overlay to move the sampling region, scroll to scale, or hold Shift and drag the corner handle to rotate.
4. Set edge mode: Choose how the source image extends beyond its bounds: Clamp, Mirror, or Repeat.
5. Apply filters: Select a filter from the Filter dropdown to add pixel-art effects, color grading, or texture. Use the Strength slider to control intensity.
6. Export or animate: Save the tile as PNG, export a tiled canvas, or record a WEBM animation with motion.
How Symmetry Works
Heos Caleido computes the selected wallpaper group entirely on the GPU. The source image is sampled through a mathematical domain that folds, rotates, or reflects the canvas to create a seamless tile.
Mirror groups (p4m, p6m, p3m1, pmm, cmm, cm, pm): Reflect the source across axes to create kaleidoscopic patterns. p4m and p6m are the classic kaleidoscope symmetries.
Rotation groups (p6, p4, p3, p2): Rotate copies of the source around a centre point. p6 produces 60° rotational symmetry, p4 produces 90°, p3 produces 120°, p2 produces 180°.
Glide and repeat groups (pg, p1, drop, brick, brickm): Translate or slide-reflect the source. p1 is a plain rectangular repeat; drop and brick create offset tiling patterns.
Mandala (man6, man12): Radial mandala symmetries that rotate around the centre of the canvas. These do not tile in the conventional sense; they produce circular patterns.
Parameters
Symmetry Tab
Group: The wallpaper symmetry group. Each group defines how the source image is transformed to fill the tile. Hover over the dropdown to see the exact symmetry code.
Edges: Behaviour at the image boundaries. Clamp extends the edge pixels outward; Mirror reflects the image across the border; Repeat wraps the image seamlessly.
Filter Tab
Filter: Applies a post-processing effect to the generated pattern. Options include pixel-art dithering, colour grading, edge detection, halftone screens, and texture overlays.
Strength: 0 to 100, controls the intensity of the selected filter. For pixel-art filters this affects the number of colours or the dithering amount.
Colour A / Colour B: Used by duotone, tritone, riso, and other colour-mapping filters. Click the swatches to change the ink colours.
Grid Tab
Repeats: 1 to 6, the number of tile repetitions shown in the pattern panel. Increasing this value lets you preview how the tile looks when tiled multiple times.
Motion Tab
Motion: An animation curve that moves, rotates, or scales the sampling gizmo over time. Options include spins, orbits, figure‑eight paths, sweeps, and breathing pulses.
Amplitude: 10 to 250, controls how far the motion moves the gizmo. Higher values produce more dramatic movement.
Preview: Plays the motion loop in the pattern panel. Click again to stop.
Record WEBM: Exports the motion as a WEBM video. Duration and FPS are set via hidden inputs in the page source; the default is 6 seconds at 30 FPS.
Export Controls
Tile PNG: Saves a single tile as a PNG image. The tile size is set by the Tile input field.
Canvas PNG: Saves a tiled grid of the pattern. The number of repeats is set by the × input field (default 3×3).
Tile size: 8 to 2048 pixels, the width and height of the tile. Larger tiles produce more detail but require more GPU memory.
Features
GPU-accelerated: All symmetry computation runs on the GPU via WebGL2, enabling real‑time interaction even with large tiles.
Seamless by construction: The tile repeats without seams regardless of the symmetry group, edge mode, or filter selected.
Pixel‑art friendly: The Pixel filter disables texture smoothing and applies nearest‑neighbour scaling. Additional pixel‑art filters (dither, gameboy, CGA, pal8) produce authentic low‑colour results.
Live preview: The source panel shows the sampling region and the pattern panel updates in real time as you adjust parameters.
Motion export: Record animations with any motion curve and export as WEBM, ready for use in games or motion graphics.
Compatibility
WebGL2: The tool uses WebGL2 for GPU computation. It requires a browser that supports WebGL2 (Chrome 56+, Firefox 51+, Edge 79+, Safari 15+). Hardware acceleration must be enabled in browser settings.
Tips
Use high‑contrast, detailed images for the most striking kaleidoscopic patterns. Photographs of organic textures, line art, or busy illustrations work particularly well.
For pixel‑art tiles, enable the Pixel filter before exporting. This ensures the output is crisp and aligned to the pixel grid. Combine with the dither or pal8 filter for retro colour palettes.
The mandala symmetries (man6, man12) are designed for circular patterns and do not tile. Use them to create radial badges, spell effects, or decorative medallions.
FAQ
Q: Why is the pattern panel black? The tool needs a source image. Drag an image onto the source panel or use the Open button to load one. If you have already loaded an image, check the WebGL2 support in your browser.
Q: The filter dropdown has many options. What do they mean? Filters are grouped by category: Pixel (retro pixel‑art effects), Screen (halftone and texture overlays), Ink (colour‑mapping and duotone), Colour (colour grading), and Edges (edge detection and sharpening). Each filter changes the look of the pattern in a distinct way; experiment to find the style you need.
Q: How do I export a tile that matches my Aseprite canvas? Set the Tile size to match your Aseprite canvas dimensions, then click Tile PNG. The exported PNG will be exactly that size. Use Canvas PNG with the × multiplier to export a larger grid.
Q: Record WEBM doesn't work in my browser. Safari does not support WEBM encoding. Use Chrome or Firefox for recording, or export the pattern as PNG frames and assemble them in Aseprite or another video tool.
Feedback & Support
I love seeing how you use Heos Caleido in your projects. If you have questions, ideas, or just want to share what you have made, feel free to leave a comment or reach out directly. It is always great to see your work in action.
If you found this tool useful, taking a moment to leave a rating really helps. Thanks for the support.
Leave a comment
Log in with itch.io to leave a comment.