Sunday, September 25, 2011

C++ FLTK (X,Y) AXIS TUTORIAL







REVISED: Friday, March 22, 2013


CONTENTS:
I.      INTRODUCTION
II.     BACKGROUND WINDOW
III.    (X,Y) Axis
IV.    POLYGON
V.     RECTANGLE
VI.    CIRCLE
VII.   ELLIPSE
VIII.  MARK
IX.    SCREEN SAVER

YOU WILL LEARN HOW TO CODE A C++ FLTK:
1. AXIS
2. POLYGON
3. RECTANGLE
4. CIRCLE
5. ELLIPSE
6. MARK
7. SCREEN SAVER

I. INTRODUCTION


Welcome to the “C++ FLTK (X,Y) Axis Tutorial.”

This tutorial is a very brief overview of information presented by:

Dr. Bjarne Stroustrup in his book “Programming Principles and Practices Using C++,” Addison-Wesley 2009, ISBN 978-0321543721.

The web site for his book and the appropriate FLTK .h header files and .cpp files is:

http://www.stroustrup.com/Programming/


Please copy paste the following example program into your IDE. Build and debug the example program and it will help you understand the information covered in this tutorial.

//***********************************
//C++ FLTK (X,Y) AXIS TUTORIAL
//***********************************
#include "Simple_window.h"
#include "Graph.h"

int main( int argc, char* argv[] )
{
   //========================START BACKGROUND WINDOW
   using namespace Graph_lib;
   Point tl(100, 0);
   Simple_window win(Point(100,100),600,450,"(X,Y) Axis");
   //========================START (X,Y) Axis
   Axis X_Axis(Axis::x, Point(0,400),550, 40, "X Axis");
   win.attach(X_Axis);
   X_Axis.label.set_color(Color::blue);
 
   Axis Y_Axis(Axis::y, Point(250,400),350, 20, "Y Axis");
   win.attach(Y_Axis);
   Y_Axis.label.set_color(Color::blue);
 
   win.set_label("(X,Y) AXIS");
   //========================START POLYGON
   Polygon poly;
   poly.add(Point(50,0));        
//Triangle top (x,y) coordinate point.
   poly.add(Point(0,100));      
//Triangle bottom, left  (x,y) coordinate point.
   poly.add(Point(100,100));  
//Triangle bottom, right (x,y) coordinate point.
   poly.set_fill_color(Color::red);
   win.attach(poly);
   //========================START RECTANGLE
   Rectangle r(Point(110,5), 100, 100);
   r.set_fill_color(Color::yellow);
   win.attach(r);
   //========================START CIRCLE
   Circle c(Point(110,210), 100);
   c.set_color(Color::dark_cyan);
   win.attach(c);
   //========================START ELLIPSE
   Ellipse e(Point(300,300),75,25);
   e.set_color(Color::dark_green);
   win.attach(e);
   //========================START MARK
   Mark m(Point(300,300),'x');
   win.attach(m);
   //========================START SCREEN SAVER
   win.wait_for_button();
   //==========================
}


Looking close you will see a repeating pattern for this FLTK code.

First, a FLTK keyword describes a geometric primitive; e.g., Rectangle.

Second, you name your function; e.g., r.

Third, you define a starting point; e.g., Point(110,5); the top left corner.

Fourth, you define the horizontal distance and the vertical distance; e.g., 100, 100; the width and height.

Fifth, you set the color; e.g., r.set_fill_color(Color::yellow);

Sixth, you attach the geometric primitive to win; e.g., win.attach®;

II. BACKGROUND WINDOW

//========================START BACKGROUND WINDOW
   using namespace Graph_lib;
   Point tl(100, 0);
   Simple_window win(Point(100,100),600,450,"(X,Y) Axis");

We are using the Graph library.


We define the top left corner of our window; e.g., Point tl(100, 0);


We are using Simple_window so we will have the "Next" button.

The window will start at Point(100,100); the horizontal x axis distance from this point will be 600, and the vertical y axis distance will be 450; and the label for the window will be "(X,Y) Axis."

III. (X,Y) Axis

//========================START (X,Y) Axis
   Axis X_Axis(Axis::x, Point(0,400),550, 40, "X Axis");
   X_Axis.label.set_color(Color::blue);
   win.attach(X_Axis);
 
   Axis Y_Axis(Axis::y, Point(250,400),350, 20, "Y Axis");
   win.attach(Y_Axis);
   Y_Axis.label.set_color(Color::blue);
 
   win.set_label("(X,Y) AXIS");

X_Axis


First, a FLTK keyword describes a geometric primitive; e.g., Axis, which is a line.

Second, you name your function; e.g., X_Axis.

Third, you define a starting point; e.g., Point(0,400).

Fourth, you define the horizontal distance; e.g., 550 is the x-axis length and 40 is the measurement increments on the x-axis.

Fifth, you set the color; e.g., X_Axis.label.set_color(Color::blue);

Sixth, you attach the geometric primitive to win; e.g., win.attach(X_Axis);

Y_Axis

First, a FLTK keyword describes a geometric primitive; e.g., Axis, which is a line.

Second, you name your function; e.g., Y_Axis.

Third, you define a starting point; e.g., Point(250,400).

Fourth, you define the vertical distance; from Point(250,400) e.g., 350, and 20 is the y-axis measurement increments.

Fifth, you set the color; e.g., Y_Axis.label.set_color(Color::blue);

Sixth, you attach the geometric primitive to win; e.g., win.attach(Y_Axis);

IV. POLYGON

//========================START POLYGON
   Polygon poly;
   poly.add(Point(50,0));    
//Triangle top (x,y) coordinate point.
   poly.add(Point(0,100));  
//Triangle bottom, left  (x,y) coordinate point.
   poly.add(Point(100,100));  
//Triangle bottom, right (x,y) coordinate point.
   poly.set_fill_color(Color::red);
   win.attach(poly);


First, a FLTK keyword describes a geometric primitive; e.g., Polygon.

Second, you name your function; e.g., poly.

Third, you define a starting point; e.g., Point(50,0) the top; Point(0,100) the bottom, left; and Point(100,100) the bottom right.

Fourth, you set the color; e.g., r.set_fill_color(Color::red);

Fifth, you attach the geometric primitive to win; e.g., win.attach(poly);

V. RECTANGLE

//========================START RECTANGLE
  Rectangle r(Point(110,5), 100, 100);
  r.set_fill_color(Color::yellow);
  win.attach(r);


First, a FLTK keyword describes a geometric primitive; e.g., Rectangle.

Second, you name your function; e.g., r.

Third, you define a starting point; e.g., Point(110,5); the top left point.

Fourth, you define the horizontal distance and the vertical distance; e.g., 100, 100; the width and height.

Fifth, you set the color; e.g., r.set_fill_color(Color::yellow);

Sixth, you attach the geometric symbol to win; e.g., win.attach( r );

VI. CIRCLE

//========================START CIRCLE
   Circle c(Point(110,210), 100);
   c.set_color(Color::dark_cyan);
   win.attach(c);


First, a FLTK keyword describes a geometric primitive; e.g., Circle.

Second, you name your function; e.g., c.

Third, you define a starting point; e.g., Point(110,210).

Fourth, you define the horizontal distance and the vertical distance; e.g., 100 which is the radius.

Fifth, you set the color; e.g., c.set_color(Color::dark_cyan);

Sixth, you attach the geometric primitive to win; e.g., win.attach( c );

VII. ELLIPSE

//========================START ELLIPSE
   Ellipse e(Point(300,300),75,25);
   e.set_color(Color::dark_green);
   win.attach(e);


First, a FLTK keyword describes a geometric primitive; e.g., Ellipse.

Second, you name your function; e.g., e.

Third, you define a starting point; e.g., Point(300,300).

Fourth, you define the horizontal distance and the vertical distance; e.g., 100, 100.

Fifth, you set the color; e.g., r.set_fill_color(Color::yellow);

Sixth, you attach the geometric symbol to win; e.g., win.attach(e);

VIII. MARK

//========================START MARK
   Mark m(Point(300,300),'x');
   win.attach(m);


First, a FLTK keyword describes a geometric primitive; e.g., Mark.

Second, you name your function; e.g., m.

Third, you define a starting point; e.g., Point(300,300).

IX. SCREEN SAVER

//========================START SCREEN SAVER
   win.wait_for_button();


Screen saver might not be a good choice of words but it saves the screen until you click the "Next" button. This give you time to admire your work!

YOU HAVE LEARNED HOW TO CODE A C++ FLTK:
1. AXIS
2. POLYGON
3. RECTANGLE
4. CIRCLE
5. ELLIPSE
6. MARK
7. SCREEN SAVER

Elcric Otto Circle




-->

-->

-->




How to Link to My Home Page

It will appear on your website as:
"Link to ELCRIC OTTO CIRCLE's Home Page"




No comments:

Post a Comment