/
draw.html
82 lines (69 loc) · 1.83 KB
/
draw.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
<head>
<title>Network</title>
<style type="text/css">
canvas{
float:left;
margin-right: 100px;
padding: 0px;
}
</style>
</head>
<body style='background-color: black'>
<canvas id='debug'></canvas>
<canvas id='chart'></canvas>
</body>
<script src="./lib/ai.js"></script>
<script src="./lib/debug.js"></script>
<script src="./config.js"></script>
<script>
var canvas2 = document.getElementById('debug');
var canvas3 = document.getElementById('chart');
canvas3.setAttribute('style', "border:1px solid #514747;background-color:#000000");
var points = new Array();
function load (name, structure)
{
string = localStorage.getItem(name);
if (!string)
{
return;
}
brain = JSON.parse(string);
brain.__proto__ = new Network(structure);
return brain;
}
function chart (name, canvas, width, height, max)
{
ratio = max/height;
scale = 5;
width = scale*width;
string = localStorage.getItem(name+".stats");
if (!string) return;
stats = JSON.parse(string);
//console.log (points);
points.push(stats.score);
if (points.length>width/scale)
{
points.shift();
}
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
let view = canvas.getContext("2d");
view.clearRect(0, 0, width*scale, height);
for (let i=0; i<points.length; i++)
{
x = i*scale;
y = points[i];
view.beginPath();
view.moveTo(x, height-y/ratio);
view.lineTo((i-1)*scale, height-points[i-1]/ratio);
view.strokeStyle = "red";
view.lineWidth = 2;
view.stroke();
}
}
setInterval(function(){
brain = load (config.name,config.brain.structure);
debug (brain,canvas2);
chart (config.name, canvas3, 200, 300, config.goal);
}, 500);
</script>