The Insane Squiggle Machine Revisited

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, 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:


Painterly Experiments

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 /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.

Here’s the sketch for 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.

Cubes and Headaches

This was done by iterating over a grid and change the distance between the back and front of the cubes. At first the top and right were solid colors but I thought they looked better with a little texture. Thousands of points.

My son Miles looked at this and said it was giving him a headache. That or it’s the air quality right now here in Northern Minnesota.

After this first sketch, I took it and broke it. These experiments took forever to render. I’ll bet there’s a better way.


Back to the Insane Quiggle Machine

A couple of years ago I created a tool called “The Insane Quiggle Machine“, which was an effort to create generative art from doodles using CSS / HTML / JS. I ended up producing a coloring book with the images that this system generated. Looking back now if I’d known about Processing I would have probably used that instead of trying to reinvent the wheel. Regardless it was a thing that I made and that was that.

Now enter p5.js and I see the potential of creating generative art from small doodles again to create something random out of those elements.

Right now I have 49 small elements that are rendered onto the canvas in a random order, layering up and up. I’m thinking of coming up with different sets of images and subject matter.

Here’s the code I used to generate these with p5.js.

const wW = 10000;
const wH = 10000;
let saveCount = 0;
let images = [];
const maxIterations = 500;

function preload() {
  for (let i = 1; i <= 48; i++) {
    images.push({ id: i, img: loadImage(`images/squiggle-${i}.png`) });

function setup() {
  createCanvas(wW, wH);
  colorMode(HSB, 359, 100, 100, 100);

function saveFileName()
  let fileName = `screenshot_i_${maxIterations}_${saveCount}.png`;
  return fileName;

function squiggle()
  const thisCurrentImg = random(images);

  translate(random(wW / 4.25, wW / 1.25), random(wH / 4.75, wH / 1.25));
  scale(random(0.125, .9));
  rotate(random(45, 180));
  if (thisCurrentImg) {
    image(thisCurrentImg.img, 0, 0);


function draw() {
  background(0, 0, 100, 100);
  for (var i = 1; i <= maxIterations; i++) {

  console.log(maxIterations + ' iteration reached!');

function keyPressed() {
  if (key === 'Enter') {

  if (key === 's') {

I finally found Repper again!

There’s this app I bought years ago called Repper. It’s an app where you can take an image and create seamless patterns from sections of it. I used it a few years ago for creating a series of seamless backgrounds based on a scan of a 1924 Sears and Roebuck catalog.

I really liked this app and I thought it was lost to the pages of history. You can no longer download the version I had (despite paying for the pro version) and I’ve had no luck finding it elsewhere. I booted up a hard drive today to just see if I had it on that drive from my early 2010’s gaming pc. Sure enough, doing a drive wide search for “repper” and bam there it was! I even had my serial # in an email from when I purchased it.

I through one of the images from last night into it and got some interesting results.

Repper has now gone to a pay-per-month model which is no bueno. I don’t use it enough to justify paying monthly (or annually) for it but in a pinch, I’m glad to have my purchase found.

The moral of the story is to get yourself an external drive reader (something like this) and don’t throw out old hard drives unless they are unrecoverable. In that case, use fire.