In admiration of Robert Delaunay.

In admiration of Robert Delaunay

Robert Delaunay is one of the pioneers of abstract painting. He left us with various fine artworks, and I love them.

I'll make some creative coding artwork with the inspiration of the paintings by Robert Delaunay.

👉 この記事は日本語でも読めます。

 

Put some arcs randomly on concentric circles.

At first, I draw some concentric circles with various shades of grey.

concentric circles with various shades of grey

Then, I draw some arcs randomly like this.

colorful arcs

Here is the result example. I applied transparency on these arcs.

Put some arcs randomly on concentric circles

Here is the example drawing with the 'blendMode(BURN)' effect.

Example with blendMode(BURN)

p5.js example code


/** 
 * In admiration of Robert Delaunay.
 * Put arcs randonly
 * 
 * @author @deconbatch
 * @version 0.1
 * @license CC0
 * p5.js 1.5.0
 * created 2023.02.15
 */

const w = 640;
const h = w;
const circleNum = 9;
const arcNum = 8;
const baseR = w * 1.3;

function setup() {
  createCanvas(w, h);
  colorMode(HSB, 360, 100, 100, 100);
  noLoop();
}

function draw() {
  translate(w * 0.5, h * 0.5);

  blendMode(BLEND);
  background(0, 0, 100, 100);

  // concentric circles
  blendMode(BLEND);
  noStroke();
  for (let cCnt = 0; cCnt < circleNum; cCnt++) {
    fill(0, 0, random(60, 80), random(60));
    circle(0, 0, baseR * (circleNum - cCnt) / circleNum);
  }

  // arcs
  blendMode(BURN);
  noFill();
  strokeCap(SQUARE);
  for (let aCnt = 0; aCnt < arcNum; aCnt++) {
    let arcR = random(baseR);
    let arcW = random(baseR);
    let tFr = random(TWO_PI);
    let tTo = tFr + random(PI);

    strokeWeight(arcW);
    stroke(random(360), 40, random(60, 80), random(60, 100));
    arc(
      0.0, 0.0,
      arcR + arcW, arcR + arcW,
      tFr, tTo
    );
  }

}

function mouseClicked() {
  redraw();
}


I drew arcs with the 'arc()' function. I did not use 'fill()' but 'stroke()', that is, I drew arcs with a bold line.

'strokeCap(SQUARE)' is the point to draw a nice arc.

The arc with strokeCap(SQUARE)

If you use the 'strokeCap(PROJECT)' function, you'll see it will stick out a little.

The arc with strokeCap(PROJECT)

Without the 'strokeCap()' function or with the 'strokeCap(ROUND)' will be like this.

The arc with strokeCap(ROUND)

But it looks something nice.

Example result with the strokeCap(ROUND)

 

Control the disposition.

In the example code above, each of the radii, widths, and angles of the arcs is random. And the result looks rough. It does not capture my heart.

rough result

So, I'll try to set the unit of the radii and width of the arc to the radii unit of the concentric circles.


// let arcR = random(baseR);
// let arcW = random(baseR);
   let arcR = baseR * floor(random(1, circleNum)) / circleNum;
   let arcW = baseR * floor(random(1, circleNum)) / circleNum;


Then, I'll try to set the unit of the angle of the arc to some fixed value like 24-division.


// let tFr = random(TWO_PI);
// let tTo = tFr + random(PI);
   let tFr = TWO_PI * floor(random(24)) / 24;
   let tTo = tFr + PI * floor(random(1, 13)) / 12;


It'll create a smooth result.

smooth result

Now, I'll show you the example codes of the p5.js and the Processing version.

p5.js example code


/** 
 * In admiration of Robert Delaunay.
 * Fixed unit arcs
 * 
 * @author @deconbatch
 * @version 0.1
 * @license CC0
 * p5.js 1.5.0
 * created 2023.02.15
 */

const w = 640;
const h = w;
const circleNum = 9;
const arcNum = 8;
const baseR = w * 1.3;

function setup() {
  createCanvas(w, h);
  colorMode(HSB, 360, 100, 100, 100);
  noLoop();
}

function draw() {
  translate(w * 0.5, h * 0.5);

  blendMode(BLEND);
  background(0, 0, 100, 100);

  // concentric circles
  blendMode(BLEND);
  noStroke();
  for (let cCnt = 0; cCnt < circleNum; cCnt++) {
    fill(0, 0, random(60, 80), random(60));
    circle(0, 0, baseR * (circleNum - cCnt) / circleNum);
  }

  // arcs
  blendMode(BURN);
  noFill();
  strokeCap(SQUARE);
  for (let aCnt = 0; aCnt < arcNum; aCnt++) {
    let arcR = baseR * floor(random(1, circleNum)) / circleNum;
    let arcW = baseR * floor(random(1, circleNum)) / circleNum;
    let tFr = TWO_PI * floor(random(24)) / 24;
    let tTo = tFr + PI * floor(random(1, 13)) / 12;

    strokeWeight(arcW);
    stroke(random(360), 40, random(60, 80), random(60, 100));
    arc(
      0.0, 0.0,
      arcR + arcW, arcR + arcW,
      tFr, tTo
    );
  }

}

function mouseClicked() {
  redraw();
}

 

Processing example code


/**
 * In admiration of Robert Delaunay.
 * Fixed unit arcs
 *
 * @author @deconbatch
 * @version 0.1
 * @license CC0
 * Processing 3.5.3
 * created 2023.02.15
 */

public void setup() {
 	size(640, 640);
  colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
  smooth();
  noLoop();

  int   circleNum = 9;
  int   arcNum    = 8;
  float baseR     = width * 1.3;

  translate(width * 0.5, height * 0.5);

  blendMode(BLEND);
  background(0.0, 0.0, 100.0, 100.0);
    
  // concentric circles
  blendMode(BLEND);
  noStroke();
  for (int cCnt = 0; cCnt < circleNum; cCnt++) {
    fill(0.0, 0.0, random(60.0, 80.0), random(60.0));
    circle(0.0, 0.0, baseR * (circleNum - cCnt) * 1.0 / circleNum);
  }

  // arcs
  blendMode(SUBTRACT);
  noFill();
  strokeCap(SQUARE);
  for (int aCnt = 0; aCnt < arcNum; aCnt++) {
    float arcR = baseR * floor(random(1, circleNum)) * 1.0 / circleNum;
    float arcW = baseR * floor(random(1, circleNum)) * 1.0 / circleNum;
    float tFr = TWO_PI * floor(random(24)) / 24.0;
    float tTo = tFr + PI * floor(random(1, 13)) / 12.0;

    strokeWeight(arcW);
    stroke(random(360.0), 40.0, random(60.0, 80.0), random(60.0, 100.0));
    arc(
        0.0, 0.0,
        arcR + arcW, arcR + arcW,
        tFr, tTo
        );
  }

}

 

Room for creativity

I feel it may be good composition when the edge of the arcs is on the vertical, horizontal, or diagonal line.

good composition result

There is room for a lot of fun and ingenuity in this code, such as controlling the composition or changing the way the hue is determined, which is random this time. Please have fun with my code if you like it.

 

color variation example
Previous Post
No Comment
Add Comment
comment url