const MAX_POINTS = 8, MIN_DIST = 20
const distance = require('vectors/dist')(2)
const throttle = require('lodash.throttle')
const random = require('randf')

let stroke = require('extrude-polyline')({
  thickness: 20,
  join: 'miter',
  miterLimit: 2,
  cap: 'square'
})

let context = require('../base')(render, {
  name: __dirname,
  description: `_toch and drag to draw_  
rendering with triangles  `
})

let canvas = context.canvas
let path = [[240,155],[260,148],[284,150],[296,166],[311,183],[335,190],[353,180]]

let colors = [
    '#4f4f4f',
    '#767676',
    '#d9662d',
    '#d98a2d'
]

let lastPosition = path[path.length-1]

function render(dt) {
  let { width, height } = canvas
  context.clearRect(0, 0, width, height)

  let mesh = stroke.build(path)
  mesh.cells.forEach((cell, i) => {
    let [ f0, f1, f2 ] = cell
    let v0 = mesh.positions[f0],
        v1 = mesh.positions[f1],
        v2 = mesh.positions[f2]
    context.beginPath()
    context.lineTo(v0[0], v0[1])
    context.lineTo(v1[0], v1[1])
    context.lineTo(v2[0], v2[1])
    context.fillStyle = colors[i % colors.length]
    context.fill()
  })
}

let adder = throttle(addPoint, 30)
let dragging = false

require('touches')(window, { filtered: true })
  .on('move', adder)
  .on('start', () => { //clear path on click
    path.length = 0
    stroke.thickness = random(10, 30)
    dragging = true
  })
  .on('end', () => {
    dragging = false
  })

function addPoint(ev, position) {
  if (!dragging)
    return
  //limit our path by distance and capacity
  if (distance(position, lastPosition) < MIN_DIST)
    return
  if (path.length > MAX_POINTS)
    path.shift()
  path.push(position)
  lastPosition = position
}
@@ -148,16 +148,63 @@
 'randf')
+%0Aconst curve = require('adaptive-bezier-curve')
 %0A%0Alet st
@@ -479,92 +479,8 @@
 vas%0A
-let path = %5B%5B240,155%5D,%5B260,148%5D,%5B284,150%5D,%5B296,166%5D,%5B311,183%5D,%5B335,190%5D,%5B353,180%5D%5D%0A%0A
 let 
@@ -552,16 +552,44 @@
 a2d'%0A%5D%0A%0A
+let path = getInitialPath()%0A
 let last
@@ -618,16 +618,34 @@
 ength-1%5D
+%0Aconsole.log(path)
 %0A%0Afuncti
@@ -1698,8 +1698,368 @@
 sition%0A%7D
+%0A%0A//gets a nice curved stroke to start off%0Afunction getInitialPath() %7B%0A  let width2 = window.innerWidth/2%0A  let height2 = window.innerHeight/2%0A  let len = 150, off = 100%0A  return curve(%0A    %5Bwidth2-len, height2%5D, %0A    %5Bwidth2-len/2, height2-off%5D, %0A    %5Bwidth2+len/2, height2+off%5D, %0A    %5Bwidth2+len, height2%5D,%0A    0.1 //scaling factor%0A  ).slice(0, MAX_POINTS)%0A%7D

update stroke