This week I went back to my set of Squiggle drawings and brought them into p5.js. Every time I work with this library I figure out a little more. This one is made with tints given to images from pallets collected from Coolers.co, various transformations (I didn’t know there was an imageMode(CENTER) command for centering an image at an X and Y coordinate, that saved me some time), and the use of beginShape() and beginContour() to create a compound shape.
This is a sample of what I start with. I pages and pages of these types of things in various sketchbooks.
What this is what I get p5.js to generate from these:
Yesterday I was working on some experiments with using hand-drawn lines and using them in place of the line function in p5.js, scaling them like I would with a stroke width. Adding rotation, tint, and translation I was able to get some interesting results. Some of the images were made using the mouse x and y to control the translation.
I’ve been playing with a way to generate a painterly look in p5.js. To start I created several meandering paths, each of which would get a color to paint with.
From here it was a matter of applying stroke weights, opacity, and a little rotation to turn them into something that resembles paintings.
I feel like these would then make good backgrounds for other generative works. Things I going forward would add would be a brushstroke texture to these and maybe some sort of drips/splatter to make them appear even more organic.
Here’s the code for these if you want to take a peek at how these were made.
I was experimenting with filling ellipses and other rounded containers with textures. By scanning across a square container around the shape I could find where the two of the shapes overlap with the help of bmoren/p5.collide2D
After I have that set of points I found that it was then pretty easy to pack the shape with other shapes. The easiest was triangles, taking a random 3 of the points to create various sizes. The hardest part was making sure that none of the triangles overlapped, then for flavor, I figured out how to round the corners.
I’ve started down a rabbit hole. I have been drawing these little simple creatures for some time now and I wanted to see if I could generate a set of them with p5.js. This is the most complex one yet. Its got:
Random creature generation with randomized body, ear/hair, and eyes.
Rarity added to certain eye/hair and eye combinations.
Randomized sizing with pseudo box packing
Various color pallets and random tint adjustments are done to each run.
Texture background with rare circle packing background
Today I worked on another grid-based generative sketch, taking a set of patterns and assigning them to each cell on the grid. I also wanted to work with variations in the size of the cells. The patterns that get generated are all size-based so no matter how big or small they are the design will hold its proportions.
I used color pallets from Coolors and converted the hex colors from there to HSL colors with these.
I have been trying to figure out container packing in p5.js. After messing around for a while I ended up finding the package mapbox/potpack, which will take a list of containers and sort them so that they will fit into a more or less rectangular space.
I came up with these sketches that kinda looked like curtains to me.