https://github.com/cdaein/ssam-thing-examples

Example sketches using Ssam.js and thi.ng/umbrella
https://github.com/cdaein/ssam-thing-examples

canvas create-ssam creative-coding ssam thing-umbrella

Last synced: about 2 months ago
JSON representation

Example sketches using Ssam.js and thi.ng/umbrella

• Host: GitHub
• URL: https://github.com/cdaein/ssam-thing-examples
• Owner: cdaein
• Created: 2024-02-24T17:26:12.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-12T17:27:44.000Z (9 months ago)
• Last Synced: 2025-02-06T02:44:11.492Z (4 months ago)
• Topics: canvas, create-ssam, creative-coding, ssam, thing-umbrella
• Language: TypeScript
• Homepage:
• Size: 322 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ssam-thing-examples

A collection of creative coding example sketches using [Ssam.js](https://github.com/cdaein/ssam) and [Thing Umbrella](https://github.com/thi-ng/umbrella).

## How to run

1. Clone this repo.

2. `npm install`

3. `SKETCH= npm run dev`

## Examples

|                 source file                 |                     result                     |                 notes                 |

| :-----------------------------------------: | :--------------------------------------------: | :-----------------------------------: |

|   [`basic-shapes`](./src/basic-shapes.ts)   |   ![basic shapes](./output/basic-shapes.png)   |             basic drawing             |

| [`color-gradient`](./src/color-gradient.ts) | ![color gradient](./output/color-gradient.png) |         oklab color gradient          |

|     [`image-load`](./src/image-load.ts)     |   ![image loading](./output/image-load.png)    |          load an image file           |

|     [`paths-hole`](./src/paths-hole.ts)     |  ![paths with holes](./output/paths-hole.png)  |   path with a hole (counter-shape)    |

|          [`paths`](./src/paths.ts)          |          ![paths](./output/paths.png)          |   different types of path drawings    |

|     [`svg-export`](./src/svg-export.ts)     |     ![svg export](./output/svg-export.png)     | convert Canvas drawing to an SVG file |

|     [`svg-to-canvas`](svg-to-canvas.ts)     |  ![svg to canvas](./output/svg-to-canvas.png)  |   parse SVG file and draw on Canvas   |