Package Exports

p5.drawer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (p5.drawer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

p5Drawer

npm bundle size

Install (CDN)

<!-- option one jsdelivr-->
<script src="https://cdn.jsdelivr.net/npm/p5.drawer@1.0.0/dist/p5.drawer.min.js"></script>

<!-- option two githack-->
<script src="https://raw.githack.com/doriclaudino/p5.drawer/master/dist/p5.drawer.min.js"></script>

<!-- 
  option three local source
  downloading from: https://github.com/doriclaudino/p5.drawer/blob/master/dist/p5.drawer.min.js -->
<script src="../p5.drawer.min.js"></script>

Install (NPM)

npm install p5.drawer
or
yarn 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 p5
or
yarn install p5

Checkout our example on editor.p5js.org

//main function to create a drawer
createDrawer([image], [audio], [position]);
//main function to move your drawer around
myDrawer.moveTo(mouseX, mouseY, [speed]);

//load images on preload
let myDrawer;
function preload() {
  let img = loadImage('image_path');
  let sound = loadSound('sound_path');
  let pos = createVector(20, 20);

  //create the drawer
  myDrawer = createDrawer(img, sound, pos);
}

function draw() {
  myDrawer.moveTo(mouseX, mouseY);
}

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

Resources

References and Inspiration

p5.js-sound. Licensed under The MIT License (MIT). github
Daniel Shiffmmann @shiffmann github
Stefano Padoan @stefanopadoan.art instagram
Samer Dabra @spongenuity instagram