p5Drawer
Install (CDN)
<!-- option one jsdelivr--> <!-- option two githack--> <!-- option three local source downloading from: https://github.com/doriclaudino/p5.drawer/blob/master/dist/p5.drawer.min.js -->
Install (NPM)
npm install p5.draweroryarn install p5.drawer
Requirements (CDN)
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.js"></script>
Requirements (NPM)
npm install p5oryarn install p5
Checkout our example on editor.p5js.org
//main function to create a drawer;//main function to move your drawer aroundmyDrawer; //load images on preloadlet myDrawer; { let img = ; let sound = ; let pos = ; //create the drawer myDrawer = ;} { myDrawer;}
Images from our sketch
Create a drawer animation emulating Scribit, AxiDraw extremely easy.
Gifs from our sketch
Features
- Control speed
- Control soundSpeed based on speed
- Change sounds
- Change Images
- Center images
- Save internal steps
Development
Fork this project
#use yarn or npm #install all deps yarn #auto-reload watch files src files, tests files #serve example at http://localhost:8000/ #serve test at http://localhost:8000/test/ yarn dev #clean and run new tests with coverage artifacts yarn test #final build version with optimizations yarn build ### continuos integrations #validate our ci configs yarn ci:validate #execute local ci using our config, it will fail on coverage yarn ci:executeLocal