CS 559 Computer Graphics Lecture 18 FLTK and

CS 559: Computer Graphics Lecture 18: FLTK and Curves Li Zhang Spring 2008

Today • Finish FLTK • curves • Reading – http: //pages. cs. wisc. edu/~cs 559 -1/tutorials. htm – Shirley: Ch 15. 1, 15. 2, 15. 3

FLUT vs FLTK

FLTK Demo

FLTK class hierarchy

Hello world and Shape control

The Cube example #include "config. h" #include <FL/Fl. H> #include "Cube. View. UI. h" int main(int argc, char **argv) { Cube. View. UI *cvui=new Cube. View. UI; Fl: : visual(FL_DOUBLE|FL_RGB); cvui->show(argc, argv); return Fl: : run(); }

class Cube. View. UI { public: Cube. View. UI(); private: Fl_Double_Window *main. Window; public: Fl_Roller *vrot; Fl_Slider *ypan; private: void cb_vrot_i(Fl_Roller*, void*); void cb_ypan_i(Fl_Slider*, void*); public: Fl_Slider *xpan; Fl_Roller *hrot; private: void cb_xpan_i(Fl_Slider*, void*); void cb_hrot_i(Fl_Roller*, void*); public: Cube. View *cube; Fl_Value_Slider *zoom; private: void cb_zoom_i(Fl_Value_Slider*, void*); public: void show(int argc, char **argv); };

class Cube. View. UI { public: Cube. View. UI(); private: Fl_Double_Window *main. Window; public: Fl_Roller *vrot; Fl_Slider *ypan; private: void cb_vrot_i(Fl_Roller*, void*); void cb_ypan_i(Fl_Slider*, void*); public: Fl_Slider *xpan; Fl_Roller *hrot; private: void cb_xpan_i(Fl_Slider*, void*); void cb_hrot_i(Fl_Roller*, void*); public: Cube. View *cube; Fl_Value_Slider *zoom; private: void cb_zoom_i(Fl_Value_Slider*, void*); public: void show(int argc, char **argv); }; class Cube. View : public Fl_Gl_Window { public: double size; float v. Ang, h. Ang; float xshift, yshift; Cube. View(int x, int y, int w, int h, const char *l=0); void v_angle(float angle){v. Ang=angle; }; void h_angle(float angle){h. Ang=angle; }; void panx(float x){xshift=x; }; void pany(float y){yshift=y; }; void draw(); void draw. Cube(); float boxv 0[3]; float boxv 1[3]; float boxv 2[3]; float boxv 3[3]; float boxv 4[3]; float boxv 5[3]; float boxv 6[3]; float boxv 7[3]; };

class Cube. View. UI { public: Cube. View. UI(); private: Fl_Double_Window {*main. Window; void Cube. View: : draw() class Cube. View : public Fl_Gl_Window { public: double size; float v. Ang, h. Ang; float xshift, yshift; if (!valid()) { public: gl. Load. Identity(); Fl_Roller *vrot; gl. Viewport(0, 0, w(), h()); Fl_Slider *ypan; Cube. View(int x, int y, int w, int h, const char *l=0); gl. Ortho(-10, 10, -20050, 10000); private: gl. Enable(GL_BLEND); void cb_vrot_i(Fl_Roller*, void*); void v_angle(float angle){v. Ang=angle; }; gl. Blend. Func(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); void cb_ypan_i(Fl_Slider*, void*); } void h_angle(float angle){h. Ang=angle; }; public: gl. Clear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); Fl_Slider *xpan; void panx(float x){xshift=x; }; Fl_Roller *hrot; void pany(float y){yshift=y; }; gl. Push. Matrix(); private: void cb_xpan_i(Fl_Slider*, void draw(); gl. Translatef(xshift, yshift, void*); 0); void cb_hrot_i(Fl_Roller*, void*); gl. Rotatef(h. Ang, 0, 1, 0); gl. Rotatef(v. Ang, 1, 0, 0); void draw. Cube(); } gl. Scalef(float(size), float(size)); public: float boxv 0[3]; float boxv 1[3]; Cube. View *cube; float boxv 2[3]; float boxv 3[3]; draw. Cube(); Fl_Value_Slider *zoom; float boxv 4[3]; float boxv 5[3]; private: float boxv 6[3]; float boxv 7[3]; gl. Pop. Matrix(); void cb_zoom_i(Fl_Value_Slider*, void*); public: void show(int argc, char **argv); };

class Cube. View. UI { public: Cube. View. UI(); private: Fl_Double_Window *main. Window; public: Fl_Roller *vrot; Fl_Slider *ypan; private: void cb_vrot_i(Fl_Roller*, void*); void cb_ypan_i(Fl_Slider*, void*); public: Fl_Slider *xpan; Fl_Roller *hrot; private: void cb_xpan_i(Fl_Slider*, void*); void cb_hrot_i(Fl_Roller*, void*); public: Cube. View *cube; Fl_Value_Slider *zoom; private: void cb_zoom_i(Fl_Value_Slider*, void*); public: void show(int argc, char **argv); }; class Cube. View : public Fl_Gl_Window { public: double size; float v. Ang, h. Ang; float xshift, yshift; Cube. View(int x, int y, int w, int h, const char *l=0); void v_angle(float angle){v. Ang=angle; }; void h_angle(float angle){h. Ang=angle; }; void panx(float x){xshift=x; }; void pany(float y){yshift=y; }; void draw(); void draw. Cube(); float boxv 0[3]; float boxv 1[3]; float boxv 2[3]; float boxv 3[3]; float boxv 4[3]; float boxv 5[3]; float boxv 6[3]; float boxv 7[3]; };

Initialize window layout Cube. View. UI: : Cube. View. UI() { Fl_Double_Window* w; { Fl_Double_Window* o = main. Window = new Fl_Double_Window(415, 405, "Cube. View"); w = o; o->box(FL_UP_BOX); o->labelsize(12); o->user_data((void*)(this)); { Fl_Group* o = new Fl_Group(5, 3, 374, 399); { Fl_Group* o = VChange = new Fl_Group(5, 100, 37, 192); { Fl_Roller* o = vrot = new Fl_Roller(5, 100, 17, 186, "V Rot"); o->labeltype(FL_NO_LABEL); o->labelsize(12); o->minimum(-180); o->maximum(180); o->step(1); o->callback((Fl_Callback*)cb_vrot); o->align(FL_ALIGN_WRAP); } { Fl_Slider* o = ypan = new Fl_Slider(25, 100, 17, 186, "V Pan"); o->type(4); o->selection_color(FL_DARK_BLUE); o->labeltype(FL_NO_LABEL); o->labelsize(12); o->minimum(-25); o->maximum(25); o->step(0. 1); o->callback((Fl_Callback*)cb_ypan); o->align(FL_ALIGN_CENTER); } o->end(); } { Fl_Group* o = HChange = new Fl_Group(120, 362, 190, 40); { Fl_Slider* o = xpan = new Fl_Slider(122, 364, 186, 17, "H Pan"); o->type(5); o->selection_color(FL_DARK_BLUE); o->labeltype(FL_NO_LABEL); o->labelsize(12); o->minimum(25);

FLUID

FLUID Demo

Where are we? • We know the math and programming skill to: Using transformation, projection, rasterization, hiddern-surface removal, lighting, material.

Where are we? • We know the math and programming skill to: • Remain questions: – Model 3 D shape

Where are we? • We know the math and programming skill to: • Remain questions: – Model 3 D shape – Model complex appearance

Where are we? • We know the math and programming skill to: • Remain questions: – Model 3 D shape – Model complex appearance – More Realistic Synthesis

Curves y y x x circle line y x Freeform

Curve Representation y y t t d d c x line Explicit: Implicit: Parametric: c circle x

Curve Representation y y t t d d c x line Parametric: c circle x

Curve Representation y y t t d d c x line Parametric: c circle x

Curve Representation y y t t d d c x line c circle Parametric: Any invertible function g will result in the same curve x

What are Parametric Curves? • Define a mapping from parameter space to 2 D or 3 D points – A function that takes parameter values and gives back 3 D points • The result is a parametric curve Mapping: F: t→(x, y, z) (Fx(t), Fy(t), Fz(t), ) 0 1 t 0 1

An example of a complex curve Piecing together basic curves

Continuities

Polynomial Pieces Polynomial functions: Polynomial curves:

Polynomial Evaluation Polynomial functions: f = a[0]; for i = 1: n f += a[i]*power(t, i); end f = a[0]; s = 1; for i = 1: n s *= t; f += a[i]*s; end f = a[n]; for i = n-1: 0 f = a[i]+t*f; end

A line Segment • We have seen the parametric form for a line: p 1 p 0 • Note that x, y and z are each given by an equation that involves: – The parameter t – Some user specified control points, x 0 and x 1 • This is an example of a parametric curve

A line Segment • We have seen the parametric form for a line: p 1 p 0 From control points p, we can solve coefficients a

More control points p 1 p 2 p 0

More control points p 1 p 2 p 0 By solving a matrix equation that satisfies the constraints, we can get polynomial coefficients

Two views on polynomial curves From control points p, we can compute coefficients a Each point on the curve is a linear blending of the control points