-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPSO_Visual_with_sliders.html
123 lines (105 loc) · 3.02 KB
/
PSO_Visual_with_sliders.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
<html>
<head>
<title>Visualized PSO</title>
<!--Graphics library (not mine)-->
<script src="js/lib/three.js"></script>
<!--GUI library (not mine)-->
<script src="js/lib/dat.gui.js"></script>
<!--My scripts:-->
<script src="js/Swarm.js"></script>
<script src="js/Vector2D_operations.js"></script>
<script src="js/PSO.js"></script>
<script src="js/MonoPlot2D.js"></script>
</head>
<body>
<nav style="position: absolute; top:0; left:0, height:2vh; z-index:999">
<a href="." style="color: #66ffff">Back to index.</a>
</nav>
<script>
"use strict";
/*TODO: Maybe drop three.js in favor of pure WebGL.*/
//Shorthands
var PI = Math.PI, cos = Math.cos, sin = Math.sin, max=Math.max, min=Math.min, abs=Math.abs, random=Math.random, exp=Math.exp;
//Globals for graphics
var renderer, scene, camera;
//Globals for simulation
var pso;
//Game loop function
var animate = (function() {
let t_start = 0.001*performance.now();
let ot = t_start;
return function(t) {
t *= 0.001;
let dt = (t-ot);// || 0.0000001; //0 not allowed
ot = t;
/*let phi = 0.5*(1+Math.sqrt(5));
pso.inertia = 0.95+0.05*Math.cos(t);
pso.cognitive = 0.05*(1+Math.cos(phi*t));
pso.social = 0.05*(1+Math.cos(phi**2*t));*/
pso.update(t, dt);
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
})();
//INITIALISATION
(function main() {
//Renderer setup
document.body.style = "overflow: hidden;";
var container = document.createElement("div");
Object.assign(container.style, {
position: "absolute",
top: 0,
left: 0,
width: "100vw",
height: "100vh"
});
document.body.appendChild(container);
let W = container.clientWidth;
let H = container.clientHeight;
W = Math.min(W,H);
H = W;
console.log("W=",W," H=",H);
Object.assign(container.style, {
width: W,
height: H
});
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(W, H);
//renderer.setClearColor(0x000000);
container.appendChild(renderer.domElement);
//Scene setup:
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
//Camera setup
camera = new THREE.OrthographicCamera(0, W, H, 0, 1, 200);
camera.position.set(0, 0, 100);
scene.add(camera);
//Define cost function:
let f = function([x,y]) {
let xr = x/W-0.5;
let yr = y/H-0.5;
return 2*(((xr**2+yr**2)/2)**0.5)*(0.5+0.45*Math.cos(10*xr))*(0.5+0.45*Math.cos(10*yr));
//return (xr**2+yr**2)**(1/2);
//return 100000000000+0.003*Math.abs(x-400) + Math.cos(x+y) -Math.sin(0.0001*x*y);
//return ((x-333)**2+(y-222)**2)*(0.1+Math.cos(x)**2);
};
//Create the landscape:
let landscape = new MonoPlot2D(W,H,f);
scene.add(landscape);
//Create the PSO pso:
pso = new PSO2D(["x","y"], [0,0], [W,H], undefined,
f,
0.97, 0.02, 0.03, 10000, 1, true,0.001);
scene.add(pso);
let gui = new dat.GUI();
gui.add(pso, "activeParticles", 1,10000);
gui.add(pso, "inertia", 0.8,1);
gui.add(pso, "cognitive", 0,0.1);
gui.add(pso, "social", 0,0.1);
gui.add(pso, "epsilon", 0, 0.002);
gui.add(pso, "reset");
requestAnimationFrame(animate);
})();
</script>
</body>
</html>