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