Nostradamus Prophecy Machine
    Have ideas to improve npm?Join in the discussion! »

    creepyface-dance
    TypeScript icon, indicating that this package has built-in type declarations

    8.1.0 • Public • Published

    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.

    Install

    npm i creepyface-dance

    DownloadsWeekly Downloads

    51

    Version

    8.1.0

    License

    MIT

    Unpacked Size

    12.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar