Introduction: Learn to Code: Pixel Art Drawing With Microsoft Excel

By

Let's teach the kids to code in a fun way, and see it in action with the pixel art drawing from Microsoft Excel.

Step 1: What Is Pixel Art Drawing?

Microsoft Excel, a Microsoft Office application that, in general, having boxes on the computer screen when we open it. Whereas, pixel art drawing, is often described as a “sandbox drawing”, using building blocks, as we see from the love shape drawing. We see the similarity in both. That's the idea when I having my breakfast at McDonald one of the morning.

With the similarity, Microsoft Excel seems a perfect tool, to extract kids' attention to draw the Minecraft art, by learning up the code.

Microsoft Excel is using VBA (Visual Basic Application), a programming platform, that can interact with row and column, text (value) and color from within.

With less than 30 lines of code, kids will learn:

• What is variable?
• For… Next loop
• Data and Database
• A logic to read the drawing data, and plot it out

Attachments

Step 2: Let’s Get Started

Microsoft Excel and Visual Basic Code Editor

Like any programming tool, we need an editor for the purpose. For Microsoft Excel, the editor is called “Microsoft Visual Basic for Applications”. The editor came with Microsoft Excel, no separate download is required.

Let's launch the editor:

  • Open up Microsoft Excel

  • If there is “Developer” tab, click on it. Please refer to the second picture.

  • From “Developer” tab, click on “Visual Basic” button.

We should see the Visual Basic editor is shown. If not, try the following to enable the "Developer" tab:

  1. Open Excel
  2. On the “File” menu tab
  3. Select “Options”
  4. Select “Customize Ribbon”
  5. In the list, select the “Developer” check box
  6. Select “OK”
  7. Select the “Developer” tab

Sometimes different version of Microsoft Excel has different way, try the following:

  1. Open Excel

  2. On the "File" menu tab

  3. Select "Customize Quick Access Toolbar..."

  4. Select "Customize Ribbon"

  5. Place a check in the "Developer" option

  6. Select "OK"

  7. Select the "Developer" tab

Step 3: Let's Try the Hello World!

Adding Form Control

  1. In Excel, click on “Developer” tab
  2. Click on “Insert”, choose “Button” from form control
  3. Then draw a button on the Excel
  4. Name the button as “HelloWorld_Click”
  5. Click “New” to insert it as new module/macro
  6. From the editor, enter the below code within the “Sub” and “End Sub” module:
    MsgBox ("Hello World!")

Let's run it by trigger the button click:

  • In Excel, click on "Button1"
  • A message will display with "Hello World!"

Well done! We are one step closer to the Minecraft Art Drawing.

Note: If we saved and re-open the file, may see “Security Notice”, just click on “Enable Macros”

Step 4: Interact With Excel Row & Column

Let's try to prepare for our drawing environment:

  1. Right-click on “Button1”, select “Edit Text” from the pop-up
  2. Change the text to “Adjust Column Width”
  3. Right-click again and select “Assign Macro…”

    Note: We just learn on how to change the button text to something else. And now we are going to change the hello world to something meaningful.
  4. Ensure “HelloWorld_Click” is selected, then click on “Edit”

  5. Enter the below code into the module:

    Rows("1:50").RowHeight = 14

    Columns("A:AZ").ColumnWidth = 2

  6. Switch back to Excel and click the button to observe what we have just changed

    Tips: If the boxes do not look like the square, try to change the number for the row and column from the code, to make it square

Well done! We are just prepared the environment for our Minecraft art drawing. As we notice, we need the row and column in a square, in order to draw the character in Minecraft way.

Step 5: Let's Dive Into the Code

Variable

To learn to code, we need to know what is variable. Variable is nothing but a container that we use to keep the thing like string, number or object. Variable can change its form from time to time. For example, before we start our coding, we may initiate a variable with 0 value. But then we add this variable with 5, so, the value of the variable now becomes 5 (0+5). Variable become very useful when we involve with many calculations, or use it to represent something that meaningful.

Let's switch back to our VBA editor by pressing "Alt+F11" on the keyboard. In “HelloWorld_Click” module, within the “Sub” and “End Sub”, let's remove the 2 lines for the rows and columns and replace with below lines of code:

Sub HelloWorld_Click()

Dim wsMinecraft As Worksheet

Dim wsData As Worksheet

Dim totalRow As Integer

Dim DrawRow As Integer

Dim DrawColStart As Integer

Dim DrawColEnd As Integer

Dim aDrawColor() As String

Dim iRow As Integer

Dim iColStartEnd As Integer

Set wsData = Worksheets("Coloring")

Set wsMinecraft = Worksheets("Mario")

wsData.Activate

' Find totalRow, totalColumn

totalRow = ActiveSheet.Range("B3").End(xlDown).Row

For iRow = 3 To totalRow

DrawRow = wsData.Cells(iRow, 2).Value

DrawColStart = wsData.Cells(iRow, 3).Value

DrawColEnd = wsData.Cells(iRow, 4).Value

' Split by color, to assign value

aDrawColor = Split(wsData.Cells(iRow, 6).Value, ",")

wsMinecraft.Activate

For iColStartEnd = DrawColStart To DrawColEnd

wsMinecraft.Cells(DrawRow, iColStartEnd).Interior.Color = RGB(CInt(aDrawColor(0)), CInt(aDrawColor(1)), CInt(aDrawColor(2)))

Next

Next

End Sub

We see there are quite a number of “Dim …. As” for the beginning lines. These are called “Declaration”, where we use to declare the variables:

  • wsMinecraft is a variable
  • wsData is a variable
  • totalRow is a variable
  • DrawColStart, DrawColEnd, iRow are variables

To further understand the variable, the container can be a:

  • Object: Dim wsMinecraft as Worksheet
  • Integer: Dim totalRow as Integer
  • String: Dim aDrawColor() as string

And to use them, we need to know how to assign them. The variable assignments are as below:

  • totalRow = ActiveSheet.Range("B3").End(xlDown).Row
  • Set wsData = Worksheets("Coloring")

We notice there is a different way to assign a number or string or an object. For number and string, it's easier - just assign the variable with an equal sign. Whereas for object, we have to use "Set" in front of the variable.

Tips: We notice there is a single quote “ ’ ” at line 13. What the single quote meaning is really nothing but to put a comment on what our code is doing, so that we know it for future, or understand the code easily when the code becomes longer like thousands of lines. For the VBA (Visual Basic Application) programming language, whenever there is a single quote is found at the beginning of the line, the line will not be executed.

Step 6: For.... Next Loop

Another thing we will learn in this drawing is the "For... Next" loop.

“For… Next” loop is used when we want to carry out the same actions repeatedly. We know most of the pixel art drawing contains only a few colors, and when we put it on sandbox or row and column in Excel, we know it is repeating almost the same colors for each row. Thus, "For... Next" loop is a perfect command we need.

From the code we have from the previous step, we see 2 "For... Next" loops:

For iRow = 3 To totalRow ---> Outer loop

....

.... ---> Action here

....

For iColStartEnd = DrawColStart To DrawColEnd ---> Inner loop

....

.... ---> Action here

....

Next

Next


The first "For... Next" loop we called it as outer loop, and the second "For... Next" loop inside the "For... Next" loop we called it an inner loop. And what's inside the "For... Next" is the action, which is the repeated task we want to tell Microsoft Excel to do. To explain it further, assume we have x number of tasks to carry out repeatedly, and inside this x number of tasks, we also have y number of tasks.

Step 7: Data and Database

The last thing we want to learn is the Data and Database.

Data is the thing that we want to keep it somewhere for later use. Data can be the variable value that we assigned previously, but data stored in "variable" will not retain when we restart Microsoft Excel (application). Database is the place to keep the data, where it will retain after the Microsoft Excel (application) is restarted. In our example, the rows and columns from Microsoft Excel are our database structure.

With reference to the picture:

  • Our database is called “Coloring” (Excel worksheet)
  • Our data columns are called “Row, Column Start, Column End, RGB” respectively
  • The number below the data columns are our data

Note: What about data column called “Color”? This column serves no purpose other than "color". We can ignore it.

Step 8: Drawing in Action

Let's code and draw it. By the way, remember to download the pictures attached in this article:

  1. Insert a picture named “tutorial_heart.png” into Microsoft Excel.
  2. Move the picture to column “AE”. "Column" in Microsoft Excel is normally labeled with alphabet starting from "A". Whereas row is labeled with "number" starting from 1.
  3. Resize the picture according to the Excel’s row height and column width. This step is helpful when we try to enter the data into the database later on. Please refer to the second picture for details.
  4. Drag the “Adjust Column Width” button to, slightly below the heart.
  5. Change button text to “Draw Me!”.
  6. Change worksheet name to “Coloring”. If "database" needs a name, it is called "Coloring" now.

  7. In Row number 2, enter the below. This is a column name, in the programming world, it is also called "field" name:

    Column B: Row

    Column C: Column Start

    Column D: Column End

    Column E: Color

    Column F: RGB

    Note: Adjust the column width to display the header text in full. It’s OK for these columns not being in the square box.

  8. Enter the data according to the table, starting from row number 3 onward. These are our drawing points. Please refer to the second picture labeled as number 8. The data is for the heart shape we inserted in step 1.

    Row Column Start Column End Color RGB
    4 20 21 0, 0. 0
    4 23 24 0, 0, 0
    5 19 19 0, 0, 0
    5 20 21 255, 0, 0
    5 22 22 0, 0, 0
    5 23 24 255, 0, 0
    5 25 25 0, 0, 0

  9. Click on “Draw Me!”

Step 9: Drawing in Action Continue....

Surprise to see what we just draw? Although just 2 lines (line 4 & 5), we notice the top part of the heart shape now.

Let's take one step backward to interpret our data.

With refer to the picture:

  • On the right is what we called "Raw Data", where it's a heart shape or a picture on the building block.
  • On the left, we called it "Formatted Data", somehow we "extract" from the building block, to identify the picture by row, column and color. For example:
    • Line 4, column 20 is a black square
    • Line 4, column 21 is a black square too
    • Line 4, column 22 is a white square. In our case, everything in white, we will just ignore it.
    • Line 4, from column 23 to 24, is a black square
    • Line 5, column 19, is a black square
    • Line 5, from column 20 to 21, is a red square
    • Line 5, column 22 is a black square
    • Line 5, column 23 to 24, is two red squares
    • Line 5, column 25 is a black square
    • These are the drawing pointing for our Minecraft drawing, but Microsoft Excel does not know the drawing point until we tell it so. So we need to further "formatted" it, to tell the computer when we said "black", it is referring to the RGB color code as "0, 0, 0", as well as when we said red, it is "255, 0, 0".
    • Finally, we have the data as we entered in the previous step - "4 20 21 0, 0. 0", "4 23 24 0, 0, 0", "5 19 19 0, 0, 0", "5 20 21 255, 0, 0", and so on.
    • Tips: When we have a new Minecraft picture, it could be a hassle to identify the RGB color code, please refer to this URL to obtain the color code - http://rapidtables.com/web/color/RGB_Color.htm.
  • In the middle is our drawing pad, where the drawing result will show when we click on the "Draw Me!" button. And as our data says:
    • "4, 20 21 0, 0, 0" - at line 4, from column 20 (column T) to column 21 (column U), color it as black.
    • Since Microsoft Excel background is automatically set to white, so, we ignore the column 22. No data required to enter for white, we actually skip it.
    • "4 23 24 0, 0, 0" - at line 4, from column 23 (column W) to 24 (column X), color it as black.
    • "5 19 19 0, 0, 0" - at line 5, from column 19 to 19, color it as black. Since our code required a "Start" and "End" value, when we meet with a square with one color, we will need to enter our data as same value.
    • And so on and so forth.

Step 10: Let's Go Back to the Code

Let's review our code, by referring to the pictures. Please take note that the numbers on the pictures represent the steps in the below bullet lists:

  1. Everything starts from the click. When we click on the "Draw Me!" button. This action triggers the "HelloWorld_Click" event. When this happens, every line of code within the "Sub" and "End Sub" will be executed.
  2. We started with 9 variables declaration. The first two - wsMinecraft and wsData are for objects, which to represent the Microsoft Excel's worksheets.
  3. Then totalRow, DrawRow, DrawColStart, and DrawColEnd are declared as Integer. These variables are used to store for number:
    • totalRow - how many rows in total. In the programming world, it is how many records in our table
    • DrawRow - row/line number
    • DrawColStart - starting column number
    • DrawColEnd - ending column number
    • Take note that we also have aDrawColor() declared as a string. The bracket "()" is referring to an array in programming. "Array" is something like a multi-layer container. Unless integer where it is only a number, for an array, especially after we declared it as a string, it is multi-layer of string. Example, "0, 0, 0" is 3 layer of "0". By the way, for a string of "0" is different than a number of 0. And you can't compare them directly.
  4. The remaining 2 variables - iRow and iColStartEnd are declared as an integer. These 2 variables will be used as "Counter", a counter that we used in "For... Next" loop. It is important to know the value of the counter when we are in the loop of the repeated steps.
  5. Following 2 lines of the code

    • Set wsData = Worksheets("Coloring"). This line is to tell the Microsoft Excel to use the worksheet named "Coloring". Where this worksheet is where we stored the data.

    • Set wsMinecraft = Worksheets("Coloring"). We also reference "wsMinecraft" to "Coloring" worksheet. We assigned both of the objects to the same worksheet, also meaning we obtain the data and draw it on the same worksheet.

  6. Next 2 lines of codes

    • wsData.Activate, to tell the Microsoft Excel to focus on the data worksheet (wsData). This line is actually not required if we have a single worksheet. But, useful when we created more worksheets for Ironman, Angry Bird, Miku, Hulk, and so on.

    • totalRow = ActiveSheet.Range("B3").End(xlDown).Row. This line is calling a built-in function from Microsoft Excel, to get the total row starting from column B, row 3, goes down to the end of our data. This function will just know how many rows of the data, as long as there is value on the row. Then assign the total number to “totalRow”. From the example, from the blue rectangle, we know the last “5” stopped at row number 9, but because we start at row number 3, and row 3 count as 1, so our totalRow is 9 – 2 = 7. This is also meaning we have a total of 7 records in our table/database.

  7. Then we enter the first loop, also the outer loop:
    For iRow = 3 To totalRow
    DrawRow = wsData.Cells(iRow, 2).Value
    DrawColStart = wsData.Cells(iRow, 3).Value
    DrawColEnd = wsData.Cells(iRow, 4).Value
    aDrawColor = Split(wsData.Cells(iRow, 6).Value, ",")
     ……
    Next

    Below is how the "For... Next" loop works:
    - For iRow = 3 To totalRow. iRow is the starting point, where it will start from 3, where the "3" after the equal "=" sign is to tell iRow to use it. Then it will repeat for 7 times, which is the totalRow, each time will increase the number - iRow by one.
    - DrawRow = wsData.Cells(iRow, 2).Value. As we see there is an equal sign, we know Microsoft Excel will going to do the code on the right side after the equal sign, which it will get the value from our coloring database from row 3 column 2, which is "4", then assign 4 to DrawRow.
    - DrawColStart = wsData.Cells(iRow, 3).Value. Same as previous code is doing, now it will obtain the value from row 3 column 3, then assign 20 to DrawColStart.
    - DrawColEnd = wsData.Cells(iRow, 4).Value. Again, we make use of iRow, to tell Microsoft Excel, obtain the value from same row (iRow) but different column for the DrawColEnd.
    - aDrawColor = Split(wsData.Cells(iRow, 6).Value, ","). This line of code is combined with another function from Microsoft Excel to use "Split", to separate out the value we obtained. To understand it easily, we can ignore the "Split" for now, and focus on the code inside the "Split". So, we know, same row but column 6 which we will have the value of "0, 0, 0". Our code later will not be going to understand what is "0, 0, 0", but instead each of the numbers, that's why we use split command to remove the command and give us 3 layers (in programming, we called this dimension) of data, and each layer will have a "0".

    Note: We know the above is just something to prepare the drawing points, instead of drawing the art.

  8. Now, the drawing part:
    But before that, let’s make sure we are in the right worksheet, we can do this by setting the focus to “Coloring” worksheet:

    wsMinecraft.Activate


    To draw the Minecraft art, from the previous step, we know:
    - iRow = 3
    - DrawRow = 4
    - DrawColStart = 20
    - DrawColEnd = 21
    - aDrawColor, also our color code is “0, 0, 0”

    And our inner loop:

    For iColStartEnd = DrawColStart To DrawColEnd

    wsMinecraft.Cells(DrawRow, iColStartEnd).Interior.Color =

    RGB(CInt(aDrawColor(0)), CInt(aDrawColor(1)), CInt(aDrawColor(2)))

    Next


    As we learn:
    - iColStartEnd will actually take the value from DrawColStart, so iColStartEnd = 20. And it will repeat from 20 to 21 (DrawColEnd), and increase by 1 for every time. We know from 20 to 21 is only repeated for twice.
    - wsMinecraft.Cells(DrawRow, iColStartEnd).Interior.Color = RGB(....). ignore the code inside the RGB for now, and we want to tell Microsoft Excel to draw a color (Interior.Color) at row 4, column 20. And then the RGB code - we know we have "0 0 0". To explain it easily, Cint(aDrawColor(0)) is referring to the first 0, Cint(aDrawColor(1)) is referring to the second 0, and Cint(aDrawColor(2)) is referring to the last 0. We have to code it this way, to give a color in RGB format, and only accept number but not string. Remember we declared the aDrawColor as string, and we can't assign a string to a number for RGB? A "Cint" is used here to convert a string to a number. We can remember Cint as "Convert to integer".
    - OK so we have our first square box color as black - RGB(0, 0, 0) in column T.
    - We met a "Next" for the last statement for our inner loop. This is simply meaning increase "iColStartEnd" by 1. Thus, iColStartEnd is 21 by now.
    - Then repeat it again in the "For..." loop, since we know we want it to repeat until iColStartEnd = 21, so we know this is the last action already.
    - The next action of course color another black square box at row 4 column 21 (column U)

    Then we are out of the inner loop and met with the last statement for the outer loop - a "Next" again. So the outer loop will increase iRow by 1 then our values become:
    - iRow = 4
    - DrawRow = 4
    - DrawColStart = 23
    - DrawColEnd = 24
    - aDrawColor = “0, 0, 0”

    What Microsoft Excel will do is from column 23 to 24, color “black” again.

    The skip of column 22 is in purpose, where it is in white. Since our background is white, there is no need to put color on it.

    The drawing continues with the inner and outer loops, then when iRow = 6:
    - DrawRow = 5
    - DrawColStart = 20
    - DrawColEnd = 21
    - aDrawColor = "255, 0, 0"

    We will see 2 red square boxes are drawing.
    Then the drawing continues again until we reach the end of the last record, from our example, “5, 25 to 25, [0,0,0]”, color “black” then stop.

  9. That's all for the code to do.

Step 11: Complete the Heart!

But wait! Our pixel art heart is halfway completed? That's right! We need to finish it all. Let's continue to enter the drawing point or data to the table/database, by referring to the heart picture. After we completed the data entry, click on the "Draw Me!" button to check on the change. If the heart is not properly drawn, most properly the drawing point is not entering correctly. Correct it and "Draw Me!" again.

Step 12: More?

  • Download the attachment for the complete code, as well as some drawing points/data for Heart, Mario, Ironman, Captain America, Pikachiu, Angry Bird, and Miku. By the way, review the code in VBA editor to notice how we changed the worksheet reference from "Coloring" to "Minecraft_CaptainAmerica", "Minecraft_IronMan", and so on.
  • I also added a rotation feature in "Minecraft" worksheet, where it will auto rotate the Minecraft drawings every few seconds. Review the code how I added it by added the library/dll:
    • Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long)
  • If you find this is interesting and you actually completed a cool pixel art drawing, hope you can share with us here.

Step 13: Happy Coding!