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`;
  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.