Exploring design: Coding

For one of the mini experimental tasks we've been getting and exploring with; we were tasked with generating 100 distinct variations of the cover using a defined set of parameters; those being A5 portrait (148mm × 210mm), Each cover must feature a grid of randomly sized circles, The grid should be contained within a square aligned to the bottom of the page, The size, and appearance of the circles should vary across each design whilst maintaining visual cohesion, the colour pallet should be a mix of pale orange and blue shade and each should have a randomly placed title, titled 'the spot, reference number should use a sans-serif typeface, no smaller than 24pt. They should look like a book covers in the end and should all look different; randomly generated. I wanted to use the code to make the titles too instead of adding them post generating; hence why I added font commands to. We could choose however many colours and variations so I chose at random with a random colour generator; those being orange and blue. Here's the code I used below:

// Book Cover Generator — Processing 4 (Java mode)
// 100 A5 covers with:
// - Bottom-aligned square containing a circle grid
// - Random blue/orange background
// - Random font family and size for the title
// - Sans-serif reference number (>= 24pt)

int W = 1748; // A5 width @ 300dpi
int H = 2480; // A5 height @ 300dpi
int MARGIN = 100;

color[] ORANGES = {
color(255, 230, 210),
color(255, 218, 185),
color(255, 200, 150),
color(245, 205, 160),
color(255, 210, 170)
};

color[] BLUES = {
color(200, 220, 255),
color(190, 215, 245),
color(170, 205, 240),
color(160, 195, 235),
color(180, 220, 250)
};

// Use Processing's logical font families — guaranteed to exist
String[] TITLE_FAMILIES = {"SansSerif", "Serif", "Monospaced"};

void setup() {
size(800, 600); // preview window (kept visible for reliability)

// Generate and save 100 covers
for (int i = 1; i <= 100; i++) {
makeCover(i);
println("Saved cover " + nf(i, 3));
}
exit();
}

void makeCover(int index) {
PGraphics g = createGraphics(W, H); // default renderer works everywhere
g.beginDraw();
g.background(pickBackground());

// Bottom-aligned square
int sqSize = W - 2 * MARGIN;
int sqX = MARGIN;
int sqY = H - MARGIN - sqSize;
g.stroke(200);
g.noFill();
g.rect(sqX, sqY, sqSize, sqSize);

// Circle grid (pale orange/blue mix)
int cols = 6 + int(random(6)); // 6–11
int rows = 6 + int(random(6)); // 6–11
float cellW = sqSize / (float) cols;
float cellH = sqSize / (float) rows;

for (int r = 0; r < rows; r++) {
for (int c = 0; c < cols; c++) {
float cx = sqX + c * cellW + cellW / 2;
float cy = sqY + r * cellH + cellH / 2;
float radius = min(cellW, cellH) / 2 * random(0.35, 0.95);

  color fill = random(1) < 0.5 ? ORANGES[int(random(ORANGES.length))]
                               : BLUES[int(random(BLUES.length))];
  g.noStroke();
  g.fill(fill);
  g.circle(cx, cy, radius * 2);
}

}

// Title: "the spot" — random font family and size, random position
String title = "the spot";
String titleFamily = TITLE_FAMILIES[int(random(TITLE_FAMILIES.length))];
int titleSize = 28 + int(random(44)); // 28–72pt
PFont titleFont = createFont(titleFamily, titleSize, true);
g.textFont(titleFont);
g.fill(0);

float titleW = g.textWidth(title);
float titleH = g.textAscent();
float tx = random(MARGIN, max(MARGIN, W - MARGIN - titleW));
float ty = random(MARGIN + titleH, H - MARGIN);

// Optional small rotation for a designed feel
float angle = radians(random(-3, 3));
g.pushMatrix();
g.translate(tx, ty);
g.rotate(angle);
g.text(title, 0, 0);
g.popMatrix();

// Reference number: SansSerif, >= 24pt
String ref = "#" + nf(index, 3);
int refSize = 24 + int(random(20)); // 24–44pt
PFont refFont = createFont("SansSerif", refSize, true);
g.textFont(refFont);
g.fill(0);
float refW = g.textWidth(ref);
g.text(ref, W - MARGIN - refW, H - MARGIN);

g.endDraw();
g.save(sketchPath("data/cover_" + nf(index, 3) + ".png"));
}

// Pick a random blue/orange background
color pickBackground() {
if (random(1) < 0.5) {
return ORANGES[int(random(ORANGES.length))];
} else {
return BLUES[int(random(BLUES.length))];
}
}

Here is some of the results out of the 100 below:

To better understand how code can become design I looked at Christoph​‍​‌‍​‍‌​‍​‌‍​‍‌ Grünberger’s Age of Data: Embracing Algorithms in Art & Design. It investigates how algorithms and data have been turned into the most active collaborators in the creative process, thus, have changed the way design is done from being a fully controlled detailed one to just curating systems that deliver results. It also demonstrates how computational processes can bring out surprising yet harmonious results, the book presents a plethora of examples that range from graphic design and 3D animation to robotics, kinetic installations, and real-time visuals. One of the key ideas is the happy acceptance of randomness, thus, artists are encouraged to recognise unpredictability not as their losing control but rather as gaining new aesthetics. Grünberger points out that even though these works are generative, it is still very important to bring visual unity through things like color palettes, grids, and typography. In the end, the book frames algorithmic art as a large trend that is a mixture of technology, aesthetics, and philosophy, thereby, implying that the future of design lies in the hand of those who embrace ​‍​‌‍​‍‌​‍​‌‍​‍‌data.

[Christoph Grünberger and Heys, P. (2022). The age of data : embracing algorithms in art & design. Salenstein: Niggli, Imprint Of Braun Publishing Ag.]

Trying to complete this made me aware of how tough it is to balance your own creative vision and standards of technical accuracy; I constantly struggled with keeping in mind the many parameters required for this project (i.e. A5 format, circle grids, color palette, etc.) while trying to maintain individual uniqueness on every cover. When I originally put the title into the code, rather than adding it later, it opened my mind to how you can visually represent a word via a design; however, embedding the title into the code also made for a much more complicated task than I had thought and at times felt beyond my control. Trying to balance randomness with consistency at times created a confusion in my mind about how to create a cohesive collection while expressing variety. The entire experience has taught me that generative design exists at a point where there is a constant tension between structure and freedom. I was definitely out of my comfort zone.