miniverse – MolnarRecode

  1. the piece is composed mostly of diagonals across rectangles
  2. the rectangles are 1:2
  3. there are no squares
  4. most diagonal sections are parallel lines spaced equally apart
  5. here are some exceptions
    1. (I was lazy and did not implement these)
  6. As seen in image one the middle line is thicker than the neighbouring ones in part probably due to rounding errors
  7. Some of the diagonals across rectangles fill up to the half the space
  8. the space between the lines selected per rectangle
  9. The code was potentially run twice as the rectangles overlap
  10. there are multiple orientations for the lines. They either run left top to right bottom or right top corner to left bottom corner

here’s what I generated

My work I feel is sort of close to the artists. However, I didn’t implement those small exceptions because I was lazy and tired. This work was hard to make because it took me a while just to generate the individual component of a random rectangle section and on top of that the math to produce the diagonals within it. Easily took me 5 hours because of that.

My code

https://editor.p5js.org/miniverse/sketches/gV2HWWueA

/* export SVG
DDF 2019
need to have p5.svg.js in project and in index.html
see -https://github.com/zenozeng/p5.js-svg
this will save an SVG file in your download folder
*/

function setup() {
  createCanvas(800, 800, SVG);
  strokeWeight(1); // do 0.1 for laser
  stroke(0, 0, 0); // red is good for laser
  nSquares = 20;
  strokeWeight(0.4)
  noFill(); // better not to have a fill for laser
}


function distance(x1, y1, x2, y2){
  return (y1 - y2)*(y1 - y2) + (x1 - x2)*(x1 - x2)
}

function fillSquare(squareW, startX,startY,  box1, box2, percentOptions){
  orientation = random([0, 1])
  percent = random(percentOptions)
  threshold = squareW * 7 * percent;
  if(orientation){
    point1 = [(box1[0] * squareW) + startX, (box1[1] * squareW) +startY]
    point2 = [(box2[0] * squareW) + startX, (box2[1] * squareW) +startY]
    
    spacingX = abs(point1[0] - point2[0]) * percent;
    spacingY = abs(point1[1] - point2[1]) * percent;
    if(random() < 0.7){ while(distance(point1[0], point1[1], point2[0], point2[1]) > threshold ){
        line( point1[0], point1[1], point2[0], point2[1]);
        point1 = [point1[0] + spacingX, point1[1]]
        point2 = [point2[0], point2[1] - spacingY]
      }
    }
    point1 = [(box1[0] * squareW) + startX, (box1[1] * squareW) +startY]
    point2 = [(box2[0] * squareW) + startX, (box2[1] * squareW) +startY]
    if(random() < 0.9){ while(distance(point1[0], point1[1], point2[0], point2[1]) > threshold ){
        point1 = [point1[0], point1[1] + spacingY]
        point2 = [point2[0] - spacingX, point2[1]]
        line( point1[0], point1[1], point2[0], point2[1]);
      }
    }
    return;
  }
  
  point1 = [(box2[0] * squareW) + startX, (box1[1] * squareW) +startY]
  point2 = [(box1[0] * squareW) + startX, (box2[1] * squareW) +startY]
  
  spacingX = abs(point1[0] - point2[0]) * percent;
  spacingY = abs(point1[1] - point2[1]) * percent;

  while(distance(point1[0], point1[1], point2[0], point2[1]) > threshold ){
    line( point1[0], point1[1], point2[0], point2[1]);
    point1 = [point1[0] - spacingX, point1[1]]
    point2 = [point2[0], point2[1] - spacingY]

  }
  point1 = [(box2[0] * squareW) + startX, (box1[1] * squareW) +startY]
  point2 = [(box1[0] * squareW) + startX, (box2[1] * squareW) +startY]
  if(random() < 0.7){ while(distance(point1[0], point1[1], point2[0], point2[1]) > threshold ){
      
      point1 = [point1[0], point1[1] + spacingY]
      point2 = [point2[0] + spacingX, point2[1]]
      line( point1[0], point1[1], point2[0], point2[1]);
    }
  }
}
function makeGrid(percentOptions){
  squareW = width / nSquares;
  for (var r = 0; r < nSquares; r++ ) {
    for (var c = 0; c < nSquares; c++) {
      box1 = random([[0, 0.0, 0.0], [1, 0.5, 0.0], [2, 0, 0.5]])
      if(box1[0] == 0){
        box2 = random([[ 1.0, 0.5], [0.5, 1.0]])
      }
      if(box1[0] == 1 || box1[0] == 2){
        box2 = [1.0, 1.0]
      }
      box1 = [box1[1], box1[2]]
      fillSquare(squareW, r * squareW, c * squareW, box1, box2, percentOptions);
    }
  }
}
function draw() {
  makeGrid([0.1, 0.2, 0.5]);
  makeGrid([0.1, 0.2, 0.5]);
  makeGrid([ 0.2, 0.5]);
  save("mySVG.svg"); // give file name
  print("saved svg");
  noLoop(); // we just want to export once
}

miniverse – PlotterTwitter

On plotter twitter I mainly saw geometric patterns and drawings with an element of optical illusion. I also saw limited color selection and  uniform thickness pens. Interesting techniques I saw was the use of flat tip pens to achieve variable thickness strokes in the same svg line. Makes me wonder if stylus rotation is controllable on plotters. As marimonda and aasdee mentioned, another beautiful technique an artist used was to make a water color plot painting by creatively structuring the svg file to dip the brush in a palette.

This artist uses a flat nib pens to create visual illusions. It looks like they redraw the same SVG file with two flat nib pens. However, in the second drawing they orient the pen in the plotter such that it produces thick lines where the first pen was thin and vice versa. This layers the ink in illusiony ways

Another technically interesting piece by the same artist.