jmotion - Juggling Simulator Library

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/v10/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 passing 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 BasicCreator 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.
BasicCreator
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.