My Blog

Creative coding - Infinite Albers

My first real attempt at doing some creative coding, though I've dabbled with it a bit in the past. I tried to recreate Homage to the Square by Josef Albers - mostly because it would be fairly easy to do.

I haven't really incorporated any real control over the colours (I definitely didn't go into any of his colour theory), so the colours the script produces can be "interesting". I added some noise to the outputs to give them a more analog look, but I'm not really sure that it works.

The live script lives HERE (clicking/tapping the screen will generate an infinite amount of new outputs, thus Infinite Albers).

Some example outputs:

![Screenshot](/images/Screenshot from 2024-05-21 12-01-20.png)

Rock 5 Rock 5 Rock 5

The code is a complete mess but here it is 😅 It was originally written using Processing but then I converted it to p5.js so it can be shared and interacted with in the browser -

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	frameRate(30);
	noStroke();
	rectMode(CENTER); //noLoop();
	noLoop();
}
function draw() {
	albers();
}

function mousePressed() {
	// Draw a frame when the mouse is clicked
	drawFrame(0, 0, width, height); // You can adjust the frame's size and appearance
}

function albers() {
	clear();
	noStroke();

	for (let i = 0; i < 25; i = i + 1) {
		fill(random(0, 255), random(60, 200), random(0, 255), random(1, 2));
		let num = random(0, random(10, 2000));
		ellipse(random(0, width), random(0, height), num, num);
	}

	filter(GRAY);

	// Squares
	for (let i = 4; i > 0; i = i - 1) {
		stroke(255, 255, 255, 255);
		strokeWeight(random(0, 3));
		fill(0, 0, 0, 0);
		let rand = random(45, 48); //rect(width / 2, height / 2 - random(10), 10 + i * rand + random(2, 30), 10 + i * rand + random(5, 30)); // Draw the circle at the center
		//circle(width / 2, height / 2 - random(10), 10 + i * rand + random(2, 30)); // Draw the circle at the center
		//rect(width / 2, height / 1.8, 375, 375);
		fill(random(255), random(255), random(255), random(255)); //translate(0, i * 10);
		//scale(0.5);
		rand = random(15);

		rect(
			width / 2,
			height / 1.25 - i * 25,
			50 + i * 70 + rand + random(3),
			50 + i * 70 + rand + random(3)
		);
	}

	// Loop through the entire canvas and add grains
	for (let x = 0; x < width; x++) {
		for (let y = 0; y < height; y++) {
			strokeWeight(random(1, 2));
			// Generate a random number between 0 and 1
			let rand = random(1);

			// Adjust the graininess by changing the threshold value
			let threshold = 0.88; // Higher values make it less grainy, lower values make it more grainy

			// Compare the random number to the threshold
			if (rand > threshold) {
				// If the random number is greater than the threshold, draw a dark pixel
				stroke(255, 255, 255, random(100, 255)); // Set the stroke color to black
				point(x, y); // Draw a point at (x, y)
			}
		}
	}
}

function drawFrame(x, y, width, height) {
	albers();
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}