Editable Canvas in 25 Lines (Python)

The following instructable will teach you how to make a canvas that you can click on to paint! The code is simple, and will include step-by-step explanations, and hopefully, by the end, you will learn a new skill!

A Python IDE

Lines 1-5 provide the building blocks for our code. It includes the library and lists we will use. Line 1 imports the 'pygame' library, a tool which will allow us to add a display/ Line 2 just initializes our library. Line 3 defines the size of the screen we will draw, (200x200). Line 4 is a list that will contain all our clickable blocks and their color, so we can keep track of them. Line 5 is the list of colors the pixels will cycle through. You can add whatever colors you want, as long as they are RGB format, and the final color is (255,255,255), which is white. If you want to get more colors, and type 'rgb color picker' into your Google. There is a built-in color picker. Just find the color you want, and add the numbers under 'RGB' to the list!

Line 7 and 8 create a 40x40 grid of pixels. On the first iteration, i and v or both 0. This draws a rectangle at 0,0. Next, i is still 0 but v has increased to 1 so a box is drawn at 0,1. This will continue until v hits 10, which will then cause it to end and restart with i at 1 and v at 0, making the next box (1,0), starting the next column. This will repeart 10 times for 10 total columns of 10 pixels. Line 9 adds to the pixels list a box with the correct coordinates and a color of white, so every box starts off white. It also adds -1, which will serve as the index for the color. When it is clicked, the index will be changed to 0, thus making it the first color of the list. Finally, line 10 updates the screen so our pixels show up.

Line 12 is pretty self explanatory. It loops infinitely, so the program is always checking for a mouse press. Line 13 gets every event, like a click or a mouse press. If the thing that was pressed was your mouse, which is checked in line 14, all of the indented code will run. Since line 14 only checks if your mouse was pressed, on not what pixel you pressed, line 15 and 16 find out. Line 15 checks if every pixel to which line 16 inspects to see if its coordinates line up with the mouse coordinates. Lines 17 or 18 make sure the current color index doesn't exceed the length of list. This means if you are on the final color on the list, clicking again will cause the color to go to the first color. Line 19 looks complex, and it isn't. All it does is draw a brand new pixel of the next color directly on top of the clicked pixel. Line 20 removes the clicked on pixel, so it isn't tracked in the future and the program doesn't accidentally draw more rectangles. Finally, line 21 updates the screen so the new pixel shows up.