source: js/viewer-f0/js/NeuronDrawer.js @ 161

Last change on this file since 161 was 161, checked in by mmichalski, 10 years ago

Draw neuron like in canvasutil

File size: 10.2 KB
Line 
1function NeuronDrawer() {
2    this._scene = undefined;
3    this._camera = undefined;
4    this._renderer = undefined;
5    this._canvasWidth = 500;
6    this._canvasHeight = 500;
7    this._containerContext = undefined;
8    this._controls = undefined;
9    this._showAxis = false;
10    this._unknown_symbol=[1,4, 25,25, 75,25, 75,75, 25,75, 25,25];
11    this._neuron_symbol=[1,4, 75,50, 25,0, 25,99, 75,50, 100,50];
12    this._inputonly_symbol=[1,5, 25,40, 35,40, 45,50, 35,60, 25,60, 25,40];
13    this._outputonly_symbol=[1,7, 75,50, 75,60, 55,60, 65,50, 55,40, 75,40, 75,50, 100,50];
14
15}
16
17NeuronDrawer.prototype.showPartAxis = function () {
18    this._showAxis = true;
19}
20
21NeuronDrawer.prototype._createRenderer = function () {
22    this._renderer = new THREE.CanvasRenderer();//WebGLRenderer({antialias: true});
23    this._renderer.setClearColor(0xffffff, 1);
24    this._renderer.setSize(this._canvasWidth, this._canvasHeight);
25    this._containerContext = $("#containerNeuron");
26    this._containerContext.append(this._renderer.domElement);
27}
28
29NeuronDrawer.prototype._prepareCamera = function () {
30    this._camera = new THREE.PerspectiveCamera(45, this._canvasWidth / this._canvasHeight, 1, 10000);
31    this._camera.position.set(0, 0, 10);
32    this._camera.lookAt(this._scene.position);
33    this._scene.add(this._camera);
34}
35
36NeuronDrawer.prototype._addLight = function () {
37    var directionalLight = new THREE.DirectionalLight(0xffffff);
38
39    directionalLight.position = this._camera.position;
40    directionalLight.intensity = 1;
41
42    this._scene.add(directionalLight);
43}
44
45NeuronDrawer.prototype.initializeScene = function () {
46
47    this._createRenderer();
48    this._scene = new THREE.Scene();
49    this._prepareCamera();
50    this._addLight();
51    this._controls = new THREE.TrackballControls(this._camera, this._renderer.domElement)
52    this._debug();
53}
54
55NeuronDrawer.prototype.renderScene = function () {
56
57    var self = this;
58    requestAnimationFrame(
59        function () {
60            self.renderScene();
61        });
62    this._renderer.render(this._scene, this._camera);
63    this._controls.update();
64
65}
66
67NeuronDrawer.prototype._debug = function () {
68    this._scene.add(new THREE.AxisHelper(20));
69}
70
71NeuronDrawer.prototype.drawNeuron = function (x, y, scheme) {
72
73
74    var obj = new THREE.Object3D();
75
76    var material = new THREE.LineBasicMaterial({
77        color: 0x0000ff
78    });
79    var position = 0;
80    var noOfBlocks = 0;//number of "blocks" to draw
81    var noOfLines = 0;//number of line to draw
82    noOfBlocks = scheme[position++];
83    for (var i = 0; i < noOfBlocks; i++) {
84        noOfLines = scheme[position++];
85
86        for (var j = 0; j < noOfLines; j++) {
87            var geometry = new THREE.Geometry();
88            geometry.vertices.push(new THREE.Vector3(scheme[position++] + x, scheme[position++] + y, 0));
89            geometry.vertices.push(new THREE.Vector3(scheme[position++] + x, scheme[position++] + y, 0));
90            position = position - 2; //get to last point in list
91            var line = new THREE.Line(geometry, material);
92            obj.add(line);
93        }
94        position = position + 2;//move to value which define number of lines to draw
95    }
96
97    var SCALE = 0.05;
98
99    obj.scale.set(SCALE, SCALE, SCALE);
100    obj.rotateX(Math.PI);//rotate 180 degree
101    //obj.translateY(-5.5);
102    this._scene.add(obj)
103}
104
105NeuronDrawer.prototype._getNumberOfInputs = function(number, connections){
106
107    var counter = 0;
108
109    for(var i = 0; i < connections.length; i++){
110        if(connections[i].getDestination() == number)
111            counter++;
112    }
113
114    return counter;
115}
116
117NeuronDrawer.prototype._getNumberOfOutputs = function(number, connections){
118    var counter = 0;
119
120    for(var i = 0; i < connections.length; i++){
121        if(connections[i].getSource() == number)
122            counter++;
123    }
124
125    return counter;
126}
127
128NeuronDrawer.prototype.drawConnection = function (id, connections, einfos) {
129
130    var destination = connections[id].getDestination();
131    var numberOfConnToDest = 0;
132    var numberOfDrawenCon = 0;
133
134    //check how many conenctions have the same destination
135    for (var i = 0; i < connections.length; i++) {
136        if (connections[i].getDestination() == destination)
137            numberOfConnToDest++;
138    }
139
140    //check how many connections had been drawen
141    for (var i = 0; i < id; i++) {
142        if (connections[i].getDestination() == destination)
143            numberOfDrawenCon++;
144    }
145
146    var positionY = (numberOfDrawenCon + 1) * 100 / (numberOfConnToDest + 1);
147    var positionX = (numberOfDrawenCon + 1) * 10 / (numberOfConnToDest + 1);
148
149    var x1 = einfos[connections[id].getDestination()].x;
150    var y1 = einfos[connections[id].getDestination()].y;
151
152    var x2 = einfos[connections[id].getSource()].x;
153    var y2 = einfos[connections[id].getSource()].y;
154
155    var material = new THREE.LineBasicMaterial({
156        color: 0x0000ff
157    });
158
159    var SCALE = 0.05;
160
161    var geometry = new THREE.Geometry();
162    geometry.vertices.push(new THREE.Vector3(100 + x2 * 100, 10 + 50 + y2 * 100, 0));
163    geometry.vertices.push(new THREE.Vector3(10 + 100 + x2 * 100, 10 + 50 + y2 * 100, 0));
164    var line = new THREE.Line(geometry, material);
165    line.scale.set(SCALE, SCALE, SCALE);
166    this._scene.add(line);
167
168
169    var geometry1 = new THREE.Geometry();
170    geometry1.vertices.push(new THREE.Vector3(10 + positionX + x1 * 100, 10 + positionY + y1 * 100, 0));
171    geometry1.vertices.push(new THREE.Vector3(10 + 25 + x1 * 100, 10 + positionY + y1 * 100, 0));
172    var line1 = new THREE.Line(geometry1, material);
173
174    line1.scale.set(SCALE, SCALE, SCALE);
175    this._scene.add(line1);
176
177    //bezposredni poprzednik - to koniec :)
178    if (x1 == x2 + 1)//kazdy polozony w kolumnie po lewej ma jedna ukosna linie
179    {
180        var geometry = new THREE.Geometry();
181        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0));
182        geometry.vertices.push(new THREE.Vector3(110 + x2 * 100, 10 + 50 + y2 * 100, 0));
183        var line = new THREE.Line(geometry, material);
184        line.scale.set(SCALE, SCALE, SCALE);
185        this._scene.add(line);
186        return;
187    }
188
189    //pierwszy pionowy
190    if (y1 >= y2) {
191        var geometry = new THREE.Geometry();
192        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 60 + y2 * 100, 0));
193        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 105 + y2 * 100, 0));
194        var line = new THREE.Line(geometry, material);
195        line.scale.set(SCALE, SCALE, SCALE);
196        this._scene.add(line);
197        return;
198    }
199
200    else {
201        var geometry = new THREE.Geometry();
202        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 60 + y2 * 100, 0));
203        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 15 + y2 * 100, 0));
204        var line = new THREE.Line(geometry, material);
205        line.scale.set(SCALE, SCALE, SCALE);
206        this._scene.add(line);
207        return;
208    }
209
210
211    //poziomy
212    if (y1 >= y2) {
213        var geometry = new THREE.Geometry();
214        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 105 + y2 * 100, 0));
215        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 105 + y2 * 100, 0));
216        var line = new THREE.Line(geometry, material);
217        line.scale.set(SCALE, SCALE, SCALE);
218        this._scene.add(line);
219        return;
220        //g.drawLine((int) ((110 + (x2 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom));
221    }
222    else {
223        var geometry = new THREE.Geometry();
224        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 15 + y2 * 100, 0));
225        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 15 + y2 * 100, 0));
226        var line = new THREE.Line(geometry, material);
227        line.scale.set(SCALE, SCALE, SCALE);
228        this._scene.add(line);
229        return;
230        //g.drawLine((int) ((110 + (x2 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom));
231    }
232
233
234    //drugi pionowy
235    if (y1 >= y2) {
236        var geometry = new THREE.Geometry();
237        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0));
238        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 105 + y2 * 100, 0));
239        var line = new THREE.Line(geometry, material);
240        line.scale.set(SCALE, SCALE, SCALE);
241        this._scene.add(line);
242        return;
243        //g.drawLine((int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((10 + polozenieY + y1 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom));
244    }
245    else {
246        var geometry = new THREE.Geometry();
247        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0));
248        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 15 + y2 * 100, 0));
249        var line = new THREE.Line(geometry, material);
250        line.scale.set(SCALE, SCALE, SCALE);
251        this._scene.add(line);
252        return;
253        //g.drawLine((int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((10 + polozenieY + y1 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom));
254    }
255
256}
257
258
259NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes)
260{
261    var schema = this._unknown_symbol;
262    var type = neurons[number].getSchemeID();
263
264    if(type != undefined)
265    {
266        if(classes[type].getScheme().length != 0)
267        {
268            if(this._getNumberOfInputs(number, connections) == 0)
269                schema = this._outputonly_symbol;
270            else if (this._getNumberOfOutputs(number, connections) == 0)
271                schema = this._inputonly_symbol;
272            else
273                schema = this._neuron_symbol;
274        }
275    }
276
277    return schema;
278}
279
280NeuronDrawer.prototype.drawNetwork = function (neurons, connections, layouts, classes) {
281
282    for (var i = 0; i < layouts.length; i++) {
283        var scheme = undefined;
284
285        scheme = this._chooseSchema(i,neurons, connections, classes)
286
287        this.drawNeuron(layouts[i].x * 100  , -layouts[i].y * 100 , scheme);
288    }
289
290    //for (var i = 0; i < connections.length; i++)
291    //    this.drawConnection(i, connections, einfos);
292}
293
294
295NeuronDrawer.prototype.debugTest = function () {
296
297}
298
Note: See TracBrowser for help on using the repository browser.