Friday, July 29, 2016

In-depth look at Pattern Generator

 Hello again. To fulfill my last post's "promise", here I am with a blog post dedicated to my latest finished project: "Pattern Generator". You may be thinking "Hugo, how did you come up with the idea for PatGen? And why did you work so hard on it? What's the point?". To that, I reply "I dunno". Thanks for reading guys, have a good one!

 Okay, but seriously now: Pattern Generator was a project I came up with back in late November, 2015. Back then, I was crazy about mazes, thanks to a huge influence from Willware (check him out, he's got some amazing mazes). We made a few lot of custom mazes, and every time we wanted a new pattern we had to make it by hand. So I tried solving that issue with a program that would render maze patterns based on your preferences. And thus, Pattern Generator was born!

 At first, it was going to be a pretty simple project, just to make maze-pattern-generating easier (mostly for myself). But then I thought "It could be used in many different cases, so why not make it decent, better suited and easier to use?". In that moment, I decided I'd make Pattern Generator a fully-fledged project, that I could put online for others to try without feeling ashamed that it's messy or slow.

 The first thing I worked on was the preview/pattern generation module. It was somewhat easy, since LÖVE provides us with a tool that is just right for that: Canvases. The downside of that is that some old-school computers don't support them, but this program doesn't work without it.

 After getting that done, I started working on the user interface. I got a small preview window, but I needed a selection menu for different patterns. I made such a selection menu before, but it was extremely hard and messy, so I coded it from scratch. It took me a good while, but after I got that up and running, I turned it into a library so other users could use it: HBDselector.

 Then came what I consider the hardest part of my code: the color selector. Instead of a regular color selector, I tried a different, original approach, by having the hue, saturation and brightness in a ring shape. This took me probably a little over a week, with the mouse selector and the rgb-hsb-hex input boxes. I do plan on releasing that as a standalone library as well, but that'll be in a further future.

 A couple weeks later, I got the basic user interface set up. It only had the basic settings programmed (and only the color selector actually interactive), but that was a huge leap from the mostly-code-based version I had. After that, I slowly added the other settings and buttons, to have the program at least user-interactive.

 Next up was adding custom, pattern-independent settings. It may sound easy, but instead of programming each interface, I had to write a huge algorithm to handle custom settings, because I always had user-coded patterns in mind, so I had to make them as easily programmable as possible, without requiring the user to write their own UI every time they wanted to let you turn a line on or off. Although code-wise it's a mess, it's pretty optimized and handles all sorts of options, such as booleans (on or off), numerical values, values from a list and smaller color pickers.

 At that point, Pattern Generator was officially finished. I had to fix a few bugs and get it running properly before releasing, but the overall project was done. So that's it, right? The end of it. Well, not quite yet.

 Months after the initial release, after working some more on my Minigame Simulator, I decided I should put a portfolio together (which is now up and running in my Portfolio page), and while looking through some old projects to update and "pretty up", I realized that PatGen could use some updates. Thus my work on it resumed.

 The first thing I did was updating it to the latest version of LÖVE, so that users could look into the source code and play around with it if they wanted to. Then the first "official" update begun. In it, I made a lot of optimization, UI improvements and bugfixes. For example, a easy to understand error screen, the ability to type in numerical values, settings randomization, canvas templates and a new "Image Repeater" pattern, along a new pattern setting for loading images. I also added a "secret" log saver, which is just to help me in case a user has some problem they can't properly describe.

 Then immediately after, I made my second update to it, which was mostly a "cleaning up" of the first update, to make the program as optimal and easy to manage as possible, before having it ready for my portfolio. And with that, my work on Pattern Generator was done. I may or may not update it some day, but I finally got it to a state I'm completely satisfied with. You can play around with the executable version and the source version as much as you want to, and if you want to use it to help with a project (either by generating patterns through it or by messing around with the code), feel free to!

 That's pretty much what I have for the "history" of Pattern Generator. Now we'll see how to actually use it, and what you can do with it...

Main user interface:

 This is the main area from the program. In it, you get the name of the currently-selected pattern, the pattern preview, the pattern selector and the program refresh button. The pattern name varies for each pattern, and that can be customized in user-made patterns. The preview is a small 384 x 256 pixels, just to get a good idea of the pattern itself. For a more appropriate look at the final result, you'll want to use the "Preview/Generate Image" button, which will be discussed later. On the far right is the pattern selector. In it, you can choose between built-in patterns and user-made patterns (if any).

Main actions interface:

 This is the area you interact with after getting your pattern right. In this area we have four buttons: "Preview/Generate Image", which is where you can see how your pattern will look once you export it, as well as having the option of exporting the pattern with the preview's settings. The "Open images folder" button opens up the folder where all exported patterns go to, so you can save it elsewhere or do whatever you want with it. "Open patterns folder" opens up the folder where you can put user-made patterns if you have one. Lastly, "Reset all settings" removes all user settings from the program, that being pattern settings, canvas settings, etc. It doesn't, however, delete your custom patterns and exported images, so you don't have to worry about that.

Main pattern settings:

 This is the part where you configure your preferences for any and all patterns, regardless of custom settings (which will be discussed later). In it, we have the following options: "Size", which defines the 'scale' of the pattern, "Color", which is the main color of your pattern, "Background", which is the color of the background of your pattern, and "Pattern's width" and "Pattern's height", which define the size (in pixels) of the final rendered image. Additionally, you can choose one of the pre-programmed canvas sizes, which can also be set manually if desired.

Custom pattern settings:

 In this region, you can configure your preferences for each individual pattern, whenever available. These settings come in the pre-existing patterns, but are also available for user-made patterns, if implemented. These can vary in any level, with all sorts of possible settings, such as numerical values, lists, booleans (on or off), colors and images. These settings act independently of the main settings, and only apply to the selected pattern, as they were made exclusively for them.

Randomization options:

 In this area, you can play around with the generator and let it "do your job for you". In a nutshell, it selects random patterns and settings for you to experiment, so you can see what the program does. Additionally, you can check or uncheck specific randomization settings: random patterns, random size, random colors, random canvas and random pattern settings. So, for example, if you want to change a specific pattern's look, but still export it in the same output size, uncheck "Randomize patterns" and "canvas size", but check "Randomize size", "colors" and "custom settings".

 So this about concludes our "tour" through PatGen. Lenghty, I know, but hopefully it's thorough. If you're interested in making your own patterns and have at least a basic understanding of Lua and the LÖVE Framework, feel free to check the program's Love2D Thread to have access to an example/tutorial file, or download the source version and dissect my confusing code. Other than that, thank you for reading, see you in the next one!

No comments:

Post a Comment