curveTo wie wird das berechnet ?

[Xeef]

wie wird curveTo intern berechnet ?


brauch sowas wie X=Math.sin(......

wen mir jemand sagen kan wie ich diese curve in 2 curven teile were auch super

moveTo(0,0)
curveTo(50,100,300,400)


moveTo(0,0)
curveTo(x1,y1,x2,y2)
curveTo(x3,y3,x4,y5)

soll gleich aussehen wie das andere hall 2 curven anstat einer !

[Xeef]

als erstes musste ich irgend wie den roten punkt berechnen
solte der mitelpinkt der curvenstrecke sein

und dan 2 curven erzeugen die mit der ersten deckungs gleich sind

sihe bild

[hgseib]

a) "..wie wird curveTo intern berechnet ?.."
b) "..wie ich diese curve in 2 curven teile were auch super.."

http://www.seibsprogrammladen.de/fra...on/Mathe/flash
das buch aufschlagen und
a) bézier-kurven berechnen
b) de casteljau algorithmus

http://www.seibsprogrammladen.de/fra...ispiele/flash7
-> Zeichnen
- Bézierkurve n.Grades, BSpline n.Ordnung und Kubischer Spline (3)

// curveTo teilen
//
var p1 = {x:100, y:100};
var p2 = {x:400, y:100};
var p3 = {x:400, y:400};
//
this.lineStyle(7, 0, 50);
this.moveTo(p1.x, p1.y);
this.curveTo(p2.x, p2.y, p3.x, p3.y);
//
// trennpunkt bei x%
var t = .3;
//
var p12 = {x:p1.x+(p2.x-p1.x)*t, y:p1.y+(p2.y-p1.y)*t};
var p23 = {x:p2.x+(p3.x-p2.x)*t, y:p2.y+(p3.y-p2.y)*t};
var p123 = {x:p12.x+(p23.x-p12.x)*t, y:p12.y+(p23.y-p12.y)*t};
//
this.lineStyle(1, 0x00FF00);
this.moveTo(p1.x, p1.y);
this.curveTo(p12.x, p12.y, p123.x, p123.y);
this.lineStyle(1, 0xFF0000);
this.curveTo(p23.x, p23.y, p3.x, p3.y);

[Xeef]

Hmmm

intresante lekture muss mich mall durchweltzen (vielen dank)

aber soweit ich das auf dem ersten blik sehe geht es uberwigend um
"Cubic Bezier" flash benutz aber "Quadratic Bezier"

heist ich habe keine 2 controlpunkte sondern nur einz

[Xeef]

Haha hat da doch jemand in seiner post rum editiert


das siht gut aus, sehr gut sogar !


vielen lieben dank !

(grosses verbeugen)

[hgseib]

"..heist ich habe keine 2 controlpunkte sondern nur einz.."
ja:
lineTo(startpunkt)
curveTo(controlpunkt, endpunkt)


ist die selbe technik, mit mehr oder weniger beiwerten:
"Cubic Bezier" == (a+b)^3 flash benutz aber "Quadratic Bezier" == (a+b)^2

dito de casteljau:
am script kannst du sehen, das bei Quadratic Bezier's eine konstruktionslinie (p12 .. p23 -> mitte=p123) langt.

[Xeef]

super vielen dank noch mall
hut ab vor dein mathe (het ich damals nur besser aufgepast )

[Xeef]

da bin ich wieder

// curveTo teilen
//
var p1 = {x:100, y:100};
var p2 = {x:200, y:100};
var p3 = {x:400, y:400};
//
this.lineStyle(7, 0, 50);
this.moveTo(p1.x, p1.y);
this.curveTo(p2.x, p2.y, p3.x, p3.y);
//
///////////////////////////////////
//
// trennpunkt bei x%
//
// trennpunkt ist nich bei % der strecke sondern bei % "der schrite ?"
// je grosser die steigung umso mehr macht es aus 
// weiss du irgend ein weg um wirklich die mitte zu trefen
// bezihungs weise das 2 schrite die gleiche strecke bedeuten ?
// ich zeichne curven die mit dieser formel (noch mall danke)
// schritweise gezeichnet werden
// so ist alerdings die zeichnungs geschwindigkeit unkonstant 
// mall schneler mall langsamer je nach steigung 
// 
// die formel ist ein bischen uber mein konen
// ich muste irgend wie die steigung mit berucksichtigen 
// alerdings hab ich keine ahnung wie :(
//
// heist mit eine schleife "t" erhohen alerdings muss "t" um ein wariirenden wert erhoht werden 
// wie krieg ich das ?
//////////////////////////////////
//
var t = .5;
//
var p12 = {x:p1.x+(p2.x-p1.x)*t, y:p1.y+(p2.y-p1.y)*t};
var p23 = {x:p2.x+(p3.x-p2.x)*t, y:p2.y+(p3.y-p2.y)*t};
var p123 = {x:p12.x+(p23.x-p12.x)*t, y:p12.y+(p23.y-p12.y)*t};
//
this.lineStyle(1, 0x00FF00);
this.moveTo(p1.x, p1.y);
this.curveTo(p12.x, p12.y, p123.x, p123.y);
this.lineStyle(1, 0xFF0000);
this.curveTo(p23.x, p23.y, p3.x, p3.y); 

[André Michelle]

Das ist leider nicht einfach zu lösen und nur über Näherungsverfahren in den Griff zu bekommen.

Ansatz:
http://archives.math.utk.edu/visual....h.1/index.html

Parametrisierte Gleichung einer quadratischen Bezierkurve
x(t):=(1-t)^2*x0+2*t*(1-t)*x1+t^2*x2;
y(t):=(1-t)^2*y0+2*t*(1-t)*y1+t^2*y2;

Ableitung:
x(t)'=2*t*(x0 - 2*x1 + x2) - 2*x0 + 2*x1;
y(t)'=2*t*(y0 - 2*y1 + y2) - 2*y0 + 2*y1;

Das heisst, die Kurvenlänge eines Stückes[t0,t1] ist relativ einfach zu lösen, aber von einer Kurvenlänge ab t0 auf t1 zu kommen habe ich bis heute nicht lösen können.

Es sei denn, du approximierst.

[hgseib]

die zwischenpunkte (in ein array) vorberechnen
und dann mit linien verbinden.
bei genügent zwischenpunkten ist das "rund" genug.
die länge der linien ist berechenbar und linien trennen geht auch einfach.

zeichengeschwindigkeit ist eine länge.

jetzt halt soviele linenstücke zeichen, bis die zeichenlänge erreicht ist
gegebenefalls eine linie nur teilweise zeichnen (trennen)
der rest dieser linie zählt beim nächsten step mit.


macht ein bisschen arbeit, aber wer schön sein will muss leiden ;-)

[Xeef]

Hmmmm

eigentlich hab ich immer gedacht ich bin in mathe nicht schlecht aber bei dem formeln versteh ich nur bahnhof



die methode von hgsieb scheint mir verwirklich bar (mit mienem kentnis stand der math )

muss mall ausprobieren und sehen wie es rauskomt


vielen dank an euch mall sehen was ich hinkriege und wan der nexte unlosbare problem auftauch

[André Michelle]

Es gibt eine sehr schnelle, aber auch nur approximierte Lösung allerdings ohne Loop-Approximation.

bezier at constant speed

Die Idee ist, die Velocity mit Hilfe der ersten Ableitung am BezierPunkt P(t) zu berechnen. Von diesem Punkt kann man einen 2. t-Wert mit dem Abstand X berechnen, wenn man X / sqrt( V(t) ) nimmt. Da aber die Velocity bei jedem t anders ist, funktioniert das nur in der Nähe. Aber ich finde, dass es für die meisten Anwendungen reichen wird. Ansonsten wäre eine zwei oder dreifache Unterteilung des Abstand sehr dicht am Ergebnis.

Im SWF zeige ich pro errechneten Punkt den Abstand zum vorherigen im Textfeld an. Wenn die Kurve nicht zu arg gebogen ist, dann liegen die Werte zwischen +/- 1. Um so mehr Punkte (Slider), desto genauer wird das Ergebnis.

[hgseib]

eine erweiterung, die immer geht - in den grenzen des möglichen.

[André Michelle]

Sehr gut. Wie berechnest du den Scheitelpunkt der Kurve ?

Wobei gerade am Scheitelpunkt das nicht funktioniert. Das kann man vielleicht noch optimieren.

[hgseib]

"..Wie berechnest du den Scheitelpunkt der Kurve ?.."
steht doch im script:
var n=1, sx=x0-2*x1+x2, sy=y0-2*y1+y2;
//
// scheitel
var b = (sx*(x2-x1)+sy*(y2-y1))/(sx*sx+sy*sy);
var s = b<0 ? 0 : b>1 ? 1 : b;
var a = 1-s;
var mx = s*s*x0+2*a*s*x1+a*a*x2;
var my = s*s*y0+2*a*s*y1+a*a*y2;
war eine formel im internet, die aber definitiv nicht gestimmt hat. hab rumprobiert bis es passend ausgesehen hat ;-) wenn der scheitelpunkt der punkt mit der grössten steigung ist, dann soll's der sein.


"..Wobei gerade am Scheitelpunkt das nicht funktioniert.."
steht auch im script:
// draw bézier mit (fast) konstanter geschwindigkeit
// (im scheitelpunkt gibt es einen längenausgleich)
dann müsste man zuerst die länge der kurve ermitteln um eine ganzzahlige teilung zu erhalten. sonst gibts immer einen rest.
vom scheitelpunkt zu den enden hin teilen und die reststücke dort zu haben geht nicht, weil dabei das mit dem riessen abstand entsteht. was ja der auslöser war, warum ich von beiden enden zum scheitelpunkt hin unterteile.

und gebastelt:
// scheitelpunkt erhalten
// const/3 ist willkürlich gewählt.
// ziel: doppelpunkte am scheitelpunkt zu unterbinden

der scheitelpunkt selbst muss nicht unbedingt dabei sein
p21.push({x:mx, y:my});
aber dann werden besonders spitze kurven gekappt.

da der scheitelpunkt nicht in die teilung passt pope ich noch die zwei nachbarpunkte, wenn sie zu nahe liegen.
p01.pop(); und p21.pop();
die daraus resultierenden 2 unexakten verbindungslinien sind der besste kompromis.
kann aber jeder handhaben wie er will ;-)