@explorables/hokus_fractus v2.0.5
Hokus Fractus!
A collection of regular fractals that illustrates the nature of self-similarity.
The explorable is part of the Complexity Exporables Collection. For more information about the system and its behavior consult the explorable
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/hokus_fractus
open node_modules/@explorables/hokus_fractus/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:
- 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/hokus_fractus/dist/index.umd.js"></script>
...
</head>
...
<body>
...
<div id="explorable_container"></div>
...
</body>
...
<script type="text/javascript">
const explorable_instance = hokus_fractus.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 hokus_fractus("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/hokus_fractus/dist/index.es.js';
const hokus_fractus = load("explorable_container");
</script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@explorables/hokus_fractus/dist/index.umd.js"></script>
...
</head>
...
<body>
...
<div id="explorable_container"></div>
...
</body>
...
<script nomodule type="text/javascript">
const explorable_instance = hokus_fractus.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/hokus_fractus.gitGo to the directory, install, build and show using npm:
cd hokus_fractusnpm installnpm run buildnpm run preview
License
This work is licensed under a Creative Commons Attribution 4.0 International License.
