#### <sup>[Ollin](../../index.md) → [Examples](../index.md) → Images</sup>

---

## Images

| [![Autostereogram](https://media.ollin.art/examples/Images/Autostereogram/still-640.jpg?v=a02b4c97)](autostereogram.md) | [![Dropped](https://media.ollin.art/examples/Images/Dropped/still-640.jpg?v=bf8292af)](dropped.md) | [![Fit](https://media.ollin.art/examples/Images/Fit/still-640.jpg?v=0b369e71)](fit.md) | [![GlyphMosaic](https://media.ollin.art/examples/Images/GlyphMosaic/still-640.jpg?v=cf14986b)](glyphmosaic.md) |
|---|---|---|---|
| [Autostereogram](autostereogram.md) | [Dropped](dropped.md) | [Fit](fit.md) | [GlyphMosaic](glyphmosaic.md) |
| [![Halftone](https://media.ollin.art/examples/Images/Halftone/still-640.jpg?v=d453baa5)](halftone.md) | [![HilbertLine](https://media.ollin.art/examples/Images/HilbertLine/still-640.jpg?v=bfb9f963)](hilbertline.md) | [![LuminanceMelt](https://media.ollin.art/examples/Images/LuminanceMelt/still-640.jpg?v=97bd1adb)](luminancemelt.md) | [![PhotoMosaic](https://media.ollin.art/examples/Images/PhotoMosaic/still-640.jpg?v=ca5adb0b)](photomosaic.md) |
| [Halftone](halftone.md) | [HilbertLine](hilbertline.md) | [LuminanceMelt](luminancemelt.md) | [PhotoMosaic](photomosaic.md) |
| [![PixelArt](https://media.ollin.art/examples/Images/PixelArt/still-640.jpg?v=925a77df)](pixelart.md) | [![PixelField](https://media.ollin.art/examples/Images/PixelField/still-640.jpg?v=18de6c73)](pixelfield.md) | [![PixelSort](https://media.ollin.art/examples/Images/PixelSort/still-640.jpg?v=a03fd15a)](pixelsort.md) | [![SeamCarve](https://media.ollin.art/examples/Images/SeamCarve/still-640.jpg?v=a5c915bf)](seamcarve.md) |
| [PixelArt](pixelart.md) | [PixelField](pixelfield.md) | [PixelSort](pixelsort.md) | [SeamCarve](seamcarve.md) |
| [![SingleLine](https://media.ollin.art/examples/Images/SingleLine/still-640.jpg?v=47ebfb44)](singleline.md) | [![SlitScan](https://media.ollin.art/examples/Images/SlitScan/still-640.jpg?v=0aa946a5)](slitscan.md) | [![SpanningTree](https://media.ollin.art/examples/Images/SpanningTree/still-640.jpg?v=7674d7bc)](spanningtree.md) | [![SpriteSheet](https://media.ollin.art/examples/Images/SpriteSheet/still-640.jpg?v=0cbf5226)](spritesheet.md) |
| [SingleLine](singleline.md) | [SlitScan](slitscan.md) | [SpanningTree](spanningtree.md) | [SpriteSheet](spritesheet.md) |
| [![StringArt](https://media.ollin.art/examples/Images/StringArt/still-640.jpg?v=36d57253)](stringart.md) |  |  |  |
| [StringArt](stringart.md) |  |  |  |

These examples load, draw, tint, and author raster images through the `Image` value type, `drawImage` (whole, fitted, or one cell of a sheet), `tint`, and the `Image[x, y]` pixel subscript. They also cover the image-as-input renderings, which turn a picture into glyphs, streaks, halftone dots, a single line, a branching tree of veins, a wound thread, or a molten field.

| Example | What it shows |
|---|---|
| [Dropped](dropped.md) | pictures dropped on the window from the Finder, each landing where it was dropped: `filesDropped()` and `droppedFiles()` hand over the paths, `loadImage` reads them, and a file that is not a picture is named instead |
| [Fit](fit.md) | one photograph of a city, cropped to 3:2, drawn into three 2:3 boxes, one per `ImageFit`: `.stretch` narrows the round dome, `.contain` leaves part of the box showing, and `.cover` fills the box and crops the people at the left away (`drawImage(_:in:fit:)`, `Image.cropped(toAspect:)`) |
| [GlyphMosaic](glyphmosaic.md) | a bundled portrait under a passing band of light, rebuilt as a grid of geometric marks, where each cell's character is chosen by how much ink that glyph has in the bundled bitmap font (`drawGlyphMosaic`, `GlyphSet`, a custom character set) |
| [Halftone](halftone.md) | a bundled portrait drawn as a print dot screen that rotates a quarter turn while the tone stays the same, with the inverted reading on mouse hold, and plotter-ready through `--export-svg` (`drawHalftone`, `pitch`, `angle`, `inverted`) |
| [HilbertLine](hilbertline.md) | a bundled profile photograph's stipple points sorted along a Hilbert curve and drawn as one line that appears and unwinds, a single sort in place of the single line's tour (`hilbertSorted`); at a low `level` the curve is drawn faintly under the line to show the order it imposes |
| [LuminanceMelt](luminancemelt.md) | a bundled portrait melted by a warped noise field and recolored through a four-stop palette, with the source image on mouse hold (`.melt`, `renderTarget`, `filtered`) |
| [PixelField](pixelfield.md) | a blank image painted pixel by pixel into a flowing colormap field, then drawn under a `tint` that animates between warm and cool, with a row of swatches read back with `get` (`Image(width:height:)`, `image[x, y]`, `tint`) |
| [Autostereogram](autostereogram.md) | a turning ring of blocks hidden in a field of noise, where the relief moves out as far as the eyes can still pair the repeated pattern, with the depth map on mouse hold (`Image.autostereogram`) |
| [PixelArt](pixelart.md) | a bundled portrait dithered to black and white at a quarter of the canvas and drawn at four canvas pixels a cell, blended on one side of a split that follows the pointer and read as hard cells on the other (`imageSampling(.nearest)`, `dithered(.atkinson, to:)`, `withClip`) |
| [PhotoMosaic](photomosaic.md) | a bundled portrait rebuilt from a hundred small pieces cut from the twenty sample photographs, where each cell takes the picture nearest to it by average color, and the tint changes over the loop (`Image.mosaic`, `drawMosaic`, `averageColor`) |
| [PixelSort](pixelsort.md) | a photographed alley melted into falling streaks, where the sort window widens and narrows over the loop, with a second axis on mouse hold (`Image.pixelSorted`, threshold intervals, `reversed`) |
| [SeamCarve](seamcarve.md) | a photographed alley made narrower in two ways, with the removed seams drawn over the source: carved, so the sky goes and the walls keep their width, and squeezed on mouse hold, so they lean (`Image.seamCarved`, `seamMap`, `seams`) |
| [SingleLine](singleline.md) | a bundled profile photograph drawn by one unbroken line that appears and then unwinds, built from stipple points joined by a traveling-salesman tour, and plotter-ready through `--export-svg` (`singleLine(of:points:)`, `cutoff`) |
| [SlitScan](slitscan.md) | time spread across space over a painted feed: the classic left-to-right scan, radial time on mouse hold, and the live source shown as an inset (`SlitScan`, `push`, `image(delay:)`) |
| [SpriteSheet](spritesheet.md) | eight frames of a turning coin painted pixel by pixel into one sheet, the sheet shown with the frame being drawn outlined, and three coins turned from it at half, once, and twice its size, each frame drawn straight from its cell (`drawImage` with a source rectangle) |
| [SpanningTree](spanningtree.md) | a bundled profile photograph's stipple points joined by the minimum spanning tree, so the dots become veins drawn chain by chain in plotting order, and plotter-ready through `--export-svg` (`spanningTree(of:points:)`) |
| [StringArt](stringart.md) | a bundled profile photograph wound from one continuous thread over 200 rim pins, where each chord is chosen greedily for the darkness it still covers, and the winding builds up live (`StringArt`, `step`, `thread`) |

Run one with `swift run Example-Images-<Name>`, for example `swift run Example-Images-PixelField`.
