Reimagining Vera Molnár: A p5.js Study of "(Des)Ordres" (1974)
Celebrating a Computer Art Pioneer
Vera Molnár is widely regarded as a trailblazer in computer art. Since the 1960s, she has been exploring the intersection of geometry and algorithms, long before modern creative coding tools existed.
Vera Molnár on Wikipedia.
Website: www.veramolnar.com
Learning from the Past: The Reconstruction Process
I believe that by recreating classic works with modern tools like p5.js, we can better understand the vision and techniques of the pioneers. For this study, I chose to tackle her iconic 1974 piece, (Des)Ordres.
(Des)Ordres, 1974
My first attempt used simple rect() functions with varying stroke weights and colors:
for (let i = 0; i < 5; i++) {
stroke(0, 0, random(30, 90), 100);
strokeWeight(random(10));
rect(x, y, s, s);
}
A good start, but it felt too rigid. Next, I introduced randomness to the rectangle sizes:
let rs = s * (1.0 + random(-0.5, 0.5));
rect(x, y, rs, rs);
Better, but still not quite there.
Looking closer at (Des)Ordres, I realized the secret: the original work isn't composed of perfect rectangles, but distorted quads where each corner is nudged by a bit of "disorder."
By switching from rect() to vertex(), I was finally able to capture the organic, hand-drawn feel of the original work. Here is my final reconstruction:
The title (Des)Ordres is a play on the French words for Order and Disorder. In this sketch, I’ve captured that essence by starting with a rigid grid (Order) and introducing subtle vertex displacements to invite chaos (Disorder).
The p5.js Implementation
This code is released under the GPL license. I’d be honored to see how you build upon this logic!
// Honoring Vera Molnár : (Des)Ordres, 1974
// https://dam.org/museum/artists_ui/artists/molnar-vera/des-ordres/
const w = 640;
const h = 640;
const cols = 17;
const rows = 17;
function setup() {
createCanvas(w, h);
colorMode(HSB, 360, 100, 100, 100);
rectMode(CENTER);
background(0, 1, 96, 100);
noFill();
// '2' means margin
const cw = width / (cols + 2);
const ch = height / (rows + 2);
translate(cw * 1.5, ch * 1.5);
for (c = 0; c < cols; c++) {
for (r = 0; r < rows; r++) {
drawCell(c * cw, r * ch, cw, ch);
}
}
}
/**
* drawCell : draws randomly distorted rectangles.
*/
function drawCell(_cx, _cy, _cw, _ch) {
const rectMax = 10;
const distort = 0.1
for (let rectCnt = 0; rectCnt < rectMax; rectCnt++) {
// calculates corner points of the distorted rectangle
const hW = _cw * rectCnt / rectMax / 2;
const hH = _ch * rectCnt / rectMax / 2;
const points = [{
x: _cx - (1 + random(-1, 1) * distort) * hW,
y: _cy - (1 + random(-1, 1) * distort) * hH
},
{
x: _cx + (1 + random(-1, 1) * distort) * hW,
y: _cy - (1 + random(-1, 1) * distort) * hH
},
{
x: _cx + (1 + random(-1, 1) * distort) * hW,
y: _cy + (1 + random(-1, 1) * distort) * hH
},
{
x: _cx - (1 + random(-1, 1) * distort) * hW,
y: _cy + (1 + random(-1, 1) * distort) * hH
},
];
stroke(0, 2, random(30, 96), 100);
strokeWeight(random(2));
beginShape();
// The 5-point loop trick to close the shape
for (let corner = 0; corner < 5; corner++) {
vertex(points[corner % 4].x, points[corner % 4].y);
}
endShape();
}
}
/*
Copyright (C) 2021- deconbatch
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>
*/
Taking It Further: Variations on a Theme
Once the basic logic was in place, I couldn't resist experimenting. What if we replace vertex() with curveVertex(), or use noise() instead of random() to drive the distortion?
Variation 1: Soft Contours with curveVertex()
Variation 2: Not random() But noise()
Variation 3: Infusing Colors
Variation 4: Play With a Mischievous Child
deconbatch
To make something is my pleasure. Having fun in endless trial-and-error. Now, I'm loving creative coding and showing some example code in my blog. Mainly creating Processing code examples.
