Drawing with Text

I started programming when I was 10 years old by reading and modifying simple programs that my older friends from high school wrote as homework. They were written in Pascal, a simple programming language designed in the end of the `60s, intended to teach students structured programming. After a couple of days of tinkering, I talked to my friend Sergiu about programming. He gave me a book for beginners called “The little programmer”. The book explained basic concepts like variables, control flow, loops and arrays. It was filled with exercises that helped me a lot. My favourite ones where drawing with text.

The goal of these exercises is to practice and understand loops in a more visual way. The exercises vary in difficulty from easy to hard (like the circle). For each exercise there will be a playground with a solution. When opening a solution remember to show the Assistant Editor in Xcode in order to see the console output.

open Assitant Editor

Feel free to post your solutions in the comments or share other similar exercises.

Square

Given an integer N draw a square of N x N asterisks, like the ones below:

N = 1

*

N = 2

**
**

N = 3

***
***
***

Solution

Twists

  • draw an empty square
N = 3
***
* *
***

N = 4
****
*  *
*  *
****
  • draw an empty square, but instead of asterisks, use + for corners, - for the top and bottom sides and | for the left and right ones
N = 2
++
++

N = 4
+--+
|  |
|  |
+--+

Rectangle

Given two integers N and M draw a rectangle of N x M asterisks, like the ones below:

N = 1 M = 3

***

N = 2 M = 2

**
**

N = 3 M = 7

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

Solution

Twists

  • draw an empty rectangle
N = 3 M = 4
****
*  *
****

N = 4 M = 7
*******
*     *
*     *
*******
  • draw an empty rectangle, but instead of asterisks, use + for corners, - for the top and bottom sides and | for the left and right ones
N = 2 M = 3
+-+
+-+

N = 4 M = 3
+-+
| |
| |
+-+

Triangle

Given an integer N draw a triangle of asterisks. The triangle should have N lines, the i-th line should have i asterisks on it.

N = 1

*

N = 3

*
**
***

N = 4

*
**
***
****

Solution

Twists

  • draw an empty triangle
N = 3
*
** 
***

N = 4
*
** 
* *
****

N = 5
*
** 
* *
*  *
*****
  • draw an empty triangle, but instead of asterisks, use + for corners, - for the bottom side, | for the left side and\ for the right side
N = 2
+
++

N = 4
+
|\
| \
+--+

N = 5
+
|\
| \
|  \
+---+

Pyramid

Given an integer N draw a pyramid of asterisks, like the ones below:

N = 1

*

N = 2

 *
***

N = 3

  *
 ***
*****

N = 4

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

Solution

Rhombus

Given an integer N draw a rhombus of asterisks, like the ones below:

N = 1

*

N = 2

 *
***  
 *

N = 3

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

N = 4

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

Solution

Aztec Pyramid

Given an integer N draw a Aztec pyramid of asterisks, like the ones below:

N = 1

**
**

N = 2

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

N = 3

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

Solution

Chess Board

Given an integer N draw a chess board of size N x N. Each line of the chess board should have spaces and number signs(#) alternating. A space represents a white cell and the number sign a black one. The chess board should be bordered using +, - and | like in the examples below:

N = 1
+-+
|#|
+-+

N = 3
+---+
|# #|
| # |
|# #|
+---+

N = 5
+-----+
|# # #|
| # # |
|# # #|
| # # |
|# # #|
+-----+

N = 8
+--------+
|# # # # |
| # # # #|
|# # # # |
| # # # #|
|# # # # |
| # # # #|
|# # # # |
| # # # #|
+--------+

Solution

Circle

Given an integer R draw a circle of asterisks that has the radius equal to R units. For simplicity reasons assume that a character(space or asterisk) has the height 1 unit and width 0.5 units, in other words a rectangle of size N x 2N looks like a square.

Radius = 2
    *    
 ******* 
*********
 ******* 
    *    

Radius = 5
          *          
    *************    
  *****************  
 ******************* 
 ******************* 
*********************
 ******************* 
 ******************* 
  *****************  
    *************    
          *          

Radius = 10
                    *                    
            *****************            
        *************************        
      *****************************      
    *********************************    
   ***********************************   
  *************************************  
 *************************************** 
 *************************************** 
 *************************************** 
*****************************************
 *************************************** 
 *************************************** 
 *************************************** 
  *************************************  
   ***********************************   
    *********************************    
      *****************************      
        *************************        
            *****************            
                    *                

Solution

Sine

Plot the sine function :)

Your output should look like something like this:

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

*                    *                    *                    *                 

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

Solution

If you found this useful please take a moment and share it with your friends! :)

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading...

  6 comments for “Drawing with Text

  1. Rajeev Bhatia
    October 21, 2014 at 6:24 am

    Great article but could you please post the solutions as pastebin code links instead of complete playground files? Makes it tedious to download and open a separate file for each solution.

    Thanks!

  2. Stephen
    June 4, 2015 at 5:50 am

    I did something very similar when I started programming in c, I made sine, but left to right, up to down lol

  3. June 30, 2016 at 11:13 am

    Very Nice Tutorial!

  4. Fraking Frank
    March 6, 2017 at 8:39 pm

    Wow!
    That make sense. In the beginning I thought that looks easy. But than i started.
    Quite tricky and makes fun. A good reason to spent little Dollars for more.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe
We send about one email per week with our latest tutorials and updates
Never display this again :)