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/nala/serious"
  data-src-hover="https://creepyface.io/img/nala/hover"
  data-src-look-0="https://creepyface.io/img/nala/0"
  data-src-look-45="https://creepyface.io/img/nala/45"
  data-src-look-90="https://creepyface.io/img/nala/90"
  data-src-look-135="https://creepyface.io/img/nala/135"
  data-src-look-180="https://creepyface.io/img/nala/180"
  data-src-look-225="https://creepyface.io/img/nala/225"
  data-src-look-270="https://creepyface.io/img/nala/270"
  data-src-look-315="https://creepyface.io/img/nala/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 amount 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.