Problem

In this sample problem, we'll examine how to create a number of different "pictures" using two nested loops and printing characters to the console. These pictures include: a solid box, a solid box with a blank "X", an "X", a hollow box, a hollow box with an "X", and a right triangle.
NOTE: If you want to see what each picture should look like, scroll down to the bottom of this page.

The program will begin by prompting the user for a number. This number will represent the size for each picture that will be printed to the console. In essence, the size will represent the number of rows and columns for each picture.
NOTE: For each picture in the solutions, we will assume the size (the number of rows and columns) to be 10.

By Students...

I remember that I had to do something similar to this in one of my COMP 1010 labs a few years ago. In fact, it might actually still be one of the labs being taught today. This was actually a lot of fun! You can create some interesting designs just by hacking in random conditions. Try it out!

Solution

Before we can actually start to think about solving these problems, we'll need a piece of paper and a pencil. Each picture can be represented by a 2-dimensional grid, so let's draw out a 10 x 10 grid on our piece of paper. It may look something like this:

   0  1  2  3  4  5  6  7  8  9
 +–––––––––––––––––––––––––––––+
0|__|__|__|__|__|__|__|__|__|__|
1|__|__|__|__|__|__|__|__|__|__|
2|__|__|__|__|__|__|__|__|__|__|
3|__|__|__|__|__|__|__|__|__|__|
4|__|__|__|__|__|__|__|__|__|__|
5|__|__|__|__|__|__|__|__|__|__|
6|__|__|__|__|__|__|__|__|__|__|
7|__|__|__|__|__|__|__|__|__|__|
8|__|__|__|__|__|__|__|__|__|__|
9|__|__|__|__|__|__|__|__|__|__|

The best way in attempting to solve these problems is to draw each picture in the grid that we've drawn out. Let's use the picture of an "X" as an example:

   0  1  2  3  4  5  6  7  8  9
 +–––––––––––––––––––––––––––––+
0|* |__|__|__|__|__|__|__|__|* |
1|__|* |__|__|__|__|__|__|* |__|
2|__|__|* |__|__|__|__|* |__|__|
3|__|__|__|* |__|__|* |__|__|__|
4|__|__|__|__|* |* |__|__|__|__|
5|__|__|__|__|* |* |__|__|__|__|
6|__|__|__|* |__|__|* |__|__|__|
7|__|__|* |__|__|__|__|* |__|__|
8|__|* |__|__|__|__|__|__|* |__|
9|* |__|__|__|__|__|__|__|__|* |

Now that we've drawn out the "X", let's try to figure out the pattern:

1. Start at position (0,0). Look at the X and Y values for this particular line through the grid. Each of the X and Y values are the same! This means that whenever position X is equal to position Y, then we'll draw a "*".

We've figured out the pattern for one of the two lines on the grid, now we need to figure out the pattern for the second line.

2. The second line starts at position (0,9), then at (1,8), then at (2,7), and so on... Try adding the X and Y values together for each occurrence of a "*" on the grid. You'll notice that the value is always equal to 9, which is also equal to size - 1. We've figured out the pattern for the second line through the grid!

We now know that if any of the two conditions above hold while we iterate through our grid, then we'll print a "*", otherwise we'll print a " ". Now we just need to figure out how we'll iterate through our grid in code. We're going to use 2 nested for-loops to iterate through our grid. The outer for-loop will represent the current row, and the inner for-loop will represent the current column. The code will look something like this:

for (int i = 0; i < size; i++) 
{
	for (int j = 0; j < size; j++) 
	{
                // print a character in the current column
		System.out.print("*"); // use print method to stay in the same row
		}//end for
		System.out.println(); // use println to go to the next row
}//end for

The way this works is:

• Start at row 0 and column 0
  
• Iterate through columns 0 to 9 (staying at row 0)
  
• Go to the next row (row 1)
  
• Iterate through columns 0 to 9 (staying at row 1)
  
• Repeat until we've iterated through all rows
  

NOTE: We're always looking at one position in our grid at a time, and we're always going from left to right for each row

Now that we know how to iterate through our grid, and we know the pattern to create an "X" on our grid, let's put the two together. We've represented our rows with an integer i, and our columns with an integer j (in our nested for-loops). All we need to do is write the condition statements (the statements that tell us if we should print a "*" or a " "). We'll accomplish this using if-else statements.

As mentioned earlier, we only draw the line starting at position (0,0) when the current row is equal to the current column. Also, we only draw the line starting at position (0,9) when the current row plus the current column is equal to the size - 1. For every other case, we draw a " ". So, if we were to code this, we would write the following:

// drawing an 'X'
for (int i = 0; i < size; i++)
{
	for (int j = 0; j < size; j++)
	{
		// if (curr row == curr column) OR (curr row + curr column == size-1) 
		if ( i == j || i + j == (size-1) )
		{
			System.out.print("*");
		}//end if
		else
		{
			System.out.print(" ");
		}//end else
	}//end for
	System.out.println();
}//end for

One thing to realize when you code out your solution is that you should not include more than ONE if-statement. You may include an if-statement followed by an else-if-statement (or an else-statement) because only ONE of these conditions will execute their code. If we have two if-statements together and both are TRUE (meaning they will execute their code), then we'll have more than one character being printed for the current column. This will make our picture look a little sloppy. WE ONLY PRINT ONE CHARACTER PER POSITION IN OUR GRID.

So far, we've created just one picture. Lets try another example. This time let's create the "hollow box" picture. To begin, we'll have to draw it out again, just like we did in the previous example. The "hollow box" will look something like this:

   0  1  2  3  4  5  6  7  8  9
 +–––––––––––––––––––––––––––––+
0| *| *| *| *| *| *| *| *| *| *|
1| *|__|__|__|__|__|__|__|__| *|
2| *|__|__|__|__|__|__|__|__| *|
3| *|__|__|__|__|__|__|__|__| *|
4| *|__|__|__|__|__|__|__|__| *|
5| *|__|__|__|__|__|__|__|__| *|
6| *|__|__|__|__|__|__|__|__| *|
7| *|__|__|__|__|__|__|__|__| *|
8| *|__|__|__|__|__|__|__|__| *|
9| *| *| *| *| *| *| *| *| *| *|

Now, let's figure out the pattern. There are four lines, so there will be four conditions that we need to solve for:

1. The top (line) of the box is only printed when the current row is equal to 0.
2. The bottom (line) of the box is only printed when the current row is equal to 9 (size - 1).
3. The left (line) of the box is only printed when the current column is equal to 0.
4. The right (line) of the box is only printed when the current column is equal to 9 (size - 1).

Now that we know each of the conditions where we should print a "*", let's code it out:

// drawing a hollow box
for (int i = 0; i < size; i++)
{
	for (int j = 0; j < size; j++)
	{
		if ((i == 0 || i == (size-1)) || (j == 0 || j == (size-1)) )
		{
			System.out.print("*");
		}//end if
		else 
		{
			System.out.print(" ");
		}//end else
	}//end for
	System.out.println();
}//end for

We've covered two examples so far (drawing an "X" and a "hollow box"). See if you can figure the rest out on your own. The solutions are provided below. If you can not solve one of the problems, try stepping through the solution and try to figure out the patterns for that particular problem. Have fun!

Code

Solution Code

import javax.swing.*; // so we can use JOptionPane to get user input

public class ASCII_Art
{
	public static void main(String[] args)
	{
		String input; // what we'll be using for input... we'll parse each input string to an int
		int size; // we'll read this value in from the console
		
		// this command allows the user to enter a number which will determine the size of our pictures
		input = JOptionPane.showInputDialog("Enter a number for the size of each picture",null);
		
		//now we need to parse our input string to an integer
		size = Integer.parseInt(input);

		//solid box
		//we're just printing the same number of '*'s for each row
		for (int i = 0; i < size; i++) 
		{
			for (int j = 0; j < size; j++) 
			{
				System.out.print("*");
			}//end for
			System.out.println();
		}//end for

		System.out.println();

		//solid box w/ an 'X'
		for (int i = 0; i < size; i++)
		{
			for (int j = 0; j < size; j++)
			{
				if (i == j || i + j == (size-1))
				{
					System.out.print(" ");
				}//end if
				else 
				{
					System.out.print("*");
				}//end else
			}//end for			
			System.out.println();
		}//end for
		
		System.out.println();

		//an 'X'
		for (int i = 0; i < size; i++)
		{
			for (int j = 0; j < size; j++)
			{
				if ( i == j || i + j == (size-1) )
				{
					System.out.print("*");
				}//end if
				else
				{
					System.out.print(" ");
				}//end else
			}//end for
			System.out.println();
		}//end for

		System.out.println();

		// a hollow box
		for (int i = 0; i < size; i++)
		{
			for (int j = 0; j < size; j++)
			{
				if ((i == 0 || i == (size-1)) || (j == 0 || j == (size-1)) )
				{
					System.out.print("*");
				}//end if
				else 
				{
					System.out.print(" ");
				}//end else
			}//end for
			System.out.println();
		}//end for
		
		System.out.println();

		//Hollow box w/ an 'X'
		for (int i = 0; i < size; i++)
		{
			for (int j = 0; j < size; j++)
			{
				if (i == j || j ==(size-1)-i)
				{
					System.out.print("*");
				}//end if
				else if ((i == 0 || i == (size-1)) || (j == 0 || j == (size-1)) )
				{
					System.out.print("*");
				}//end else if
				else 
				{

					System.out.print(" ");
				}//end else
			}//end for
			System.out.println();
		}//end for

		System.out.println();

		//right triangle
		for (int i = 0; i < size; i++)
		{
			for (int j = 0; j < size; j++)
			{
				if (j <= i)
				{
					System.out.print("*");
				}//end if
				else
				{
					System.out.print(" ");
				}//end else
			}//end for
			System.out.println();
		}//end for
		
		System.out.println("*** END OF PROCESSING. ***");
	}//end main
}//end ASCII_Art

OUTPUT:

**********
**********
**********
**********
**********
**********
**********
**********
**********
**********

 ******** 
* ****** *
** **** **
*** ** ***
****  ****
****  ****
*** ** ***
** **** **
* ****** *
 ******** 

*        *
 *      * 
  *    *  
   *  *   
    **    
    **    
   *  *   
  *    *  
 *      * 
*        *

**********
*        *
*        *
*        *
*        *
*        *
*        *
*        *
*        *
**********

**********
**      **
* *    * *
*  *  *  *
*   **   *
*   **   *
*  *  *  *
* *    * *
**      **
**********

*         
**        
***       
****      
*****     
******    
*******   
********  
********* 
**********
*** END OF PROCESSING. ***