-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (167 loc) · 6.76 KB
/
index.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<html>
<head>
<title>Polygon Hill Climbing</title>
</head>
<script src = './js/helperFunctions.js'></script>
<script src = './js/gene.js'></script>
<script src = './js/member.js'></script>
<script src = './js/gene_population.js'></script>
<script src = './js/climber.js'></script>
<script src = './js/jsons.js'></script>
<style>
canvas{
border: 1px dotted black;
}
</style>
<body>
<script>
/*
To add:
TODO
Sizing of canvas depending on image
JSON point serialization
Optimize algorithm speed:
-Dynamically changing mutation Parameters
-Better mutation algorithms
-Better triangle Initialization (allow for better traversal of error space)
Next algorithm: Have all traits be able to be passed through genes,
allows for better top-down control of algorithm behavior.
Also use a fuckton of args in functions.
*/
var imageSrc = './ohouse.jpg';
//runtime variables
var count = 0; //used for drawing members
var generation_count = 0;
var mutRate = .8;
var addRate = .99; //add rate not directly added to object yet, buried deep in mutate code
var _running = true; //just a flag, don't touch
var max_tris = 250;
var breakout = false; //add variation to break out of local mins (which might not be important to this particular problem)
//yet to be initalized objects
var target;
var rawTarget;
var climber;
var imageHeight;
var imageWidth;
var imageObj;
var extract_genes = [];
//canvas code
var canvas = document.createElement('canvas');
canvas.id = 'canvas1';
canvas.height = 300;
canvas.width = 300;
imageHeight = canvas.height;
imageWidth = canvas.width;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
//Used for the shape extraction
var dragging = false;
var rectX1 = 0;
var rectY1 = 0;
var rectX2 = 0;
var rectY2 = 0;
var orig_x;
var orig_y; //this will break when i start adding new images.
function createImage(context){ //loads image and initializes population
imageObj = new Image();
imageObj.src = imageSrc;
imageObj.onload = function(){
canvas.width = imageObj.width;
canvas.height = imageObj.height;
orig_x = imageObj.width;
orig_y = imageObj.height;
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
loaded = true;
rawTarget = context.getImageData(0,0, canvas.width, canvas.height);
target = rawTarget.data;
climber = init_climber(target, canvas, max_tris, mutRate, addRate, breakout); //population initialized with image info
/*
document.addEventListener('mousedown', function(evt){
dragging = true;
var point = calculateOffset(evt.clientX, evt.clientY);
rectX1 = point.x;
rectY1 = point.y;
rectX2 = point.x;
rectY2 = point.y;
});
document.addEventListener('mousemove', function(evt){
if (dragging){
var point = calculateOffset(evt.clientX, evt.clientY);
rectX2 = point.x;
rectY2 = point.y;
}
})
document.addEventListener('mouseup', function(evt){
dragging = false;
extract_genes = extract(climber.members[0], [rectX1, rectY1, rectX2, rectY2], context);
//this extraction only works if the rectangle is drawn down right
});
*/
document.addEventListener('keydown', function(evt){
if (evt.keyCode === 32){ //space
count = 0; //reset count for drawing
run(climber);
climber.clear();
climber.members[1].render();
}
else if (evt.keyCode === 68){ //d
context.globalAlpha = 0;
context.putImageData(rawTarget, 0,0);
}
else if (evt.keyCode === 70){ //f
var factor = orig_x/canvas.width;
console.log(factor);
//need to calculate factor
rawTarget = scale(factor, canvas, climber, imageObj, context, target);
console.log(JSON.stringify(climber));
}
else if (evt.keyCode === 71){ //f
loadData(climber, canvas, target, 482, 320, one);
}
else if (evt.keyCode === 83){ //s
if (_running){
_running = false;
}
else _running = true;
console.log(generation_count);
}
else if (evt.keyCode === 49){ //1
var factor = 1/1.2;
rawTarget = scale(factor, canvas, climber, imageObj, context, target);
}
else if (evt.keyCode === 50){ //2
var factor = 1.2;
rawTarget = scale(factor, canvas, climber, imageObj, context, target);
}
}); //event listeners
function wrap(){
if (_running){
run(climber); //climber code
//rectangle
}
if (dragging){
climber.clear();
climber.members[1].render();
drawRectangle(context, rectX1, rectY1, rectX2, rectY2);
}
}
window.setInterval(wrap, 10);
};
}
createImage(context);
</script>
<p>
Genetic algorithm: evolves triangles to match a target image. Like all genetic algorithms takes a long, long time to converge.
<ul>
<li>To see what you're working with: press s to pause, then d to show the image </li>
<li>s to pause/play</li>
<li>d to draw target</li>
<li>f to savedata. (Logs to console). No good way to save stuff yet. </li>
<li>g to load an example, run over six hours</li>
<li>Space to run a generation</li>
<li>press '1' to scale by 1.2 </li>
<li>press '2' to scale by 1/1.2 </li>
</ul>
</p>
</body>
</html>