Talpia 1 - MarbleStack

Category: Tutorial

Prerequisite: Basic Python

Python was the first language I learned in school, and it's a shame that I haven't coded in Python since my very first CS class. Recently, I've gotten into ML, so I decided to pick up Python again. In my experience, doing projects is the fastest way to gain knowledge of a programming language. This time, I chose to replicate the dotpict! pixel art editor.

Credit: Google Play

It’s an app that allows users to draw pixel art (of course). It used to be my favorite pixel art editor until I purchased Aseprite, but dotpict! still has its advantages over Aseprite, such as being free, showcasing user artwork, and working on phones. I can say that dotpict! is a great starting point for pixel art.

So, what do I need to make this editor? The first thing that comes to mind is choosing a good Python GUI framework. After a quick Google search, I found the following

Credit: Stack Overflow

After playing with the framework and python, I was able to create a window and put a canvas inside it.

1
import tkinter as tk
2

3
window = tk.Tk()
4
window.title('talpia by Kolyn Lin')
5
window.geometry(f"{600}x{800}")
6

7
base = tk.Canvas(window, bg='#FFFFFF')
8
base.config(width=600, height=800)
9
base.pack()
10

11
window.mainloop()

I think this is quite similar to Java’s swing framework, which I have more experience with.

1
// Java (Don't copy)
2
JFrame window = new JFrame();
3
window.setOpacity(1f);
4
window.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
5
window.setTitle("talpia by Kolyn Lin");
6
window.setSize(600, 800);
7

8
Container container = window.getContentPane();
9
container.setBackground((new Color(255, 255, 255)));
10
container.setPreferredSize(new Dimension(600, 800));
11

12
window.setVisible(true);

blank-app-java — The same thing in Java Swing.

As a good programming practice, I avoid using magic numbers, so I decided to replace the integers with variables. Additionally, I made the theme color a variable as well.

1
import tkinter as tk
2

3
base_height = 800
4
base_width = 600
5
theme_color = '#FFFFFF'
6

7
window = tk.Tk()
8
window.resizable(False, False)
9
window.title('talpia by Kolyn Lin')
10
window.geometry(f"{base_width}x{base_height}")
11

12
base = tk.Canvas(window, bg=theme_color)
13
base.config(width=base_width, height=base_height)
14
base.pack()

One thing I’m still not getting used to is that there is literally nothing next to python variables besides the assignment—no type, no var. Come to think of it, I found it strange that UMass Boston was teaching their first year CS majors python and there is no type indications in python. Types are fundamental in programming!

OK, back to the editor. Now I realize that I need a canvas. I know that a pixel art canvas can be created using squares, so naturally, I should start by learning how to draw a square.

1
# Example (Don't copy)
2
rect = base.create_rectangle((100, 100, 200, 200), fill='blue')

Result

blue-square

I found this to be interesting. Rather than defining width and height for a rectangle, tkinter uses two points to represent it.

two-points

In tkinter, it is actually

1
# Example (Don't copy)
2

3
                              x0   y0   x1   y1
4
rect = base.create_rectangle((100, 100, 200, 200), fill='blue')

Whereas in Java Swing, we explicitly specify the width and height. However, since this is a post about Python, I won’t be posting Java examples.

Having learned how to create a single square, the next logical step is to create a grid. A double for-loop is the best choice for this. However, before that, I need to define the area where the canvas will be placed.

1
import tkinter as tk
2

3
base_height = 800
4
base_width = 600
5
theme_color = '#383838'
6
canvas_len = 512
7

8
window = tk.Tk()
9
window.resizable(False, False)
10
window.title('talpia by Kolyn Lin')
11
window.geometry(f"{base_width}x{base_height}")
12

13
base = tk.Canvas(window, bg=theme_color)
14
base.config(width=base_width, height=base_height)
15
base.pack()
16

17
canvas = tk.Canvas(base, bg='white')
18
canvas = config(width=canvas_len, height=canvas_len)
19
canvas.place(x=(base_width-canvas_len)/2,
20
             y=(base_height-canvas_len)/8)
21

22
window.mainloop()

Here I’ve re-assigned the theme color to #383838 (Dark gray), created a Canvas called canvas and put it inside the base Canvas (canvas inside canvas). Now it looks like the following

interface1

Great! The next to do is to put squares inside it. I would like to use the square’s outline color to resemble a grid. Like this

blue-square2

But we want the inner color to be white and outline color to be light gray. After adjusting the outline width, we get

square

Now I will define a few more variables.

1
import tkinter as tk
2

3
base_height = 800
4
base_width = 600
5
theme_color = '#383838'
6
canvas_len = 512
7
outline_width = 2
8
grid_len = 4
9
sqsize = canvas_len / grid_len
10

11
window = tk.Tk()
12
window.resizable(False, False)
13
window.title('talpia by Kolyn Lin')
14
window.geometry(f"{base_width}x{base_height}")
15

16
base = tk.Canvas(window, bg=theme_color)
17
base.config(width=base_width, height=base_height)
18
base.pack()
19

20
canvas = tk.Canvas(base, bg='white')
21
canvas = config(width=canvas_len, height=canvas_len)
22
canvas.place(x=(base_width-canvas_len)/2,
23
             y=(base_height-canvas_len)/8)
24

25
window.mainloop()

To create a grid, I’ll use a double for-loop to create squares. Our code is getting long here so I’ve chosen to omit some contents.

1
for row in range(grid_len):
2
    for col in range(grid_len):
3
        x0 = row * sqsize
4
        y0 = col * sqsize
5
        x1 = (row+1) * sqsize
6
        y1 = (col+1) * sqsize
7
        rect = canvas.create_rectangle((x0, y0, x1, y1),
8
                                       fill='white',
9
                                       width=2,
10
                                       outline='gray')

Now we have the grid!

grid

The grid is a little off the margin. After a bit trial-and-errors, I found out that moving every square to (3, 3) solves the problem.

1
for row in range(grid_len):
2
    for col in range(grid_len):
3
        x0 = row * sqsize + 3
4
        y0 = col * sqsize + 3
5
        x1 = (row+1) * sqsize+3
6
        y1 = (col+1) * sqsize+3
7
        rect = canvas.create_rectangle((x0, y0, x1, y1),
8
                                       fill='white',
9
                                       width=2,
10
                                       outline='gray')

grid-2

This method works when the outline width equals to 2. After trying, I found it hard to tell when the grid is going to perfectly fit into the canvas. In this case, it is. If I modify the grid to 32 x 32

1
base_height = 800
2
base_width = 600
3
theme_color = '#383838'
4
canvas_len = 512
5
outline_width = 2
6
grid_len = 32
7
sqsize = canvas_len / grid_len

grid-3

It still fits perfectly. Anyway, my purpose is not to determine the ultimate solution to fit the grid into the canvas so I will continue making the editor.

The next thing I want to do is to actually color a square by clicking on it. It can be done using tag_bind().

1
# Example (Don't copy)
2
canvas.tag_bind(rect, "<ButtonPress-1>", clicked)

I grabbed this from here.

Now I define a set_color() function to replace the clicked() function,

1
# Example (Don't copy)
2
def set_color(*args):
3
    canvas.itemconfig(args[0], fill='black')

By the way, itemconfig is from here

Then I pass this function into tag_bind().

1
# Example (Don't copy)
2
canvas.tag_bind(rect, "<ButtonPress-1>", set_color)

After I run it, I found that it doesn’t work and everything stays the same after I click on a square.

Maybe I forgot the parameters?

1
# Example (Don't copy)
2
canvas.tag_bind(rect, "<ButtonPress-1>", set_color(rect))

I was greeted with this.

grid-4

After more online surfing, I found this, then I made some modifications to the class OneSquare which was suggested in the answer.

1
class OnePixel:
2
    def __init__(self, m_canvas, pixel_row, pixel_col,
3
                 start_x, start_y, size, outline, width):
4
        self.canvas = m_canvas
5
        self.id = self.canvas.create_rectangle((start_x,
6
                                                start_y,
7
                                                start_x + size,
8
                                                start_y + size),
9
                                               fill="white",
10
                                               outline=outline,
11
                                               width=width)
12
        self.canvas.tag_bind(self.id, "<ButtonPress-1>", self.set_color)
13
        self.row = pixel_row
14
        self.col = pixel_col
15

16
    def set_color(self, event=None):
17
        self.canvas.itemconfig(self.id, fill='black')

Great! Now instead of creating a rectangle, I can create a square.

1
for row in range(grid_len):
2
    for col in range(grid_len):
3
        x0 = row * sqsize + 3
4
        y0 = col * sqsize + 3
5
        rect = OnePixel(canvas, row, col,
6
                        x0, y0, sqsize, 'gray', outline_width)

Moreover, now I can paint black color.

Thank you for reading. Stay tunned for update!

bthe-hand — Reference image credit: Wikipedia

PS: This article was originally named "Returning to python-1".

I decided to give this project a name to make myself (a little) more motivated. You can find the code on my GitHub page, under the part_1 directory.

💗 If you liked this blog, consider following me on GitHub.

🍯 Happy Coding 🍯