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

Code

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`;
  saveCount++;
  return fileName;
}

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

  push();
  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);
  }

  pop();
}

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

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

function keyPressed() {
  if (key === 'Enter') {
    redraw();
  }

  if (key === 's') {
    save(saveFileName());
  }
}