Download - Designerkurven - Bézierkurven im Unterricht

Transcript
Page 1: Designerkurven - Bézierkurven im Unterricht

1

Designerkurven -Bézierkurven im Unterricht

Baoswan Dzung Wong

Tag über Mathematik und Unterricht

MNG Rämibühl, 12. September 2012

Page 2: Designerkurven - Bézierkurven im Unterricht

2

Übersicht• Geschichtliches• Arten von Bézierkurven• Analytischer Zugang (nach Bézier)• Geometrischer Zugang (nach de Casteljau)• Eigenschaften von Bézierkurven• Bézierflächen

Page 3: Designerkurven - Bézierkurven im Unterricht

3

Geschichtliches:das Kurvenlineal

Page 4: Designerkurven - Bézierkurven im Unterricht

4

Geschichtliches: Pierre Bézier

Page 5: Designerkurven - Bézierkurven im Unterricht

5

Geschichtliches: Paul Faget de Casteljau

Page 6: Designerkurven - Bézierkurven im Unterricht

6

Arten von Bézierkurven:Mit gegebenen Endpunkten

• 1. Ordnung

• 2. Ordnung

• 3. Ordnung

P0

P0

P0

P1

P1

P1

P2

P2

P3

P

P

P

Page 7: Designerkurven - Bézierkurven im Unterricht

7

Arten von Bézierkurven: 2. Ordnung

Page 8: Designerkurven - Bézierkurven im Unterricht

8

Arten von Bézierkurven 2. Ordnung: Fadenspannbilder

Page 9: Designerkurven - Bézierkurven im Unterricht

9

Bézierkurve 2. Ordnung in der Architektur

Fussgängerbrücke in Seoul, Korea

Page 10: Designerkurven - Bézierkurven im Unterricht

10

Arten von Bézierkurven 3. Ordnung

bezeichnet Endpunkte der Kurve (P0 und P3)

bezeichnet Endpunkte der Griffe (P1 und P2)

Page 11: Designerkurven - Bézierkurven im Unterricht

11

Bézierkurven in Zeichenprogrammen

Schritt 1:

Werkzeugpalette/Linien/S-förmige Linie anklicken

Page 12: Designerkurven - Bézierkurven im Unterricht

12

Bézierkurven in Zeichenprogrammen

Schritt 2:

Grundlinie P0P3 definieren:Anfangspunkt 1x anklickenEndpunkt 2x anklicken

Page 13: Designerkurven - Bézierkurven im Unterricht

13

Bézierkurven in Zeichenprogrammen

Schritt 3:

Grundlinie anklicken:ctrl+Maustaste/Punkte bearbeiten/Anfangspunkt P0 anklicken:ctrl+Maustaste/Eckpunkte/Blauen Griff zu P1 ziehen

Page 14: Designerkurven - Bézierkurven im Unterricht

14

Bézierkurven in Zeichenprogrammen

Schritt 4:

Endpunkt P3 anklicken:ctrl+Maustaste/Eckpunkte/blauen Griff zu P2 ziehen

Page 15: Designerkurven - Bézierkurven im Unterricht

15

Eigenschaften von Bézierkurven

3. Ordnung

• Kurve beginnt in P0: P(0) = P0

• Kurve endet in P3: P(1) = P3 • Kurve startet in Richtung P0P1: P‘(0) = 3 P0 P1 • Kurve kommt aus Richtung P2P3: P‘(1) = 3 P2 P3

bezeichnet Endpunkte der Kurve (P0 und P3)

bezeichnet Endpunkte der Griffe (P1 und P2)

Page 16: Designerkurven - Bézierkurven im Unterricht

16

Analytischer Zugang (Bézier)

• Ansatz: P(t) = a0 + a1 t + a2 t2 + a3 t3

• Bedingungen: P(0) = P0 , P(1) = P3

P‘(0) = 3 P0 P1 , P‘(1) = 3 P2 P3

• Gleichungssystem nach ai auflösen

• ai in Ansatz einsetzen und nach Pi ordnen

• Resultat:

P(t) = Bk (t) ⋅Pkk= 0

3

Page 17: Designerkurven - Bézierkurven im Unterricht

17

Analytischer Zugang (Bézier)

Kurvengleichung

wobei B0(t) = (1-t)3

B1(t) = 3 (1-t)2 t

B2(t) = 3 (1-t) t 2

B3(t) = t 3

die bekannten Bernsteinpolynome sind.

P(t) = Bk (t) ⋅Pkk= 0

3

Page 18: Designerkurven - Bézierkurven im Unterricht

18

Analytischer Zugang (Bézier)

Die Gleichung der Bézierkurve lautet also

wobei

P(t) = Bk (t) ⋅Pkk= 0

3

Bk (t) =3

k

⎝ ⎜

⎠ ⎟⋅ tk (1− t)3−k

k = 0,1,2,3

0 ≤ t ≤1

Page 19: Designerkurven - Bézierkurven im Unterricht

19

Geometrischer Zugang (de Casteljau)

Konstruktion eines Kurvenpunktes

Q1

Q2

Q3

P2

P0

P1

R2

R3

S3

P3

Page 20: Designerkurven - Bézierkurven im Unterricht

20

Geometrischer Zugang:Herleitung der Formel

Die Qi, Ri und Si sind konvexe Kombinationen der Pi, Qi und Ri:

Qi = (1-t) Pi-1 + t Pi, i = 1,2,3

Ri = (1-t) Qi-1 + t Qi, i = 2,3

Si = (1-t) Ri-1 + t Ri, i = 3 wobei 0 < t < 1.

S3=P(t) durch die ursprünglich gegebenen Kontrollpunkte

P0P1P2P3 ausgedrückt ergibt

P(t) = (1-t)3 . P0+3(1-t)2 t . P1 + 3(1-t) t2 . P2 + t3 . P3

Page 21: Designerkurven - Bézierkurven im Unterricht

21

Geometrischer Zugang:Bedeutung der Formel

Ein Punkt der Bézierkurve ist das gewichtete Mittel der Kontrollpunkte

P(t) = (1-t)3 . P0 + 3(1-t)2 t . P1 + 3(1-t) t2 . P2 + t3 . P3

P(t) = B0(t) . P0 + B1(t)

. P1 + B2(t) . P2 + B3(t)

. P3

wobei 0 < t < 1 und

B0(t) = (1-t)3

B1(t) = 3 (1-t)2 t

B2(t) = 3 (1-t) t 2

B3(t) = t 3

Page 22: Designerkurven - Bézierkurven im Unterricht

22

Eigenschaften von Bézierkurven

• Konvexe Hülle• Symmetrie• Variationsverminderung • „Selbstähnlichkeit“ • Schnelle Berechnung• Lokale Kontrolle bei Zusammensetzung

Page 23: Designerkurven - Bézierkurven im Unterricht

23

Weitere Eigenschaft von Bézierkurven:Trapezhöhe = 4/3 Kurvenhöhe

Bei trapezförmigem Kontrollpolygon:a) Kurvenhochpunkt bei t = 1/2b) Kurvenhochpunkt auf 3/4 der Trapezhöhe

P1 P2

P3P0

P(1/2)

Page 24: Designerkurven - Bézierkurven im Unterricht

24

Schülerarbeiten: Bézierkurven

Page 25: Designerkurven - Bézierkurven im Unterricht

25

Schülerarbeiten: Piktogramme

Page 26: Designerkurven - Bézierkurven im Unterricht

26

Bézierkurven in der Typographie

Page 27: Designerkurven - Bézierkurven im Unterricht

27

Vektorgraphik vs. PixelgraphikVektorgraphik eignet sich für:• Vergrösserung ohne Qualitätsverlust (vgl. nebenstehendes Bild)• sparsamen Speicherplatz

Pixelgraphik eignet sich für:• Wiedergabe von Fotografien

Page 28: Designerkurven - Bézierkurven im Unterricht

28

VektorgraphikWolke aus Bézierkurven

• 10 Bézierkurven (12. Ordnung)

• 200 Bézierkurven (12. Ordnung)

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Page 29: Designerkurven - Bézierkurven im Unterricht

29

Vektorbild: Wäsche im Schnee

Page 30: Designerkurven - Bézierkurven im Unterricht

30

Bézierflächen

Methode beim Modellieren mit Ton:

Überflüssiges

Material abstreichen

Page 31: Designerkurven - Bézierkurven im Unterricht

31

Bézierflächen:Rechteckige Flächenstücke

Erzeugung durch Aneinanderreihen von Bézierkurven

P10P30P20P00P01P02P03P31P32P33

Page 32: Designerkurven - Bézierkurven im Unterricht

32

Bézierflächen:Rechteckige Flächenstücke

Kontrollnetz aus 4+4+4+4=16 Kontrollpunkten

P(s, t) = B jj= 0

3

∑ (s) Bkk= 0

3

∑ (t)Pkj

P(s, t) = B jj,k

∑ (s)Bk (t)Pkj

Page 33: Designerkurven - Bézierkurven im Unterricht

33

Bézierflächen: Anwendungen rechteckiger Flächenstücke

Äussere Karosserieteile, wie Dach, Türe, Motorhaube, usw.

Page 34: Designerkurven - Bézierkurven im Unterricht

34

Bézierflächen:Dreieckige Flächenstücke

• Kontrollnetz aus 4+3+2+1=10 Kontrollpunkten• Baryzentrische Koordinaten

P(s, t) = Bijki+ j+k= 3

∑ (s, t)Pijk

Bijk (s, t) :=3

ijk

⎝ ⎜

⎠ ⎟β 0i (s, t) ⋅β1

j (s, t) ⋅β 2k (s, t)

3

ijk

⎝ ⎜

⎠ ⎟:=

3!

i!⋅j!⋅k!

β0,β1,β 2

Page 35: Designerkurven - Bézierkurven im Unterricht

35

Für kompliziertere Formen: innere Teile der Automobilkarosse, Lancôme-Werbung, usw.

Bézierflächen: Anwendungen dreieckiger Flächenstücke