I have really enjoyed this task a lot.
At the very end of week 1, we started talking about networking in class. It was all new stuff to me, so I found it extremely interesting. I have been interested in getting started with this stuff for a little. I did dip my toes into it back in Make-a-Thing last year, but I had some help from Pat.
The task we were given was to create a drawing application that would connect to a server (provided) and would allow multiple people to all draw together. We are able to send circles, squares, lines and single pixels to the server. I mainly focused on pixels as I wanted players to have that freehand drawing functionality.
I grabbed SFML 2.3 and linked it with a new project (I’m getting pretty good at this…) and got started. Then I got started. One of my goals for this project was to try and keep my project tidy and code in relevant files. I feel like I have achieved that well as all my networking code has gone into it own file, UI stuff into another etc. You can view the files on github.
My original idea for sending packets would be I have two arrays the size of SCREENSIZE * SCREENSIZE. Each one would represent a single pixel. Then, every interval, I would check the difference between them and send the pixel packets. I thought that would work well and I implemented it…overlooking a crucial thing. You can never draw over pixels. So…that was a problem. Also, it was difficult to send multiple pixels at once without being in-efficient.
After learning that it was possible to send multiple pixels in a single packet (and advised due to the overhead of each packet being so large for such a small amount of data), I changed the system. Instead, I created an array that would hold all the pixels to send each interval and when it was time to send the pixel packets, I would send the array instead, making that I would need to send way less packets, and also i’m not sending tiny amounts each time. This was much more efficient and I found on average I was sending 10x less packets.
I also worked on a few UI elements. So I created Buttons, Text Input Fields and Sliders. I thought that it would be worth investing time into these as I can use them in the future. The one I had most difficulty with was the text input field. The reason being was I didn’t understand how strings worked well enough. There was also an issue here with unicodes. Eventually, I realised strings are just an array of characters, and I worked through with the unicode characters. After much tinkering, I finally got a field where when you click on it, you can change the text, add more text and if you click out or press enter, it no longer has focus. I ended up using that so the user can type the IP and Port then having a connect button. The sliders were used for RBG.
The final task was to make a heatmap. I decided to map the user’s mouse position rather than when they click. To do this, I had a heatmap class that had an array to keep track of previous mouse positions. Similarly to the sending of packets, ever x interval, I would loop through the array and modify the image. I ran into a silly problem with this. It wasn’t drawing the pixels correctly and it was creating lots of images really fast. What was happening was the image was being saved and opened too fast, causing issues. This happened because I forgot to reset the interval. It was a really silly mistake and I laughed when I found it.
In the end, I was really happy with my draw client. I am really looking forward to doing so much more with it. There is a part two to this task that got completed over the next week. My understanding of networking is a lot stronger, and I believe this is an area in programming that I would like to focus on, alongside tools.
Link to github: https://github.com/Silcoish/studio3drawclient