Zeichne Land für das Motocross-Spiel

7

Ich möchte ein Land für ein Motocross-Spiel zeichnen. Ich habe an Bezier Curves gedacht, bin mir aber nicht sicher, ob dies der beste Ansatz ist. Kannst du mir einen Rat geben? Ich möchte es in JavaScript machen, keine sehr gute Wahl, aber es ist ein persönliches Projekt, also ist es vorerst in Ordnung.

algorithm linear-algebra Unendlichkeit
quelle
1
Warum sagen Sie, dass JavaScript eine schlechte Wahl ist? Sicher für einen AAA wäre es eine schlechte Wahl, aber für ein einfaches Online - Spiel, es ist eine gute Wahl.
AttackingHobo

Antworten:

4

Anstelle von Bezier möchten Sie wahrscheinlich B-Splines oder Catmull-Rom-Splines.

float bspline(float t, float p0, float p1, float p2, float p3)
{
  float it = 1.0f - t;

  float b0 = it*it*it * (1.0f / 6.0f);
  float b1 = (3*t*t*t - 6*t*t +4) * (1.0f / 6.0f);
  float b2 = (-3*t*t*t +3*t*t + 3*t + 1) * (1.0f / 6.0f);
  float b3 =  t*t*t * (1.0f / 6.0f);

  return     
    b0*p0 +
    b1*p1 +
    b2*p2 +
    b3*p3;
}

float catmullrom(float t, float p0, float p1, float p2, float p3)
{
  return 0.5f * (
          (2 * p1) +
          (-p0 + p2) * t +
          (2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t +
          (-p0 + 3 * p1 - 3 * p2 + p3) * t * t * t
          );
}

Verwendung: t reicht von 0 bis 1, wobei der Wert den Spline zwischen zwei Kontrollpunkten interpoliert und die Gleitkommazahlen p0, p1, p2 und p3 die Kontrollpunkte darstellen (vorherige, aktuelle, nächste und die folgenden). Um n-dimensionale Kurven zu interpolieren, rufen Sie die Funktionen einfach einmal pro Achse auf.

Der praktische Unterschied zwischen bsplines und catmull-rom besteht im Wesentlichen darin, dass catmull-rom alle Kontrollpunkte durchläuft, während bsplines glatter sind.

Jari Komppa
quelle
Frage zur bspline Formel. Was ist der Zweck float it = 1.0f - tund die Verwendung itfür den b0Wert? Warum das für die bspline und nicht für die catmull rom?
Chrismanderson
2

Ich habe einige Links gefunden, die für andere nützlich sein könnten:

Beispielskript der Bezier-Implementierung in JS
http://jsfromhell.com/math/bezier

Es kann aus JavaScript oder ActionScript verwendet werden, um entlang eines Bezierpfads zu animieren.
http://code.google.com/p/javascript-beziers/

Online-Zeichnungsskript / -plot, sehr nützlich, wenn Sie einige Tests durchführen möchten
http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm

Ein bisschen Theorie und ein Implementierungsbeispiel
http://13thparallel.com/archive/bezier-curves/

Unendlichkeit
quelle