17
Painterly Rendering CMPS 160 - Assignment 2

Painterly Rendering

Embed Size (px)

DESCRIPTION

Painterly Rendering. CMPS 160 - Assignment 2. OpenGL. OpenGL is a cross-language, cross-platform specification definingand API for 2D and 3D graphics (taking advantage of hardwareacceleration when possible).. GLUT. “GL Utility Toolkit” - PowerPoint PPT Presentation

Citation preview

Page 1: Painterly Rendering

Painterly Rendering

CMPS 160 - Assignment 2

Page 2: Painterly Rendering

OpenGL

• OpenGL is a cross-language, cross-platform specification defining

• and API for 2D and 3D graphics (taking advantage of hardware

• acceleration when possible).

Page 3: Painterly Rendering

GLUT

• “GL Utility Toolkit”

• GLUT is a layer on top of OpenGL that hides details of communicating

• with the system to control windows, and monitor the keyboard and mouse.

Page 4: Painterly Rendering

Assignment Overview

• Write code from scratch (ok, minimal base code)• Due in 1 week• Makefile takes care of building and converting

image formats• Build process assumes you use C++ but you don’t

have to use an OO concepts (base code doesn’t).• Designed for Mac lab (if you want to build

elsewhere you should only have to change the Makefile) -- Makefile.cygwin available on class page

Page 5: Painterly Rendering

Demo

• My main.cc is 217 lines long• Includes generous whitespace and

comments• Allows various color and brush modes.• I spent way too much time painting cool

pictures instead of debugging to give a good estimate on programming time… My guess 2-8 hours?

Page 6: Painterly Rendering

Concepts

• Think of GLUT as a machine, you configure it, turn it on, and leave it run by itself.

• Register “callbacks” to have to contact you back when certain events happen.

• Within callbacks, think of OpenGL as something you are sending message to.

• Use your normal loops and conditionals to get the right commands triggered at the right time and use glFlush() to get to to actually perform all the actions it has stored up. Its lazy on these Macs.

Page 7: Painterly Rendering

main.cc(in extreeeeeeeeeeeeeeeeeeeemly high level psuedocode)

include ppm canvas header

include gl/glut headers

declare some shared state variables

declare some callback functions

declare main

Page 8: Painterly Rendering

main()

Initialize glut -- glutInit

load source image -- ppmLoadCanvas

Create a window -- glutCreateWindow

register callbacks -- glutSomethingFunc

Let GLUT take over -- glutMainLoop() **never returns**

Page 9: Painterly Rendering

cb_display()

• Normally all screen drawing code goes here

• We are lazy• We only draw when the user tries to

paint something• Leave the body of this function blank

Page 10: Painterly Rendering

cb_mouse(button,state,x,y)

• Called whenever a mouse button is pushed down or let up

• Put your code to draw a paint blob here or in…

Page 11: Painterly Rendering

cb_motion(x,y)

• Called for each location along a mouse dragging path

• When user drags, moves, drags again there is a jump in the coordinates fed to this function, use cb_mouse to figure out when this happens

• Paint here if you like• Save this x,y for later so you can use it to draw

lines from this position to the next• If you want to track mouse motion when no buttons

are down there is way

Page 12: Painterly Rendering

cb_keyboard(key,x,y)

• Called whenever a key is pressed• You should exit(0) when the user

presses ‘q’• You can use other keys to trigger

changing of painting modes or clear the screen.

• No modifiers (alt,ctrl,whatever) are passed, there is a way to get these

Page 13: Painterly Rendering

cb_reshape(w,h)

• Called at startup and when the window is resized

• You should save w,h to help interpret mouse coordinates

• glViewport tells GL what part of the window you want to use (all of it!)

• Look up glMatrixMode and gluOrtho2D to setup projection matrix properly

• Optionally, clear the screen as well

Page 14: Painterly Rendering

Global state variables

• Canvas - the function where you actually paint needs access to the source image loaded in main()

• Window size - compare mouse coordinates to these to figure out relative location within window

• Last cursor position - draw lines from this location to current location to make directional strokes if you like

Page 15: Painterly Rendering

ppm_canvas usage

canvas_t canvas;

ppmLoadCanvas(“some.ppm”,&canvas);

int x = 50; // column, left to right

int y = 100; // row, top to bottom (I think)

pixel_t pixel = PIXEL(canvas,x,y);

int r = RED(pixel);

float g = GREEN(pixel)/255.0;

// OpenGL expects colors in the range 0.0f-1.0f

Page 16: Painterly Rendering

Actually painting something

• Look these up in the linked documentaiton:

• glBegin(GL_???)

• glEnd()

• glColor*()

• glVertex*()

Page 17: Painterly Rendering

the provided Makefile

• “make” builds your program, tells you what to write in your README if you don’t have one

• “make demo” builds binary+documentation tarball to brag to your friends/classmates without revealing top secret painting effect implementation

• “make some.ppm” converts some.jpg to ppm format (also works for gif, png, whatever…)

• If you use multiple source files to complete the assignment you must edit the a line in the Makefile