Author: gabagoo

gabagoo-PlotterSkimming

1. The media consideration from Tyler Hobb's article was very insightful because it provides concrete examples of how and where different pen types/ paper types can work with plotters. The painting example was really cool as well.

2. I also found the convex-hull algorithm from Matt Deslauriers to be quite interesting. I think probably what I found most useful from these skimmings is exposure to different kinds of plots and which ones feel generic and which seem original.

gabagoo-LineWalk

 

 

APPROACH: I really wanted to create a line that alternates between lines and curves. I got stuck with applying and reapplying matrix transformation with push() and pop(). I ended up using a stack of matrix transformations. I also wanted the animation of watching the line 'walk' be really satisfying so I used p5.func to use several different easing functions. I found that tuning various parameters in the way I transform the matrix between strokes was incredible sensitive and produced several interesting results.

LIVE EXAMPLE + CODE
let FUNCS = ['quadraticIn', 'quadraticOut', 'quadraticInOut', 'doubleQuadraticBezier', 'doubleQuadraticSigmoid', 'quadraticBezier', 'quadraticBezierStaircase', 'cubicIn', 'cubicOut', 'cubicInOut', 'brycesCubic', 'cubicBezier', 'cubicBezierThrough2Points', 'doubleCubicOgee', 'doubleCubicOgeeSimplified', 'quarticIn', 'quarticOut', 'quarticInOut', 'generalizedQuartic', 'quinticIn', 'quinticOut', 'quinticInOut']
let MIN_SPEED = 5, MAX_SPEED = 15, UPDATE = 0.1
let context = {}
let transforms = []
let e = new p5.Ease()

function setup() {
    createCanvas(windowWidth, windowHeight, SVG)
    angleMode(DEGREES)
    stroke(0)
    strokeWeight(5)
    updateContext(width/2, height/2)
    
}

function draw() {

    // apply transformations
    push()
    for (const [type, vec] of transforms) {
        switch (type) {
            case 'translate': translate(vec.x, vec.y); break;
            case 'rotate': rotate(atan2(vec.y, vec.x)); break;
        }
    }

    // draw line
    line(...lineargs())

    // exit condition
    if (context.prog >= 1) updateContext(context.width, 0)
    context.prog = min(1, context.prog + UPDATE * context.speed)
    pop()
}

function lineargs() {
    var val = e[context.easing](context.prog) * context.width
    return [0, 0, val, 0]
}

function updateContext(x, y) {
    context.start = createVector(x, y)

    if (context.dir == undefined) context.dir = p5.Vector.random2D()
    else context.dir = createVector(random(-.1, .1), random(1, 4))
    // else context.dir = createVector(1, random(-1, 1))

    context.speed = random(MIN_SPEED, MAX_SPEED)
    context.easing = random(FUNCS)
    context.width = random(random(0,10), random(10, 100))
    // context.width = 5
    context.prog = 0.

    transforms.push(['translate', context.start])
    transforms.push(['rotate', context.dir])
}

function keyPressed() {
    if (key == 'd') {
        noLoop()
        save('plot.svg')
        loop()
    }
}

 

gabagoo-MolnarRecode

Observations: 
1. grid of equally spaced squares
2. some squares are split
3. areas are shaded by 'hatching'
4. some areas are split into a triangle
5. the hatching concentration varies
6. sometimes there is no hatching (blank area)
7. hatched areas overlap into cross-hatches
8. there stroke color is black
9. there are some inconsistencies with the hatching
10. the hatching direction is variable

^^ SVG ^^
 


^^ pixel image (from before I messed up the code) ^^


^^ I also experimented with color ^^
LIVE EXAMPLE + CODE
let rows, cols, grain = 15
let colors = ['#eb4034', '#3459eb', '#ffe019', '#404040']

function setup() {
  var SQ_SIZE = min(windowWidth, windowHeight) * .75
  createCanvas(SQ_SIZE, SQ_SIZE, SVG).position((windowWidth - width) / 2, (windowHeight - height) / 2)

  rows = int(width / grain)
  cols = int(height / grain)
  stroke(0)
  strokeWeight(map(grain, 10, 100, .1, 5))
  strokeCap(ROUND)
  noLoop()
}

function draw() {
  background(255)

  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {

      if (random(0, 1) < .2) {
        drawHatchedRect(i * grain, j * grain, 2 * grain, 2 * grain)
      }
      else {
        if (random(0, 1) < .5) drawHatchedRect(i * grain, j * grain, grain, 2 * grain)
        if (random(0, 1) < .5) drawHatchedRect(i * grain, j * grain, 2 * grain, grain)
      }

    }
  }
}

function drawHatchedRect(x, y, w, h) {

  let divisions = int(random(-3, 10))
  let hatch_dir = random(0, 1) < 0.5
  let sided = random(0, 1) < 0.5

  push()
  translate(x, y)
  if (hatch_dir) {
    rotate(PI/2)
    var temp = w
    w = h
    h = temp
    translate(0, -h)
  }
  
  // define points
  var top = new p5.Vector(0, 0)
  var bot = new p5.Vector(w, h)
  var rand = random(0, 1) < 0.5
  // stroke(color(random(colors)))

  for (var i = 0; i < divisions; i++) {

    var x_off = i * (w / divisions)
    var y_off = i * (h / divisions)

    if (sided) {
      if (rand) line(top.x, top.y + y_off, bot.x - x_off, bot.y)
      else line(top.x + x_off, top.y, bot.x, bot.y - y_off)
    }
    else {
      line(top.x, top.y + y_off, bot.x - x_off, bot.y)
      line(top.x + x_off, top.y, bot.x, bot.y - y_off)
    }
  }
  pop()

}

function reDraw() {
  grain = int(random(10, 50))
  setup()
  redraw()
}

function mousePressed() {reDraw()}

function keyPressed() {
  if (key == 'd') {
      save('plot.svg')
  }
}

function windowResized() {
  setup()
  reDraw()
}

gabagoo-PlotterTwitter

The works from PlotterTwitter were pretty interesting to me. I thought the there were many creative and unconventional uses of color, pen media, and form. It got kind of redundant with the line patterns, but I found the mixing of colors, particularly in the work linked above to be incredible.  What I like about Brandon Dail’s Neon City Sunset (above) is the complexity of the layering. None of the layers have particularly complex elements, mostly circles and squiggles, but the layering of colors creates incredible visual textures.