Computer Graphics

Before Now In older computers, graphical output of computers was fairly limited. The Altair 8800 was one of the first personal computers that individuals could buy for themselves. It’s only input was a series of switches and only output was a series of lights.

Before Now Continued Other older systems relied on printers for text output, monochromatic screens (single color), or very small and/or low resolution screens.

Before Now Continued Even as computer systems started coming out with color displays, they were still low resolution with little color depth.

Current State Most current monitors have a resolution close to 1600 x 900. That means that they come with 1,440,000 pixels packed into their grid. 4K Ultra HD Displays though stretch into the range of 3840 x 2160 which means they pack in 8,294,400 pixels into their grid. And of course we are now seeing three dimensional visual displays being developed.

Coordinate Value On our current 2D displays each pixels corresponds to a coordinate value. This would appear to us to be fairly intuitive but there is one wrinkle. That one wrinkle is that our origin or (0, 0) coordinate is placed in the upper left hand corner. So why do this? The main reason is that that it allows us to anchor everything in that upper left hand corner Go on your computer and resize applications to see how everything is resized in relation to that upper left hand corner

Color Pixel Each pixel on our modern LED monitors are actually composed of three separate LED lights. There is one red, one green, and one blue light. By changing the intensity of each light, we can generate multiple colors. Keeping the blue light at full intensity and keeping the red and green off will of course produce blue. But lets say we turn the red and blue light on to full intensity and keep the green off, we then produce magenta.

Color Range In our standard monitors, red, green, and blue in each pixel has an 8 bit value assigned to their range of possible values. That means that each has a range of 0 to 255. And since each has a possible 256 possible values, we can generate over 16 million possible colors.

Color Choice JAVA uses the Color class to help us manage color selection. http://docs.oracle.com/javase/7/docs/api/java/awt/Color.html Using the Color class we can reference a couple of standard colors like Color.ORANGE But most of the time we want to specify a color. In that case we would need to use the Color constructor to create a color. The one we will use is the constructor that takes in numerical values for red, green, and blue. So to produce magenta we could put: new Color(255, 0, 255)

More choice There are three ways to find which numerical values you need to use to create specific colors. The first is to look at an RGB chart which can be easily found online. The second is to use a color finder like we have in Paint or in other places online The following web site has an example of both: http://www.rapidtables.com/web/color/RGB_Color.htm The third option is to web search for the specific colors that you are looking for. For example, a web search for American Flag color values would result in providing these values: Red: 191, 10, 48 Blue: 0, 40, 104 White: 255, 255, 255 Note that Red and Blue are not exactly as we might have guessed

Drawing to the Screen JAVA provides to us a JPanel class which has a Graphics class inside of it with methods to draw various polygons to the screen. The first one we will use is fillRect. Others we will explore in later lessons. fillRect takes in four values which are x, y, width, and height These are fairly self explanatory except that the x, y which dictate the position are a reference to the upper left hand corner. That is again so that it will serve as the anchor point.

Example As we explore Computer Graphics, we will also take a look at another microcosm of graphical design. We will take a look at Vexillology or the study of flag design. The first flag that we will draw to the screen is the flag of Indonesia Notice it is composed of two rectangles where one is red and the other is white.

Coding The following is the code we will use to draw the flag g.setColor(Color.RED); g.fillRect(0, 0, 100, 600); g.setColor(Color.WHITE); g.fillRect(0, 100, 100, 600); Take note that we set the color before drawing the corresponding rectangle. Also take note that the two rectangles have the same x value, width value, and height value but the second rectangle has a different y so it will be positioned further down.

Better Code The following will produce a slightly better result: g.setColor(new Color(205, 17, 38)); g.fillRect(0, 0, 100, 600); g.setColor(Color.WHITE); g.fillRect(0, 100, 100, 600); For this we create our own red color that is more muted than bright red so it produces a better approximation of the red seen in the Indonesian flag.

Graphics Class We will be using the Graphics Class object to draw to the screen. A complete listing of the methods available to you can be found at: https://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html The more common methods you will use are the following: drawLine(int x1, int y1, int x2, int y2) fillRect(int x, int y, int width, int height) fillOval(int x, int y, int width, int height) fillPolygon(int[] xPoints, int[] yPoints, int nPoints) Take Note that the x and y of fillRect and fillOval are not the center but the upper left hand corner coordinate. Examples in each are included in your lab.

Project Start on the Flag Lab