[KineticJS] Circle zu laufender Animation hinzufügen?

[Zuyas]

Hallo zusammen,
ich habe gestern KineticJS entdeckt und ein wenig herumgespielt link.
Nun wollte ich das man per Linksklick einen neuen Ball hinzufügt.
[src=javascript]$('#container').click(function(e) {
if (e.button === 0) {
circle[circleAmount] = new Kinetic.Circle({
x: event.pageX,
y: event.pageY,
radius: Math.floor((Math.random() * 20) + 5),
fill: '#' + Math.floor((Math.random() * 999999) + 100000),
stroke: 'black',
strokeWidth: border,
id: circleAmount
});
layer.add(circle[circleAmount]);
posx[circleAmount] = (Math.round(Math.random()) === 1 ? 1 : -1);
posy[circleAmount] = 1;
directionx[circleAmount] = (Math.random() * maxSpeed) + minSpeed;
directiony[circleAmount] = (Math.random() * maxSpeed) + minSpeed;
gravity[circleAmount] = 0;
circleAmount = circleAmount+1;
stage.add(layer);
}
});[/src]
Allerdings bleibt die Animation einfach hängen wenn ich einen neuen Ball hinzufüge. Ich denke es liegt daran, dass die Animation den neuen Ball "nicht kennt".
[src=javascript]var anim = new Kinetic.Animation(function(frame) {
for (var i = 0; i < circleAmount; i++) {
gravity = ((circle.getY()) + circle.getRadius()) * 0.02;[/src]
Der Fehler tritt in Zeile 3 bei circle.getY() auf.

Uncaught TypeError: Cannot call method 'getY' of undefined ball.html:129
(anonymous function) ball.html:129
Kinetic.Animation._runFrames kinetic-v4.7.4.min.js:3
Kinetic.Animation._animationLoop kinetic-v4.7.4.min.js:3
(anonymous function)

Jemand eine Idee?

lg Zuyas

 

[Shodan]

>>Jemand eine Idee?

Mal den Debugger rauskramen

[src=javascript]circleAmount = circleAmount+1;[/src]

In dieser Zeile wird aus "50" ein "501"

Ach JavaScript Arrays die als Keys nur Zahlen können, automatisches casten von string auf int und + als Konkatenationsoperator...

PS: event ist undefined, du hast es auf e umbenannt. (implodierte gleich am Anfang, hatte ich nur vergessen. Denke das dürfte dir auch aufgefallen sein)
PS: xyz.length = circleAmount; kannst du dir sparen, wenn du den Arrays neue Werte hinzufügst werden die schon größer
PS: stage.add(layer); Du änderst das layer Objekt, auf das auch die Animation zugreift. Du brauchst es nicht mehrmals zur stage hinzuzufügen.

 

[Zuyas]

Ach JavaScript Arrays die als Keys nur Zahlen können, automatisches casten von string auf int und + als Konkatenationsoperator...

Aww.. Daran habe ich garnicht gedacht

PS: event ist undefined, du hast es auf e umbenannt. (implodierte gleich am Anfang, hatte ich nur vergessen. Denke das dürfte dir auch aufgefallen sein)

Stimmt

PS: xyz.length = circleAmount; kannst du dir sparen, wenn du den Arrays neue Werte hinzufügst werden die schon größer

Hatte ich schon weg gemacht, trotzdem danke

PS: stage.add(layer); Du änderst das layer Objekt, auf das auch die Animation zugreift. Du brauchst es nicht mehrmals zur stage hinzuzufügen.

Ah, habs behoben

Vielen Dank! Funktioniert jetzt alles.

 

[LemonDrops]

Ach JavaScript Arrays die als Keys nur Zahlen können, automatisches casten von string auf int und + als Konkatenationsoperator...

Es gibt in Javascript schlicht keine (klassischen) Arrays. Arrays sind spezielle Objekte und darum kann man Objekte in JS auch wie Arrays nutzen. Anstatt assoziative Arrays, benutzt man schlicht Objekte.
Siehe: http://jsfiddle.net/4dLmq/

Außerdem ist es der Job des Programmierers ausdrucksstark und eindeutig zu Programmieren. Das Problem ist nicht das Javascript Variablen casted, das ist bei dynamischer Typisierung nun einmal so. On nun integer zu strings werden, oder umgekehrt, bringt die selben Schwierigkeiten. Das Problem ist, dass der Programmier sich auf diese *magie* verlässt, anstatt die Möglichkeiten der dynamischen Typisierung zu nutzen und damit eindeutigen, robusten Code zu schreiben.

Also entweder: ( circleAmount = circleAmount+"1"; ) oder ( circleAmount = parseInt(circleAmount,10)+1; )

Den Code so zu schreiben hat auch den Vorteil, dass man nach einem Jahr, oder auch eine andere Person, eindeutig weiß was gemeint war.

 

[Shodan]

Da baut man mal eine Spitze ein und markiert sie noch extra mit einem Smilie
.. und trotzdem taucht einer auf und erzählt was von Getreide

 

[LemonDrops]

@Shodan: Es ist das eine Lustig sein zu wollen und das andere dabei falsche Informationen zu verbreitet. Der TS hat außer dem mehr davon, wenn man ihm sagt wie er diese Fehler verhindert.

 

[Shodan]

Der TS hat außer dem mehr davon, wenn man ihm sagt wie er diese Fehler verhindert.

Dem stimme ich nicht zu. Es ist imho viel wichtiger zu wissen wie der Bug entsteht, wie nur zu wissen, wie man ihn behebt. Es ist ja in diesem Fall kein sehr komplexes Problem (wo es frech wäre die Lösung zu kennen aber nicht zu posten) und ich glaube nicht, dass ich mich damit verschätzt habe davon auszugehen, dass der TS parseInt kennt.

falsche Informationen zu verbreitet.

Bitte? Nichts davon ist falsch!

1: "automatisches casten von string auf int". Das ist nicht falsch und ich habe nie behauptet es sei "das Problem" oder auch nur "ein Problem". Es ist lediglich Bestandteil der Erklärung, warum es hier einen Bug gibt.

2: dito für den Konkatenationsoperator +

3: JS hat keine Assoziativen Arrays. Es gibt eine Array Objekt und diese unterstützt keine strings als keys.
Natürlich kann man sich eine assoziative Array schreiben und sofern man an Methoden wie shift() und pop() kein Interesse hat, braucht man das wahrscheinlich nicht mal und kann ein einfaches Objekt verwenden. Das ändert aber nichts daran, dass new Array in Javascript kein assoziatives Array erzeugt.
Eine Fehlinformation ist vielmehr: "Arrays sind spezielle Objekte und darum kann man Objekte in JS auch wie Arrays nutzen."
"darum"? Ernsthaft? (A => B) => (B = A)? Das ist definitiv false, oder falsch oder von mir aus auch fehl.
Ein einfaches Objekt in JS mag der allgemeinsten Definition eines Arrays genügen und ja, man kann auf Objekteigenschaften mit geschweiften Klammern zugreifen, aber insbesondere mit Blick auf das Array Objekt kann man einfache Objekte nicht wie Arrays verwenden.


Was willst du eigentlich? Ich mach mir den Spaß dem TS zu helfen und du kommst hier 12 Stunden nachdem der sich schon bedankt und das Problem beseitigt hat rein, um was von "Getreide" (parseInt, dynamischer Typisierung) zu erzählen, mir vorzuwerfen ich würde hier Quatsch erzählen, obwohl das, was ich gesagt habe, genau das war, was der TS haben wollte und schließlich bezeichnest du Fakten als Fehlinformationen und stellst Fehlinformationen als Fakten in den Raum.

Troll dich!

 

[LemonDrops]

@Shodan: Was ich will, dich zitieren und anhand daran etwas erklären, ich wollte nicht mit dir diskutieren.

Wenn du trotzdem sehen/lernen willst, dass Arrays in JS einfach nur Objekte, mit passenden Methoden, (und darum eigentlich keine Arrays) sind und dass es darum keine tatsächlichen Arrays gibt, machst du folgendes in deiner Konsole:

[src=javascript]c = new Array();
typeof(c); // gibt "Object" zurück[/src]

das kann man auch nutzen:

[src=javascript]a = [];
a.test = function(){
return "Object";
};
a.test(); // gibt "Object" zurück[/src]

Wie du siehst ist ein Array in JS ein Object, dem entsprechend kann ich es einfach mit Methoden erweitern. Das ist auch der Grund aus dem es keinen Constructor für assoziative Arrays gibt, der wäre nämlich der Selbe, wie für Objekte.

Javascript hat keine Arrays und braucht auch keine.

 

[Shodan]

Javascript hat keine Arrays

JS hat das Array Objekt und daher diskutiert man, im Kontext von Javascript, Arrays mit Bezug auf dieses und nicht mit Bezug auf PHP, C oder Wikipedia.

dass Arrays in JS [...] eigentlich keine Arrays sind

Witzbold.
Deine Aussage, dass Arrays Objekte sind und darum Objekte wie Arrays genutzt werden können entbehrt, völlig unabhängig von der Tatsachen, dass Arrays Objekte sind und das Objekte der minimalen Definition eines Arrays genügen jeder Logik. Weder Prämisse noch Konsequenz an sich sind, was ich bemängle, sondern ihre Verknüpfung. Nein warte, was ich eigentlich bemängle ist, dass du hier auftauchst, einen Satz von mir aus dem Kontext reißt, mich damit für dumm verkaufen willst, dem TS noch vor wirfst "seinen Job nicht zu machen", und dich dann darauf hinausreden willst, es sei deine heilige Mission unter dem Topic "finde den Bug" das kleine Einmaleins lehren zu müssen.

 

[LemonDrops]

@Shodan: Du kannst dich gern an meiner, vielleicht unglücklichen, Art, in der mich weiter oben aus gedrückt habe, aufhängen. Ich gebe zu, das war keine Glanzleistung.

Die Aussage es gäb keine assoziativen Arrys ist Richtig, in dem Zusammenhang aber verwirrend (und damit will ich dich auch gar nicht für Dumm verkaufen, oder sagen du wärst dumm). Weil es a) grundsätzlich keine Arrays gibt und man b) Objekte wie assoziative Arrays nutzen kann. Die Funktionalität dieser Arrys ist also vorhanden, aber nicht der Type. Javascript hat kein Array Object, Javascript hat einen Constructor, der eine Instanz des entsprechenden Prototypen zurück gibt. Wenn Javascript einen Array Type haben sollte, dann hätte es einen wie es ihn z. B. für Strings und Numbers gibt. In der Javscript Standardisierung steht das auch ganz klar, der Array Constructor erstellt keinen Array, sondern nutzt den Standard Array Constructor um ein Array Object auszugeben.
Man könnte annehmen, dass das Erbsenzählerei ist, was es aber nicht ist. Denn dadurch dass Javascript Objekte zugunsten von Arrays vorzieht, kann man z. B. den entsprechenden Prototypen ändern, was weitreichende Möglichkeiten und gefahren mit sich bringt. Man kann z. B. die .push Methode überschreiben und selbst implementieren.

Wir können die Diskussion hier beenden, ich habe meinen Standpunkt mehr als deutlich gemacht und werde davon nicht abrücken.

Dem TS habe ich nicht vorgeworfen er hätte seinen Job nicht gemacht, sondern vorgeschlagen wie er ihn professioneller und mit geringerer Fehlerwahrscheinlichkeit erledigen kann. Dafür sind Communities da. Wenn er gewusst hätte wie er das machen kann, hätte er es wohl auch getan und wenn er es aus Faulheit nicht gemacht hat, dann ist es noch wichtiger ihn darauf hinzuweisen. Code zu schreiben, der nicht an trivialen und unscheinbaren Fehlern scheitern kann, ist wichtig. Ich sehe keinen Grund aus dem du so feindselig reagieren müsstest.