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

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.

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.