creepyface-dance

A point provider for Creepyface to make your face dance.

Usage no npm install needed!

<script type="module">
  import creepyfaceDance from 'https://cdn.skypack.dev/creepyface-dance';
</script>

README

Creepyface Dance 💃 · npm version

A point provider for Creepyface to make your face dance.

Usage

<script src="https://creepyface.io/creepyface.js"></script>
<script src="https://unpkg.com/creepyface-dance"></script>
<img
  data-creepyface
  data-points="bensound-buddy"
  src="https://creepyface.io/img/0/serious"
  data-src-hover="https://creepyface.io/img/0/hover"
  data-src-look-0="https://creepyface.io/img/0/0"
  data-src-look-45="https://creepyface.io/img/0/45"
  data-src-look-90="https://creepyface.io/img/0/90"
  data-src-look-135="https://creepyface.io/img/0/135"
  data-src-look-180="https://creepyface.io/img/0/180"
  data-src-look-225="https://creepyface.io/img/0/225"
  data-src-look-270="https://creepyface.io/img/0/270"
  data-src-look-315="https://creepyface.io/img/0/315"
/>
<audio
  src="https://www.bensound.com/bensound-music/bensound-buddy.mp3"
  controls
></audio>
<script>
  const { repeat, circle } = creepyfaceDance.moves
  creepyfaceDance.makePointProvider({
    name: 'bensound-buddy',
    audio: document.querySelector('audio'),
    bpm: 150,
    firstBeat: 0,
    choreography: repeat(4)([
      ...repeat(20)(['w', 'e', 'n', 's']),
      ...repeat(20)(['nw', 'ne', 'sw', 'se']),
      ...repeat(20)(circle('n')),
      ...repeat(20)(circle('s', true)),
    ]),
  })
</script>

Run this example on codepen.

makePointProvider parameters

Name Description
name The name for the point provider to be created. This will be used for the data-creepyface attribute of your image.
audio The HTMLAudioElement with the song. Since browsers now block autoplaying media you will have to manually play the audio or call the play method in response to a user event.
bpm The number of beats per minute of your song. You can use this to calculate it.
firstBeat The time (in seconds) when the first beat happens in your song. This is when the first step of your choreography will be performed.
choreography The array of steps to perform on each beat. Valid steps are: n, ne, e, se, s, sw, w, nw, serious and crazy.

Available moves

Moves are functions that return an array of steps. CreepyfaceDance provides some of them out of the box:

Name Description Example
repeat Repeats the given sequence a specified amouht of times. repeat(10)(['s', 'n'])
circle An 8 step move describing a counterclockwise circle looking to every direction from the one provided. circle('e')
intercalate Constructs a secuence consisting of the itercalation of a given sequence and a step. intercalate(['n', 'w'], 'crazy')

You can build you own moves too!

Developing

  • yarn dev will spin up a test page.
  • yarn build will generate the production scripts under the dist folder.