Genuary 25: Webcam line

let capture

let path

let edgesFilter

let startTime

​

function setup() {

  createCanvas(windowWidth, windowHeight)

  pixelDensity(1)

  capture = createCapture(VIDEO, { flipped: true })

  capture.hide()

  strokeCap(ROUND)

  edgesFilter = createFilterShader(`

    precision highp float;

    uniform sampler2D tex0;

    varying vec2 vTexCoord;

    uniform vec2 canvasSize;

    void main() {

      float resX = 0., resY = 0.;

      for (int xOff = -2; xOff <= 2; xOff++) {

        for (int yOff = -2; yOff <= 2; yOff++) {

          float c = texture2D(tex0, vTexCoord + vec2(float(xOff), float(yOff))/canvasSize).r;

          resX += float(xOff) * c;

          resY += float(yOff) * c;

        }

      }

      gl_FragColor = vec4(vec3(1. - smoothstep(0., 1., max(resX, resY))), 1.);

    }

  `)

}

​

function draw() {

  background(255)

  if (path) {

    const reveal = map(millis(), startTime, startTime + 4000, 0, 1, true)

    const numPts = Math.ceil(path.getTotalLength() * reveal)

    noFill()

    stroke('#695D78')

    strokeWeight(3)

    beginShape()

    for (let i = 0; i <= numPts; i++) {

      const pt = path.getPointAtLength(map(i, 0, numPts, 0, path.getTotalLength() * reveal))

      vertex(pt.x, pt.y)

    }

    endShape()

  } else {

    image(capture, 0, 0, width, height, 0, 0, capture.width, capture.height, COVER)

    textAlign(CENTER, CENTER)

    fill(0)

    stroke(255)

    strokeWeight(3)

    textSize(40)

    text('Click anywhere to turn into lines', width/2, height*0.7)

  }

}

​

function mousePressed() {

  clear()

  image(capture, 0, 0, width, height, 0, 0, capture.width, capture.height, COVER)

  filter(edgesFilter);

  img = get()

  img.loadPixels()

  const samples = []

  for (let i = 0; i < 30000; i++) {

    const x = floor(random(width))

    const y = floor(random(height))

    if (img.pixels[(y*width + x) * 4] + random(-1,1)*40 < 255/2) {

      // const vertNeighbour = img.pixels[((y + (y < height-1 ? 1 : -1))*width + x) * 4]

      // pts.push({

      //  point: createVector(x, y),

      //  tangent: vertNeighbour < 255/2 ? createVector(0, 1) : createVector(1, 0),

      // })

      samples.push(createVector(x, y))

    }

  }

  const candidates = samples.map(p => [p])

  while (candidates.length > 1) {

    const string = candidates.shift()

    const dists = candidates.map((other) => {

      const dists = [

        string.at(0).dist(other.at(0)),

        string.at(0).dist(other.at(-1)),

        string.at(-1).dist(other.at(0)),

        string.at(-1).dist(other.at(-1)),

      ]

      const minDist = min(dists)

      return { minDist, dists }

    })

    const minDist = min(dists.map(d => d.minDist))

    const idx = dists.map(d => d.minDist).indexOf(minDist)

    const [other] = candidates.splice(idx, 1)

    const distIdx = dists[idx].dists.indexOf(minDist)

    if (distIdx === 0) {

      candidates.push([...other.reverse(), ...string])

    } else if (distIdx === 1) {

      candidates.push([...other, ...string])

    } else if (distIdx === 2) {

      candidates.push([...string, ...other])

    } else {

      candidates.push([...string, ...other.reverse()])

    }

  }

  // for (let x = 0; x < width; x += 10) {

  //  for (let y = 0; y < height; y += 10) {

  //    if (img.pixels[(y*width + x) * 4] < 255/2) {

  //      const vertNeighbour = img.pixels[((y + (y < height-1 ? 1 : -1))*width + x) * 4]

  //      pts.push({

  //        point: createVector(x, y),

  //        tangent: vertNeighbour < 255/2 ? createVector(0, 1) : createVector(1, 0),

  //      })

  //    }

  //  }

  // }

  let pts = candidates[0]

  for (let i = 0; i < 4; i++) {

    pts = pts.map((p, i) => pts[i].copy().add(pts.at(i-1)).add(pts.at(i+1)||pts[0]).mult(1/3))

  }

  // shuffle(pts, true)

  // pts.sort(() => random() < 0.5 ? -1 : 1)

  // debugger

  const tangents = pts.slice(1).map((pt, i) => pt.copy().sub(pts[i]))

  tangents.push(tangents.at(-1).copy())

  // const ordered = orderPoints(pts, {

  //  allowFlippedNormals: true,

  //  numIts: pts.length * 3,

  //  distWeight: 1,

  //  tangentWeight: 0.5,

  // })

  // debugger

  path = BezierPath.create(candidates[0].map((pt, i) => ({

    pt,

    left: pt.copy().sub(tangents[i].copy().mult(0.4)),

    right: pt.copy().add(tangents[i].copy().mult(0.4)),

  })))

  startTime = millis()

}