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

2. Today Finish FLTK curves Reading
Shirley: Ch 15.1, 15.2, 15.3

3. FLUT vs FLTK

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

5. FLTK class hierarchy

6. Hello world and Shape control

7. 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

8. 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); };

9. 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]; };

10. 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();

11. 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]; };

12. 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);

13. FLUID

14. FLUID
Demo

15. 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?

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

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

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

19. Curves y y x x
line
circle y x
Freeform

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

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

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

23. 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

24. 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

25. An example of a complex curve
Piecing together basic curves

26. Continuities

27. Polynomial Pieces
Polynomial functions:
Polynomial curves:

28. 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

29. 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

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

31. More control points p1 p2 p0

32. More control points p1 p2 p0
By solving a matrix equation that satisfies the constraints,
we can get polynomial coefficients

33. 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