Lecture 29



Log into Windows/ACENET. Download and
extract GraphFunction.zip. Double-click into
the project folders to the solution file. Doubleclick on the solution file to start MS VS.
Also start a new instance of MS VS and open
the PointClassDemo project.
Questions?
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
1
Outline

Finish Point class (!)

DistanceTo

Computer graphics

Coordinate systems



Screen coordinates
World coordinates
C# graphics


Graphics objects
Paint handler and drawing
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
2
DistanceTo( ) Method

The distance between two Points (x1,y1) and
(x2,y2) computed using the formula:
distance=  x 1−x 2   y 1− y 2 
2

2
The Point class instance method DistanceTo( )
receives a Point object returns the distance
between this Point object and the received
Point object.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
3
DistanceTo( ) Method

The heading of this method is
public double DistanceTo (Point p2)


Since the parameter p2 is an instance of the
class we are defining, we are allowed to access
the attributes of p2 directly using the dot
notation.
The implementation of DistanceTo( ) is
// distance between (x,y) and (p2.x, p2.y)
return Math.Sqrt (Math.Pow (x­p2.x, 2) +
Math.Pow (y­p2.y, 2));
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
4
Testing DistanceTo( )


Double-click on the DistanceTo button to get a
stub for its handler.
Write code to compute the distance between of
Points p1 and p2, and display these results in
the results area ListBox. To call the
DistanceTo( ) method, we simply write
double distance = p1.DistanceTo(p2);
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
5
Computer Graphics


Computer graphics are described by a twodimensional grid of pixels. A pixel is a very
small square (most monitors) or rectangle
(most printers).
Monitor resolution commonly is quoted as the
total number of horizontal pixels x the total
number of vertical pixels on a single screen.
(E.g. 1048x768, 1600x1200, etc.) This is a
misnomer as it only says how many pixels there
on a screen regardless of screen size.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
6
Computer Graphics

True montior resolution is the number of pixels
per inch (PPI) displayed on a screen. Low
resolution screens (e.g. old cell phone displays)
have PPI's under 100. High resolution screens
(e.g., new iPhone4 "Retina" LCD screen) have
PPI's over 300.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
7
Computer Graphics

Printer resolution refers to the number of ink
dots per inch (DPI) that can be placed on the
paper. Most ink-jet printers are 300-600 DPI.
Most laser printers are 1200-1600 DPI.
Newspaper photos usually are 150-300 DPI,
while magazine photos are often 2400 DPI.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
8
Computer Graphics


Most operating systems do not know the size of
the monitor they are running on, so they deals
in absolute number of pixels.
Fonts, on the other hand, are typically
measured in point sizes, where a point is 1/72
inch. E.g., a 10-point font has characters with a
height of 10/72 in print. Windows requires that
font size be described in pixels. Luckily, the C#
form designer does most of this work for us.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
9
Computer Graphics


A programmer cannot write directly to the
screen. If you could, an application would be
different for every monitor type and resolution.
Instead, monitors are driven by a layer of
hardware called a display adapter. Typically
this layer consists of some video memory of
what is on the screen and the electronics to
transfer the data in video memory onto the
screen.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
10
Computer Graphics

The code that drives the display adapter is
called a device driver and is installed in the
operating system, often by the user. The
device driver serves as the software layer
between the adapter and the Graphics Device
Interface (GDI) of the operating system.
GDI (in OS)
Display adapter/driver
Monitor
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
11
Screen Coordinates


In a multi-window system, applications deal
with windows rather than actual screens, but as
far as the application can tell, its window is its
entire screen.
The pixels on a screen are accessed using a
screen coordinate system. Due to the fact that
the original monitors could only be accessed
from left-to-right, top-to-bottom, the origin pixel
at (0, 0) is in the upper-left corner and the
positive y direction goes down.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
12
Screen Coordinates

For example, if the screen is 400 pixels wide by
300 pixels tall, the coordinates are:
(0,0)
x
(399,0)
y
(0,299)
Friday, March 25
(399,299)
CS 205 Programming for the Sciences - Lecture 29
13
World Coordinates


Although we could write our application in terms
of the screen coordinates, usually it is much
easier to use the problem domain to determine
world coordinates.
For example, if we want to graph a sinusoid
from -2 to +2 along the x-axis and from -1.5
to 1.5 along the y-axis, the world coordinate
system has a width of 4 and a height of 3 with
the origin (0,0) as the center point of the
coordinate system.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
14
World Coordinates

For our example, the world coordinates are:
(0,1.5)
y
(-2,0)
(0,0)
x
(2,0)
(0,-1.5)
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
15
World Coordinates


We calculate the points to be plotted in our
world coordinate system, but to put them onto
the screen, we need to translate the world
coordinates to the screen coordinates. For
example, from -2 to +2 in x and -1.5 to 1.5 in
y world coordinates to 0 to 399 in x and 0 to
299 in y screen coordinates.
The entire width of the world coordinate system
will get mapped to the entire width of the screen
coordinate system. Similarly for the height.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
16
World Coordinates
Thus we can write the following proportion:
x world width world
=
x screen width screen
Since we know xworld, widthworld, and widthscreen,
we can solve for xscreen:
widthscreen
x screen =
x world
width world
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
17
World Coordinates

However, this transformation does not account
for the differences in the origin. We must add
an offset to account for the difference. Since
the origin of the world coordinates is in the
center, our x offset is half the screen width.
Our final transformation formula is:
width screen
x offset =
2
widthscreen
x screen =
x world  x offset
width world
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
18
World Coordinates

The formula for transforming the y world
coordinate is similar.
height screen
y offset =
2
−height screen
y screen =
y world  y offset
height world

The negative sign is necessary because the
screen coordinates increase in the downward
direction while the world coordinates increase
in the upward direction.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
19
C# Graphics


To interact with a GDI, C# defines a Graphics
class and Graphics objects. C# applications
work entirely with these Graphics objects, so
C# programmers mostly do not need to worry
about what kind of monitor is being used.
There are several ways to obtain a Graphics
object:

As a property of a Paint event handler's argument

Creating one for a GUI control

Creating one from a bitmap
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
20
Graph Function Project



As an example of how to use C# Graphics
objects, we will complete the GraphFunction
project over the next several classes.
This application will plot a sinusoid and allow
the user to change the x and y range as well as
the frequency as shown on the next slide.
In addition, this application uses the Point class
that has been modified to use float coordinate
values (rather than the original double type).
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
21
Graph Function Project
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
22
GUI Notes


The graph area is implemented using a Panel
object. A Panel is simply a container for
placing other GUI elements. Here, we are just
going to using it as a place for a Graphics
object.
We use a panel rather than drawing directly on
the form for two reasons. First, the form has
numerous items that we do not wish to draw
over. Second, the screen coordinates will be
relative to the panel's upper-left corner rather
than the upper-left corner of the whole form.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
23
Graph Function Project

GUI elements are named as follows

pnlGraph – panel for the graph

txtXRange – X range textbox

txtYRange – Y range textbox

txtFrequency – Frequency textbox

btnPlot – Plot button

various labels that will not be used in code
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
24
Graph Function Project

The private application data includes
private Point [] data = null; // holds plot data
private float xRange = 400; // x and y­axis range
private float yRange = 300; private float frequency = 0; // frequency of sinusoid
private float xOffset = 0; // offset for zero on axes
private float yOffset = 300;

The default values represent a world coordinate
system the same size as the default panel size
with the origin in the lower-left corner.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
25
Graph Function Project

The entire application will consist of


A Click handler for the Plot button that will parse the
x range, y range, and frequency data from the
textboxes into the corresponding float variables. If
the parsing throws a FormatException, the handler
should return to waiting. Otherwise, on exit it will
trigger a Paint event.
A panel Paint event handler that will draw the x and
y axes and tic marks along the axes by calling other
methods. Then it will take the Points in the data
array and draw lines between the screen points on
the panel.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
26
Graph Function Project




A method to evaluate the sinusoid. This method
receives a float value, x, and returns sin(x) as a
float.
A method to translate a world coordinate Point to a
screen coordinate Point. This Translate( ) method
has been written for you.
A method to draw the axes through the center of
the panel. This method receives the panel's
Graphics object.
A method to draw the axes' tic marks in 1 unit
spacing. This method receives the panel's
Graphics object.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
27
Paint Event Handler

Graphics objects are said to be painted on the
screen. A Paint event is generated whenever
an object needs to be repainted. This event
can be generated by the operating system,
such as when an application is restored from its
minimized state or brought to the foreground,
both of which are handled by redrawing the
entire application.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
28
Paint Event Handler


A Paint event also can be generated by the
programmer by invalidating a GUI element
using its Invalidate( ) method. This causes an
empty Graphics object associated with the GUI
element to be sent to the Paint event handler.
Whatever the handler draws on this Graphics
object is drawn on its enclosing GUI element
(the panel in our case) when the handler exits.
If the handler doesn't draw anything, the effect
is to clear the GUI element.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
29
Plot Button Handler


Double-click on the Plot button. For now, we
just want to show how the Paint event works,
so we just create two Points with random
coordinates in the data array that are in range.
Note that the data array is created first, then the
Points in the data array are created.
After setting the data array we want to trigger a
Paint event for the panel to draw a line between
the points. We do this by invalidating the panel
object.
pnlGraph.Invalidate();
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
30
Paint Event Handler

To attach a handler for the panel's Paint event,
go to the Designer view and click on the panel.
In the Properties window, click on the lightning
bolt icon button. Find the Paint event and
double-click on it. You should get a stub for the
pnlGraph_Paint( ) handler method.
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
31
Paint Event Handler

The Graphics object of the panel is one of the
argument object properties. We get access to it
by writing:
Graphics grfx = e.Graphics;

We need a Pen object to draw with. We create
one using (more on Pens and Color next class):
Pen bluePen = new Pen(Color.Blue);
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
32
Paint Event Handler

Before we can draw the line, we need to
translate the world coordinate points into
screen coordinate points:
Point screenP1 = Translate (data[0]);
Point screenP2 = Translate (data[1]);

Now we draw the line using the DrawLine
method. It receives a Pen object and the
coordinates of the endpoints of the line:
grfx.DrawLine(bluePen, screenP1.X, screenP1.Y, screenP2.X, screenP2.Y);
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
33
Paint Event Handler


Run and test the program.
There is a problem that when the application is
launched; the first thing it does is try to paint the
panel. But the data array has not been set up
yet. To prevent this from happening, we can
test in the Paint event handler that the data
array is not null (i.e., that it exists):
if (data != null)
{
// translate and draw the points
}
Friday, March 25
CS 205 Programming for the Sciences - Lecture 29
34