This explorable illustrates spontaneous pattern formation in a spatial model in which points on a lattice interact by local positive feedback and negative long-range feedback.
The explorable is part of the Complexity Exporables Collection. For more information about the system and its behavior consult the explorable
“Keith Haring's Mexican Hat” - Pattern Formation by Local Excitation and Long-Range Inhibition
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/keith_harings_mexican_hat
open node_modules/@explorables/keith_harings_mexican_hat/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/keith_harings_mexican_hat/dist/index.umd.js"></script>
...
</head>
...
<body>
...
<div id="explorable_container"></div>
...
</body>
...
<script type="text/javascript">
const explorable_instance = keith_harings_mexican_hat.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 keith_harings_mexican_hat("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/keith_harings_mexican_hat/dist/index.es.js';
const keith_harings_mexican_hat = load("explorable_container");
</script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@explorables/keith_harings_mexican_hat/dist/index.umd.js"></script>
...
</head>
...
<body>
...
<div id="explorable_container"></div>
...
</body>
...
<script nomodule type="text/javascript">
const explorable_instance = keith_harings_mexican_hat.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/keith_harings_mexican_hat.gitGo to the directory, install, build and show using npm:
cd keith_harings_mexican_hatnpm installnpm run buildnpm run preview
This work is licensed under a Creative Commons Attribution 4.0 International License.
