Thursday 20 July 2017

Drawing Adinkra Symbols using Python - Akoma Ntoaso


Akoma Ntoaso is the symbol for understanding and agreement. In Ghana, this is the logo of the Ghana Stock Exchange and you can see it below:


For this shape, I will use a grid of 5 pixels to trace out the image. The image of this is shown below:


The plan to draw this shap using PythonTurtle will be as follows:

  1. Draw the centre circle
  2. Draw a semi-circle in the upper left quadrant at an angle of 45 degrees to the centre circle
  3. Draw a line from the circle to the semi-circle you drew in 2 above
  4. Repeat for the remaining quadrants
  5. Stop

The above steps make up an algorithm. An algorithm is a sequence of precise instructions that solves a problem or performs a computation.

The centre circle has a radius of 7 squares. Since each square is 5 pixels, this is 35 pixels.

For the semi-circle in the upper left hand corner, when you move clockwise, its coordinates start from (-16.5, 3) to (-3, -16.5). This values are relative to the size of the pixels used for drawing your grid. In my case, I simply counted the number of lines in the grid.

Moving from the upper left hand corner to the upper right hand corner, the coordinates of semi-circle start from (3, 16.5) to (16.5, 3). We take the coordinates in a clockwise direction. If you doubt the results I have, take the image and do it yourself.

Moving on to the bottom right corner, the coordinates of the semi-circle start from (16.5, -3) to (3, -16.5).
The bottom left has the coordinates of its semi-circle start from (-3, 16.5) and go to (-16.5, 3).

From this point on, all we have to do is to multiply the value of the coordinates with the size of our grid in order to replicate this symbol.

Using Turtle Graphics


In the last section where we drew the Adinkrahene, we used a grid of 500 X 500 pixels. In this section, we shall use a grid of 400 X 400 pixels. The reason for this is to make drawing the shape easier as we have decimal values as part of our coordinates.


The steps to drawing a grid are:
  1. Draw a square of the required length
  2. Divide the square horizontally by the specified number of squares
  3. Divide the square vertically by the specified number of squares
Drawing a Square

In the Introduction of this series I drew a grid using some repetitive code. Today, that is not the case as I have refactored the code for this using a function.

The code for this are shown below:

def drawSquare(length):
turtle.reset()
turtle.penup()
turtle.setposition(-length/2.0, length/2.0)
turtle.pendown()
for i in range(0, 4):
   turtle.forward(length)
   turtle.right(90)
turtle.penup()
turtle.home()

Most of this code is easy enough to understand. All you need to do is to check out the Turtle graphics documentation. There are enough examples online on how to create a function in Python.

I will only mention the turtle.home() command which returns the turtle to the center of the screen.

Dividing the Square Horizontally

The code to do this is placed in a function. The code is shown below:

def drawHorizontalLine(length, division):
pixelSpace = length / division
half = length / 2
for j in range((-half + pixelSpace), half, pixelSpace):
   turtle.penup()
   turtle.setposition(-half, j)
   turtle.pendown()
   turtle.forward(length)
turtle.penup()
turtle.home()

The function drawHorizontalLine has two parameters: length and division. The length is the length of the side of the grid while the division is how many squares you want the grid to be divided into.

Dividing the Square Vertically

The code to do this is placed in a function. The code is shown below:

def drawVerticalLine(length, division):
pixelSpace = length / division
half = length / 2
turtle.right(90)
for k in range((-half + pixelSpace), half, pixelSpace):
   turtle.penup()
   turtle.setposition(k, half)
   turtle.pendown()
    turtle.forward(length)
turtle.penup()
turtle.home()

Be careful with the indentation of your code.

Running Your Code

Now that we are done with the functions for our grid, we only need to call the functions in our code.

The code to do this is:

drawSquare(400)
drawHorizontalLine(400, 40)
drawVerticalLine(400, 40)

Our grid is now drawn across the screen as shown below:




Now we have a grid of 400 X 400 pixels divided into 40 sections. This means that the size of each pixel is 10 pixel. We will use this value to multiply all the values we got from out image.

Laying The Framework

Before we can start drawing, we need to draw diagonal lines from one end of the grid to another.

Before we can do this, we need to look at the documentation for Turtle graphics on how we can change the pencolor of the turtle.

The function to test for this is the colormode. Run this code in your Python shell:

turtle.colormode()

If it returns the value of 1.0, run this code to change it:

turtle.colormode(255)

Now change the colour by using RGB values. For the pencolor, I want it to be red the value of red is (255, 0, 0). So run this code:

turtle.pencolor(255, 0, 0)

The next thing we need to do is to draw a line between the two points. This image from Math Open Reference explains it all.


To find the length between the two points, we will use the above formula. For the sake of simplicity, I will not create a Point class although I will state it here that the Java programming language comes with one in-built.

Before we can create a new function, some housekeeping is in order. The first thing we need to do is to get the Maths module into our script.

To do this, go to the top of the script and type:
import math

Next create the code for your function. The code is shown below:

Now move your arrow to the upper left hand corner of the grid. Since we know its dimensions, the code to do this is:
turtle.penup()
turtle.setposition(-200, 200)
Set the angle of the turtle to be 135 degrees. Next, draw a line from the upper left hand side to the bottom right hand side.

The code to do this is shown below:

turtle.setheading(315)
diagonalLength = coordinateDistance(-200, 200, 200, -200)
turtle.pendown()
turtle.forward(diagonalLength)

This code will give us the horizontal line from the upper left hand corner to the lower right hand corner as shown below:


Next we will need to move our turtle from this position to any of the other edges. Due to my preference, I will choose the lower left hand corner and draw a line from the lower left hand corner to the upper right hand corner. The code to do this is given below:

turtle.setheading(45)
diagonalLength = coordinateDistance(-200, -200, 200, 200)
turtle.pendown()
turtle.forward(diagonalLength)

This will now create the image shown below:


Next we bring the turtle back to the center of the screen using the turtle.home() command.

Change the pencolor of the turtle using this command:

turtle.pencolor(0, 0, 0)

Draw The Centre Circle

To draw the centre circle, you have to remember that the number of squares covered by the radius of the circle is 7.

With this in mind, you have to multiply this by 10 so the size of the circle that you are trying to draw is 70 pixels.

To draw a circle of this radius, you move the turtle to the point on the grid where the value of x is 0 and that of y is -70. The code for this is:

turtle.penup()
turtle.setposition(0, -70)

Unlike the circle we drew when we were drawing the Adinkrahene symbol, this symbol will need to be filled in its centre.

To do this, when need to use the fill property of Turtle graphics. This will allow us to draw a shape that will be filled.

To draw a filled circle, we need to begin the fill, draw the circle and then end the fill. The code to do this is shown below:

turtle.pendown()
turtle.begin_fill()
turtle.circle(70)
turtle.end_fill()

Our drawing now becomes:


Draw The Quadrant Semi-Circles

Next we go to the upper left quadrant. The first thing we need to do is to draw a line from where the semi-circle should start from to where it will end.

To do this, we move our mouse to the lower position. The coordinates of this position are at (-16.5, 3) since our grids are 10 pixels each, we multiply by 10.

So we have to move our mouse to the position where (-165, 30) and draw a line to (-30. -165). The code to do this is shown below:

turtle.penup()
turtle.setposition(-165, 30)
turtle.setheading(45)
diagonalLength = coordinateDistance(-165, 30, -30, 165)
turtle.pendown()
turtle.forward(diagonalLength)

Our drawing now becomes:


Next we go to the location where the turtle stops and we change the heading of the turtle. The heading determines the direction in which your turtle will head.

When our code draws the line, we what it to also draw a semi circle from that point back to the starting point. The code to do this is shown below:

turtle.penup()
turtle.setposition(-30, 165)
turtle.pendown()
turtle.setheading(135)
turtle.begin_fill()
turtle.circle(diagonalLength/2, 180)
turtle.end_fill()

Note the heading of 135. This is because the default position of the turtle is taken at 0 degrees. This code will create the image shown below:


Now that we have gotten this far. All that is left is to draw the line from the centre of the circle to somewhere within the semi-circle. We don’t have to be exact as the default colour is black.

However, we have to make the turtle go to the centre of the screen, increase our pensize to 30, set the heading to 135 degrees and draw a line from the centre of the screen to a distance of 0.75 times the diagonalLength variable.

The code that does this is shown below:

turtle.penup()
turtle.home()
turtle.setheading(135)
turtle.pendown()
turtle.pensize(30)
turtle.forward(diagonalLength * 0.75)

The drawing now becomes:


Now we go to step 4 of the algorithm which is to repeat this for the remaining quadrants. Now that we are done with the upper left hand corner, this is easy.

We will move from the upper left quadrant to the upper right quadrant. We shall complete the symbol by drawing it in a clockwise manner.

The sequence to draw the remaining 3 attachments to the symbol is given below:
  1. Draw a line from the most clockwise point to the next point
  2. Move the position of the turtle back to the next point
  3. Set the heading of your turtle to the angle of the line crossing through your quadrant
  4. Draw the filled semi-circle
  5. Move back to the centre of the circle
  6. Increase the pensize to 30
  7. Draw a line to the semi-circle

If we follow the above steps the requisite number of times, we would have successfully drawn our shape.

The coordinates for the points the upper right semi-circle should pass through are (3, 16.5) to (16.5, 3). The size of a square on our grid is 10 pixels so we just have to multiply by 10.

The code for this is shown below:

turtle.penup()
turtle.home()
turtle.pensize(1)
turtle.setposition(30, 165)
turtle.setheading(-45)
diagonalLength = coordinateDistance(30, 165, 165, 30)
turtle.pendown()
turtle.forward(diagonalLength)

It produces the image shown below:


The code to draw the filled semi-circle is shown below:

turtle.penup()
turtle.setposition(165, 30)
turtle.pendown()
turtle.setheading(45)
turtle.begin_fill()
turtle.circle(diagonalLength/2, 180)
turtle.end_fill()

It produces the image shown below:


The final steps are easy enough. We move the turtle back to the centre of the circle, increase the pensize and draw a line to the centre of the circle.

The code to do this is shown below:

turtle.penup()
turtle.home()
turtle.setheading(45)
turtle.pendown()
turtle.pensize(30)
turtle.forward(diagonalLength * 0.75)

Our image now becomes:


To repeat the drawing in the lower right quadrant, we need to repeat the 3 steps. The coordinates for the point are from (16.5, -3) to (3, -16.5). We just need to multiply by 10 because the size of each square is 10 pixels.

The code to draw the line is shown below:

turtle.penup()
turtle.home()
turtle.pensize(1)
turtle.setposition(165, -30)
turtle.setheading(-135)
turtle.pendown()
turtle.forward(diagonalLength)

We no longer need to calculate the diagonalLength value as the shape is symmetrical.

The image we generate is shown below:


Next we draw the semi-circle. The code to do this is shown below:

turtle.penup()
turtle.setposition(30, -165)
turtle.pendown()
turtle.setheading(-45)
turtle.begin_fill()
turtle.circle(diagonalLength/2, 180)
turtle.end_fill()

The image generated is shown below:


Now we need to draw the line from the centre to the semi-circle. The code to do this is shown below:

turtle.penup()
turtle.home()
turtle.setheading(-45)
turtle.pendown()
turtle.pensize(30)
turtle.forward(diagonalLength * 0.75)

Our image now becomes:


To complete our drawing, we need to draw the last part of the symbol. This is in the lower left corner.

The first step is to draw the from (-30, 165) to (-165, -30). The code to do this is shown below:

turtle.penup()
turtle.home()
turtle.pensize(1)
turtle.setposition(-30, -165)
turtle.setheading(135)
turtle.pendown()
turtle.forward(diagonalLength)

This will give us the image shown below:


Next we draw the semi-circle. The code to do this is shown below:

turtle.penup()
turtle.setposition(-165, -30)
turtle.pendown()
turtle.setheading(225)
turtle.begin_fill()
turtle.circle(diagonalLength/2, 180)
turtle.end_fill()

Our image now becomes:


Now we draw the line from the centre of the circle to the semi-circle. The code to do this is shown below:

turtle.penup()
turtle.home()
turtle.setheading(225)
turtle.pendown()
turtle.pensize(30)
turtle.forward(diagonalLength * 0.75)

Our image now becomes:


Conclusion

At the end of this post, we have successfully use the Python turtle environment to draw the Akoma Ntoaso symbol.

I will admit that this was a long post. However, if you have followed this post to the end, you will see how beautiful it was to create this symbol using code.

I plan to draw 25 Adinkra shapes in this series. So I have 23 more to go. See you next week.

Thursday 13 July 2017

Learn Japanese with Games


As someone with a passion for his culture. You are always on the look out for models to use for what you are trying to do.

In the process of searching, I found this app. It allows you to learn Japanese by playing a game.

Check it out.

Wednesday 12 July 2017

Join Zenva’s #GameDev Compo


Make a Game and Win Prizes in the first ever Phaser Hackathon by Zenva.

The Zenva Phaser Hackathon will run from July 6th through to July 30th and is an online competition.

For this hackathon, you will choose a topic of your choice. All games must be developed using the Phaser game framework ALONE.

To find out more about the hackathon check out the Zenva Page.

Tuesday 11 July 2017

Film Animation Workshop


This year 2017, as part of the Franco-German Cultural Fund, the diplomatic and cultural missions of France and Germany in Nigeria will be organizing two parallel workshops on film animation in Lagos and Abuja.

During the ten-day workshops, a German film professional in Abuja, and a French professional in Lagos will work with participants to improve their skills in film animation, storyboard writing and, notably, visual effects.

Preference will be given to groups of 3-4 persons that are already working on a film animation project.

Eligibility
  1. Have prior experience in film animation or the film industry in general.
  2. A good level of proficiency and working knowledge of popular animation software such as 3D Studio Max, Blender, Anime Studio/MOHO, Maya, Toon Boom Animate.
  3. Strong motivation to work in film animation.
  4. Be available from 24/09/2017 to 08/10/2017
Deadline for submission is on the 3rd of September 2017.

For further details, please check this link.



Monday 10 July 2017

AirConsole 25K Game Dev Contest


Welcome to a new week. We begin the week with a series of competitions. The first of which I will post here today.

AirConsole is a video game console that’s entirely web-based. It lets people play together on one big screen with everyone using their smartphones as controllers.

To encourage developer adoption, AirConsole is organizing a AirConsole 25K Game Dev Contest. The prizes for the competition are:

  • First Place will be awarded prize money of $25,000
  • Second Place will be awarded prize money of $5,000
  • Third Place will be awarded prize money of $2,500
To enter, you will need to know how to program in JavaScript, Construct 2 or use Unity.

Enter to compete. Deadline is October 31st.

Saturday 8 July 2017

Tools and Resources


If you are a reader of this blog, you will know that I have written and self-published 3 books. In this post, I will share with you links to some of the tools and resources that I use.

When I started on my journey, the first place I started from was with The Creative Penn. Make sure you sign up for here newsletter.

Also, take a look at this KDP Tools and Resources list. They cover the most general use cases. I use Sigil to create my ebooks in the ePub format and then use Kindle Previewer to know how it will look on a Kindle device as well as create a file that I can upload to the Amazon store.

Have a great weekend.

Friday 7 July 2017

Drawing Adinkra Symbols using Python - Adinkrahene


Adinkrahene is the symbol for leadership and charisma. This symbol is reportedly the inspiration for the design of the other symbols. Its simple yet abstract design, consisting of three concentric circles emphasizes the importance of ideas and abstract concepts.

In the last section, I mentioned using a grid. To draw this symbol, I have used a simple grid with spacing of 10 pixels each to overlay the Adinkrahene symbol. This image is shown below:


From the above image, we see that the innermost circle is at a radius of 2 squares from the centre of the image. The 2nd circle is 3.25 squares from the centre of the image while the outermost circle is at 4.5 squares from the centre of the image.

This are approximate values. The remaining portions are based off the thickness of the lines used to draw the circles.

Using Turtle Graphics

The first step in attempting to draw the Adinkrahene is to draw the innermost circle and work our way outwards.

Our first task will be to increase the pen size for our turtle. The command to do this is:

turtle.pensize(25)

Next we lift up the pen so that no drawing occurs using this command:

turtle.penup()

The origin of the turtle is at 0, 0. So we need to move its position down to where it is 2 squares away from the center on the y axis. Since our squares for our grid are 50 pixels width, the position will be 100 pixels. The code to do this is shown below:

turtle.setposition(0, -100)

At this point, we place our pendown and draw a circle of radius 100 pixels. This code is now:

turtle.pendown()
turtle.circle(100)

Our Python turtle window will now look like:


To draw the second circle, we have to lift up the pen and move it to the position on the y axis that is 3.25 squares away from the centre. Since the value of the squares are 50 pixels, this value is 162.5. Next we draw a circle of radius 162.5 pixels. The code to do this is shown below:

turtle.penup()
turtle.setposition(0, -162.5)
turtle.pendown()
turtle.circle(162.5)

Our second circle now appears as shown below:


To draw our 3rd circle, all we have to do is to lift the pen, position it on the y axis at 225 pixels, set it down, draw a circle of radius 225.

The code that does this is shown below:

turtle.penup()
turtle.setposition(0, -225)
turtle.pendown()
turtle.circle(225)

The image we are drawing now becomes:


Conclusion

At the end of this post, we have successfully used the Python turtle environment to draw the Adinkrahene symbol.

Next time, I will look at how to draw another Adinkra symbol. If you have any feedback feel free to reach out to me.

See you next week.

Wednesday 5 July 2017

GameTale: A Magical Gamebook for Little Children


Once upon a time, maybe five hours ago, or three minutes from now, there lived a man. He and his family dwelled in a small house in a very small village, in a very small country, but he had BIG ideas. And so one night he began to write a book for his very small son. The book was unlike any other. Yes, it was funny and full of kindness and adventure, but most important of all, the book was magical! It was so magical that even had twenty different endings!

But this man, he was really kind of strange, so he decided to give away his magic for free. Many people told him that he is crazy and that magic costs money. But he said 'magic is not mine to sell' and uploaded his work on the internet.

And the book became famous. Everybody felt the magic and wanted to read it: children, parents and teachers. Everybody wanted to give it a prize or award. And so the man was no longer just “a man”, but a “children's book author”. And like such an author he had to write a second book, which was BIGGER and BETTER and it even received the BIGGEST award in his small country. So the “children's book author” became a “famous children's book author”, which was now way too long to spell or pronounce.

And that's how those books grew up to be TOO BIG for the small country and decided to go on a BIG adventure! So how does the story end? Well, this is a magical story and the ending is up to you!

Now over to me

Every once in a while, you find a story that inspires you. I found this project on Kickstarter and just had to share it. Please support in anyway you can.

Nigerians aren't allowed to donate but you can visit the project site and download the books for free.

Spread the news about this project.

Tuesday 4 July 2017

Should We Build It?


As a teacher, you get to meet a student that reminds you of who you used to be. So eager to code that you missed the point.

Today, I am different, I don't want to code anything except there is a reason to gain from it. Years of failure have tempered enthusiasm with reality.

With the evolving landscape of APIs, this post looks at why programmers should ignore their instincts to ship their own product by coding everything themselves.

This advice is meant for enterprise work. For personal development, you should try to roll your own. However, when time is against you in the realm of business, you should consider this advice.


Monday 3 July 2017

5 Best Online Business Ideas


Welcome to the first Monday in the month of July.

This infographic by Distributel covers the 5 best online business ideas.

In my own words, they are:
  1. Sell Information Products
  2. Sell Your Crafts
  3. Sell DIY Patterns and Designs
  4. Dropshipping
  5. Affiliate Marketing
Get a more detailed breakdown from the infographic.

Sunday 2 July 2017

A Change of Pace


Since restarting this blog on the 25th of May this year, I have been blogging everyday. Today, I realize that I have published 39 entries which is more than I have done since I started the blog.

I don't doubt my flow of words any longer. However, I worry about the quality of the content I am delivering.

From today, I will go back to blogging 5 days a week from Monday to Friday.

Have a great second half of the year.

Saturday 1 July 2017

The History of Flash

Welcome to the second half of the year. 

Please enjoy the above comic.

Have a great month.