jmotion - Juggling Simulator Library ver 2.0

jmotion is a JavaScript library for running juggling simulator on the web. It is pronounced like "Jay-motion". You can easily execute animation by specifying "siteswap", which is a numerical sequence that represents the juggling pattern, or you can control its part by directly specifying the coordinates of graphic elements.

sample app

How to use

First, write the following line in <head> block of the HTML file.

<script src="https://7131.github.io/jmotion/v20/jmotion.js"></script>

The URL of the original file is specified in the src attribute. You can download this file and install it on your own computer or server, but then specify the installed location in the src attribute.

Then put the <svg> tag in the <body> block.

<svg id="board" width="300" height="300"></svg>

The id attribute can be any string, but here I set it to "board". You can also set the size freely. I think it is usually set in the stylesheet. Depending on the environment, the namespace attribute xmlns="http://www.w3.org/2000/svg" is required, so specify it if it does not display.

Preparations are over. After the <svg> is displayed, you can run the simulator by specifying it to the Facade object inside the <script> tag. For example, the JavaScript for throwing siteswap 3 would be:

<script>
const facade = new jmotion.Facade("#board");
facade.startJuggling("3");
</script>

Object correlation

The following diagram shows the correlation between the objects defined in the jmotion namespace and the HTML tags.

Facade Animator Core CalmGenerator Siteswap <html> <svg> <script> draw create use
Facade
This object controls other objects as an interface for the simulator.
Animator
This object performs animation by gradually changing the coordinates of props and arms and letting the Core draw them.
Core
This object draws props and arms into the <svg> tag.
CalmGenerator
This object generates a list of coordinates representing props and arms movements.
Siteswap
This object parses the input string and converts it into data that can be easily handled by the program.

Reference

When you load this library, it adds the jmotion namespace to your global namespace. All the objects shown below belong to the jmotion namespace.

Version history

ver 2.0
The following items have been added or modified.
  1. The get method with no arguments and the set method with one argument have been changed to properties.
  2. Properties that do not need to be updated have been changed to read-only.
  3. The name BasicCreator has been changed to BasicGenerator.
  4. Added CalmGenerator and set it as the default generator.
  5. Added an generator to the Facade constructor arguments.
  6. Added a property to Animator that allows to change the drawing speed.
  7. Modified Core so that not only <svg> but also <symbol> can be used.
  8. The siteswap notation has been revised to accommodate cases where only a single character exists within the [ ] brackets.
  9. Rewrote the program using class declarations.
  10. Refactored several other parts.
ver 1.0
This is the first version of jmotion.