Creepyface-dance NPM

Creepyface Dance 💃 ·

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')`