agentscript
Version:
AgentScript Model in Model/View architecture
340 lines (295 loc) • 12.6 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Examples</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Ubuntu+Mono&display=swap"
/>
<style>
:root {
--thumb-width: 240px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
/* body {
font-family: "Lato", sans-serif;
} */
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ===== header ===== */
header {
display: flex;
justify-content: space-between;
/* flex-wrap: wrap; */
align-items: center;
background-color: lightgray;
font-size: 22px;
height: 80px;
}
header .nav-button {
/* border: 2px solid red; */
/* Establishes header height */
margin: 10px;
padding: 4px;
display: flex;
column-gap: 40px;
}
header a {
/* border: 2px solid blue; */
padding: 0 4px;
}
/* ===== section ===== */
section {
/* border: 2px solid black; */
max-width: 900px;
margin: 100px auto 0px auto;
padding: 0 20px;
/* padding-top: calc(50px + 20px);
padding-left: 20px;
padding-right: 20px;
margin: 0px auto; */
/* margin: 100px 40px; */
/* padding: 0 5% */
}
section .tutorials-grid {
/* border: 2px solid red; */
margin-top: 30px;
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 30px;
/* gap: 0 10%; */
/* last row not right */
/* justify-content: space-around; */
}
section .tutorial-panel {
margin-bottom: 40px;
color: black;
width: var(--thumb-width);
text-decoration: none;
}
section .tutorial-panel:hover .tutorial-title {
text-decoration: underline;
}
section .tutorial-thumb {
width: var(--thumb-width);
min-height: 200px;
}
section .tutorial-title {
font-size: 20px;
margin-top: 4px;
margin-bottom: 10px;
}
section .tutorial-description {
font-size: 12px;
/* font-weight: lighter; */
}
.imageborder {
border: 2px solid lightgray;
}
</style>
</head>
<body>
<header>
<div class="nav-button">
<a href="./index.html">Agentscript</a>
</div>
<div class="nav-button">
<a href="./examples.html">Examples</a>
<a
href="https://glitch.com/edit/#!/agentscript-template?path=README.md"
>Editor</a
>
<a href="https://code.agentscript.org/docs">Docs</a>
<a href="https://code.agentscript.org">Code</a>
</div>
</header>
<section class="center-column">
<h1>Example Models</h1>
<div class="tutorials-grid">
<!-- <a class="tutorial-panel" href="https://glitch.com/edit/#!/agentscript-template" target=”_blank”> -->
<a
class="tutorial-panel"
href="https://code.agentscript.org/views2/template.html"
target="”_blank”"
>
<!-- <a
class="tutorial-panel"
href="https://code.agentscript.org/examples/editor.html?example=Template"
target="”_blank”"
> -->
<img class="tutorial-thumb" src="./thumbs/template.png" />
<div class="tutorial-title">Template Tutorial</div>
<p class="tutorial-description">
This is a template for starting out a new Model from
scratch. It has a very simple TemplateModel that shows
use of turtles and links, along with an index.html file
providing a View and an Animator to run the model.
</p>
</a>
<!-- <a class="tutorial-panel" href="https://glitch.com/edit/#!/agentscript-ants" target=”_blank”> -->
<a
class="tutorial-panel"
href="https://code.agentscript.org/views2/ants.html"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/ants.png" />
<div class="tutorial-title">Ants</div>
<p class="tutorial-description">
Ants find the shortest path to food by leaving a trail
of evaporating pheromones in their environment. A
classic example of stigmergic behavior.
</p>
</a>
<!-- <a class="tutorial-panel" href="https://glitch.com/edit/#!/agentscript-ants-elements" target=”_blank”> -->
<a
class="tutorial-panel"
href="https://code.agentscript.org/uielements/ants.html"
target="”_blank”"
>
<img
class="tutorial-thumb imageborder"
src="./thumbs/antselements.jpg"
/>
<div class="tutorial-title">Ants Elements</div>
<p class="tutorial-description">
This uses the uielements/ controls to manipulate and
view the Ants model properties.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-diffuse"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/diffuse.png" />
<div class="tutorial-title">Diffusion</div>
<p class="tutorial-description">
Diffusion is the process by which particles move from an
area of higher concentration to an area of lower
concentration. Here two turtles travel through patches,
dropping a random value on patches and diffusing these
values.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-fire"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/fire.png" />
<div class="tutorial-title">Fire</div>
<p class="tutorial-description">
Fire spreading on patches based on neighbor
probabilities.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-flock"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/flock.png" />
<div class="tutorial-title">Flocking</div>
<p class="tutorial-description">
How do flocks form without a leader? Craig Reynolds, in
1986, found that three simple rules for individuals
birds results in flocking behaviour.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-kelpforest"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/kelpforest.png" />
<div class="tutorial-title">Kelp Forest</div>
<p class="tutorial-description">
This shows how a Kelp Forest evolves over time, with the
interaction between kelp, urchins and sea stars. See the
README.md for details.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-kelpforest-mvc"
target="”_blank”"
>
<img
class="tutorial-thumb imageborder"
src="./thumbs/kelpforestmvc.jpg"
/>
<div class="tutorial-title">Kelp Forest MVC</div>
<p class="tutorial-description">
This is the Kelp Forest with controllers for setting up
the initial populations of the kelp, urchins and sea
stars with start/pause controls too.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-slimemold"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/slimemold.png" />
<div class="tutorial-title">Slime Mold</div>
<p class="tutorial-description">
How do many single-celled organisms coordinate to form
groups?
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-tsp"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/tsp.png" />
<div class="tutorial-title">TSP</div>
<p class="tutorial-description">
The Traveling Sales Person which computes the shortest
distance touching each node in a graph.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-tsp-elements"
target="”_blank”"
>
<img
class="tutorial-thumb imageborder"
src="./thumbs/tspelements.jpg"
/>
<div class="tutorial-title">TSP Elements</div>
<p class="tutorial-description">
This uses the uielements/ controls to manipulate and
view the TSP model properties.
</p>
</a>
<a
class="tutorial-panel"
href="https://glitch.com/edit/#!/agentscript-tsp-mvc"
target="”_blank”"
>
<img class="tutorial-thumb" src="./thumbs/tsp-mvc.jpg" />
<div class="tutorial-title">TSP MVC</div>
<p class="tutorial-description">
The Traveling Sales Person which computes the shortest
distance touching each node in a graph. This version has
several Controllers, the "C" in MVC.
</p>
</a>
</div>
</section>
</body>
</html>