Spielereien mit der Mausposition

Das hier ist eine Entwicklung für einen Optiker und liegt seit längerem auf Eis. Also landet es hier!
Wofür das gut sein soll, ist, so hoffe ich, selbstredend.
Ablenkend vom Inhalt einer Präsentation ist es nur bei Mausbewegungen. Für meine Einstellung was sein darf und was nicht, steht dies im Konsens zum Thema und soll in erster Linie Spaß machen, zum Lesen anregen und sich freuen, dass die Augenverfolgung zur Ruhe geht, wenn der Seitenbesucher etwas findet, was ihn inne hält für 30 Sekunden. Das belohnt auch die Augenanimation mit Schließen. Es gibt ja nichts zu verfolgen.
Für diese Demo wird angezeigt, dass der Schlafmodusrückwärtszähler (ist das ein geiles Wort) bei jeder Mausbewegung sich wieder auf die Zählzeit von 30 Sekunden Wartezeit zurückstellt. Das wird im Original natürlich nicht angezeigt, wozu auch. Mit Mausbewegung wachen die Augen wieder auf und alles kann wieder von vorn beginnen.
Dezent läuft ab und an noch eine angebliche Reflektion über den rechten Brillenrand. Das muss einfach sein.
Warum? Weil ich das von Anfang an so wollte und viel Mühe darauf angewendet habe, dass sowas auch umgesetzt werden kann. Ab und an muss auch der Bauch gepinselt werden. Sowas ist man sich einfach schuldig.

Noch etwas zur Browsekompatilität:
Ob MSIE oder Edge: das Auge rechts will seinen Verlaufszentrum nicht anpassen. Das nimmt erst nach dem Schlafmodus die letzte ihm übergebene Position an und bleibt dann wieder auf dieser Position. Wird dem Auge links dies nicht per Script nachgereicht, klappt das auch auf dem Auge rechts. Was soll man dazu kommentieren. MSIE: Reflexionssternchen streubt sich, auf den rechten Pfad zu gelangen. Was solls! Es bleibt in der linken oberen Ecke der SVG-Zeichenfläche hängen.
Chrome und Opera: Befindet sich der Cursor im Browserfenster, werden nach 60 Sekunden die Augen geöffnet, auch ohne Bewegung. Der Cursor außerhalb des Fensters funkt nicht dazwischen, klar. Ich habe keine Erklärung! Selbst wenn ich den Straßenverkehr und daraus resultierenden Erschütterungen einkalkuliere, geht das nicht mit exakter Wiederholung zusammen. (Okt. 2016)
Was stelle ich hier nach mehr als einem Jahr fest: „Nun ist alles so, wie es sein soll!“. Jetzt stellt sich mir aber die Frage: „Ist das jetzt ein Entwicklerteam für Chrome und Opera?“ Beide Browser können etwas nicht, wie automatische Worttrennung, oder sind identisch fortschrittlich in der Implementierung von HTML5- und CSS3-Technologien. Hmm!

SVG Inhalt:

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


<section id="svgbox" >

<svg id="svg" width="170" height="90" 

  baseProfile="full"

  xmlns="http://www.w3.org/2000/svg"

  xmlns:xlink="http://www.w3.org/1999/xlink"

  xmlns:ev="http://www.w3.org/2001/xml-events" >

 <defs>  

  <path id="auge"

  d="M 21.5, 0

     C 33.4,  0.0, 43.0,  9.6, 43.0, 21.5

     C 43.0, 33.4, 33.4, 43.0, 21.5, 43.0

     C 9.6, 43.0,  0.0, 33.4,  0.0, 21.5

     C  0.0,  9.6, 9.6,  0.0, 21.5, 0.0

    "/>  

  <path id="motionPath" d="M 13.5, 44.8 

    C 17.4, 37.2, 26.2, 30.3, 33.1, 27.5

    C 41.0, 24.3, 50.2, 23.5, 61.4, 27.3 "/>

  <radialGradient id="stern-grad"

   cx=".5" cy=".5" r="1">

   <stop offset="0" stop-color="rgba(255,255,255,1)" />

   <stop offset="1" stop-color="rgba(255,255,255,0)" />

  </radialGradient>

  

  <radialGradient id="fillgradL"

   cx=".5" cy=".5" r="1" fx=".5" fy=".5" > 

   <stop offset="0" stop-color="#fff" />

   <stop offset=".5" stop-color="#4df" />

   <stop offset=".88" stop-color="#f00" />

  </radialGradient>

  <radialGradient id="fillgradR"

   cx=".5" cy=".5" r="1" fx=".5" fy=".5" > 

   <stop offset="0" stop-color="#fff" />

   <stop offset=".5" stop-color="#4df" />

   <stop offset=".88" stop-color="#f00" />

  </radialGradient>

 </defs>

 

 <path id="braueL" style="stroke:#000000;" 

     d="M16.5,34.3

     c 0,0 -1.6 -15, 11 -19.5

    c 15 -6 , 25, 8 ,25 , 8

    s-17 -6 -25 -2

    C18.5 ,25, 16.5, 34, 16.5, 34 z"/>

    <path id="braueR" style="stroke:#000000;" 

     d="M157.8,34.2

     c 0,0, 1.6 -14.8 -10 -19.5

    c-14.8 -6 -25, 8 -25, 8

    s 17 -6.22 ,24.6 -2

    C 155.8 ,25.4 ,158 ,34.3 ,158 ,34 z"/>

    

 <path id="augL" style="stroke:black; stroke-width:1; " fill="url(#fillgradL)">

  <use xlink:href="#auge" transform="translate(23.5, 27.5)" >

 </path>

 <path id="augR" style="stroke:black; stroke-width:1;" fill="url(#fillgradR)">

    <use xlink:href="#auge" transform="translate(110.5, 27.5)" >

 </path>



 <clipPath id="clipL" >

  <use xlink:href="#augL"  />

 </clipPath> 

 <clipPath id="clipR" >

  <use xlink:href="#augR"  />

 </clipPath>



 <ellipse id="Lpupille" cx="45" cy="49" rx="9" ry="9" fill="black" />

 <ellipse id="Rpupille" cx="132" cy="49" rx="9" ry="9" fill="black" />

 <image x="4" y="0" width="171" height="80" 

   xlink:href="../03_JavaScript/komponenten/brille.png" 

   <title>brillenkietz</title>

 </image>

polygon id='stern' wird durch animateMotion und 4 Loops zu einer unterbrochenen Darstellung gezwungen. Ein ununterbrochener Fluss bringt keine Überraschung, selbst wenn diese vorhersehbar ist. Es ist aber nur eine Hilfskrücke. An einer auf kurvenpfad basierenden JavaScript-Animation bin ich gescheitert.

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


 <polygon id="stern" fill="url(#stern-grad)" transform="translate(-8,-28) scale(.6)"

  points="12.3,40.8 13.7,32.1 15.2,40.8 22,37.7 16.5,42.9 22.83,47.241 15.369,45.294

         13.692,52.308 12.291,45.294 6.092,47.241 11.12,43.085 6.092,37.742 ">

        <animateMotion fill="freeze" 

         id="loops"

         begin="0s;loops.end"

         dur="10s" repeatCount="4">

   <mpath xlink:href="#motionPath"/>

  </animateMotion>

  <set begin="loops.begin"

      attributeType="CSS"

      attributeName="visibility"

      to="hidden" />

  <set begin="loops.repeat(1)"

      attributeType="CSS"

      attributeName="visibility"

      to="visible" />

  <set begin="loops.repeat(2)"

      attributeType="CSS"

      attributeName="visibility"

      to="hidden" />

  <set begin="loops.repeat(3)"

      attributeType="CSS"             

      attributeName="visibility"

      to="hidden" /> 

 </polygon>

</svg>

</section>

CSS3 für die Animation des Auf- und Abblendens des Sternchens auf dem Brillenrand:

24
25
26
27
28
29
30


#stern{ animation: stOpac 10s infinite }

@keyframes stOpac {

    0% { opacity: 0; }

   40% { opacity: 1; }

   80% { opacity: 1; }

  100% { opacity: 0; }

}

externes JavaScript: Elemente erfassen und Variablen initialisieren

01
02
03
04
05
06
07
08
09
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


var _svgNS = 'http://www.w3.org/2000/svg';
var svgbox = document.getElementById ('svgbox')

var ocX = document.getElementById ('zentrale').offsetLeft ;
var ocY = document.getElementById ('contain').offsetTop ;
var ocXmax = document.getElementById ('zentrale').offsetWidth -10 ;
var ocYmax = document.getElementById ('contain').offsetHeight -5  ;

var obj_al = document.getElementById ('augL') ;
var obj_ar = document.getElementById ('augR') ;
var obj_pupL = document.getElementById ('Lpupille') ;
obj_pupL.setAttributeNS(null, 'clip-path', 'url(#clipL)');
var obj_pupR = document.getElementById ('Rpupille') ;
obj_pupR.setAttributeNS(null, 'clip-path', 'url(#clipR)');
var clipPathL = document.getElementById ('clipL') ;
var clipPathR = document.getElementById ('clipR') ;

var obj_schlaf = document.getElementById ('inSchlaf') ;
var obj_sleepsteps = document.getElementById ('sleepsteps') ;
//Variablen initialisieren
var osL = svgbox.offsetLeft ;
var osT = svgbox.offsetTop ;
var cLxnull = 45, cRxnull = 132, cLynull = 49, cRynull = 49, wsteps;
var lauf, sec ;
var mstep = 0 ;
var mx, my, mxnull, mxnullL, mxnullR, mynull ;
var mitteX = osL + (cLxnull*2) ;
var mitteY = osT + 49 ;
var lAx, lAy, rAx, rAy ;
var powLx, powLy, pow ;
var retA ;
var Lalph, Ralph, Lkor, Rkor;
var dpL, dpR, maxradgrad = 27 ;
var bisSchlaf = 30 ;
var max_posits = 21 ;
var posLAx, posLAy, posRAx, posRAy ;
// Startpositionen Pupillen und Animationsbewegung
var psteps = 10, time ;
var sLx = 0, sLxm, zulAx ;
var sRx = 0, sRxm, zurAx ;
var sLy = 0, sLym, zulAy ;
var sRy = 0, sRym, zurAy ;

Maskierung in den Maßen des Auges
function AUGE_MASKE() bewirkt öffnen und schließen und wird jeweils für jedes Auge von WAKEUP(mstep) und SLEEP(mstep) aufgerufen.
Der Funktionsaufruf SLEEP(0) Zeile:224 innerhalb der Funktion SEC() erfolgt nach Rückwärtszählen der Wartezeit.
Der Funktionsaufruf WAKEUP() wird zu Beginn Zeile:255 und wenn die Bedingung erfüllt ist, dass sich die Augen geschlossen haben Zeile:234, ausgeführt.

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


function AUGE_MASKE(s,d,z,form){
 d += "M "+(45+z)+" "+(27.5+s)+" " ;
 d += "C "+(56.9+z)+" "+(27.5+(s/1))+" "+(66.5+z)+" "+(37.1+(s/2))+" "+(66.5+z)+" "+49+" ";
 d += "C "+(66.5+z)+" "+(60.9-(s/2))+" "+(56.9+z)+" "+(70.5-(s/1))+" "+(45.0+z)+" "+(70.5-(s/1))+" ";
 d += "C "+(33.1+z)+" "+(70.5-(s/1))+" "+(23.5+z)+" "+(60.9-(s/2))+" "+(23.5+z)+" "+49 +" " ;
 d += "C "+(23.5+z)+" "+(37.1+(s/2))+" "+(33.1+z)+" "+(27.5+(s/1))+" "+(45.0+z)+" "+(27.5+s) +" ";
 form.setAttributeNS(null,'d',d) ; 
 return d ;
}

function WAKEUP(mstep){
 var l = '', r = ''; 
 mstep = parseFloat(mstep) ;
 wsteps = max_posits - mstep ;
 var dl = AUGE_MASKE(mstep,l,0,clipPathL) ;
 obj_al.setAttribute("d", dl) ;
 var dr = AUGE_MASKE(mstep,r,87,clipPathL) ;
 obj_ar.setAttribute("d", dr) ;

// Augen von Startposition in 10 Schritten psteps = 10
 if ( wsteps <= psteps){
 sLx = Math.round((cLxnull-lAx)/psteps*100)/100 ;
 sLxm = sLx * ( mstep );
 zulAx = Math.round( (lAx + sLxm)*100)/100 ;
 sRx = Math.round((cRxnull-rAx)/psteps*100)/100 ;
 sRxm = sRx * ( mstep );
 zurAx = Math.round( (rAx + sRxm)*100)/100 ; 
 sLy = Math.round((cLynull-lAy)/psteps*100)/100 ;
 sLym = sLy * ( mstep); 
 zulAy = Math.round( (lAy + sLym)*100)/100 ; 
 sRy = Math.round((cRynull-rAy)/psteps*100)/100 ;
 sRym = sRy * ( mstep); 
 zurAy = Math.round( (rAy + sRym)*100)/100 ;
 obj_pupL.setAttributeNS(null,"cx",zulAx) ;
 obj_pupL.setAttributeNS(null,"cy",zulAy) ;
 obj_pupR.setAttributeNS(null,"cx",zurAx) ;
 obj_pupR.setAttributeNS(null,"cy",zurAy) ;
 }
 time = 16; 
 obj_al.setAttribute("d", dl) ;
 obj_ar.setAttribute("d", dr) ;
 document.getElementById('clipL').clipPath = dl ;
 document.getElementById('clipR').clipPath = dr ;
    obj_sleepsteps.innerHTML = mstep ;
 mstep-- ;
 if ( mstep >= 0 ) setTimeout(WAKEUP, time, mstep ) ;
}

function SLEEP(mstep){
 var l = '', r = ''; 
 mstep = mstep*1;
 var dl = AUGE_MASKE(mstep,l,0,clipPathL) ;
 obj_al.setAttribute("d", dl) ;
 var dr = AUGE_MASKE(mstep,r,87,clipPathR) ;
 obj_ar.setAttribute("d", dr) ;
 
 // Augen auf Startposition in 10 Schritten psteps = 10
 if ( mstep <= psteps){
 sLx = Math.round((cLxnull-lAx)/psteps*100)/100 ;
 sLxm = sLx * ( mstep );
 zulAx = Math.round( (lAx + sLxm)*100)/100 ;
 sRx = Math.round((cRxnull-rAx)/psteps*100)/100 ;
 sRxm = sRx * ( mstep );
 zurAx = Math.round( (rAx + sRxm)*100)/100 ; 
 sLy = Math.round((cLynull-lAy)/psteps*100)/100 ;
 sLym = sLy * ( mstep); 
 zulAy = Math.round( (lAy + sLym)*100)/100 ; 
 sRy = Math.round((cRynull-rAy)/psteps*100)/100 ;
 sRym = sRy * ( mstep); 
 zurAy = Math.round( (rAy + sRym)*100)/100 ;
 obj_pupL.setAttributeNS(null,"cx",zulAx) ;
 obj_pupL.setAttributeNS(null,"cy",zulAy) ;
 obj_pupR.setAttributeNS(null,"cx",zurAx) ;
 obj_pupR.setAttributeNS(null,"cy",zurAy) ;
 }
 time = 100 - (mstep*5) ;
// Augen selbst schließen 
 obj_al.setAttribute("d", dl) ;
 obj_ar.setAttribute("d", dr) ;
// Clippingmaske erstellen, mit den Maßen des Auges
 obj_pupL.clipPath = dl ;
 obj_pupR.clipPath = dr ;

    // verborgene kontrollausgabe 
    obj_sleepsteps.innerHTML = mstep ;
 mstep++ ;
 if ( mstep <= max_posits ) setTimeout(SLEEP, time, mstep ) ;
}

Die Rückgabefunktion EYEMOVE() - Aufruf aus Zeile: 209 und 210 berechnet auf Grund der Mausposition die Korrektur der Pupillenstellung und wird in Zeile: 236 bis 239 mit setAttribute ausgeführt.
RADIALGRADIENTL() RADIALGRADIENTR()- Aufruf aus Zeile: 212 und 212 beeinflussen das Verlaufszentrum für jedes Auge.
LINSE() - Aufruf aus Zeile: 214 Die Pupillen sind als Ellipsen definiert. Werden diese zum Augenrand bewegt, erfährt der x-Radius seine Veränderung. Er wird verkleinert. Beide Radien zu verändern, führt bei z.B 45° wieder zur Kreisdarstellung. Je näher eine Pupille sich dem Rand nähert, soll eine Ellipse einen 3D-Effekt simulieren. Die Ellipse wird also rotiert. Jeweils für den ermittelten Winkel also linkes Auge alpha (Lalph) analog (Ralph). Dem Rotationszentrum wird die aktuelle Position des Auges übergeben. Die gegenteilige Rotation der Pupillenmaske ist wichtig, da in verschiedenen Positionen die Pupillen abgeschnitten werden. Dies geschieht mit clipPathL und clipPathR durch negative Winkelangabe.

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


function EYEMOVE(mxnull,lxnull,diffx,diffy,kor){
 if (kor < 80 ) kor = 80 ;
 powLx = Math.round(Math.pow(Math.abs(mxnull),0.5)*100)/kor  ;
    if (mxnull < 0 ) diffx = Math.round((-powLx + lxnull)*100)/100 ;
    else diffx = Math.round((powLx + lxnull)*100)/100 ;
    powLy = Math.round(Math.pow(Math.abs(mynull),0.5)*100)/kor  ;
    if (mynull < 0 ) diffy = Math.round((-powLy + cLynull)*100)/100 ;
    else diffy = Math.round((powLy + cLynull)*100)/100 ;
    return [diffx, diffy] ;
}
function RADIALGRADIENTL(retL,retR){  
 var dpL =  Math.abs(cLxnull - lAx - (maxradgrad/2)) ;
 var prozLx = Math.round(dpL / maxradgrad * 100)/100 ;
 var dpL =  Math.abs(cLynull - lAy - (maxradgrad/2)) ;
 var prozLy = Math.round(dpL / maxradgrad * 100)/100 ;
 document.getElementById('fillgradL').setAttribute('fx',prozLx) ;
 document.getElementById('fillgradL').setAttribute('fy',prozLy) ;
}
function RADIALGRADIENTR(retL,retR){   
 var dpR =  Math.abs(cRxnull - rAx - (maxradgrad/2)) ;
 var prozRx = Math.round(dpR / maxradgrad * 100)/100 ;
 var dpR =  Math.abs(cRynull - rAy - (maxradgrad/2)) ;
 var prozRy = Math.round(dpR / maxradgrad * 100)/100 ;
 document.getElementById('fillgradR').setAttribute('fx',prozRx) ;
 document.getElementById('fillgradR').setAttribute('fy',prozRy) ;
}
function LINSE(){
 var elliL = Math.pow(Math.abs(cLxnull-lAx),2)+Math.pow(Math.abs(cLynull-lAy),2) ;
     elliL = Math.round(Math.pow(elliL,0.5)*100)/1000 ;
 var elliR = Math.pow(Math.abs(cRxnull-rAx),2)+Math.pow(Math.abs(cRynull-rAy),2) ;
     elliR = Math.round(Math.pow(elliR,0.5)*100)/1000;
 obj_pupL.setAttribute('rx',(9-elliL)) ;
 obj_pupR.setAttribute('rx',(9-elliR)) ;
 Lalph = Math.round(Math.atan((cLynull-lAy)/(cLxnull-lAx))*180/Math.PI *100)/100 ;
 Ralph = Math.round(Math.atan((cRynull-rAy)/(cRxnull-rAx))*180/Math.PI *100)/100 ;
 if (isNaN(Lalph)) Lalph = 0 ;
 if (isNaN(Ralph)) Ralph = 0 ;
 obj_pupL.setAttribute("transform","rotate("+Lalph+" "+lAx+" "+lAy+" )") ; 
 clipPathL.setAttribute("transform","rotate("+(-Lalph)+" "+lAx+" "+lAy+" )") ; 
 obj_pupR.setAttribute("transform","rotate("+Ralph+" "+rAx+" "+rAy+" )") ; 
 clipPathR.setAttribute("transform","rotate("+(-Ralph)+" "+rAx+" "+rAy+" )") ; 
}

Die Rückgabefunktion AKTPOS(event) aktualisiert überdies auch die globalen Variablen für andere Funktionen.
Die Berechnungen der Variablen abshypL, Lkor, abshypR, Rkor dient der Korrektur wie sich die Pupillen auf Entfernung des Cursors einstellen sollen. In Nähe können die Augen schielen, bei Entfernung wird eine Weitsicht simuliert.

187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216


function AKTPOS(event){
    mx = document.all ? event.offsetX : event.pageX;
    my = document.all ? event.offsetY : event.pageY;
//    Null-Stellung der jeweiligen Pupillen
    mxnull = mx - ocX - mitteX - cLxnull - 4.5 ;
    mxnullL = mxnull + 45 ;
    mxnullR = mxnull - 45 ;
    mynull = my - ocY - mitteY ; 
    // ausgabe
    var diffLx = cLxnull + mxnullL ;
    var diffLy = cLynull + mynull ;
    var diffRx = cRxnull + mxnullR ;
    var diffRy = cRynull + mynull ;
 var abshypL = Math.pow(Math.pow(Math.abs(mxnullL),2) + Math.pow(Math.abs(mynull),2),0.5) ;
     abshypL = Math.round(abshypL*100)/100 ;
 var Lkor = Math.round(100/abshypL*100)/100 ;
     Lkor = .5/Lkor*100 ;
 var abshypR = Math.pow(Math.pow(Math.abs(mxnullR),2) + Math.pow(Math.abs(mynull),2),0.5) ;
     abshypR = Math.round(abshypR*100)/100 ;
 var Rkor = Math.round(100/abshypR*100)/100 ;
     Rkor = .5/Rkor*100 ;
    
    var retL = EYEMOVE(mxnullL,cLxnull,diffLx,diffLy,Lkor) ;
    var retR = EYEMOVE(mxnullR,cRxnull,diffRx,diffRy,Rkor) ;
 lAx = retL[0] ; lAy = retL[1]; rAx = retR[0]; rAy = retR[1];
 RADIALGRADIENTL(retL,retR);
 RADIALGRADIENTR(retL,retR);
 LINSE() ;
 return [lAx,lAy,rAx,rAy]
}

Das eigentliche Auslösen des Mausevents POSITION(event) Zeile: 228 bis 248
Von hier werde alle anderen Funktionen ausgelöst.
Für Chrome und Opera musste ich für mich eine Kontrollfunktion CHROPAEVENT() Zeile:233 einrichten, da diese beiden Browser ohne zutun ein Aufwachen auslösen, für das ich keine Erklärung finde.

218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257


function SEC() {
 sec++ ;
 obj_schlaf.innerHTML = bisSchlaf-sec+1 ;
    if ( sec > bisSchlaf ) {
    clearInterval(lauf);    
    sec = 0
    SLEEP(0) ;
    }
}

function POSITION(event) {
    // Position des Mauscursors 
 retA = AKTPOS(event);
 // ist Schlafmodus erreicht?
    if ( obj_sleepsteps.innerHTML == max_posits )    {
//  CHROPAEVENT() ; erledigt
  WAKEUP(obj_sleepsteps.innerHTML) ;
    } else { 
 obj_pupL.setAttribute("cx",retA[0]) ;
 obj_pupL.setAttribute("cy",retA[1]) ;
 obj_pupR.setAttribute("cx",retA[2]) ;
 obj_pupR.setAttribute("cy",retA[3]) ;
    }
    function ZEIT(){
    if (lauf ) clearInterval(lauf);
    sec = 0 ;
    lauf = setInterval(function(){ SEC() }, 1000);
    }
    ZEIT() ; 
}
document.onmousemove = POSITION;

function INIT(){
 lAx = cLxnull ;
 lAy = cLynull ;
 rAx = cRxnull ;
 rAy = cRynull ;
 WAKEUP(max_posits) ;
}
INIT() ;