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.

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.