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

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.

Jumping into p5.js

After muddling my way through learning Processing River the past few weeks I have started working with p5.js. Most of the same concepts transfer over to p5.js and I feel a bit more comfortable writing Javascript than Java.

Here are a few things I messed around with last night. I started working out a vertical wave pattern on a grid and then messed with scale, rotation, and transitions to get some interesting results.

More messing around with gradients in Processing

I started playing around again with different ways to make a gradient in Processing other than a linear gradient. I started with this shape and by duplicating the shape. By adjusting the position with translate I can get gradients like below. These are pretty fun to run and see what slight tweaks in the number of duplicates and where the shape starts with on the canvas will give. The gradient itself comes from setting the alpha value in HSBA colors.

Playing with lines drawn on a grid

For the last day, I was trying to figure out a way to make a packing algorithm in Processing (seriously, if anyone has any ideas I’d like to hear them). As that was an abject failure at this point I worked on a sketch using a grid with lines that draw in random cardinal directions from the starting x and y. There starts to be some really interesting layering happening when I cranked the iteration up, varied the stroke weight and made the grid more condensed.

 

Gradients are hard in Processing

This took a while. Yesterday while watching the E3 2021 live stream I tried to work through how to create a gradient in Processing, specifically how I could apply it to an ellipse. I found a few ways to create them while searching but I wanted to try and see if I could work it out myself.

In order to get this to work, I had to draw 1px rectangles from the top to the bottom of the ellipse. I had already worked out a bit of the work in a previous sketch to get arcs of an ellipse and plot points on them. Using lerpColor I could tween between two colors at each pixel to get the gradient. From the top left arc, I found the mirror point on the top right arc and drew a rectangle from those two points, then continued down the arc to the middle. Then the same was done from the bottom left arc to the right.

Fair warning I’m still a bit new at Java programming and I’m sure there could be some improvements. If you have any suggestions on how I could improve this method I’m all ears.

Getting into Generative Art via Processing

Lately, I started getting into Generative art. The idea that I can use code to generate artwork appeals to me. I’ve only got into working in Processing, a language for generative art (Java-based), for about two weeks now and already I can see its possibilities.

At first, I just tried to get the basics down. The documentation and tutorials on the Processing got me started, as well as watching a bunch of videos off of The Coding Train and reading Generative Art: A Practical Guide Using Processing to get my head around what Processing was able to do. It’s Java-based, but there are forks of it in Python and Javascript.

With a loop and varied-sized rectangles, I pumped this out. Not too interesting yet but it’s a start. Then I tried the same thing but trying dimension with ellipses.

It’s a mess, but it’s my mess.

Then I started to play with spirals and transformations.

The other night I couldn’t sleep and started working on this one with lines and mountain-like peaks.

Processing makes it pretty easy to “sketch” ideas, building off one idea to another. It reminds me a bit of Design I at CVA where we’d use layout bond to duplicate and tweak iconography. I can create a basic framework for a sketch and then run it several times to get varying results. Small changes to variables can result in completely new visuals.

I saw this posted to the Generative Discord server and thought it was pretty interesting and gave it a go.

Version 1, I created a grid and made rules of how the grid shapes are filled in.

Version 2, adding texture, varying the size of the grid.

Then Loki aired yesterday I gave the carpet at the TVA a try. This uses a similar grid system to the two above, just with arcs in alternating patterns.

That’s it for now. I’ve been working on a few of these sketches a day so more on the way.