Generative Art - Project 1

Happy Summer!!! 

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.  

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