@explorables/dr_fibryll_and_mr_glyde

2.0.6 • Public • Published

Dr. Fibryll and Mr. Glyde

CC BY 4.0

The explorable illustrates spatio-temporal pattern formation in a system of pulse-coupled oscillators. The model is a generic model that yields spiral waves and target patterns depending on the parameter choices.

The explorable is part of the Complexity Exporables Collection. For more information about the system and its behavior consult the explorable

“Dr. Fibryll and Mr. Glyde” - Pulse-coupled oscillators on a lattice.

Usage & Installation

Just running the explorable

If you just want to run the explorable you can Click here.

Running a local copy

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/dr_fibryll_and_mr_glyde
open node_modules/@explorables/dr_fibryll_and_mr_glyde/dist/index.html 

Embedding the explorable in your site

If you want to embed the explorable in your site, you need to do three things:

  1. load the explorable package via <script> tag in your page header
  2. add a <div> container element
  3. 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/dr_fibryll_and_mr_glyde/dist/index.umd.js"></script>
		...
	</head>
		...
	<body>
		...
	    <div id="explorable_container"></div>
		...
	</body>
		...
	<script type="text/javascript">
		const explorable_instance = dr_fibryll_and_mr_glyde.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 dr_fibryll_and_mr_glyde("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/dr_fibryll_and_mr_glyde/dist/index.es.js';
	  	      const dr_fibryll_and_mr_glyde = load("explorable_container");
	    </script>
	    <script nomodule src="https://cdn.jsdelivr.net/npm/@explorables/dr_fibryll_and_mr_glyde/dist/index.umd.js"></script>	  
		...
	</head>
		...
	<body>
		...
	    <div id="explorable_container"></div>
		...
	</body>
		...
	<script nomodule type="text/javascript">
		const explorable_instance = dr_fibryll_and_mr_glyde.load("explorable_container")
	</script>
		...
</html>

Installing the whole package locally

If you want to modify or edit the explorable to make your own version:

Clone repository:

git clone https://github.com/dirkbrockmann/dr_fibryll_and_mr_glyde.git

Go to the directory, install, build and show using npm:

  1. cd dr_fibryll_and_mr_glyde
  2. npm install
  3. npm run build
  4. npm run preview

License

This work is licensed under a Creative Commons Attribution 4.0 International License.

CC BY 4.0

Package Sidebar

Install

npm i @explorables/dr_fibryll_and_mr_glyde

Weekly Downloads

19

Version

2.0.6

License

CC-BY-4.0

Unpacked Size

310 kB

Total Files

6

Last publish

Collaborators

  • dirkbrockmann