Hüpfendes Objekt mit Javascript erzeugen

[B4rnY]

Hi, ich hab mich daran versucht ein objekt (höhe 80px, breite 200px) hüpfen zu lassen, immer nur auf und ab, nur bei mir hüpft das objekt nach unten, dann wieder nach oben, aber nicht wieder nach unten, es läuft einfach weiter nach oben.

Kann mir einer einen code geben, damit ich es mit meiner Version vergleichen kann.

Und noch eine kleine Frage, was ist catch?

Danke

[Wouzhuo]

Hi, ich hab mich daran versucht ein objekt (höhe 80px, breite 200px) hüpfen zu lassen, immer nur auf und ab, nur bei mir hüpft das objekt nach unten, dann wieder nach oben, aber nicht wieder nach unten, es läuft einfach weiter nach oben.

Kann mir einer einen code geben, damit ich es mit meiner Version vergleichen kann.

Ich hab ne Idee: poste du doch deinen (relevanten) Code. Das geht viel schneller und wir finden die Fehler bevor du "Achsooooo" sagen kannst. Wie wär's?

Und noch eine kleine Frage, was ist catch?

Damit kannst du das Objekt wieder auffangen, wenn es von zu weit oben runterfällt.

Nein im Ernst... try&catch ist etwas imho ziemlich Mächtiges, womit du dich (da du ja noch ziemlicher Anfänger zu sein scheinst) noch nicht beschäftigen solltest/brauchst.

[B4rnY]

Dsa ich anfänger bin stimmt, hier:
var a = 0;

function start() {
  if (a < 20) {
    a = a + 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  } else {
    a = a - 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  }
}

[Struppi]

var a = 0;

function start() {
  if (a < 20) {
    a = a + 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  } else {
    a = a - 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  }
}

Mal abgesehen von dem vielen unötigen doppelten Code. Überleg doch mal logisch, was dieses Skript macht.

Struppi.

[Wouzhuo]

Hallo B4rnY,

deine ursprüngliche Symptombeschreibung kann nicht stimmen. Ich beobachte nämlich, dass sich das Objekt zuerst nach unten bewegt und dann aber quasi stehenbleibt und "zittert".

Überleg mal, was bei deiner Funktion passiert. Zuerst ist a = 0 und die Bedingung ist erfüllt, sodass a um 1 erhöht wird und das Objekt 1px nach unten rutscht. Soweit so gut. Die Funktion ruft sich dann selbst auf und das ganze passiert immer wieder. a = 1, a = 2, a = 3, ... und so weiter, bis a = 20.

Sobald a = 20 ist, ist die Bedingung nicht mehr erfüllt und es wird in den else-Teil gesprungen, wo a um 1 reduziert wird. Also ist a jetzt = 19. Das Objekt rutscht einen Pixel nach oben. Jetzt ruft sich die Funktion wieder selbst auf und da a jetzt = 19 ist, ist die Bedingung wieder erfüllt und a wird um 1 erhöht. Das Objekt rutscht wieder um 1 nach unten... jetzt ist a = 19 sodass es beim nächsten mal wieder einen nach unten rutscht und wieder 20 ist... dadurch rutscht es wieder einen nach oben und ist wieder 19 und so weiter und so fort.

Ich gebe dir folgenden Tipp: anstatt eine einzige Funktion start() zu schreiben, ist es viel einfacher, wenn du zwei Funktionen schreibst. z.B. function hoch() und function runter(). Am Anfang startest du mit runter() und sobald das Element unten ist, ruft runter() sich nicht mehr selbst auf, sondern stattdessen hoch(). Und hoch() sorgt dafür, dass das Element sich nach oben bewegt und ruft runter() auf, sobald das Element wieder ganz oben ist.

Hilft dir das weiter?

var a = 0;

function start() {
  if (a < 20) {
    a = a + 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  } else {
    a = a - 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  }
}

[gast42]

Ich gebe dir folgenden Tipp: anstatt eine einzige Funktion start() zu schreiben, ist es viel einfacher, wenn du zwei Funktionen schreibst. z.B. function hoch() und function runter()...

Ich gebe dir dagegen den Tipp gerade das nicht zu tun. 2 Funktionen die sich nur in einem Vorzeichen und der Zuordnung von Start- und Endwert unterscheiden sind definitiv eine zuviel. Sowas bäht den Code unnötig auf und macht ihn somit schwieriger zu warten.

[Der Martin]

Hallo,

var a = 0;

function start() {
  if (a < 20) {
    a = a + 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  } else {
    a = a - 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  }
}

dieser Codeausschnitt passt nicht zu deiner Beschreibung, "bei mir hüpft das objekt nach unten, dann wieder nach oben, aber nicht wieder nach unten, es läuft einfach weiter nach oben". Das hier lässt das Objekt nach unten wandern, indem style.top größer wird. Und zwar so weit, bis a=20 ist. Dann müsste das Objekt zwischen 19px und 20px hin- und herwackeln.

Du krallst dich an der Entscheidung fest, ob a kleiner 20 ist oder nicht. Ist es kleiner, erhöhst du a; ist es gleich oder größer 20, verringerst du es. Damit landest du zwangsläufig an der Grenze 19/20px.

Du brauchst aber als Haupt-Entscheidungskriterium das Merkmal "bewegt sich nach oben" oder "bewegt sich nach unten". Diese zwei Phasen musst du primär unterscheiden, und erst sekundär, ob du an einer Grenze angelangt bist, an der sich die Richtung umkehrt.

So long,
 Martin

[Gunnar Bittersmann]

@@B4rnY:

nuqneH

a = a - 1;

Wenn du das Ding richtig hüpfen lassen willst, darf seine Geschwindigkeit nicht konstant sein und an den Umkehrpunkten das Vorzeichen wechseln.

Das Ding sollte harmonisch hüpfen: y(t) = a cos(ωt + φ₀) + y₀

Du musst bloß a (Amplitude), ω (Kreisfrequenz ω = 2π/T, regelt die Schwingungsdauer), φ₀ (Phase, kann vermutlich 0 sein) und y₀ (Offset) deinen Wünschen entsprechend wählen.

Qapla'

[Der Martin]

Hallo Gunnar,

Das Ding sollte harmonisch hüpfen: y(t) = a cos(ωt + φ₀) + y₀

eben, hüpfen und nicht pendeln. Hüpfen heißt aber nach meinem Verständnis, dass y(t) eine Parabel beschreibt[1], dann an der t-Achse (y=0) in einem (teil)elastischen Stoß nahezu schlagartig seine Richtung umkehrt und wieder den nächsten Parabelbogen beschreibt.

Okay, der Unterschied zwischen einer Sinus-Halbwelle und einer Parabel wird nicht auffallen, wenn die Rechnerei nur für einen visuellen Effekt gedacht ist. Aber dann sollte man wenigstes einen Gleichrichter vorschalten:

y(t) = a * abs(cos(ωt)) + y₀

Das sieht dann schon eher nach "Hüpfen" aus.

Ciao,
 Martin

PS: Warum sieht man diese Schwingungsgleichung eigentlich häufiger mit dem Cosinus als mit dem Sinus formuliert? Klar, mathematisch ist es egal, der Unterschied liegt ja nur im Phasenwinkel - aber der Sinus erscheint mir intuitiver.

[Encoder]

PS: Warum sieht man diese Schwingungsgleichung eigentlich häufiger mit dem Cosinus als mit dem Sinus formuliert? Klar, mathematisch ist es egal, der Unterschied liegt ja nur im Phasenwinkel - aber der Sinus erscheint mir intuitiver.

Ich könnt mir vorstellen weil der Cosinus bei 1 beginnt, also zum Zeitpunkt des Loslassens, wenns zB um einen Ball geht?

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

eben, hüpfen und nicht pendeln. Hüpfen heißt aber nach meinem Verständnis, dass y(t) eine Parabel beschreibt[1], dann an der t-Achse (y=0) in einem (teil)elastischen Stoß nahezu schlagartig seine Richtung umkehrt und wieder den nächsten Parabelbogen beschreibt.

Ich dachte an einen federnden Hüpfer, du an einen springenden.

Okay, der Unterschied zwischen einer Sinus-Halbwelle und einer Parabel wird nicht auffallen, wenn die Rechnerei nur für einen visuellen Effekt gedacht ist.

Och nö. Dann machen wir’s doch gleich richtig:
[latex]y(t) = 4h \left( - \lfloor t/T \rfloor ^2 + \lfloor t/T \rfloor \right)[/latex]

Qapla'

[Der Martin]

Hi,

Hüpfen heißt aber nach meinem Verständnis, dass y(t) eine Parabel beschreibt, dann an der t-Achse (y=0) in einem (teil)elastischen Stoß nahezu schlagartig seine Richtung umkehrt und wieder den nächsten Parabelbogen beschreibt.
Ich dachte an einen federnden Hüpfer, du an einen springenden.

ich dachte konkret an einen hüpfenden Ball, der auf dem Boden aufprallt und wieder hochspringt. Entweder idealisiert mit gleichbleibender Scheitelhöhe, oder auch mit Energieverlust und damit abnehmender Höhe.

Außerdem sind für mich die Begriffe "hüpfen" und "springen" Synonyme.

Och nö. Dann machen wir’s doch gleich richtig:
[latex]y(t) = 4h \left( - \lfloor t/T \rfloor ^2 + \lfloor t/T \rfloor \right)[/latex]

ööhm ... wo bleibt da die Periodizität? Diese Funktion geht einfach gegen -∞ für t→∞, der hüpfende Ball dringt also in die Erde ein, ohne je wieder umzukehren.
Meinst du das ernst?

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

oder auch mit Energieverlust und damit abnehmender Höhe.

Es sei dem OP überlassen, dem Ding noch einen Dämpfer zu verpassen.

Außerdem sind für mich die Begriffe "hüpfen" und "springen" Synonyme.

Grasspringer beim Weithüpf?

ööhm ... wo bleibt da die Periodizität?

Grmpf. Ich hatte nicht den Vorkommaanteil im Sinn, sondern den Nachkommaanteil.

[latex]y(t) = 4h \left( - \left( t/T - \lfloor t/T \rfloor \right) ^2 + \left( t/T - \lfloor t/T \rfloor \right) \right)[/latex]

Qapla'

[Don P]

Hallo,

Es sei dem OP überlassen, dem Ding noch einen Dämpfer zu verpassen.

Und dem Formel-Erfinder bzw. Poster, noch eine kleine Legende beizufügen. Nicht jeder hier dürfte Physiker sein und die Buchstaben richtig deuten können.

[latex]y(t) = 4h \left( - \left( t/T - \lfloor t/T \rfloor \right) ^2 + \left( t/T - \lfloor t/T \rfloor \right) \right)[/latex]

h = Höhe?
t = laufende Zeit?
T = Schwingungsdauer?
oder wie oder was? ;)

Gruß, Don P

[Encoder]

Ein realistischer Ball verformt sich auch noch ein bisschen, der hüpft also nicht gleich wieder hoch wenn er den Boden erreicht ;-)

[Felix Riesterer]

Lieber B4rnY,

Kann mir einer einen code geben, damit ich es mit meiner Version vergleichen kann.

aber sicher doch: Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts

Und wenn Dir das nicht reicht, dann probier's mal damit: unfertiges Projekt

Liebe Grüße,

Felix Riesterer.