kamo
/
clumsy-mapping
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hand drawn video mapping + css live coding. what could go wrong
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
604 KiB
Vue 85.7%
HTML 6.7%
JavaScript 5.5%
CSS 2.1%
 
 
 
 
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '32ab7e8e01'
${ noResults }
Go to file
km0 32ab7e8e01 drawing and style details 1 year ago
.vscode basic drawing and live css style 1 year ago
public basic drawing and live css style 1 year ago
src drawing and style details 1 year ago
.gitignore basic drawing and live css style 1 year ago
README.md basic drawing and live css style 1 year ago
index.html basic drawing and live css style 1 year ago
package.json basic drawing and live css style 1 year ago
vite.config.js basic drawing and live css style 1 year ago
yarn.lock basic drawing and live css style 1 year ago

README.md

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

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