Generating pixels with code
We've been hard at work on other lab projects so we decided to create a grid generator to automate the process of creating thumbnails for our blog posts.
Below we discuss how we’ve used Canvas-sketch by Matt DesLauriers to cut design time and quickly generate images for our blog.
Creating consistent spacing with a grid
Our designers use a grid system to create shape layouts for Springload that are different, but consistent in spacing and style. We replicated this style for Springlabs in canvas-sketch using columns and rows with cells that randomly merge.
Using aspect ratio to determine shapes
With a grid layout and cells merged, our next step was drawing shapes. We used the aspect ratio of the merged cells to determine the type of shape that could be drawn. For example, a circle can only be drawn in a cell with a 1:1 aspect ratio, whilst other shapes can fit in multiple different ratios. Adding the aspect ratio to our debug view gave us a little insight into how the ratios changed when the amount of rows or columns changed.
Experimenting with canvas-sketch
These are some examples we produced with random settings (and random degrees of success). Getting a higher success rate, would require more defined rules. But with a smaller ruleset and human curation we encountered some surprising layouts.
Our learnings from creating images with code
Creating images with code was a nice distraction from what we normally do, and something we’re hoping to continue to do more off. Getting a desired visual does require a few iterations, but it’s a fun activity and it helped us to speed up the process of posting new blog posts. We’ve ended up with a few settings we really enjoyed. Have a play with the generator here.
