This explorable illustrates the Kuramoto model for phase coupled oscillators. This model is used to describe synchronization phenomena in natural systems, e.g. the flash synchronization of fire flies or wall-mounted clocks.
The explorable is part of the Complexity Exporables Collection. For more information about the system and its behavior consult the explorable
“Ride my Kuramotocycle!” - Synchronization of Phase-Coupled Oscillators - The Kuramoto Model
If you just want to run the explorable you can Click here.
If you want to run a local copy without having to rely on the nasty internet, the best way
is to install it via npm:
npm install @explorables/ride_my_kuramotocycle
open node_modules/@explorables/ride_my_kuramotocycle/dist/index.html If you want to embed the explorable in your site, you need to do three things:
- load the explorable package via
<script>tag in your page header - add a
<div>container element - add a
<script>at the end of the document that loads the explorable
like so:
<!doctype html>
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/npm/@explorables/ride_my_kuramotocycle/dist/index.umd.js"></script>
...
</head>
...
<body>
...
<div id="explorable_container"></div>
...
</body>
...
<script type="text/javascript">
const explorable_instance = ride_my_kuramotocycle.load("explorable_container")
</script>
...
</html>The header <script> tag loads the bundle, the <div> in the document is the container in which the explorable gets anchored when the function ride_my_kuramotocycle("explorable_container") gets executed at the bottom. This function needs the <div> container id as an argument. The function returns an instance of the explorable and writes it to explorable_instance. That variable contains functions like halt(), reset() and variables meta and config.
If you want to make use of ES modules instead of UMD, here's a way that will work on modern (ES support) and legacy browsers (UMD only).
<!doctype html>
<html>
<head>
...
<script type="module">
import load from 'https://cdn.jsdelivr.net/npm/@explorables/ride_my_kuramotocycle/dist/index.es.js';
const ride_my_kuramotocycle = load("explorable_container");
</script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@explorables/ride_my_kuramotocycle/dist/index.umd.js"></script>
...
</head>
...
<body>
...
<div id="explorable_container"></div>
...
</body>
...
<script nomodule type="text/javascript">
const explorable_instance = ride_my_kuramotocycle.load("explorable_container")
</script>
...
</html>If you want to modify or edit the explorable to make your own version:
Clone repository:
git clone https://github.com/dirkbrockmann/ride_my_kuramotocycle.gitGo to the directory, install, build and show using npm:
cd ride_my_kuramotocyclenpm installnpm run buildnpm run preview
This work is licensed under a Creative Commons Attribution 4.0 International License.
