cubeCurveTo

[labrar]

Hallo. Wie im Threadtitel schon erwähnt bräuchte ich eben die Funktion cubeCurveTo für AS2.
Weder die Suche hier noch bei Google hat mich weitergebracht.
D.h. im Prinzip schon und wieder nicht.
Formerlerklärungen in Mathematischen Hyroglyphen bringen mir nix da ich diesbezüglich ein Vollpfosten bin.
Mit Formeln wie wegen mir x=Math.sin(2345) kann ich schon eher umgehen. Auch Pi usw.
Also sowas ist für mich spanisch

oder sowas


Im Prinzip möchte ich einen Aufruf erreichen ala

PHP-Code:

cubeCurveTo(sx,sy,mx,my,ex,ey); 


Daraus resultieren dann eben 2 (oder wenns sauberer sein soll 4)
quadratische curveTo.
Nur leider fehlt mir absolut der Ansatz zur Umrechnung.
Hat jemand sowas auf Halde oder kann mir zumindest erklären wie ich aus diesen 6 Parametern eben 8 mache (also für zwei normale curveTo's).

Danke im Vorraus

PS:
Auch die Flashhilfe ist da mal richtig fürs Gesäß.
Zwar sind da zwei hübsche Grafiken abgebildet (links Quadratisches Bezier, rechts kubisches Bezier) aber erklärt wird explizit nur das quadratische.
Ganz großes Kino

[Martin Kraft]

Zitat von labrar

Auch die Flashhilfe ist da mal richtig fürs Gesäß.
Zwar sind da zwei hübsche Grafiken abgebildet (links Quadratisches Bezier, rechts kubisches Bezier) aber erklärt wird explizit nur das quadratische.
Ganz großes Kino

Könnte daran liegen, dass es bis FP11/AS3 nur quadratische Bézier-Kurven gibt

Aber glücklicherweise hat hgseib in seinem unerschöpflichen Fundus ein Script dafür:

PHP-Code:

// Bestmögliche Anpassung: eine kubische --> vier quatratische Bézier-Kurven      
function fBezier3_to_4Bezier2(p0, p1, p2, p3){
  function fP(a, b) { 
    return {x:a.x-t*(a.x-b.x), y:a.y-t*(a.y-b.y)}; 
  }
  var t = .5;
  var p4 = fP(p0, p1), p5 = fP(p1, p2), p6 = fP(p2, p3);
  var p7 = fP(p4, p5), p8 = fP(p5, p6), p9 = fP(p7, p8);
  var t = .75, p10 = fP(p0, p4), p12 = fP(p9, p8);
  var t = .25, p11 = fP(p7, p9), p13 = fP(p6, p3);
  var t = .50, p14 = fP(p10, p11), p15 = fP(p12, p13);
  return ([[p0, p10, p14], [p14, p11, p9], [p9, p12, p15], [p15, p13, p3]]);
} 


Alles was p heißt ist dabei ein Point.

[labrar]

Jup Danke. Die hatte cich mir auch schon angeschaut. Aber auch da werden ja nur vier Parameter angegeben. Ich habe aber sechs????

[hgseib]

Zitat von labrar

cubeCurveTo für AS2

nützt dir das was?
H.G.Seib
-> berührungen
und
-> Zeichnen
jeweils die ZIP laden.
da ist das eine oder andere mit bezier dabei.

aber den mathematischen hindergrund musst du dir selbst anlesen. dafür hats aber auch genug infos im internet.

[labrar]

Jup
LineBezier3 sollte genau das sein.
Muchas graziaz

[Martin Kraft]

Zitat von labrar

Aber auch da werden ja nur vier Parameter angegeben. Ich habe aber sechs????

Eine Cubische Bézier-Curve wird ja auch durch 4 Punkte definiert (2 Endpunkte und 2 Kontrollpunkte), ein Quadratische benötigt nur 3 (2 Endpunkte und einen Kontrollpunkt).

Die 6 Parameter bzw. 3 Punkte (jeweils x und y) von den Du sprichtst, sind wahrscheinlich nur die 2 Kontrollpunkte sowie der Endpunkt der Kurve, weil bei den Methoden der Drawing-API der Anfangspunkt automatisch der Punkt ist, bei dem der letzte Zeichenprozess endete.

Wenn Du nun aber einen kubische in 4 quadratische Bézierkurven umrechnen willst, brauchst Du diesen Anfangspunkt. Und damit hast Du dann 4 Punkte!

[labrar]

Ja das mag stimmen. Aber ich habe tatsächlich 6 Parameter zum umrechen.
SVG (C).

@hgseib Deine Sache funktioniert für meine Zwecke zwar, aber du arbeitest da nur mit Lineto (x+=0.01,y+=0.01) was aber 100erte Punkte mit sich bringt.
Wenn ich jetzt vier Punkte habe

PHP-Code:

      P2         P3


 P1                   P4 


und die x und y Positionen von P2, P3 und P4 meine Parameter ergeben, dann müsste sich doch daraus irgendwie der Mittelpunkt im Verhältnis zu den curveTos errechnen lassen.

Also zB.

PHP-Code:

curveTo(p2._x,p2._y,unbekannterwert._x,unbekannterwert._y);
curveTo(p3._x,p3._y,p4._x,p4._y); 


Der y und X punkt von unbekannt müsste etwa bei 2.4 vierteln zwischen P2 und P1 liegen.

Wie auf dem rechten Grafikchen der beiden hier

[milchreis]

Zitat von labrar

irgendwie

Eine kubische Bezier Kurve benötigt aber leider 4 Punkte für ihre Definition, basta.

Du kannst auch nicht erwarten, mit nur 2 Punkten ein Dreieck eindeutig definieren zu können.
Oder durch einen einzigen Punkt eine Gerade.

[Martin Kraft]

Zitat von labrar

Ja das mag stimmen. Aber ich habe tatsächlich 6 Parameter zum umrechen.
SVG (C).

Das stimmt nur bedingt:

Du brauchst diese erste Koordinate zum berechen der 4 Cubischen Kurven. Ohne die geht's nicht!

Auch in SVG kommt eine Kurve ja nicht aus dem nichts! Und wenn Du denn Endpunkt der letzten Zeichenoperation dazu nimmst, hast Du 4 Punkte bzw. 8 Werte. Und mit 4 Punkten und dem Code von oben ist Dein Problem gelöst!

[hgseib]

:-)
quadratisch braucht 3
kubisch braucht 4
und höherwertige kurven kann man aus mehr punkten berechnen .. das dürfte aber nur die mathematiker interessieren. ist auch viel zu rechenaufwendig (siehe meine muster-beispiele: bezier 4.,5.,6. grades usw.)

in der praxis langt die quadartische (ist übrigens eine parabel) sehr schön zu berechnen, liegt als flash-befehl vor ...
komplexere kurvenzüge erreicht man durch einfaches aneinander hängen, wobei die anschlüsse die selbe tangentensteigung haben müssen. also z.b.:
A-B-C (A= anfang, C= ende)
C-D-E (B-C-D müssen auf einer linie liegen, für einen übergang von einer zur nächten curve)
B,D wären in einem zeichenprogramm (z.b. illustrator) die 'anfasser' punkte, A,C,E sind die stützpunkte

@labrar: so ganz ohne grundwissen wird's nicht gehen. lies dich halt mal ein. bin auch kein mathematiker, man muss es halt mal machen, dann sieht man wie es geht ;-)

[labrar]

Okay. Ich habe jetzt eine Quick'n'Dirty Lösung gebastelt. (Eigentlich eher Dirty)
Aber sie funktioniert relative gut.

PHP-Code:

function getDots(a,b,div){
    if(isNaN(div)){div=1;}
    rangeD=Math.abs(b-a);
    range=rangeD*div;
    if(a>b){
        return b+(range/2);
        }else{
        return a+(range/2);    
            }
    }
function cubicCurveTo(curv,sx,sy,h1x,h1y,h2x,h2y,ex,ey){
    ahx=getDots(sx,h1x,0.65);
    ahy=getDots(sy,h1y,0.65);
    bhx=getDots(h2x,ex,0.65);
    bhy=getDots(h2y,ey,0.65);
    ox=getDots(ahx,bhx);
    oy=getDots(ahy,bhy);
    curv.moveTo(sx,sy);
    curv.curveTo(ahx,ahy,ox,oy);
    curv.curveTo(bhx,bhy,ex,ey);
} 


Aufzurufen wie folgt;

PHP-Code:

cubicCurveTo(mcderzeichnensoll,startx,stary,steuerung1x,steuerung1y,steuerung2x,steuerung2y,endx,endy); 


Demon hängt bei.
Viel Spaß damit

Ach so. Verbesserungsvorschläge sind immer sehr sehr nett

PS:
Die roten Quadrate und die blauen Kreise sind dragbar. (Ich hab da ein bissle beim Demo von hqseib geklaut. Bist ned böse oder???
Die grünen zeigen jeweils die Steuerpositionen an

[Martin Kraft]

Die Lösung ist aber sehr "dirty" und hat wenig mit der cubischen Beézierkurve zutun, die Du eigentlich simulieren möchtest. Zum Vergleich hab ich eben diese Kurve mal in Illustrator drüber gelegt (siehe dirty.png).

Soweit ich weiß, braucht man eben 4 kubische Bézierkurven um halbwegs nah an eine Cubische zu kommen und nicht nur 2! Wieso verwendest Du nicht einfach den Code von oben, da hast Du doch alles was Du brauchst?

[labrar]

Ganz ehrlich? Weil ich den Code NULL schnalle. Und somit auch nix modifizieren kann.
Also mit vieren würde es realistischer aussehen? Denn das kann ich da noch ranpacken. Danke für den Hinweis
Bei hqseib's Lösung

PHP-Code:

function fBezier3_to_4Bezier2(p0, p1, p2, p3){
  function fP(a, b) { 
    return {x:a.x-t*(a.x-b.x), y:a.y-t*(a.y-b.y)}; 
  }
  var t = .5;
  var p4 = fP(p0, p1), p5 = fP(p1, p2), p6 = fP(p2, p3);
  var p7 = fP(p4, p5), p8 = fP(p5, p6), p9 = fP(p7, p8);
  var t = .75, p10 = fP(p0, p4), p12 = fP(p9, p8);
  var t = .25, p11 = fP(p7, p9), p13 = fP(p6, p3);
  var t = .50, p14 = fP(p10, p11), p15 = fP(p12, p13);
  return ([[p0, p10, p14], [p14, p11, p9], [p9, p12, p15], [p15, p13, p3]]);
} 


schnalle ich ein paar Dinge nicht.

Wie genau soll die Augerufen werden?
p0 steht doch für einen Numerischen Wert oder nicht? D.h. doch im Umkehrschluss, ich müsste die funktion so aufrufen
fBezier3_to_4Bezier2(startxposi,startyposi,steuerx ,steuery);
Oder täusche ich mich da?

Der Punkt ist, denn ich glaube darauf bin ich noch nicht expliztit eingegangen,
dass ich SVG Pfade umrechenen will.
So. Jetzt gibt es den SVG Bezeichner C welcher mit genau 6 Parametern um die Ecke kommt.
Steuerx,Steuery, Steuer2x,Steuer2y,Endpunktx, Endpunkty.
Der Startwert ist ja schon durch vorhergehendes zB. L oder M gegeben.

Nochmal Edit:
Durch eine kleine Abänderung

PHP-Code:

function cubicCurveTo(curv,sx,sy,h1x,h1y,h2x,h2y,ex,ey){
    ahx=getDots(sx,h1x);
    ahy=getDots(sy,h1y);
    bhx=getDots(h2x,ex);
    bhy=getDots(h2y,ey);
    ox=getDots(ahx,bhx);
    oy=getDots(ahy,bhy);
    curv.moveTo(sx,sy);
    curv.curveTo(ahx,ahy,ox,oy);
    curv.curveTo(bhx,bhy,ex,ey);
} 


kommt es jetzt schon eher an deine Illusplines ran. Der letzte Bogen stimmt nicht.
Aber bei einfacheren Bögen stimmt es gar nicht mehr.
(Ich teste das genauso wie du. Ich lege immer eine Grafik einer stimmenden Kurve darunter )
Ich werde es jetzt mal mit 4 curveTo's probieren.

[Martin Kraft]

Zitat von labrar

Ganz ehrlich? Weil ich den Code NULL schnalle. Und somit auch nix modifizieren kann.

Du musst da doch garnichts modifizieren?!

Die Funktion oben erwartet 4 Punkte (das sind genausoviele, wie Du gerade in Deinem Code verwendest) und liefert dann ein Array mit 4mal 3 Punkten zurück (die logischerweise jeweils eine cubische Bézierkurven darstellen)! Jetzt musst Du doch nur noch jedes Array mit jeweils einem curveTo zeichnen!

Aber bevor wir darüber noch ewig diskutuieren , hab ich's Dir hier mal etwas leserlicher zusammengetippt:

PHP-Code:

import flash.geom.Point;

function cubicCurveTo( mc:MovieClip, p1x:Number, p1y:Number, h1x:Number, h1y:Number, h2x:Number, h2y:Number, p2x:Number, p2y:Number):Void {
    var curves:Array = cubicToQuadraticBezier(
        new Point(p1x, p1y),
        new Point(h1x, h1y),
        new Point(h2x, h2y),
        new Point(p2x, p2y)
    );
    
    mc.moveTo( p1x, p1y );
    
    for (var i:Number = 0; i < curves.length; i++) {
        mc.curveTo(curves[i][1].x, curves[i][1].y, curves[i][2].x, curves[i][2].y)
    }
}
  
function cubicToQuadraticBezier(p0:Point, p1:Point, p2:Point, p3:Point):Array {
    var p4 = Point.interpolate(p1, p0, .5);
    var p5 = Point.interpolate(p2, p1, .5);
    var p6 = Point.interpolate(p3, p2, .5);
    var p7 = Point.interpolate(p5, p4, .5);
    var p8 = Point.interpolate(p6, p5, .5);
    var p9 = Point.interpolate(p8, p7, .5);

    var p10 = Point.interpolate(p4, p0, .75);
    var p12 = Point.interpolate(p8, p9, .75);

    var p11 = Point.interpolate(p9, p7, .25);
    var p13 = Point.interpolate(p3, p6, .25);

    var p14 = Point.interpolate(p11, p10, .5);
    var p15 = Point.interpolate(p13, p12, .5);

    return [[p0, p10, p14], [p14, p11, p9], [p9, p12, p15], [p15, p13, p3]];

}

cubicCurveTo( mcderzeichnensoll, startx, stary, steuerung1x, steuerung1y, steuerung2x, steuerung2y, endx, endy); 


[labrar]

Wow du bist ein Schatz
Das wird gleichmal getestet