lambda logo

Hugo Daniel

Lagoa

Introducing Grid Generator Version 0

What features does it have? What to expect in the next versions?

The purpose of this post is to introduce my personal project: Grid Generator. This is the first post about it since it went online on the 1st of July 2018.

What problem does it solve?

I have always struggled with design tools. In particular those that came to see the light of the day during the 90's (Adobe I am looking at you).

These design tools are clearly targeted at "pros" and "specialists" (like most of the computer "stuff" from/during the 90's). You are not expected to be able to work with them if you are not a specialist or if you did not take at least a course on these tools.

Being trained in software development made me look at the works produced by designers with wonder and amazement. I want to be able to at least produce geometric clean shapes that fit well together.

Unfortunately making even simple shapes in the current design software offer is a daunting task for me.

That was my motivation behind Grid Generator: Create simple shapes, easily pick colors, and paint them in a grid, making patterns or more complex shapes.

I also wanted to bring time into play. Time is an important factor to consider and to work with in Grid Generator.

What to expect?

A square grid. In this version, and in the upcoming near versions, Grid Generator only supports a base square grid.

Think of it as pixel art with configurable pixels. Where your moves are being recorded.

Simple house with squares, triangles, and a rounded square

The same with the grid hidden

Shape editor

In a square grid the base shape is the square. If you click on the '+' button bellow left, it opens the "Shape Editor". Here you are presented with a grid made of lines and circles. This is where you customize your square. The intersections are automatically calculated to help you create your shapes. You as an artist/designer only need to connect the dots and build your shape.

Just connect the dots

You can pile many shapes on top of each other and change their colors.

Several sub-shapes on the same shape

Time is an important aspect, you can go back to any previous state of your shapes and re-edit them from there.

Several sub-shapes on the same shape

After your shape is created you can start painting with it.

Paint your new shape on the main grid

Or create other color variations of it on the '+' button to the right.

Create several color variations for your shape

Tile Patterns

I have asked in reddit about software to create tile patterns. A few answers came up but none quite filled my taste. I used this as a motivation to implement automatic tile patterns in Grid Generator.

In the menu just click on the "pattern" icon, and then on the "grid". A blue frame shows up where you can paint inside and everything gets repeated outside.

The pattern frame

You can drag the corners of the blue frame to adjust your pattern to your drawing and create different patterns with white spaces.

A triangular pattern

Replay your art

After having created something cool you can publish it to share with your friends. Publishing an artwork makes it publicly available in its own page.

In there you will see a big "play" button that will replay your creative process until the final state is reached.

Check it out.

Remix it

You can pick any state of the art being replayed and remix your own version from there on. You can easily create your variations by clicking on the remix button ("Change It" on the bottom).

Remix other works and create variations

Export

Exporting is currently the only paid feature of Grid Generator. My logic to make this a paid feature was that you can support the further development of this app if you are producing anything of value with it.

In the future I am planning to make this a free feature by adding other sources of revenue like instant product creations with your art (bags, t-shirts, etc...) and even selling packs of specially crafted grids.

After paying you can export your work as SVG. SVG is a vector format that is very prone to rounding errors and aliasing, so I also implemented exporting your works as high-res PNG's that solve these issues.

Another possibility you have is to export your creative process as GIF or MP4, saving you the hard work of screen recording and editing.

Upcoming features

The next version (v1) will mostly see UI/UX improvements (imo those are critically needed) and some small features with these, like:

After these I am planning some major stuff like:

Try it and if you feel inspired tell me which features you would like to see most.

https://gridgenerator.com

Conclusion

In its current state Grid Generator is very raw. I did a lot of compromises to get here but the idea is very close to its initial inception in my head from a couple of years ago. Along the way I had the help and feedback of amazing people. I have some upcoming posts planned on them. They helped a lot of this feel way less lonely and in some points I think they believed more in it than me :)

Alas everything is open source and I am going to start using GitHub bells and whistles in its further development.