## Clumsy mapping

Drawing app to be used for clumsy video mapping. Prototype for Making Things Bubblic - XPUB Grad Shop 2023.

## Install

The project is a small SVG drawing app developed with Vite and Vue.js

To install the project run

```
git clone https://git.xpub.nl/kamo/clumsy-mapping.git
cd clumsy-mapping
yarn
```

And then you can launch the dev server with

```
yarn dev
```

## Build static version for Soupboat

Clumsy mapping is live [here on the soupboat](https://hub.xpub.nl/soupboat/clumsy-mapping/)!

To build a static version from the vite project this is the command:

```
yarn vite build --outDir /var/www/html/clumsy-mapping --base /soupboat/clumsy-mapping --emptyOutDir
```

- `--outDir` set the output directory, in this case the public folder clumsy-mapping, that will be served from NGINX
- `--base` set the base url with the `/soupboat/` prefix
- `--emptyOutDir` empty the output directory before building the project

(note for future self: this config could come handy for [story baobab](https://git.xpub.nl/kamo/sb)

## Devlog

### 04.06.23

Free hand drawing video mapping. Did something similar for the Milan Fashion Week last year, where we were live light painting on models. That time the system was made with vvvv, but it felt heavy and not really portable. 

Here the plan is: a simple SVG drawing ~ live coding app , where clumsy hand drawn doodles can be styled on the fly with CSS.

behind the scenes: 
- Was almost there to use canvas, but using SVG offers an object oriented model out of the box
- Also made a lot of experiments with SVG hand drawing last year so it's nice to build on that

### 05.06.23

<video>
    <source src="cm2.mp4">
</video>

First prototype. It would be nice to add a part where to edit global css. It could come handy for defining animation for example.