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

Last change on this file since 193 was 193, checked in by Maciej Komosinski, 10 years ago

Set svn:eol-style native for all textual files
  • Property svn:eol-style set to native
File size: 14.0 KB
Line 
1function NeuronDrawer(context) {
2    this._scene = undefined;
3    this._camera = undefined;
4    this._renderer = undefined;
5    this._canvasWidth = 400;
6    this._canvasHeight = 400;
7    this._containerContext = context;
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    this._canvas = undefined;
15    this._neurons = undefined;
16}
17
18NeuronDrawer.prototype.initialize = function () {
19
20
21    //this._canvas = document.getElementById("containerNeuron");
22    /*
23    if (this._canvas.getContext){
24
25        // use getContext to use the canvas for drawing
26        var ctx = this._canvas.getContext('2d');
27
28        var lastX=this._canvas.width/2, lastY=this._canvas.height/2;
29        var dragStart,dragged;
30        this._canvas.addEventListener('mousedown',function(evt){
31            document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
32            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
33            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
34            dragStart = ctx.transformedPoint(lastX,lastY);
35            dragged = false;
36        },false);
37
38        this._canvas.addEventListener('mousemove',function(evt){
39            lastX = evt.offsetX || (evt.pageX - this._canvas.offsetLeft);
40            lastY = evt.offsetY || (evt.pageY - this._canvas.offsetTop);
41            dragged = true;
42            if (dragStart){
43                var pt = ctx.transformedPoint(lastX,lastY);
44                ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
45                redraw();
46            }
47        },false);
48        this._canvas.addEventListener('mouseup',function(evt){
49            dragStart = null;
50            if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
51        },false);
52
53        // Filled triangle
54        ctx.beginPath();
55        ctx.moveTo(25,25);
56        ctx.lineTo(105,25);
57        ctx.lineTo(25,105);
58        ctx.fill();
59
60        // Stroked triangle
61        ctx.beginPath();
62        ctx.moveTo(125,125);
63        ctx.lineTo(125,45);
64        ctx.lineTo(45,125);
65        ctx.closePath();
66        ctx.stroke();
67
68    }
69    else
70        alert("dupa");
71    //this._debug();*/
72}
73
74
75NeuronDrawer.prototype.showPartAxis = function () {
76    this._showAxis = true;
77}
78
79NeuronDrawer.prototype._createRenderer = function () {
80    this._renderer = new THREE.CanvasRenderer();//WebGLRenderer({antialias: true});
81    this._renderer.setClearColor(0xffffff, 1);
82    this._renderer.setSize(this._canvasWidth, this._canvasHeight);
83    //this._containerContext = $("#containerNeuron");
84    this._containerContext.append(this._renderer.domElement);
85}
86
87NeuronDrawer.prototype._prepareCamera = function () {
88    this._camera = new THREE.PerspectiveCamera(45, this._canvasWidth / this._canvasHeight, 1, 10000);
89    this._camera.position.set(0, 0, 10);
90    this._camera.lookAt(this._scene.position);
91    this._scene.add(this._camera);
92}
93
94NeuronDrawer.prototype._addLight = function () {
95    var directionalLight = new THREE.DirectionalLight(0xffffff);
96
97    directionalLight.position = this._camera.position;
98    directionalLight.intensity = 1;
99
100    this._scene.add(directionalLight);
101}
102
103NeuronDrawer.prototype.initializeScene = function () {
104
105    this._createRenderer();
106    this._scene = new THREE.Scene();
107    this._prepareCamera();
108    this._addLight();
109    this._controls = new THREE.TrackballControls(this._camera, this._renderer.domElement)
110    this._debug();
111}
112
113NeuronDrawer.prototype.renderScene = function () {
114
115    var self = this;
116    requestAnimationFrame(
117        function () {
118            self.renderScene();
119        });
120    this._renderer.render(this._scene, this._camera);
121    this._controls.update();
122
123}
124
125NeuronDrawer.prototype._debug = function () {
126    this._scene.add(new THREE.AxisHelper(20));
127}
128
129NeuronDrawer.prototype.drawNeuron = function (x, y, scheme) {
130
131
132    var obj = new THREE.Object3D();
133
134    var material = new THREE.LineBasicMaterial({
135        color: 0x0000ff
136    });
137    var position = 0;
138    var noOfBlocks = 0;//number of "blocks" to draw
139    var noOfLines = 0;//number of line to draw
140    noOfBlocks = scheme[position++];
141    for (var i = 0; i < noOfBlocks; i++) {
142        noOfLines = scheme[position++];
143
144        for (var j = 0; j < noOfLines; j++) {
145            var geometry = new THREE.Geometry();
146            geometry.vertices.push(new THREE.Vector3(scheme[position++] + x, scheme[position++] + y, 0));
147            geometry.vertices.push(new THREE.Vector3(scheme[position++] + x, scheme[position++] + y, 0));
148            position = position - 2; //get to last point in list
149            var line = new THREE.Line(geometry, material);
150            obj.add(line);
151        }
152        position = position + 2;//move to value which define number of lines to draw
153    }
154
155    var SCALE = 0.05;
156
157    obj.scale.set(SCALE, SCALE, SCALE);
158    obj.rotateX(Math.PI);//rotate 180 degree
159    //obj.translateY(-5.5);
160    this._scene.add(obj)
161}
162
163NeuronDrawer.prototype._getNumberOfInputs = function(number, connections){
164
165    var counter = 0;
166
167    for(var i = 0; i < connections.length; i++){
168        if(connections[i].getDestination() == number)
169            counter++;
170    }
171
172    return counter;
173}
174
175NeuronDrawer.prototype._getNumberOfOutputs = function(number, connections){
176    var counter = 0;
177
178    for(var i = 0; i < connections.length; i++){
179        if(connections[i].getSource() == number)
180            counter++;
181    }
182
183    return counter;
184}
185
186NeuronDrawer.prototype.drawConnection = function (id, neurons, connections, einfos) {
187
188    var n2;
189
190    for(var iw = 0; iw < this._getNumberOfInputs(id,connections); iw++)
191    {
192        n2 = neurons[iw];
193
194        var yw = this._inputY(iw);
195        var xw = yw / 4;
196        this._drawLine()
197    }
198   
199    /*var destination = connections[id].getDestination();
200    var numberOfConnToDest = 0;
201    var numberOfDrawenCon = 0;
202
203    //check how many conenctions have the same destination
204    for (var i = 0; i < connections.length; i++) {
205        if (connections[i].getDestination() == destination)
206            numberOfConnToDest++;
207    }
208
209    //check how many connections had been drawen
210    for (var i = 0; i < id; i++) {
211        if (connections[i].getDestination() == destination)
212            numberOfDrawenCon++;
213    }
214
215    var positionY = (numberOfDrawenCon + 1) * 100 / (numberOfConnToDest + 1);
216    var positionX = (numberOfDrawenCon + 1) * 10 / (numberOfConnToDest + 1);
217
218    var x1 = einfos[connections[id].getDestination()].x;
219    var y1 = einfos[connections[id].getDestination()].y;
220
221    var x2 = einfos[connections[id].getSource()].x;
222    var y2 = einfos[connections[id].getSource()].y;
223
224    var material = new THREE.LineBasicMaterial({
225        color: 0x0000ff
226    });
227
228    var SCALE = 0.05;
229
230    var geometry = new THREE.Geometry();
231    geometry.vertices.push(new THREE.Vector3(100 + x2 * 100, 10 + 50 + y2 * 100, 0));
232    geometry.vertices.push(new THREE.Vector3(10 + 100 + x2 * 100, 10 + 50 + y2 * 100, 0));
233    var line = new THREE.Line(geometry, material);
234    line.scale.set(SCALE, SCALE, SCALE);
235    this._scene.add(line);
236
237
238    var geometry1 = new THREE.Geometry();
239    geometry1.vertices.push(new THREE.Vector3(10 + positionX + x1 * 100, 10 + positionY + y1 * 100, 0));
240    geometry1.vertices.push(new THREE.Vector3(10 + 25 + x1 * 100, 10 + positionY + y1 * 100, 0));
241    var line1 = new THREE.Line(geometry1, material);
242
243    line1.scale.set(SCALE, SCALE, SCALE);
244    this._scene.add(line1);
245
246    //bezposredni poprzednik - to koniec :)
247    if (x1 == x2 + 1)//kazdy polozony w kolumnie po lewej ma jedna ukosna linie
248    {
249        var geometry = new THREE.Geometry();
250        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0));
251        geometry.vertices.push(new THREE.Vector3(110 + x2 * 100, 10 + 50 + y2 * 100, 0));
252        var line = new THREE.Line(geometry, material);
253        line.scale.set(SCALE, SCALE, SCALE);
254        this._scene.add(line);
255        return;
256    }
257
258    //pierwszy pionowy
259    if (y1 >= y2) {
260        var geometry = new THREE.Geometry();
261        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 60 + y2 * 100, 0));
262        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 105 + y2 * 100, 0));
263        var line = new THREE.Line(geometry, material);
264        line.scale.set(SCALE, SCALE, SCALE);
265        this._scene.add(line);
266        return;
267    }
268
269    else {
270        var geometry = new THREE.Geometry();
271        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 60 + y2 * 100, 0));
272        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 15 + y2 * 100, 0));
273        var line = new THREE.Line(geometry, material);
274        line.scale.set(SCALE, SCALE, SCALE);
275        this._scene.add(line);
276        return;
277    }
278
279
280    //poziomy
281    if (y1 >= y2) {
282        var geometry = new THREE.Geometry();
283        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 105 + y2 * 100, 0));
284        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 105 + y2 * 100, 0));
285        var line = new THREE.Line(geometry, material);
286        line.scale.set(SCALE, SCALE, SCALE);
287        this._scene.add(line);
288        return;
289        //g.drawLine((int) ((110 + (x2 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom));
290    }
291    else {
292        var geometry = new THREE.Geometry();
293        geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 15 + y2 * 100, 0));
294        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 15 + y2 * 100, 0));
295        var line = new THREE.Line(geometry, material);
296        line.scale.set(SCALE, SCALE, SCALE);
297        this._scene.add(line);
298        return;
299        //g.drawLine((int) ((110 + (x2 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom));
300    }
301
302
303    //drugi pionowy
304    if (y1 >= y2) {
305        var geometry = new THREE.Geometry();
306        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0));
307        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 105 + y2 * 100, 0));
308        var line = new THREE.Line(geometry, material);
309        line.scale.set(SCALE, SCALE, SCALE);
310        this._scene.add(line);
311        return;
312        //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));
313    }
314    else {
315        var geometry = new THREE.Geometry();
316        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0));
317        geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 15 + y2 * 100, 0));
318        var line = new THREE.Line(geometry, material);
319        line.scale.set(SCALE, SCALE, SCALE);
320        this._scene.add(line);
321        return;
322        //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));
323    }
324*/
325}
326
327NeuronDrawer.prototype._inputY = function(number, connections){
328    return (1 + number)*this._neurons[number].sizeY / ((this._getNumberOfInputs(number, connections)) + 1);
329}
330
331NeuronDrawer.prototype._drawLine = function(x1, y1, x2, y2){
332    var geometry = new THREE.Geometry();
333    geometry.vertices.push(new THREE.Vector3(x1, y1, 0));
334    geometry.vertices.push(new THREE.Vector3(x2, y2, 0));
335
336    var material = new THREE.LineBasicMaterial({
337        color: 0x0000ff
338    });
339
340    var SCALE = 1;
341
342    var line = new THREE.Line(geometry, material);
343    line.scale.set(SCALE, SCALE, SCALE);
344    this._scene.add(line);
345}
346
347NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes)
348{
349    var schema = this._unknown_symbol;
350    var type = neurons[number].getSchemeID();
351
352    if(type != undefined)
353    {
354        if(classes[type].getScheme().length != 0)
355        {
356            if(this._getNumberOfInputs(number, connections) == 0)
357                schema = this._outputonly_symbol;
358            else if (this._getNumberOfOutputs(number, connections) == 0)
359                schema = this._inputonly_symbol;
360            else
361                schema = this._neuron_symbol;
362        }
363    }
364
365    return schema;
366}
367
368NeuronDrawer.prototype._getSize = function(scheme)
369{
370    var neuron = {sizeX: 0, sizeY: 0};
371    var position = 0;
372    var noOfBlocks = 0;//number of "blocks" to draw
373    var noOfLines = 0;//number of line to draw
374    noOfBlocks = scheme[position++];
375    for (var i = 0; i < noOfBlocks; i++) {
376        noOfLines = scheme[position++];
377
378        for (var j = 0; j < noOfLines; j++) {
379
380            if(scheme[position] > neuron.sizeX)
381                neuron.sizeX = scheme[position];
382            position++;
383            if(scheme[position] > neuron.sizeY)
384                neuron.sizeY = scheme[position];
385            position++;
386
387            if(scheme[position] > neuron.sizeX)
388                neuron.sizeX = scheme[position];
389            position++;
390            if(scheme[position] > neuron.sizeY)
391                neuron.sizeY = scheme[position];
392            position++;
393
394            position = position - 2;
395        }
396        position = position + 2;//move to value which define number of lines to draw
397    }
398    return neuron;
399}
400
401NeuronDrawer.prototype.drawNetwork = function (neurons, connections, layouts, classes) {
402
403    this._neurons = [];
404
405    for (var i = 0; i < layouts.length; i++) {
406        var scheme = undefined;
407
408        scheme = this._chooseSchema(i,neurons, connections, classes)
409        var neuronData = this._getSize(scheme);
410        neuronData.scheme = scheme;
411        this._neurons.push(neuronData);
412        this.drawNeuron(layouts[i].x * 100  , -layouts[i].y * 100 , scheme);
413    }
414
415    //for (var i = 0; i < connections.length; i++)
416    //    this.drawConnection(i, neurons, connections, einfos);
417}
418
419
420NeuronDrawer.prototype.debugTest = function () {
421
422}
423
Note: See TracBrowser for help on using the repository browser.