ITEPC 06 - Workshop on Fractal Creation

ITEPC 06 - Workshop on ITEPC 06 - Workshop on Fractal CreationFractal Creation

Chiew-Lan Tai and Oscar AuChiew-Lan Tai and Oscar Au

ITEPC 06 - Workshop on FrITEPC 06 - Workshop on Fractal Creationactal Creation

22

Project ObjectivesProject Objectives

ObjectivesObjectives– To introduce simple methods of constructing To introduce simple methods of constructing

fractals fractals – To learn some related math To learn some related math – To appreciate the beauty of fractals To appreciate the beauty of fractals – To have fun with programmingTo have fun with programming

C++, OpenGLC++, OpenGL


33

Mandelbrot & NatureMandelbrot & Nature

[Mandelbrot, 1983]: clouds are not spheres, [Mandelbrot, 1983]: clouds are not spheres, mountains are not cones, coastlines are not mountains are not cones, coastlines are not circles, and bark is not smooth, nor does circles, and bark is not smooth, nor does lightning travel in a straight line lightning travel in a straight line

How to represent natural objects?How to represent natural objects?– Using equations? No.Using equations? No.– Answer: Answer: fractal-geometry methodsfractal-geometry methods


44

Equations vs. ProceduresEquations vs. Procedures

Methods based on equationsMethods based on equations– Adequate for describing manufactured objectsAdequate for describing manufactured objects– For smooth surfaces and regular shapes.For smooth surfaces and regular shapes.


55

Equations vs. ProceduresEquations vs. Procedures

Methods based on proceduresMethods based on procedures– Realistic representations for nature objects, Realistic representations for nature objects,

such as mountains and cloudssuch as mountains and clouds– Objects with irregular or fragmented featuresObjects with irregular or fragmented features


66

Fractal Gallery: Classic FractalsFractal Gallery: Classic Fractals

Sierpinski gasket reptileQuadric Koch island


77


The Mandelbrot set The Julia set


88


courtesy of Amazing Seattle Fractals


99



1010

Fractal Gallery: Natural Fractal Gallery: Natural Phenomenon SynthesisPhenomenon Synthesis

Fractal forest (courtesy of John C. Hart, UIUC)

Fractal fern (courtesy of Paul Bourke)


1111


Mountain with vegetation & stormy clouds (courtesy of Jean-Francois COLONNA)


1212


Light clouds at sunset (courtesy of Jean-Francois COLONNA)


1313


Snowy mountain (courtesy of Jean-Francois COLONNA)

OpenGL ProgrammingOpenGL Programming

Part IPart I

Main reference: [Hill] Computer Graphics uisng OpenGL (Chapter 2)


1515

What is OpenG (OGL)?What is OpenG (OGL)?

OGL is 3D graphics & modeling libraryOGL is 3D graphics & modeling library

In this project, we will only use it to draw In this project, we will only use it to draw 2D objects.2D objects.


1616

Interactive computer graphics system that Interactive computer graphics system that allows us to access allows us to access graphics hardwaregraphics hardware– Easy to useEasy to use– Programs run efficientlyPrograms run efficiently– Hardware-independent Hardware-independent

Graphics APIGraphics API (Application Programming (Application Programming Interface)Interface)– A library of functionsA library of functions– Others: DirectX (Microsoft), Java3DOthers: DirectX (Microsoft), Java3D



1717

OGL is independent of any specific OGL is independent of any specific window system window system basic window basic window operations are not includedoperations are not included

Graphics user interface programming: Graphics user interface programming: – GLUT = OGL Utility ToolkitGLUT = OGL Utility Toolkit

Simple but easy to useSimple but easy to use



1818

Programming EnvironmentProgramming Environment

OGL is usually installed on a MS Windows OGL is usually installed on a MS Windows machine.machine.Programming environmentProgramming environment– MS Visual Studio .Net 2003MS Visual Studio .Net 2003

Libraries we will useLibraries we will use– OGL (basic API tool)OGL (basic API tool)– GLU (OGL Utility Library)GLU (OGL Utility Library)– GLUT (OGL Utility Toolkit, a windowing toolkit GLUT (OGL Utility Toolkit, a windowing toolkit

that handles window system operations)that handles window system operations)


1919

OGL Data TypesOGL Data TypesTo make more portable, OGL provides internal data To make more portable, OGL provides internal data typestypes


2020

Basic OGL SyntaxBasic OGL Syntax

Functions are prefixed with Functions are prefixed with glgl, , – glBeginglBegin, , glClearglClear, , glClearColorglClearColor

Constants in capital letters, and the undersConstants in capital letters, and the underscore is used as a separatorcore is used as a separator– GL_2DGL_2D, , GL_LINESGL_LINES, , GL_TRIANGLESGL_TRIANGLES

Built-in data-type names begin with Built-in data-type names begin with GLGL– GLbyteGLbyte, , GLshortGLshort, , GLintGLint, , GLbooleanGLboolean


2121

Skeleton of an OGL program Skeleton of an OGL program using GLUTusing GLUT

int main(int argc, char** argv)

{

glutInit(&argc, argv); // initialize the toolkit

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set the display mode

glutInitWindowSize(640, 480); // set window size

glutInitWindowPosition(150, 100); // set window position

glutCreateWindow("my first attempt"); // open the screen window

// register the callback functions

glutDisplayFunc(myDisplay);

glutReshapeFunc(myReshape);

glutMouseFunc(myMouse);

glutKeyboardFunc(myKeyboard);

myInit(); // additional initializations as necessary

glutMainLoop(); // go into a perpetual loop

}


2222

Creating Window for Drawing Creating Window for Drawing The first five function calls use GLUT to open a The first five function calls use GLUT to open a window for drawingwindow for drawing

Coordinate system in OGL

sx

sy

(150, 100)


2323

First OGL Program: DrawDotsFirst OGL Program: DrawDots


2424


Our first program is not interactive. It consists of three fuOur first program is not interactive. It consists of three functions: nctions: mainmain, , myDisplaymyDisplay, , myInitmyInit. (see accompanyin. (see accompanying demo program)g demo program)

int main(int argc, char** argv)

{

glutInit(&argc, argv);// initialize the toolkit

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set the display mode

glutInitWindowSize(640, 480); // set window size

glutInitWindowPosition(100, 150); // set window position

glutCreateWindow("my first attemp"); // open the screen window

glutDisplayFunc(myDisplay); // register redraw function

myInit(); // additional initializations as necessary

glutMainLoop(); // go into a perpetual loop

}


2525


Draw primitives Draw primitives – Display callback function Display callback function myDisplaymyDisplay

void myDisplay()

{

glClear(GL_COLOR_BUFFER_BIT); // clear the screen

glBegin(GL_POINTS);

glVertex2i(100, 50); // draw three dots

glVertex2i(100, 130);

glVertex2i(150, 130);

glEnd();

glFlush(); // send all output to display

}


2626


Draw primitivesDraw primitives– glBegin(GLenum mode)glBegin(GLenum mode)

modemode can be can be GL_POINTSGL_POINTS, , GL_LINESGL_LINES, , GL_POLYGGL_POLYGONON, etc., etc.


2727


InitializationInitializationvoid myInit()

{

glClearColor(1.0, 0.0, 0.0, 0.0); // set red background color

glColor3f(0.0, 1.0, 0.0); // set the drawing color

glPointSize(10.0); // a 'dot' is 10 by 10 pixels

// The following lines establish the coordinate system.

// Details will be covered later.

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(0, 640, 0, 480);

}


2828


OpenGL is a OpenGL is a state machinestate machine– It keeps track of many state variablesIt keeps track of many state variables

Current size of a point, current color of drawing, current backCurrent size of a point, current color of drawing, current background color, etc.ground color, etc.

Color of drawing is specified using Color of drawing is specified using glColor3f(red, greeglColor3f(red, green, blue)n, blue); (range: [0, 1]); (range: [0, 1])

Background color is set with Background color is set with glClearColor(red, green, glClearColor(red, green, blue, alpha)blue, alpha). . glClearglClear clears the entire window to the ba clears the entire window to the background color (cf. ckground color (cf. myDisplaymyDisplay).).

– The value of a state variable remains active until a neThe value of a state variable remains active until a new value is given.w value is given.


2929

Line DrawingLine Drawing

glLineWidth(2.0); // set line thickness

glBegin(GL_LINES);

glVertex2i(10, 20); // first horizontal line

glVertex2i(40, 20);

glVertex2i(20, 10); // first vertical line

glVertex2i(20, 40);

// four more calls to glVertex here for the other two lines

glEnd();


3030

Drawing ModesDrawing ModesglBegin(GLenum mode)glBegin(GLenum mode)


3131

Recommended ResourcesRecommended Resources

OpenGL official WebsiteOpenGL official Website

OpenGL Utility Toolkit (GLUT) (download GLUT)OpenGL Utility Toolkit (GLUT) (download GLUT)

Nice GLUT TutorialNice GLUT Tutorial

NEHE: OpenGL tutorialNEHE: OpenGL tutorial

OpenGL red bookOpenGL red book

Documents

ITEPC 06 - Workshop on Fractal Creation