-
Notifications
You must be signed in to change notification settings - Fork 52
/
40_Swarm.html
129 lines (94 loc) · 3.65 KB
/
40_Swarm.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cindy JS</title>
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<link rel="stylesheet" href="../css/cindy.css">
</head>
<body style="font-family:Arial;">
<h1>Fish Swarm</h1>
<script id='init' type='text/x-cindyscript'>
sizes=apply(allmasses(),random()*.6+.5);
colors=apply(allmasses(),random());
</script>
<script id='csmove' type='text/x-cindyscript'>
pts=allmasses();
n=10;
s=sum(pts,#.xy);
forall(pts,p,
sorted=sort(pts,abs(p.xy-#.xy));
pmid=sum(2..(n+1),(sorted_#).xy)/n;
vmid=sum(2..(n+1),(sorted_#).v)/n;
vd=(pmid-p.xy);
middir=((0,0)-p.xy);
v=p.v+vd*.1 +vmid*.01+0.01*middir;
// p.color=hue(abs(v)/6);
if(abs(v)>3,v=3*v/abs(v));
p.v=v;
);
nn=length(pts);
forall(1..nn,p=pts_#;
ang=arctan2(p.vx,-p.vy);
drawimage(p,"fishr",angle->ang,scale->sizes_#,alpha->colors_#);
drawimage(p,"fishb",angle->ang,scale->sizes_#,alpha->1-colors_#);
);
//X.xy=[4,3];
//Y.xy=[-5,4];
//Z.xy=[5,-4];
</script>
<div id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>
<script type="text/javascript">
nn=40;
b=10;
var gslp=[
{name:"B", type:"Free", pos:[-b,b],color:[0,0,0],size:3},
{name:"C", type:"Free", pos:[-b,-b],color:[0,0,0],size:3},
{name:"D", type:"Free", pos:[b,-b],color:[0,0,0],size:3},
{name:"E", type:"Free", pos:[b,b],color:[0,0,0],size:3},
{name:"a", type:"Segment", args:["B","C"],color:[0,0,0],size:1 },
{name:"b", type:"Segment", args:["C","D"],color:[0,0,0],size:1 },
{name:"c", type:"Segment", args:["D","E"],color:[0,0,0],size:1 },
{name:"d", type:"Segment", args:["E","B"],color:[0,0,0],size:1 }
];
for(var i=0;i<nn;i++){
gslp.push(
{name:"A"+i, type:"Free",
pos:[(Math.random()-.5)*14,(Math.random()-.5)*14],
color:[1,.5,.5],size:.1}
)
};
var physics=[
{behavior:{type:"Environment",gravity:0,
accuracy:10,deltat:0.1,
balls:false,charges:true,friction:0}},
{name:"a", behavior:{type:"Bouncer"}},
{name:"b", behavior:{type:"Bouncer"}},
{name:"c", behavior:{type:"Bouncer"}},
{name:"d", behavior:{type:"Bouncer"}},
];
for(var i=0;i<nn;i++){
physics.push(
{name:"A"+i, behavior:{
type:"Mass",
vx:Math.random()-.5,
vy:Math.random()-.5,
charge:1},
}
)
};
var cdy = CindyJS({canvasname:"CSCanvas",
defaultAppearance: {dimDependent: 0.7},
movescript:"csmove",
initscript:"init",
geometry:gslp,
behavior:physics,
images:{fishr:"fish/fishr.png",fishb:"fish/fishb.png"}
}
);
</script>
<button onclick="cdy.play()" type="button" style="position:absolute; top:610px;left:60px" >Play</button>
<button onclick="cdy.pause()" type="button" style="position:absolute; top:610px;left:110px" >Pause</button>
<button onclick="cdy.stop()" type="button" style="position:absolute; top:610px;left:170px" >Stop</button>
</body>
</html>