First commit

ee8dd835 · Aldo Gonzalez-Lorenzo · 16d2de8f · ee8dd835
Commit ee8dd835 authored 2 years ago by Aldo Gonzalez-Lorenzo
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Comptage manifestants</title>
+  <meta name="author" content="Aldo Gonzalez-Lorenzo">
+  <style>
+    #comptage {
+      cursor: crosshair;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
+</head>
+
+<body>
+  <div id="comptage"></div>
+  <p>
+    Time: <span id="time"></span>
+  </p>
+  <p>
+    <button id="rewind">Rewind</button>
+    <button id="pause">Pause</button>
+    <button id="play">Play</button>
+  </p>
+  <p>
+    Manifestants enregistres : <span id="manifestants">0</span><br>
+    <textarea rows="2" cols="100"></textarea> <button id="import">Import</button>
+  </p>
+  <script>
+    /**
+     * We make a list of people.
+     * Each person has several attributes: an id, an optional description, and a pair ofof time-space positions.
+     * We create one, advance in time, and finish it.
+     * I need a button for going one second before and one second later.
+     * Add a textfield to export or import the data.
+     * Count the people
+     */
+    let mode = 'start'
+    let people = []
+
+    const comptage = p => {
+      /* Global variables */
+      let video
+
+      p.setup = function () {
+        p.createCanvas(400, 400)
+        // p.noCanvas()
+
+        video = p.createVideo('2023-03-07_part58.mp4', () => {
+          video.volume(0)
+          video.play()
+          video.pause()
+          // set_video_height(600)
+          set_video_width(1400)
+          video.hide() // hides the html video loader
+        })
+      }
+
+      // Set the height of the video to a confortable size
+      set_video_height = function (h) {
+        video.size(h * (video.width / video.height), h)
+        p.resizeCanvas(video.width, video.height)
+      }
+
+      // Set the width of the video to a confortable size
+      set_video_width = function (w) {
+        video.size(w, w * (video.height / video.width))
+        p.resizeCanvas(video.width, video.height)
+      }
+
+      /**
+       * Update the canvas (this code is run in a loop)
+       */
+      p.draw = function () {
+        p.background(220)
+        let img = video.get()
+        p.image(img, 0, 0) // redraws the video frame by frame
+        draw_people()
+        document.querySelector('#time').textContent = `${p.nf(video.time(), 0, 2)} / ${video.duration()}`
+      }
+
+      draw_people = function () {
+        for (const person of people) {
+          if (person.start.t <= video.time() && video.time() <= person.end.t) {
+            p.push()
+            p.noFill()
+            p.stroke(255, 204, 0)
+            p.line(person.start.x * p.width, person.start.y * p.height, person.end.x * p.width, person.end.y * p.height)
+            const t0 = (video.time() - person.start.t) / (person.end.t - person.start.t)
+            p.circle(
+              p.lerp(person.start.x, person.end.x, t0) * p.width,
+              p.lerp(person.start.y, person.end.y, t0) * p.height,
+              10)
+            p.pop()
+          } else if (person.end.t === -1) {
+            p.push()
+            p.noStroke()
+            p.fill('rgba(255, 204, 0, 0.5)')
+            p.circle(person.start.x * p.width, person.start.y * p.height, 10)
+            p.pop()
+          }
+        }
+      }
+
+      p.mousePressed = function () {
+        if (!(0 <= p.mouseX && p.mouseX <= p.width && 0 <= p.mouseY && p.mouseY <= p.height)) {
+          return
+        }
+        if (mode === 'start') {
+          const person = {
+            start: {
+              t: video.time(),
+              x: p.mouseX/p.width,
+              y: p.mouseY/p.height
+            },
+            end: {
+              t: -1,
+              x: -1,
+              y: -1
+            },
+          }
+          people.push(person)
+          mode = 'end'
+        } else {
+          people[people.length - 1].end = {
+            t: video.time(),
+              x: p.mouseX/p.width,
+              y: p.mouseY/p.height
+          }
+          mode = 'start'
+          document.querySelector('#manifestants').textContent = people.length
+          document.querySelector('textarea').value = JSON.stringify(people)
+          // console.log(JSON.stringify(people))
+
+        }
+      }
+
+      p.keyPressed = function() {
+        if (p.keyCode === p.RIGHT_ARROW) {
+          p.forward()
+        } else if (p.keyCode === p.LEFT_ARROW) {
+          p.backward()
+        } else if (p.keyCode === p.DOWN_ARROW) {
+          p.pause()
+        }
+      }
+
+      p.forward = function () {
+        video.play()
+      }
+
+      p.backward = function () {
+        video.time(video.time() - 0.5)
+      }
+
+      p.pause = function () {
+        video.pause()
+      }
+    }
+
+    let compt = new p5(comptage, 'comptage')
+
+    document.querySelector('button#rewind').addEventListener('click', compt.backward)
+    document.querySelector('button#pause').addEventListener('click', compt.pause)
+    document.querySelector('button#play').addEventListener('click', compt.forward)
+    document.querySelector('button#import').addEventListener('click', (event) => {
+      people = JSON.parse(document.querySelector('textarea').value)
+      document.querySelector('#manifestants').textContent = people.length
+    })
+  </script>
+</body>
+
+</html>
\ No newline at end of file