p5 example

LingDong- · May 4, 2020 · 03c7e20 · 03c7e20
1 parent 73217a5
commit 03c7e20
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/js/p5/index.html b/js/p5/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
+    <meta charset="utf-8" />
+
+  </head>
+  <body>
+    <script src="https://cdn.jsdelivr.net/gh/LingDong-/skeleton-tracing/js/trace_skeleton.vanilla.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/js/p5/sketch.js b/js/p5/sketch.js
@@ -0,0 +1,52 @@
+
+var WIDTH = 250;
+var HEIGHT = 200;
+
+var img;
+var canv;
+var pg;
+
+function preload(){
+  img = loadImage("https://raw.githubusercontent.com/LingDong-/skeleton-tracing/master/test_images/horse_r.png");
+}
+
+function setup() {
+  pixelDensity(1); // preventing p5 from automatically switching to 2x resolution for retina screens
+
+  createCanvas(WIDTH,HEIGHT);
+
+  pg = createGraphics(WIDTH,HEIGHT);
+  pg.background(0);
+  pg.image(img,0,0);
+}
+
+function draw() {
+
+  // use mouse to draw
+  pg.stroke(255);
+  pg.strokeWeight(10);
+  pg.line(pmouseX,pmouseY,mouseX,mouseY);
+
+  // trace the skeleton
+  var {polylines,rects} = TraceSkeleton.fromCanvas(pg.canvas);
+
+  image(pg,0,0);
+
+
+  // visualize
+
+  noFill();
+  // draw the rects
+  stroke(128,20);
+  for (var i = 0; i < rects.length; i++){
+    rect(rects[i][0],rects[i][1],rects[i][2],rects[i][3])
+  }
+  // draw the polylines
+  stroke(255,0,0);
+  for (var i = 0; i < polylines.length; i++){
+    for (var j = 1; j < polylines[i].length; j++){
+      line(polylines[i][j-1][0],polylines[i][j-1][1],polylines[i][j][0],polylines[i][j][1])
+    }
+  }
+
+}