Tidy up examples

mounts/zoperepo/__root__/p5_playground/custom_js/__source__.js

@@ -2,6 +2,7 @@ var myCodeMirror
 var oScript
 var oScriptText
 var select_template
+var example_template
 var DATA
 var sketch
 var stage
@@ -14,6 +15,15 @@ $(document).on("choreo-select-load", function(event) {
     })
 })
 
+$(document).on("example-select-load", function(event) {
+    $.getJSON("get_examples", function(data) {
+        console.log(data)
+        let select_html = example_template(data)
+        $("#example_chooser").html(select_html)
+    })
+})
+
+
 $(document).keydown(function (e) {
     // CTRL+R - run code
     if (e.keyCode == 82 && event.ctrlKey && !event.shiftKey) {
@@ -50,6 +60,14 @@ $(function() {
         }
     )
 
+    $.get(
+        "example_select_pt",
+        function(data) {
+            example_template = Handlebars.compile(data)
+            $(document).trigger("example-select-load")
+        }
+    )
+
     myCodeMirror = CodeMirror(
         $("#editor")[0],
         {

mounts/zoperepo/__root__/p5_playground/example_select_pt/__meta__

@@ -0,0 +1,10 @@
+[
+    ('owner', (['acl_users'], 'dockerzope')),
+    ('props', [
+        [('id', 'content_type'), ('type', 'string'), ('value', 'text/html')],
+        [('id', 'expand'), ('type', 'boolean'), ('value', 0)],
+        [('id', 'output_encoding'), ('type', 'string'), ('value', 'utf-8')],
+    ]),
+    ('title', ''),
+    ('type', 'Page Template'),
+]

mounts/zoperepo/__root__/p5_playground/example_select_pt/__source-utf8__.html

@@ -0,0 +1,3 @@
+{{#each examples}}
+<option value="{{this.example_id}}">{{this.example_title}}</option>
+{{/each}}

mounts/zoperepo/__root__/p5_playground/examples/__meta__

@@ -0,0 +1,4 @@
+[
+    ('title', ''),
+    ('type', 'Folder'),
+]

mounts/zoperepo/__root__/p5_playground/examples/cubes/__meta__

@@ -0,0 +1,7 @@
+[
+    ('props', [
+        [('id', 'content_type'), ('type', 'string'), ('value', 'text/javascript')],
+    ]),
+    ('title', 'Hannover Workshop Cube example'),
+    ('type', 'File'),
+]

mounts/zoperepo/__root__/p5_playground/examples/cubes/__source__.js

@@ -0,0 +1,141 @@
+// p5js 3d cube example
+
+// rework of stickman example into 3d cubes, created on Interfaces workshop
+// on 2023-06-24 at Kunstverein Hannover
+
+// Settings
+var FPS = 100
+var SCENE_WIDTH = 500
+var SCENE_HEIGHT = 500
+
+// derived from
+// https://github.com/google/mediapipe/blob/master/docs/solutions/pose.md
+// we map our joints against connected joints via indexes to draw lines from it
+// feel free to mess around with this mapping to create interesting results,
+// this basically represents the stickman, maybe u want something else?
+var line_map = {
+  0 : [1, 4],
+  1 : [2],
+  2 : [3],
+  3 : [7],
+  4 : [5],
+  5 : [6],
+  6 : [8],
+  9 : [10],
+  11: [12, 13, 23],
+  12: [14, 24],
+  13: [15],
+  14: [16],
+  15: [17, 19, 21],
+  16: [18, 20, 22],
+  17: [19],
+  18: [20],
+  23: [24, 25],
+  24: [26],
+  25: [27],
+  26: [28],
+  27: [29, 31],
+  28: [30, 32],
+}
+
+// basic function to find a joint by index from given frame
+// use this as a template to create a function to return joints u desire to use
+function find_by_bpindex(frame, bpindex, joint_type) {
+  for (let joint_index in frame) {
+    let joint = frame[joint_index]
+    if ((joint.index == bpindex) && (joint.type == joint_type)) {
+      return joint
+    }
+  }
+  //console.log("Warning! No matching joint found!")
+}
+
+// make sure the following line remains unchanged!
+sketch = function(p) {
+
+  // basic loop index to loop over DATA in draw() method
+  var index = 0;
+
+  p.setup = function() {
+    p.createCanvas(SCENE_WIDTH, SCENE_HEIGHT, p.WEBGL)
+    p.background('white')
+    p.frameRate(FPS)
+  }
+
+  p.draw = function() {
+
+    let myscale = 4
+
+    // fetch current data_chunk aka frame
+    let data_chunk = DATA[index]
+
+    let nose = find_by_bpindex(data_chunk, 0, "body")
+
+    if (nose) {
+        p.camera(SCENE_WIDTH * myscale, SCENE_HEIGHT * myscale, 1000, nose.x, nose.y, nose.z);
+    }
+    //p.orbitControl();
+
+    // early exit data check
+    if (!data_chunk || data_chunk.keypoints) {
+      //console.log("Incompatible / broken data, aborting ...")
+      //console.log("This sketch is only compatible to BlazePose framewise scans")
+      //console.log("Will not work on tensorflowJS records!")
+      p.noLoop()
+      return
+    }
+
+    // loop to create stickman body from line_map
+    for (let first_bpindex in line_map) {
+      let point_list = line_map[first_bpindex]
+      for (let pindex in point_list) {
+        let second_bpindex = point_list[pindex]
+        let first_point = find_by_bpindex(data_chunk, first_bpindex, "body")
+        let second_point = find_by_bpindex(data_chunk, second_bpindex, "body")
+
+        // make sure we've found useful data, skip if not found
+        if (!first_point || !second_point) {
+          continue
+        }
+
+        // make sure to multiply normalized coordinates to get correct coordinates
+        let x1 = first_point.x * SCENE_WIDTH * myscale
+        let x2 = second_point.x * SCENE_WIDTH * myscale
+        let y1 = first_point.y * SCENE_HEIGHT * myscale
+        let y2 = second_point.y * SCENE_HEIGHT* myscale
+
+        let z1 = first_point.z * SCENE_WIDTH * myscale
+        let z2 = second_point.z * SCENE_WIDTH * myscale
+
+        p.push()
+        p.translate(x1, y1, z1)
+        p.rotateX(((x2 - x1) / SCENE_WIDTH) * 90)
+        p.rotateY(((y2 - y1) / SCENE_HEIGHT) * 90)
+        p.box()
+        p.pop()
+
+        p.push()
+        p.translate(x2, y2, z2)
+        p.rotateX(((x2 - x1) / SCENE_WIDTH) * -90)
+        p.rotateY(((y2 - y1) / SCENE_HEIGHT) * 90)
+        p.box()
+        p.pop()
+
+      }
+    }
+
+    // loop over DATA via index variable
+    if (index > DATA.length) {
+      // no more DATA left, stop draw()-Loop
+      p.noLoop()
+    } else {
+      // increment index for next run of draw() to create next frame
+      index++
+    }
+
+  }
+
+};
+
+// make sure the following line remains unchanged!
+stage = new p5(sketch, 'p5_stage')

mounts/zoperepo/__root__/p5_playground/examples/perlin_replacement/__meta__

@@ -0,0 +1,7 @@
+[
+    ('props', [
+        [('id', 'content_type'), ('type', 'string'), ('value', 'text/javascript')],
+    ]),
+    ('title', 'Perlin noise replacement'),
+    ('type', 'File'),
+]

mounts/zoperepo/__root__/p5_playground/examples/perlin_replacement/__source__.js

@@ -0,0 +1,172 @@
+// Perlin noise replacement example
+
+// Slightly changed version of:
+// https://github.com/kgolid/hedgehog/blob/master/sketch2.js
+
+// Intended to sketch how to replace perlin noise values
+// with choreo data
+
+// simple function to fetch points from choreo record by name
+// use this as a template to create a function to return joints u desire to use
+function find_by_name(frame, name) {
+    for (let joint_index in frame) {
+        let joint = frame[joint_index]
+        if (joint.name == name) {
+            return joint
+        }
+    }
+}
+
+sketch = function(p) {
+
+    // basic loop index to loop over DATA in draw() method 
+    let index = 0;
+
+    let width = 1000;
+    let height = 1000;
+    let offset = -100;
+    let circular_shape = true;
+
+    let flow_cell_size = 3;
+    let number_of_layers = 1;
+
+    let vertical_partitions = 1;
+    let horizontal_partitions = 1;
+
+    let vertical_shift = 200;
+    let horizontal_shift = 400;
+
+    let noise_size = 0.0008;
+    let noise_radius = 0.01;
+
+    let flow_width = (width + offset * 2) / flow_cell_size;
+    let flow_height = (height + offset * 2) / flow_cell_size;
+
+    let flow_grid = [];
+
+    let data_chunk;
+
+    p.setup = function() {
+        p.createCanvas(width, height, p.SVG);
+        p.smooth();
+        p.noLoop();
+
+        p.stroke(255, 40);
+        p.strokeWeight(1);
+    };
+
+    p.draw = function() {
+
+        p.background('#222');
+        p.translate(-offset, -offset);
+
+        data_chunk = DATA[index]
+
+        // early exit data check
+        if (!data_chunk || data_chunk.keypoints) {
+            //console.log("Incompatible / broken data, aborting ...")
+            //console.log("This sketch is only compatible to BlazePose framewise scans")
+            //console.log("Will not work on tensorflowJS records!")
+            p.noLoop()
+            return
+        }
+
+        for (var i = 0; i < number_of_layers; i++) {
+            init_flow();
+            display_flow(i);
+        }
+
+        // loop over DATA via index variable
+        if (index > DATA.length) {
+            p.noLoop()
+        } else {
+            index++
+        }
+
+    };
+
+    function init_flow() {
+      flow_grid = [];
+      for (let i = 0; i < flow_height; i++) {
+        let row = [];
+        for (let j = 0; j < flow_width; j++) {
+          row.push(
+            calculate_flow(
+              (j + vertical_shift * p.floor((vertical_partitions * j) / flow_height)) *
+                noise_size,
+              (i + horizontal_shift * p.floor((horizontal_partitions * i) / flow_width)) *
+                noise_size,
+              noise_radius
+            )
+          );
+        }
+        flow_grid.push(row);
+      }
+    }
+
+    function calculate_flow(x, y, r) {
+      let mean_arrow = p.createVector(0, 0);
+      let radial_samples = 3;
+      for (var i = 0; i < radial_samples; i++) {
+        let angle = p.random(p.PI);
+        let pos1 = p.createVector(x + p.cos(angle) * r, y + p.sin(angle) * r);
+        let pos2 = p.createVector(x + p.cos(angle + p.PI) * r, y + p.sin(angle + p.PI) * r);
+
+        // HACK START
+
+        // Main difference to original:
+        // Instead of picking values from perlin noise we use the x-position
+        // of LEFT_SHOULDER and LEFT_ELBOW from our choreo record
+
+        //let val1 = p.noise(noise_offset_x + pos1.x, noise_offset_y + pos1.y);
+        //let val2 = p.noise(noise_offset_x + pos2.x, noise_offset_y + pos2.y);
+
+        let elem1 = find_by_name(data_chunk, "LEFT_SHOULDER")
+        let elem2 = find_by_name(data_chunk, "LEFT_ELBOW")
+
+        let val1 = elem1.x
+        let val2 = elem2.x;
+
+        // HACK END
+
+        let hilo = p5.Vector.sub(pos1, pos2)
+          .normalize()
+          .mult(val1 - val2);
+
+        mean_arrow.add(hilo);
+      }
+      mean_arrow.div(radial_samples);
+      mean_arrow.rotate(p.PI / 2);
+      return mean_arrow;
+    }
+
+    function display_flow(col) {
+      for (let i = 0; i < flow_grid.length; i++) {
+        for (let j = 0; j < flow_grid[i].length; j++) {
+          if (
+            !circular_shape ||
+            inside_radius(
+              i - flow_grid.length / 2,
+              j - flow_grid[i].length / 2,
+              400 / flow_cell_size
+            )
+          ) {
+            p.line(
+              j * flow_cell_size,
+              i * flow_cell_size,
+              j * flow_cell_size + flow_grid[i][j].x * flow_cell_size * 2500,
+              i * flow_cell_size + flow_grid[i][j].y * flow_cell_size * 2500
+            );
+          }
+        }
+      }
+    }
+
+    function inside_radius(x, y, r) {
+      return p.sqrt(p.pow(x, 2) + p.pow(y, 2)) < r;
+    }
+
+};
+
+// make sure the following line remains unchanged!
+stage = new p5(sketch, 'p5_stage')

mounts/zoperepo/__root__/p5_playground/examples/r1b2/__meta__

@@ -0,0 +1,7 @@
+[
+    ('props', [
+        [('id', 'content_type'), ('type', 'string'), ('value', 'text/javascript')],
+    ]),
+    ('title', 'r1b2 example'),
+    ('type', 'File'),
+]