Using nested for-loops in simple graphical applications

Creating a window in Java

The Java library contains the necessary methods to create windows
We are not studying graphics programming here.
The purpose here is to show you how to use nested for-loops to draw rectangles
Frame:

This is how to create a window (Frame) in Java:

import java.awt.*; // Import the Abstract Window Toolkit public class Window1 { static public void main(String[] args) { /* ------------------------------------------------ Making a window in Java ------------------------------------------------ */ Frame f = new Frame( "My window" ); // Create a window // Not yet visible !!.... f.setSize(400, 300); // Set size of the window (width, height) f.setVisible(true); // Make window visible } }

Result:

Example Program: (Demo above code)
- Prog file: click here
How to run the program:

Canvas for drawing purpose

A Canvas is a Java class used for drawing pictures:
Here is the Canvas class description in the Java documentation website: click here

We have not have sufficient material to understand the technical details on a canvas used for drawing....

So what I will do is to just show you a Java program that creates a 300×300 canvas:

Java program that makes a 300×300 Canvas for drawing purposes:

import java.awt.*; import java.awt.image.*; public class MyCanvas extends Canvas { static final int MAX_WIDTH = 300; static final int MAX_HEIGHT = 300; // Dimensions of the 2-dim canvas /* ------------------------------------------------- This variable is the 2-dim. array of pixels (= image) used for the drawing ------------------------------------------------- */ static BufferedImage Image = new BufferedImage(MAX_X, MAX_Y, BufferedImage.TYPE_INT_RGB); /* ----------------------------------------- repaint will invoke paint() and will use "Image" ----------------------------------------- */ public void paint(Graphics g) { g.drawImage(Image, 0, 0, Color.white, null); } /* ----------------------------------------- Redefine update() will eliminate flicker ----------------------------------------- */ public void update(Graphics g) { paint(g); } }

Showing ("make visible") the Canvas inside a Frame window

In order to show (= make it visibile) a Canvas inside a window (Frame), we must add the Canvas to the window (Frame)
The following Java program shows you how it is done (without going into the technical details)

Java program that shows a 300×300 Canvas inside a 300×300 Frame (window):

import java.awt.*; public class Window2 { static public void main(String[] args) { /* ------------------------------------------------ Making a window in Java ------------------------------------------------ */ Frame f = new Frame( "My window" ); // Create a Frame f Canvas pic = new MyCanvas(); // Make a MyCanvas f.add("Center", pic); // Put the MyCanvas in Frame f f.setSize(400, 300); // Set size of the window (width, height) f.setVisible(true); // Make window visible } }

Result:

Example Program: (Demo above code)
- Window2.java Prog file: click here
- MyCanvas.java Prog file (makes a 300x300 canvas): click here
How to run the program:

Coordinate system of a Canvas
- A Canvas is a rectangle of "dots"
  Each "dot" is called a pixel
- Each pixel on the Canvas is identified by a coordinate (row#, column#)
  The coordinate system used is as follows:

Painting on a canvas: Color of a pixel

Each pixel on the Canvas has a color
A color consists of 3 color components:
A color is encoded by 3 numbers:
The intensity value of each color ranges:

Color codes:

A color code is usually represented by a Hexadecimal number
(A Hexadecimal number is a number written in the base 16 number system)
A color is encoded in the following format:
Where:
- 0x tells the Java compiler that we are using a Hexadecimal number
- RR = 2 Hexadecimal digits that encodes the intensity level of the red component
- RR = 2 Hexadecimal digits that encodes the intensity level of the green component
- RR = 2 Hexadecimal digits that encodes the intensity level of the blue component

Example color codes:

Code of the color red = 0xFF0000
Code of the color green = 0x00FF00
Code of the color blue = 0x0000FF
Code of the color yellow = 0xFFFF00

Changing the color of a pixel on the Canvas

To change the color of a pixel on the Canvas that we have created (see above), use this method call:
where:
Note:

Example: draw 1 yellow dot on the Canvas at position (200, 100)

import java.awt.*; import java.awt.image.*; public class Graphics0 { static public void main(String[] args) { final int YELLOW = 0xFFFF00; // Color code for yellow /* ------------------------------------------------ Preparing to draw picture... ------------------------------------------------ */ Frame f = new Frame( "My image" ); // Create a Frame Canvas pic = new MyCanvas(); // Make a MyCanvas f.add("Center", pic); // Put MyCanvas in the window f.setSize(400,300); // Set window size f.setVisible(true); // Make window visible /* ------------------------------------------------------- Now we are ready to draw things... For starters, let's draw a DOT at position (200,100) i.e.: at column 200, row 100 ------------------------------------------------------- */ MyCanvas.Image.setRGB(200, 100, YELLOW); // Put dot at pos (200,100) pic.repaint(); // Repaint the picture } }

Result:

Example Program: (Demo above code)
- The Graphics0.java Prog file: click here
- The MyCanvas.java Prog file: click here
How to run the program:

Draw a horizontal line: using a for-loop

We can draw a (yellow) horizontal line (say at height 100) by:

changing all pixels (0, 100), (1, 100), ...., (400, 100) into the yellow color

Example:

import java.awt.*; import java.awt.image.*; public class Graphics1 { static public void main(String[] args) { final int YELLOW = 0xFFFF00; // Color code for yellow /* ------------------------------------------------ Preparing to draw picture... ------------------------------------------------ */ Frame f = new Frame( "My image" ); // Create a window Canvas pic = new MyCanvas(); // Make a MyCanvas f.add("Center", pic); // Put MyCanvas in the window f.setSize(400,300); // Set window size f.setVisible(true); // Make window visible /* ------------------------------------------------ Now we are ready to draw things... Let's draw a horizontal line ------------------------------------------------ */ for (int col = 0; col < 400 ; col++ ) MyCanvas.Image.setRGB(col, 100, YELLOW); // draw yellow horizontal line // at row = 100 pic.repaint(); // Repaint the picture } }

Result:

Example Program: (Demo above code)
- The Graphics1.java Prog file: click here
- The MyCanvas.java Prog file: click here
How to run the program:

Draw a square: using a nested for-loop

Problem:

We must change the color of all these pixels to yellow:

(col#, row#) row 100: (200, 100) (201, 100) ... (209, 100) row 101: (200, 101) (201, 101) ... (209, 101) ... row 109: (200, 109) (201, 109) ... (209, 109)

We accomplish this as follows:

for ( each column col = 200, 201, 202, ..., 209 ) { Change the color of pixel (col, 100), (col, 101), ..., (col,109) to YELLOW }

Or as follows:

for ( col-coordinate col = 200, 201, 202, ..., 209 ) { for ( row-coordinate row = 100, 101, 102, ..., 109 ) { Change the color of pixel (col, row) to YELLOW; } }

Or:

for ( col-coordinate col = 0, 1, 2, ..., 9 ) { for ( row-coordinate row = 0, 1, 2, ..., 9 ) { Change the color of pixel (200+col, 100+row) to YELLOW; } }

Example:

import java.awt.*; import java.awt.image.*; public class Graphics4 { static public void main(String[] args) { final int YELLOW = 0xFFFF00; /* ------------------------------------------------ Preparing to draw picture... ------------------------------------------------ */ Canvas pic = new MyCanvas(); // Make MyCanvas Frame f = new Frame( "My image" ); // Create a window f.add("Center", pic); // Put the canvas in the window f.setSize(400, 300); // Set size of the window f.setVisible(true); // Make window visible /* ------------------------------------------------ Draw a 10x10 box at (200,100) ------------------------------------------------ */ for (int col = 0; col < 10; col++ ) for (int row = 0; row < 10; row++ ) MyCanvas.Image.setRGB(200+col, 100+row, YELLOW); pic.repaint(); // Repaint the picture } }

Result:

Example Program: (Demo above code)
- The Graphics4.java Prog file: click here
- The MyCanvas.java Prog file: click here
How to run the program:

Advance loop: make a square run across the canvas

A very simple by interesting addition:

import java.awt.*; import java.awt.image.*; public class Graphics6 { static public void pause(int n) { Thread.sleep( 100 * n ); // Pause 100*n micro seconds } static public void main(String[] args) { final int YELLOW = 0xFFFF00; final int BLACK = 0x000000; /* ------------------------------------------------ Preparing to draw picture... ------------------------------------------------ */ Canvas pic = new MyCanvas(); // Make a MyCanvas Frame f = new Frame( "My image" ); // Create a window f.add("Center", pic); // Put the canvas in the window f.setSize(400,300); // Set size of the window f.setVisible(true); // Make window visible /* ----------------------------------------------------------- Repeatedly draw a 10x10 box moving over a horizontal line ----------------------------------------------------------- */ int x = 0, y = 100; while ( true ) // Repeat FOREVER !!! { /* ------------------------------------------------ Paint the box at position (x,y) ------------------------------------------------ */ for (int i = 0; i < 10; i++ ) for (int j = 0; j < 10; j++ ) MyCanvas.Image.setRGB(x+i, y+j, YELLOW); pic.repaint(); // Repaint the picture pause(10); // pause for 1 sec... /* ------------------------------------------------ ERASE the box (= paint it BLACK !) ------------------------------------------------ */ for (int i = 0; i < 10; i++ ) for (int j = 0; j < 10; j++ ) MyCanvas.Image.setRGB(x+i, y+j, BLACK); pic.repaint(); // Repaint the picture /* ------------------------------------------------ Move box 10 pixels to the right ------------------------------------------------ */ x = x + 10; /* -------------------------------------------- Check if the box has run off the right end -------------------------------------------- */ if ( (x + 10) > 400 ) x = 0; // It did... repeat from the left again } } }

Example Program: (Demo above code)
- The Graphics6.java Prog file: click here
- The MyCanvas.java Prog file: click here
How to run the program:

Paint a triangle....

Problem: draw the following yellow triangle

Algorithm:

for every pixel at position (col, row) do { if pixel (col, row) lies inside yellow triangle region { paint that pixel yellow; } }

Refined:

for ( col = 0; col < 400; col++ ) { for ( row = 0; row < 400; row++ ) { if ( (col, row) lies inside triangle ) MyCanvas.Image.setRGB( col, row, YELLOW); } }

How to determine if the corrdinate col, row) lies inside the triangle:
From pre-Calc (High School stuff), you can see that every point (col, row) inside the triangle satisfy the following inequality:

Java program that paints this triangle:

import java.awt.*; import java.awt.image.*; public class Graphics8 { static public void main(String[] args) { final int YELLOW = 0xFFFF00; /* ------------------------------------------------ Preparing to draw picture... ------------------------------------------------ */ Canvas pic = new MyCanvas(); // Make a canvas (2 dim array) Frame f = new Frame( "My image" ); // Create a window f.add("Center", pic); // Put the canvas in the window f.setSize(410,340); // Set size of the window f.setVisible(true); // Make window visible /* ------------------------------------------------ Draw triangle ------------------------------------------------ */ for (int col = 0; col < 400; col++ ) for (int row = 0; row < 300; row++ ) if ( 3*col + 4*row <= 1200 ) MyCanvas.Image.setRGB(col, row, YELLOW); pic.repaint(); // Repaint the picture } }

Example Program: (Demo above code)
- Prog file: click here
How to run the program:
Output: