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

Today Finish FLTK curves Reading http://pages.cs.wisc.edu/~cs559-1/tutorials.htm Shirley: Ch 15.1, 15.2, 15.3

FLUT vs FLTK

FLTK Demo Demo: Window-> glWindow Window-> double buffer Image for manual –> evaluator Cool -> puzzle Tutorial -> hello Tutorial -> shape Tutorial -> cubeview

FLTK class hierarchy

Hello world and Shape control

The Cube example #include "config.h" #include <FL/Fl.H> #include "CubeViewUI.h" int main(int argc, char **argv) { CubeViewUI *cvui=new CubeViewUI; Fl::visual(FL_DOUBLE|FL_RGB); cvui->show(argc, argv); return Fl::run(); } Defined the widgets alredy You only need to assemble them together If you want to change the behavior, you will create an subclass and inheriate some functions

class CubeViewUI { public: CubeViewUI(); private: Fl_Double_Window *mainWindow; Fl_Roller *vrot; Fl_Slider *ypan; void cb_vrot_i(Fl_Roller*, void*); void cb_ypan_i(Fl_Slider*, void*); Fl_Slider *xpan; Fl_Roller *hrot; void cb_xpan_i(Fl_Slider*, void*); void cb_hrot_i(Fl_Roller*, void*); CubeView *cube; Fl_Value_Slider *zoom; void cb_zoom_i(Fl_Value_Slider*, void*); void show(int argc, char **argv); };

class CubeViewUI { public: CubeViewUI(); private: Fl_Double_Window *mainWindow; Fl_Roller *vrot; Fl_Slider *ypan; void cb_vrot_i(Fl_Roller*, void*); void cb_ypan_i(Fl_Slider*, void*); Fl_Slider *xpan; Fl_Roller *hrot; void cb_xpan_i(Fl_Slider*, void*); void cb_hrot_i(Fl_Roller*, void*); CubeView *cube; Fl_Value_Slider *zoom; void cb_zoom_i(Fl_Value_Slider*, void*); void show(int argc, char **argv); }; class CubeView : public Fl_Gl_Window { public: double size; float vAng,hAng; float xshift,yshift; CubeView(int x,int y,int w,int h,const char *l=0); void v_angle(float angle){vAng=angle;}; void h_angle(float angle){hAng=angle;}; void panx(float x){xshift=x;}; void pany(float y){yshift=y;}; void draw(); void drawCube(); float boxv0[3];float boxv1[3]; float boxv2[3];float boxv3[3]; float boxv4[3];float boxv5[3]; float boxv6[3];float boxv7[3]; };

class CubeViewUI { public: CubeViewUI(); private: Fl_Double_Window *mainWindow; Fl_Roller *vrot; Fl_Slider *ypan; void cb_vrot_i(Fl_Roller*, void*); void cb_ypan_i(Fl_Slider*, void*); Fl_Slider *xpan; Fl_Roller *hrot; void cb_xpan_i(Fl_Slider*, void*); void cb_hrot_i(Fl_Roller*, void*); CubeView *cube; Fl_Value_Slider *zoom; void cb_zoom_i(Fl_Value_Slider*, void*); void show(int argc, char **argv); }; class CubeView : public Fl_Gl_Window { public: double size; float vAng,hAng; float xshift,yshift; CubeView(int x,int y,int w,int h,const char *l=0); void v_angle(float angle){vAng=angle;}; void h_angle(float angle){hAng=angle;}; void panx(float x){xshift=x;}; void pany(float y){yshift=y;}; void draw(); void drawCube(); float boxv0[3];float boxv1[3]; float boxv2[3];float boxv3[3]; float boxv4[3];float boxv5[3]; float boxv6[3];float boxv7[3]; }; void CubeView::draw() { if (!valid()) { glLoadIdentity(); glViewport(0,0,w(),h()); glOrtho(-10,10,-10,10,-20050,10000); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); } glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glPushMatrix(); glTranslatef(xshift, yshift, 0); glRotatef(hAng,0,1,0); glRotatef(vAng,1,0,0); glScalef(float(size),float(size),float(size)); drawCube(); glPopMatrix();

class CubeViewUI { public: CubeViewUI(); private: Fl_Double_Window *mainWindow; Fl_Roller *vrot; Fl_Slider *ypan; void cb_vrot_i(Fl_Roller*, void*); void cb_ypan_i(Fl_Slider*, void*); Fl_Slider *xpan; Fl_Roller *hrot; void cb_xpan_i(Fl_Slider*, void*); void cb_hrot_i(Fl_Roller*, void*); CubeView *cube; Fl_Value_Slider *zoom; void cb_zoom_i(Fl_Value_Slider*, void*); void show(int argc, char **argv); }; class CubeView : public Fl_Gl_Window { public: double size; float vAng,hAng; float xshift,yshift; CubeView(int x,int y,int w,int h,const char *l=0); void v_angle(float angle){vAng=angle;}; void h_angle(float angle){hAng=angle;}; void panx(float x){xshift=x;}; void pany(float y){yshift=y;}; void draw(); void drawCube(); float boxv0[3];float boxv1[3]; float boxv2[3];float boxv3[3]; float boxv4[3];float boxv5[3]; float boxv6[3];float boxv7[3]; };

Initialize window layout CubeViewUI::CubeViewUI() { Fl_Double_Window* w; { Fl_Double_Window* o = mainWindow = new Fl_Double_Window(415, 405, "CubeView"); 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->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->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->minimum(25); o->maximum(-25); o->callback((Fl_Callback*)cb_xpan); o->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); { Fl_Roller* o = hrot = new Fl_Roller(122, 383, 186, 17, "H Rotation"); o->type(1); o->callback((Fl_Callback*)cb_hrot); o->align(FL_ALIGN_RIGHT); { Fl_Group* o = MainView = new Fl_Group(46, 27, 333, 333); { Fl_Box* o = cframe = new Fl_Box(46, 27, 333, 333); o->box(FL_DOWN_FRAME); o->color((Fl_Color)4); o->selection_color((Fl_Color)69); { CubeView* o = cube = new CubeView(48, 29, 329, 329, "This is the cube_view"); o->box(FL_NO_BOX); o->color(FL_BACKGROUND_COLOR); o->selection_color(FL_BACKGROUND_COLOR); o->labeltype(FL_NORMAL_LABEL); o->labelfont(0); o->labelsize(14); o->labelcolor(FL_FOREGROUND_COLOR); o->when(FL_WHEN_RELEASE); { Fl_Value_Slider* o = zoom = new Fl_Value_Slider(106, 3, 227, 19, "Zoom"); o->labelfont(1); o->minimum(1); o->maximum(50); o->value(10); o->textfont(1); o->callback((Fl_Callback*)cb_zoom); o->align(FL_ALIGN_LEFT); o->resizable(o);

FLUID

FLUID Demo

Where are we? We know the math and programming skill to: Using transformation, projection, rasterization, hiddern-surface removal, lighting, material. What we can’t do so far?

Where are we? We know the math and programming skill to: Remain questions: Model 3D shape Where to get shape? How to edit it?

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

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

Curves y y x x line circle y x Freeform

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

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

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

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

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

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:-1:0 f = a[i]+t*f; end

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

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

More control points p1 p2 p0

More control points p1 p2 p0 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