horse physics

let engine

let pts

let delaunay

let verts

let springs

let ground, wallLeft, wallRight

let isDrawing = true

let horseDrawing

let inter

let thickness

let url

let inputHorse

let balls = []

let bgs = []

​

function preload() {

  inter = loadFont('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf')

}

​

const outlineFrag = `precision highp float;

varying vec2 vTexCoord;

​

uniform sampler2D tex0;

uniform float outlineThickness;

uniform vec4 outlineColor;

uniform vec2 canvasSize;

uniform int method;

​

const int MAX_SAMPLES = 70;

const int MAX_OFF = 10;

​

void main() {

  vec4 baseColor = texture2D(tex0, vTexCoord);

  float d = ${2 * Math.PI} * outlineThickness;

  int samples = int(min(ceil(d * 1.5), float(MAX_SAMPLES)));

  float coverage = 0.;

  if (method == 1) {

    for (int i = 0; i < MAX_SAMPLES; i++) {

      if (i == samples) break;

      float t = float(i) / float(samples);

      float angle = 3. * t * ${2 * Math.PI};

      float r = clamp(t * 3./2., 0., 1.);

      coverage = max(

        coverage,

        texture2D(

          tex0,

          vTexCoord + vec2(

            cos(angle),

            sin(angle)

          ) * r * outlineThickness / canvasSize

        ).a

      );

    }

  } else {

    for (int x = -MAX_OFF; x <= MAX_OFF; x++) {

      if (abs(float(x)) > outlineThickness) continue;

      for (int y = -MAX_OFF; y <= MAX_OFF; y++) {

        if (abs(float(y)) > outlineThickness) continue;

        coverage = max(

          coverage,

          texture2D(

            tex0,

            vTexCoord + vec2(

              float(x),

              float(y)

            ) / canvasSize

          ).a

        );

      }

    }

  }

  gl_FragColor.a = 1.;

  gl_FragColor.rgb = mix(outlineColor.rgb, baseColor.rgb, baseColor.a);

  gl_FragColor *= max(smoothstep(0., 1., coverage), baseColor.a);

}

`

​

let outlineFilter

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL)

  pixelDensity(1)

  horseDrawing = createFramebuffer({ width: 300, height: 300 })

  outlineFilter = createFilterShader(outlineFrag)

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

    bgs.push({

      type: random(['square', 'triangle']),

      rotation: random(TWO_PI),

      scale: random(2, 5),

      x: random(-width/2, width/2),

      y: random(-height/2, height/2)

    })

  }

  textFont(inter)

  thickness = createSlider(5, 50, 20, 0.1)

  thickness.position(width/2 - 20, height/2 + horseDrawing.height/2 + 25)

  url = createInput()

  url.hide()

  inputHorse = createInput()

  inputHorse.position(width/2 - horseDrawing.width/2, height/2 + horseDrawing.height/2 + 100)

  inputHorse.size(horseDrawing.width)

  inputHorse.input(() => {

    inputHorse.hide()

    const img = loadImage(inputHorse.value(), () => {

      horseDrawing.draw(() => {

        imageMode(CENTER)

        image(img, 0, 0)

      })

      makePhysics(horseDrawing)

      isDrawing = false

      thickness.hide()

      inputHorse.hide()

    }, () => console.error('Error reading data!'))

  })

}

​

function mainToFbo(x, y) {

  return [x - width/2, y - height/2]

}

​

function mousePressed() {

  if (isDrawing) {

    horseDrawing.draw(() => {

      noStroke()

      fill('#da96e0')

      circle(...mainToFbo(mouseX, mouseY), thickness.value())

    })

  }

}

function mouseDragged() {

  if (isDrawing) {

    horseDrawing.draw(() => {

      noFill()

      // stroke('#da96e0')

      // stroke('#0D776D')

      stroke('#9261DD')

      strokeWeight(thickness.value())

      line(

        ...mainToFbo(pmouseX, pmouseY),

        ...mainToFbo(mouseX, mouseY)

      )

    })

  }

}

​

function keyPressed() {

  if (key === 'Enter') {

    horseDrawing.draw(() => {

      outlineFilter.setUniform('outlineColor', [0, 0, 0, 1])

      outlineFilter.setUniform('outlineThickness', 6)

      outlineFilter.setUniform('method', 0)

      filter(outlineFilter)

    })

    makePhysics(horseDrawing)

    isDrawing = false

    thickness.hide()

    inputHorse.hide()

    url.show()

    url.position(50, 50)

    url.size(width - 100)

    url.value(

      horseDrawing.get().canvas.toDataURL()

    )

  }

}

​

function draw() {

  background('#FFC4C4')

  if (isDrawing) {

    rectMode(CENTER)

    noFill()

    stroke(0)

    strokeWeight(10)

    rect(0, 0, horseDrawing.width, horseDrawing.height)

    imageMode(CENTER)

    image(horseDrawing, 0, 0)

    noStroke()

    fill(0)

    textAlign(CENTER, BOTTOM)

    textSize(20)

    text('Draw your horse below (fill him in!) then hit enter', 0, -horseDrawing.height/2 - 20)

    textAlign(LEFT, BOTTOM)

    text('Thickness:', -horseDrawing.width/2, horseDrawing.height/2 + 50)

    text('...or paste someone else\'s horse:', -horseDrawing.width/2, horseDrawing.height/2 + 90)

    return

  }

  if (!inputHorse.value()) {

    textSize(20)

    textAlign(LEFT, BOTTOM)

    text('Share your horse in the comments:', -width/2 + 50, -height/2 + 45)

  }

  Matter.Engine.update(engine, 1000 / 60)

  noStroke()

  fill('#FCA3A3')

  for (const bg of bgs) {

    push()

    translate(bg.x, bg.y)

    rotate(bg.rotation)

    scale(bg.scale)

    if (bg.type === 'square') {

      rectMode(CENTER)

      rect(0, 0, 100, 100)

    } else {

      triangle(-20, 25, 8, -30, 36, 25);

    }

    pop()

  }

  if (random() < 0.01) {

    const r = random(20, 100)

    const circ = Matter.Bodies.circle(random(-width/2, width/2), -height/2, r, {

      mass: pow(r, 2) * 0.05,

      restitution: 0.4,

      frictionAir: 0,

      friction: 0,

      frictionStatic: 0,

      inertia: Infinity,

    })

    Matter.Body.setVelocity(circ, {

      x: random(-15, 15),

      y: random(10, 23),

    })

    circ.r = r

    Matter.World.add(engine.world, [circ])

    balls.push(circ)

  }

  noStroke()

  textureMode(NORMAL)

  texture(horseDrawing)

  beginShape(TRIANGLES)

  for (let t = 0; t < delaunay.triangles.length/3; t++) {

    for (let off = 0; off < 3; off++) {

      const idx = delaunay.triangles[t*3 + off]

      const [u, v] = pts[idx]

      const { x, y } = verts[idx].position

      vertex(x, y, 0, 1.1*(u - 0.5)+0.5, 1.1*(v - 0.5)+0.5)

    }

  }

  endShape()

  // noStroke()

  fill('#0D776D')

  strokeWeight(12)

  stroke(0)

  for (const ball of balls) {

    circle(ball.position.x, ball.position.y, ball.r * 2)

  }

  // stroke('red')

  // strokeWeight(2)

  // for (const spring of springs) {

  //  line(

  //    spring.bodyA.position.x,

  //    spring.bodyA.position.y,

  //    spring.bodyB.position.x,

  //    spring.bodyB.position.y,

  //  )

  // }

}

​

function triangulate(img) {

  const coords = []

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

    const x = floor(random(img.width))

    const y = floor(random(img.height))

    const a = img.pixels[4 * (y * img.width + x) + 3]

    if (a > 0) {

      coords.push([x/img.width, y/img.height])

    }

  }

  return [coords, Delaunator.from(coords)]

}

​

function edgesOfTriangle(t) { return [3 * t, 3 * t + 1, 3 * t + 2]; }

function triangleOfEdge(e)  { return Math.floor(e / 3); }

function nextHalfedge(e) { return (e % 3 === 2) ? e - 2 : e + 1; }

function prevHalfedge(e) { return (e % 3 === 0) ? e + 2 : e - 1; }

​

function forEachTriangleEdge(points, delaunay, callback) {

  for (let e = 0; e < delaunay.triangles.length; e++) {

    if (e > delaunay.halfedges[e]) {

      // const p = points[delaunay.triangles[e]];

      const p = delaunay.triangles[e]

      // const q = points[delaunay.triangles[nextHalfedge(e)]];

      const q = delaunay.triangles[nextHalfedge(e)]

      if (delaunay.halfedges[e] >= 0) {

        callback(e, p, q);

      }

    }

  }

}

​

function makePhysics(img) {

  engine = Matter.Engine.create()

  img.loadPixels()

  const res = triangulate(img)

  pts = res[0]

  delaunay = res[1]

  const side = 600

  verts = []

  for (let i = 0; i < pts.length; i++) {

    const x = pts[i][0] * side - side/2

    const y = pts[i][1] * side - side/2

    const vert = Matter.Bodies.circle(x, y, side/70, { inertia: Infinity })

    verts.push(vert)

  }

  Matter.World.add(engine.world, verts)

  springs = []

  forEachTriangleEdge(pts, delaunay, (_e, p, q) => {

    springs.push(Matter.Constraint.create({

      bodyA: verts[p],

      pointA: { x: 0, y: 0 },

      bodyB: verts[q],

      pointB: { x: 0, y: 0 },

      stiffness: 1,

      damping: 0.01,

    }))

  })

  Matter.World.add(engine.world, springs)

  ground = Matter.Bodies.rectangle(0, height / 2 + 30, width, 60, {

    isStatic: true,

  })

  wallLeft = Matter.Bodies.rectangle(-width/2 - 30, 0, 60, 3 * height, {

    isStatic: true,

  })

  wallRight = Matter.Bodies.rectangle(width/2 + 30, 0, 60, 3 * height, {

    isStatic: true,

  })

  Matter.World.add(engine.world, [ground, wallLeft, wallRight])

}

​