As the rain pours in the Flathead Valley I have taken a dive into generative
art. Generative art is defined as a rule based autonomous system.
Generative art refers to art that in whole or in part has been created with the use of an autonomous system. An autonomous system in this context is generally one that is non-human and can independently determine features of an artwork that would otherwise require decisions made directly by the artist (Wikipedia).
While studying the history of Generative Art I discovered an amazing French
artist named Vera Molnár. She is one of the pioneering women who started creating
algorithmic computer art back in 1968. She quickly grew fond of this new
medium and is considered one of the founders of Generative Art.


While I was looking up her art I stumbled across a
YouTube video by thedotisblack
creative coding. thedotisblack created a Processing sketch and recreated of
one of Molnár's artworks that she tiltled, 198633 Structure De Quadrilatère
1986 Photographie D' Écran.
I was intrigued by his Processing rendering of his version of Molnár's
art.It quickly inspired to see if I could reproduce his work in P5.JS.
P5.JS is a special library used by java script. Used together they create a robust web version of Processing. This special library was created and implemented by Lauren McCarthy. While I'm not a seasoned programmer, I enjoyed the challenge of creating my own version.
P5.JS is a special library used by java script. Used together they create a robust web version of Processing. This special library was created and implemented by Lauren McCarthy. While I'm not a seasoned programmer, I enjoyed the challenge of creating my own version.
A difference from mine is that I decided to for go the
MousePressed ( ) event to create a true generative artwork. This was a
wonderful challenge, and naturally I couldn't have done it without the
wonderful help of a great teacher, Daniel Shiffman and his P5.JS video series. I can relate to Shiffman's energy
and approach to teaching. You can see his tutorials here on the Coding Train.
Here is my take on Molnár, and the thedotisblack's work:
// Vera Mohlar b. Hungary (1924- ) - Pioneering female French digital artist!
// Structures de Quadrilatéres 1986
// http://www.veramolnar.com/diapo.php?y=1986
// Project reproduced in Processing by thedotisblack Creative Coding
// https://www.youtube.com/watch?v=O5G4SoWBoao
// P5.JS version by Dave Ritter 6/25/20
var num;
var colors = [];
let margin = 100;
let grid = 150;
function setup() {
createCanvas(970, 970);
// noLoop();
colors[0] = color(255, 255, 255); // white
colors[1] = color(200, 5, 20); // red
colors[2] = color(55, 188, 25); // green
colors[3] = color(15, 235, 250); // blue
colors[4] = color(125, 235, 250); // lt blue
colors[5] = color(240, 245, 15); // yellow
colors[6] = color(160, 60, 235); // purple
}
function draw() {
background(0);
noFill();
stroke(255);
// Build a grid and put a quad in each grid space
for (i = margin; i < width - margin; i += grid) {
for (j = margin; j < height - margin; j += grid) {
//quad(x1, y1, x2, y2, x3, y3, x4, y4);
let d = grid*0.6;
stroke(random(colors));
for (var num = 0; num < 7; num++) {
let x1 = -random(d);
let y1 = -random(d);
let x2 = random(d);
let y2 = -random(d);
let x3 = random(d);
let y3 = random(d);
let x4 = -random(d);
let y4 = random(d);
strokeWeight(3);
push();
translate(i, j);
quad(x1, y1, x2, y2, x3, y3, x4, y4);
frameRate(3);
pop();
}
}
}
}
//function mousePressed() {
//redraw();
//}