Project Goals Improve Design Skills Zoomable Images Interoperate - - PDF document

Zoomable Images

Project 1(and only)

Project Goals

• Improve Design Skills

– Interoperate with an existing library

• Develop Large App in C++
• Learn a bit about digital images

The App

• A zoomable image viewer

– Display a variety of different types of images – Be able to zoom into portions of the image – Use an existing windowing library for display

A bit about digital images

• Images are 2D array of pixels

– Each pixel contains a color – Color given by RBG (red-green-blue) triples – Each value in triplet is an 8-bit integer (0-255) – Complete color is 24-bit

• 24-bit or true color

– Link

A bit about digital images

• Resolution of a digital image

– Dimensions in pixels in x & y direction

Different types of images

• Images can be categorized by the means of

defining the info contained within

– Examples:

• File Image – Pixel data stored in a file in a given

format

• Fractal Image – Image defined by a mathematical

function

• Drawing Image – Image defined by a set of drawing

commands.

File Images

• This image is a JPEG file
• Other file formats: GIF, PNG, PPM, BMP

Fractal Image

• Defined by a mathematical function

– Mandelbrot Image:

Fractal Image

• Why fractal?

– Displays self-similarity at different scales – Zooming on portion of image results in similar image. – FractInt.

Fractal Image

• The Mandelbrot set is actually a set of

complex numbers

• The Mandelbrot image is the Mandelbrot

set mapped on the complex plane.

• = 1 + i

= -2 -2i = 0 - i

Fractal Image

• The most complex mathematical image in

the world

– Amazingly simple to generate – Details in write-up.

Drawing Image

CANVAS width=10.0 height=10.0 CIRCLE radius =2 position=(0,0) color=blue SQUARE size=2 position=(1, -1) color=red TRIANGLE size=2 position=(-2, 3) color=yellow

Redefining resolution

• Use floating point coordinate system rather

than pixel coordinate system

– Fractal Images – coordinates correspond to the complex plane – Drawing image – coordinates correspond to the canvas coordinates.

Redefining Resolution

• Even file images can be converted to a

floating point coordinate system.

Rendering

• Mapping from:

– Floating point coordinate system of source image to – Integer coordinate system of 2D pixel array of display

Rendering

Render into 300x300 pixel array Each pixel = 10/300 = 0.0333 units in canvas space

Zooming

• Zooming can be accomplished during

rendering

– pixel array will get mapped to a rectangular portion of the image – Namely, the part of the image in which to zoom. – Paintshop Pro demo

Zooming

Project

• Questions so far?

Your task

• Design an image viewer that will:

– Be able to display images of each type described

• File Image
• Fractal Image
• Drawing Image

– Be able to zoom into a portion of the image

• Specification of zooming is up to you.

– Make use of a simple Windowing library

• Library allows for capturing of mouse events

– YOU WILL BE WORKING IN TEAMS OF 2

Requirements

imageZoom -t ImageType -w # -h # filename

where:

• t ImageType indicates the type of image to be displayed
• w # the width of the Window (optional)
• h # height of the Window (optional)

filename is the name of a file. The file will contain a different set of data dependent upon the type of image. Should print error messages for invalid input (see write-up)

Deliverables

• 5 deliverables

– Design – File Image – Fractal Image – Drawing Image + extras – Team Evaluation – Must implement at least 1 extra.

Deliverables

• Design

– design a framework for image display and zooming. – should be general enough to display and zoom any of the images described – image types should conform to an interface that you develop in your design – Documented using UML

Deliverables

• File Image

– Images in PPM format – Can be text or binary – Exercise in C++ I/O – Filename is name of image file to display – Can set size of window = resolution of image – Zooming == cropping – EXTRA: Do point sampling for zooming.

Deliverables

• Fractal Image

– Mandelbrot image in black and white – EXTRAS: Render in color based on colormap in file. – filename will hold colormap (if applicable), ignored otherwise

Deliverables

• Drawing image

– Canvas dimensions, figures to draw will be read from file. – filename is the name of the file containing dimensions/shapes – NOTE: Windowing library knows how to draw shapes – EXTRAS: Interactive manipulation (add, delete, move)

• f shapes

Deliverables

• Team Evaluation

– Grade yourself & your partner

Deliverables

• Due Dates (subject to change)

– Design – March 28th – File Image – April 18th – Fractal Image – May 2nd – Drawing Image + extras – May 12th – Team Evaluation – May 13th

Deliverables

• Grading

– Design – 20 points – File Image – 20 points – Fractal Image – 20 points – Drawing Image – 20 points – extras – 20 points – Team Evaluation – +/- bonus points

Questions?

• Project writeup should be up by Friday.