|
4 | 4 | </head>
|
5 | 5 | <body>
|
6 | 6 | <script type="module">
|
7 |
| - import { |
8 |
| - World, |
9 |
| - Model, |
10 |
| - util, |
11 |
| - } from 'https://backspaces.github.io/agentscript/dist/agentscript.esm.js' |
12 |
| - import TwoView from 'https://backspaces.github.io/agentscript/src/TwoView.js' |
13 |
| - import ColorMap from 'https://backspaces.github.io/agentscript/src/ColorMap.js' |
14 |
| - import Color from 'https://backspaces.github.io/agentscript/src/Color.js' |
| 7 | + import World from 'https://agentscript.org/src/World.js' |
| 8 | + import Model from 'https://agentscript.org/src/Model.js' |
| 9 | + import util from 'https://agentscript.org/src/util.js' |
| 10 | + import Color from 'https://agentscript.org/src/Color.js' |
| 11 | + import TwoDraw from 'https://agentscript.org/src/TwoDraw.js' |
15 | 12 | import dat from 'https://unpkg.com/dat.gui/build/dat.gui.module.js'
|
16 | 13 |
|
17 | 14 | class plotLogistic extends Model {
|
18 | 15 | constructor() {
|
19 |
| - super(World.defaultOptions(100,100)) // Default "NL" world |
| 16 | + super(World.defaultOptions(100, 100)) // Default "NL" world |
20 | 17 | Object.assign(this, {
|
21 | 18 | population: 300,
|
22 | 19 | m: 0.1,
|
23 | 20 | L: this.world.maxY / 2.0,
|
24 |
| - b: -1 * this.world.maxY / 4.0, |
| 21 | + b: (-1 * this.world.maxY) / 4.0, |
25 | 22 | k: 0.2,
|
26 |
| - x0:1, |
27 |
| - plotType:'logistic' |
| 23 | + x0: 1, |
| 24 | + plotType: 'logistic', |
28 | 25 | })
|
29 | 26 | }
|
30 | 27 | setup() {
|
31 | 28 | this.turtles.setDefault('atEdge', 'bounce')
|
32 |
| - this.patches.with(p=>p.y==0).ask(p=>p.sprout(1)) |
| 29 | + this.patches.with(p => p.y == 0).ask(p => p.sprout(1)) |
33 | 30 | }
|
34 | 31 | step() {
|
35 |
| - this.turtles.ask((t) => { |
36 |
| - t.y = (this.plotType == 'line') ? |
37 |
| - this.m * t.x + this.b |
38 |
| - : this.b + this.L / (1 + Math.exp( -1 * this.k * (t.x - this.x0 ) )) |
| 32 | + this.turtles.ask(t => { |
| 33 | + t.y = |
| 34 | + this.plotType == 'line' |
| 35 | + ? this.m * t.x + this.b |
| 36 | + : this.b + |
| 37 | + this.L / |
| 38 | + (1 + |
| 39 | + Math.exp( |
| 40 | + -1 * this.k * (t.x - this.x0) |
| 41 | + )) |
39 | 42 | })
|
40 | 43 | }
|
41 | 44 | }
|
42 | 45 |
|
43 | 46 | const model = new plotLogistic()
|
44 | 47 | model.setup()
|
45 | 48 |
|
46 |
| - // Use the model's world for the view: |
47 |
| - const view = new TwoView(model.world, { patchSize: 3 }) |
48 |
| - const axisColor = Color.typedColor(0,90,0).pixel |
49 |
| - const backgroundColor = Color.typedColor('black').pixel |
50 |
| - const grayColor = Color.typedColor(25,25,25).pixel |
51 |
| - |
52 |
| - //setupView |
53 |
| - view.createPatchPixels(i => backgroundColor) |
54 |
| - view.setPatchesPixels(model.patches, p => p.y == 0 || p.x == 0 |
55 |
| - ? axisColor |
56 |
| - : parseInt((p.y + model.world.maxY ) / 10) % 2 == parseInt( (p.x + model.world.maxX) / 10) % 2 ? grayColor : backgroundColor) |
| 49 | + const axisColor = Color.typedColor(0, 90, 0) |
| 50 | + const backgroundColor = Color.typedColor('black') |
| 51 | + const grayColor = Color.typedColor(25, 25, 25) |
57 | 52 |
|
58 |
| - function draw() { |
59 |
| - view.clear('black') |
60 |
| - view.drawPatches() |
61 |
| - view.drawTurtles(model.turtles, (t) => ({ |
62 |
| - shape: 'circle', |
63 |
| - color: 'red', |
64 |
| - size: 1, |
65 |
| - })) |
66 |
| - } |
| 53 | + // Use the model's world for the view: |
| 54 | + const { maxX, maxY } = model.world |
| 55 | + const floor = Math.floor |
| 56 | + const view = new TwoDraw( |
| 57 | + model, |
| 58 | + { patchSize: 3 }, |
| 59 | + { |
| 60 | + patchesColor: p => |
| 61 | + p.y == 0 || p.x == 0 |
| 62 | + ? axisColor |
| 63 | + : floor((p.y + maxY) / 10) % 2 === |
| 64 | + floor((p.x + maxX) / 10) % 2 |
| 65 | + ? grayColor |
| 66 | + : backgroundColor, |
| 67 | + turtlesShape: 'circle', |
| 68 | + turtlesColor: 'red', |
| 69 | + } |
| 70 | + ) |
67 | 71 |
|
68 | 72 | // https://github.com/dataarts/dat.gui
|
69 | 73 | const gui = new dat.GUI()
|
70 |
| - gui.add(model, 'plotType', [ 'line', 'logistic' ] ) |
| 74 | + gui.add(model, 'plotType', ['line', 'logistic']) |
71 | 75 | gui.add(model, 'm', -5, 5)
|
72 |
| - gui.add(model, 'b', -1 * model.world.maxY / 2, model.world.maxY / 2) |
73 |
| - gui.add(model, 'L', -1 * model.world.maxY / 2, model.world.maxY / 2) |
| 76 | + gui.add( |
| 77 | + model, |
| 78 | + 'b', |
| 79 | + (-1 * model.world.maxY) / 2, |
| 80 | + model.world.maxY / 2 |
| 81 | + ) |
| 82 | + gui.add( |
| 83 | + model, |
| 84 | + 'L', |
| 85 | + (-1 * model.world.maxY) / 2, |
| 86 | + model.world.maxY / 2 |
| 87 | + ) |
74 | 88 | gui.add(model, 'x0', -20, 20)
|
75 | 89 | gui.add(model, 'k', -1.25, 1.25)
|
76 | 90 | window.pause = false
|
|
81 | 95 | () => {
|
82 | 96 | if (pause) return
|
83 | 97 | model.step()
|
84 |
| - draw() |
| 98 | + view.draw() |
85 | 99 | },
|
86 | 100 | -1, // -1 means go forever, use "pause" to start/stop
|
87 | 101 | 33
|
|
0 commit comments