ASCII Art Examples
Back to the Program-A-Day homepage
ProblemIn 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. 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. |
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!
| |
---|---|---|
SolutionBefore 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:
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.
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:
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 |