How To Draw A Crescent Java

Appendix B Java 2D graphics

The Java library includes a simple package for cartoon 2d graphics, called coffee.awt. AWT stands for "Abstract Window Toolkit". We are simply going to scratch the surface of graphics programming; you can read more most information technology in the Java tutorials at https://docs.oracle.com/javase/tutorial/2nd/.

B.i Creating graphics

At that place are several means to create graphics in Java; the simplest way is to use java.awt.Canvas and java.awt.Graphics. A Canvas is a blank rectangular area of the screen onto which the application tin can draw. The Graphics course provides basic drawing methods such as drawLine, drawRect, and drawString.

Here is an instance program that draws a circle using the fillOval method:

import java.awt.Canvas; import java.awt.Graphics; import javax.swing.JFrame; public class Drawing extends Sheet {

public static void main(String[] args) { JFrame frame = new JFrame("My Cartoon"); Canvas canvas = new Cartoon(); canvas.setSize(400, 400); frame.add(sail); frame.pack(); frame.setVisible(true); } public void paint(Graphics g) { g.fillOval(100, 100, 200, 200); } }

The Drawing class extends Sheet, so it has all the methods provided past Canvass, including setSize. You can read about the other methods in the documentation, which you tin discover by doing a web search for "Java Canvas".

In the main method, we:

Create a JFrame object, which is the window that will incorporate the canvas.
Create a Cartoon object (which is the sheet), gear up its width and height, and add information technology to the frame.
Pack the frame (resize it) to fit the sheet, and display it on the screen.

Once the frame is visible, the paint method is chosen whenever the sail needs to exist drawn; for example, when the window is moved or resized. The application doesn't end after the main method returns; instead, it waits for the JFrame to shut. If you run this code, you lot should see a black circumvolve on a gray groundwork.

B.2 Graphics methods

You lot are probably used to Cartesian coordinates, where x and y values tin exist positive or negative. In contrast, Coffee uses a coordinate system where the origin is in the upper-left corner. That way, ten and y are always positive integers. Effigy B.1 shows these coordinate systems.

Graphical coordinates are measured in pixels; each pixel corresponds to a dot on the screen.

Figure B.i: Diagram of the difference between Cartesian coordinates and Java graphical coordinates.

To describe on the sheet, you invoke methods on a Graphics object. You don't have to create the Graphics object; it gets created when you create the Sheet, and it gets passed as an argument to pigment.

The previous instance used fillOval, which has the following signature:

/** * Fills an oval bounded by the specified rectangle with * the current colour. */ public void fillOval(int x, int y, int width, int height)

The 4 parameters specify a bounding box, which is the rectangle in which the oval is drawn. x and y specify the the location of the upper-left corner of the bounding box. The bounding box itself is not drawn (run into Figure B.two).

Figure B.2: Diagram of an oval inside its bounding box.

To choose the color of a shape, invoke setColor on the Graphics object:

The setColor method determines the colour of everything that gets fatigued afterward. Colour.red is a abiding provided by the Colour class; to use it you have to import coffee.awt.Color. Other colors include:

black blueish cyan darkGray gray green lightGray magenta orange pink white yellowish

You lot can create your ain colors past specifying the red, green, and blue (RGB) components. For example:

Colour purple = new Color(128, 0, 128);

Each value is an integer in the range 0 (darkest) to 255 (lightest). The color (0, 0, 0) is blackness, and (255, 255, 255) is white.

You can set the background color of the Sheet by invoking setBackground:

sheet.setBackground(Color.white);

B.3 Example drawing

Suppose we want to draw a "Subconscious Mickey", which is an icon that represents Mickey Mouse (run into https://en.wikipedia.org/wiki/Hidden_Mickey). We can use the oval we simply drew as the face, and then add two ears. To make the code more readable, let's utilise Rectangle objects to stand for bounding boxes.

Hither'south a method that takes a Rectangle and invokes fillOval:

public void boxOval(Graphics g, Rectangle bb) { thou.fillOval(bb.ten, bb.y, bb.width, bb.height); }

And here's a method that draws Mickey Mouse:

public void mickey(Graphics grand, Rectangle bb) { boxOval(g, bb); int dx = bb.width / 2; int dy = bb.elevation / 2; Rectangle half = new Rectangle(bb.ten, bb.y, dx, dy); half.translate(-dx / 2, -dy / 2); boxOval(thousand, half); half.interpret(dx * 2, 0); boxOval(m, half); }

The starting time line draws the face. The next three lines create a smaller rectangle for the ears. We translate the rectangle upwards and left for the first ear, and so to the right for the second ear. The issue is shown in Figure B.3.

Effigy B.3: A "Subconscious Mickey" drawn using Java graphics.

You can read more well-nigh Rectangle and translate in Chapter 10. See the exercises at the stop of this appendix for more case drawings.

B.4 Vocabulary

AWT:: The "Abstruse Window Toolkit", a Java package for creating graphical user interfaces.
coordinate:: A value that specifies a location in a two-dimensional graphical window.
pixel:: The unit in which coordinates are measured.
bounding box:: A common way to specify the coordinates of a rectangular surface area.
RGB:: A colour model based on adding cerise, greenish, and blue low-cal.

B.5 Exercises

The code for this chapter is in the ap02 directory of ThinkJavaCode. See page ?? for instructions on how to download the repository. Before yous start the exercises, we recommend that yous compile and run the examples.

Exercise i Draw the flag of Japan: a red circle on a white background that is wider than it is alpine.

Practice 2 Alter Mickey.java to describe ears on the ears, and ears on those ears, and more ears all the way downwardly until the smallest ears are only 3 pixels wide.

The result should await like "Mickey Moose", shown in Figure B.4 . Hint: Y'all should only have to add or modify a few lines of code.

Figure B.4: A recursive shape we call "Mickey Moose".

Exercise 3 In this exercise, you volition draw "Moiré patterns" that seem to shift effectually every bit you motility. For an explanation of what is going on, run across https://en.wikipedia.org/wiki/Moire_pattern .

In the directory app02 in the repository for this book, you'll detect a file named Moire.java. Open it and read the paint method. Draw a sketch of what yous await it to do. Now run it. Did you get what y'all expected?
Change the program so that the infinite between the circles is larger or smaller. Come across what happens to the image.
Modify the programme and so that the circles are fatigued in the eye of the screen and concentric, equally in Figure B.v (left). The distance between the circles should be small enough that the Moiré interference is credible.

Figure B.v: Graphical patterns that tin exhibit Moiré interference.
Write a method named radial that draws a radial set of line segments as shown in Figure B.5 (right), merely they should be close enough together to create a Moiré pattern.
Just about any kind of graphical pattern can generate Moiré-like interference patterns. Play around and come across what you tin create.