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:
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®;
//========================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);
//========================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);
//========================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 );
//========================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 );
//========================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);
//========================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).
//========================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"
