Skip to content

Commit d46bd04

Browse files
backspacesbackspaces
committed
Begin updates of all onepagers to many recent AS changes
- Updated: hello.html, hellodat.html, mouse.html
1 parent bac07ec commit d46bd04

File tree

3 files changed

+65
-76
lines changed

3 files changed

+65
-76
lines changed

‎hello.html

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@
44
</head>
55
<body>
66
<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'
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 TwoDraw from 'https://agentscript.org/src/TwoDraw.js'
1311

1412
class HelloModel extends Model {
1513
constructor() {
@@ -22,16 +20,16 @@
2220
}
2321
setup() {
2422
this.turtles.setDefault('atEdge', 'bounce')
25-
this.turtles.create(this.population, (t) => {
23+
this.turtles.create(this.population, t => {
2624
const patch = this.patches.oneOf()
2725
t.setxy(patch.x, patch.y)
2826
})
29-
this.turtles.ask((t) => {
27+
this.turtles.ask(t => {
3028
this.links.create(t, this.turtles.otherOneOf(t))
3129
})
3230
}
3331
step() {
34-
this.turtles.ask((t) => {
32+
this.turtles.ask(t => {
3533
t.direction += util.randomCentered(this.wiggle)
3634
t.forward(this.speed)
3735
})
@@ -40,22 +38,21 @@
4038

4139
const model = new HelloModel()
4240
model.setup()
43-
// Use the model's world for the view:
44-
const view = new TwoView(model.world, { patchSize: 20 })
45-
function draw() {
46-
view.clear('black')
47-
view.drawLinks(model.links, { color: 'white' })
48-
view.drawTurtles(model.turtles, (t) => ({
49-
shape: 'dart',
50-
color: 'red',
51-
size: 1,
52-
}))
53-
}
41+
42+
const view = new TwoDraw(
43+
model,
44+
{ patchSize: 20 },
45+
{
46+
patchesColor: 'black',
47+
linksColor: 'white',
48+
turtlesColor: 'red',
49+
}
50+
)
5451

5552
util.timeoutLoop(
5653
() => {
5754
model.step()
58-
draw()
55+
view.draw()
5956
},
6057
500,
6158
33

‎hellodat.html

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@
44
</head>
55
<body>
66
<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'
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 TwoDraw from 'https://agentscript.org/src/TwoDraw.js'
11+
1312
import dat from 'https://unpkg.com/dat.gui/build/dat.gui.module.js'
1413

1514
class HelloModel extends Model {
@@ -23,16 +22,16 @@
2322
}
2423
setup() {
2524
this.turtles.setDefault('atEdge', 'bounce')
26-
this.turtles.create(this.population, (t) => {
25+
this.turtles.create(this.population, t => {
2726
const patch = this.patches.oneOf()
2827
t.setxy(patch.x, patch.y)
2928
})
30-
this.turtles.ask((t) => {
29+
this.turtles.ask(t => {
3130
this.links.create(t, this.turtles.otherOneOf(t))
3231
})
3332
}
3433
step() {
35-
this.turtles.ask((t) => {
34+
this.turtles.ask(t => {
3635
t.direction += util.randomCentered(this.wiggle)
3736
t.forward(this.speed)
3837
})
@@ -41,24 +40,24 @@
4140

4241
const model = new HelloModel()
4342
model.setup()
44-
// Use the model's world for the view:
45-
const view = new TwoView(model.world, { patchSize: 20 })
46-
function draw() {
47-
view.clear('black')
48-
view.drawLinks(model.links, { color: 'white' })
49-
view.drawTurtles(model.turtles, (t) => ({
50-
shape: 'dart',
51-
color: 'red',
52-
size: 1,
53-
}))
54-
}
43+
44+
const view = new TwoDraw(
45+
model,
46+
{ patchSize: 20 },
47+
{
48+
patchesColor: 'black',
49+
linksColor: 'white',
50+
turtlesColor: 'red',
51+
}
52+
)
5553

5654
// https://github.com/dataarts/dat.gui
5755
const gui = new dat.GUI()
5856
gui.add(model, 'speed', 0, 2)
5957
gui.add(model, 'wiggle', 0, 1)
58+
6059
// patchSize requires resetting the view, so uses a command
61-
gui.add(view, 'patchSize', 2, 25).onChange((val) => view.reset(val))
60+
gui.add(view, 'patchSize', 2, 25).onChange(val => view.reset(val))
6261
window.pause = false // modules do not have a "this", use window. sigh!
6362
gui.add(window, 'pause')
6463

@@ -68,7 +67,7 @@
6867
() => {
6968
if (pause) return
7069
model.step()
71-
draw()
70+
view.draw()
7271
},
7372
-1, // -1 means go forever, use "pause" to start/stop
7473
33

‎mouse.html

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,44 @@
44
</head>
55
<body>
66
<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 Mouse from 'https://backspaces.github.io/agentscript/src/Mouse.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 TwoDraw from 'https://agentscript.org/src/TwoDraw.js'
11+
import ColorMap from 'https://agentscript.org/src/ColorMap.js'
12+
import Mouse from 'https://agentscript.org/src/Mouse.js'
1513

1614
class MouseModel extends Model {
1715
constructor() {
1816
super(World.defaultOptions()) // Default "NL" world
19-
Object.assign(this, {
20-
population: 20,
21-
})
17+
this.population = 20
2218
}
2319
setup() {
2420
const { patches, turtles, links } = this
2521
// this is sorta slick NL use. Can easily be two liner.
26-
patches.nOf(20).ask((p) => p.sprout(1))
22+
patches.nOf(20).ask(p => p.sprout(1))
2723

2824
// again, kinda slick, can be broken into a couple of lines.
29-
turtles.ask((t) => links.create(t, turtles.otherOneOf(t)))
25+
turtles.ask(t => links.create(t, turtles.otherOneOf(t)))
3026
}
3127
step() {}
3228
}
3329

3430
const model = new MouseModel()
3531
model.setup()
36-
// Use the model's world for the view:
37-
const view = new TwoView(model.world, { patchSize: 15 })
32+
33+
const view = new TwoDraw(
34+
model,
35+
{ patchSize: 15 },
36+
{
37+
patchesColor: 'black',
38+
linksColor: l => (l === selectedLink ? 'red' : 'gray'),
39+
linksWidth: 2,
40+
turtlesShape: 'circle',
41+
turtlesColor: 'random',
42+
}
43+
)
44+
3845
const mouse = new Mouse(
3946
view.canvas,
4047
model.world,
@@ -54,36 +61,22 @@
5461
if (selectedTurtle) selectedTurtle.setxy(x, y)
5562
break
5663
case 'move':
57-
selectedLink = model.links.minOneOf((l) =>
64+
selectedLink = model.links.minOneOf(l =>
5865
l.distanceXY(x, y)
5966
)
6067
break
6168
case 'up':
6269
selectedTurtle = null
6370
break
6471
}
65-
draw()
66-
}
67-
68-
const colorMap = ColorMap.Bright16
69-
function draw() {
70-
view.clear('black')
71-
view.drawLinks(model.links, (l) => ({
72-
color: l === selectedLink ? 'red' : 'gray',
73-
width: 2,
74-
}))
75-
view.drawTurtles(model.turtles, (t) => ({
76-
shape: 'circle',
77-
color: colorMap.atIndex(t.id).css,
78-
size: 1,
79-
}))
72+
view.draw() // Draw whenever mouse has an event
8073
}
81-
draw()
8274

75+
// DOES NOTE NEED: Driven by dynamics of the mouse itself!
8376
// util.timeoutLoop(
8477
// () => {
8578
// model.step()
86-
// draw()
79+
// view.draw()
8780
// },
8881
// -1,
8982
// 33

0 commit comments

Comments
 (0)