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

Picture of Learn to Code: Minecraft Art Drawing With Microsoft Excel

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

Step 1: What Is Minecraft Art Drawing?

Picture of What Is Minecraft Art Drawing?

Microsoft Excel, a Microsoft Office application that, in general, having boxes on computer screen when we open it. Whereas, Minecraft 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 seem 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

Step 2: Let’s Get Started

Picture of 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!

Picture of 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

Picture of 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 are not look like square, try 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 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 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 become 5 (0+5). Variable become very useful when we involve with many calculation, 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 are different way to assign a number or string and an object. For number and string, it's easier - just assign the variable with 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 our code is become 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

Picture of 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 same actions repeatedly. We know most of the Minecraft drawing contains only 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 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 as 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, we can explaine it as, we have x number of tasks to carry out repeatedly, and inside this x number of tasks, we also want to repeat some number of other tasks.

Step 7: Data and Database

Picture of 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 not lost 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 shown no purpose other than "color". We can ignore it.

Step 8: Drawing in Action

Picture of Drawing in Action

Let's code and draw it. By the way, we need to download the pictures from attachment in this article, in order to complete the learning below:

  1. Insert a picture named “tutorial_heart.png” into Microsoft Excel that open previously.
  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 entering the data to 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 need a name, our database is called "Coloring".
  7. In Row number 2, enter the below. This is called column name, for database, this is 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 square box.

  8. Enter the data according to the table, starting from row number 3 onward. These are our drawing points. Please refer to second picture labeled 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....

Picture of Drawing in Action Continue....

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

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 building block.
  • On the left, we called it as "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 a red red square
    • Line 5, column 25 is a black square
    • These are the drawing pointing for our Minecraft drawing, but Microsoft Excel do 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.
  • On 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

Picture of 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 are represent the steps in the below bullet lists:

  1. Everything start from the click. When we click on the "Draw Me!" button. This action triggers the "HelloWorld_Click" event. When this happen, 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 row in total. In 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 string. The bracket "()" is referring to array in programming. Array is something like a multi-layer container. Unless integer where it is only a number, for array, especially after we declared it as 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 integer. These 2 variables will be used as "Counter", a counter that we used in "For... Next" loop. It is important to know the counter value, 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 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 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 going to understand what is "0, 0, 0", but instead each of the number, 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 inner loop and met with 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!

Picture of Complete the Heart!

But wait! Our Minecraft heart is half way completed? That's right! That's will be our job to complete it. Please 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 notice the change. If the heart is not properly draw, 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 Minecraft drawing, hope you can share with us here. As the code is ready, your drawing points sharing will make other happy to the kids, as well as their parent.
  • Lastly, I actually thinking to use this to display an event agenda displaying in Minecraft way, or an animation like an arrow, to help navigate in a Kiosk system. Or can we give it a 3D look?

Step 13: Happy Coding!

Comments

Swansong (author)2017-02-03

Thanks for sharing :)

About This Instructable

371views

5favorites

License:

Bio: A Maker that involved in Penang Mini Maker Faire, and School Maker Faire.
More by kcgoh:Zero Cost Watering SystemLearn to Code: Minecraft Art Drawing With Microsoft Excel
Add instructable to: