From b69b33ee59c84889b616c11baf9bab460e2bc763 Mon Sep 17 00:00:00 2001
From: didier amyot <didier.amyot@gmail.com>
Date: Wed, 17 Jan 2024 06:01:44 -0500
Subject: [PATCH] added exploratory work for the frontend

---
 .gitignore          |  1 +
 frontend/index.html | 64 +++++++++++++++++++++++++++++++++++++++++++++
 frontend/main.js    | 62 +++++++++++++++++++++++++++++++++++++++++++
 main.py             |  5 ++++
 4 files changed, 132 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 frontend/index.html
 create mode 100644 frontend/main.js
 create mode 100644 main.py

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0a764a4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+env
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..beb99a8
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Animation</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="description" content="" />
+  <link rel="icon" href="favicon.png">
+  <script src="main.js" type="module"></script>
+</head>
+<body>
+  <h1>Hello, world!</h1>
+  <svg height="300" width="1000" style="border: solid;">
+    
+    <rect x="0" y="157.5" width="15" height="15" 
+          style="fill: red;" id="rect-1"></rect>
+    
+    <rect x="0" y="157.5" width="15" height="15" 
+          style="fill: blue;" id="rect-2"></rect>
+
+          <rect x="0" y="157.5" width="15" height="15" 
+          style="fill: yellow;" id="rect-3"></rect>
+      
+          <rect x="0" y="157.5" width="15" height="15" 
+                style="fill: pink;" id="rect-4"></rect>
+
+                <rect x="0" y="157.5" width="15" height="15" 
+    style="fill: purple;" id="rect-5"></rect>
+
+    <rect x="0" y="157.5" width="15" height="15" 
+          style="fill: black;" id="rect-6"></rect>
+
+
+          <rect x="0" y="157.5" width="15" height="15" 
+          style="stroke: red; fill-opacity: 0;" id="rect-7"></rect>
+    
+    <rect x="0" y="157.5" width="15" height="15" 
+          style="stroke: blue; fill-opacity: 0;" id="rect-8"></rect>
+
+          <rect x="0" y="157.5" width="15" height="15" 
+          style="stroke: yellow; fill-opacity: 0;" id="rect-9"></rect>
+      
+          <rect x="0" y="157.5" width="15" height="15" 
+                style="stroke: pink; fill-opacity: 0;" id="rect-10"></rect>
+
+                <rect x="0" y="157.5" width="15" height="15" 
+    style="stroke: purple; fill-opacity: 0;" id="rect-11"></rect>
+
+    <rect x="0" y="157.5" width="15" height="15" 
+          style="stroke: black; fill-opacity: 0;" id="rect-12"></rect>
+
+  </svg>
+
+  <div>
+    <button id="play">play</button> <br>
+    <button id="pause">pause</button>
+    <br>
+    <input type="number" id="seek-value">
+    <button id="seek">seek</button>
+
+  </div>
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/main.js b/frontend/main.js
new file mode 100644
index 0000000..a33786e
--- /dev/null
+++ b/frontend/main.js
@@ -0,0 +1,62 @@
+import anime from "https://esm.sh/animejs@3.2.2";
+
+const second = 1000;
+
+function gaussianRandom(mean=0, stdev=1) {
+    const u = 1 - Math.random(); // Converting [0,1) to (0,1]
+    const v = Math.random();
+    const z = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
+    // Transform to the desired mean and standard deviation:
+    return z * stdev + mean;
+}
+
+
+function* brownian(n){
+    let x = 0;
+    for(let i = 0; i < n; i ++){
+        x += gaussianRandom(0, 10);
+        console.log(x);
+        yield x;
+    }
+}
+
+function* pseudoBrownian(n, limit){
+    let x = 0;
+    for(let i = 0; i < n; i ++){
+        let delta = gaussianRandom(0, 10);
+        if(Math.abs(x + delta) > limit){
+            delta = -1 * delta
+        }
+        x += delta;
+        yield x;
+    }
+}
+
+function* keyFrames(duration, framePerSeconds){
+    const deltaX = 1000 / (duration * framePerSeconds);
+    for(const deltaY of pseudoBrownian(duration * framePerSeconds, 100)){
+        yield {translateX: `+=${deltaX}`, translateY: deltaY};
+    }
+}
+
+const duration = 60;
+const timeline = anime.timeline({
+    duration: duration * second,
+    autoplay: false,
+    easing: 'linear'});
+
+for(let i = 1; i <= 12; i++){
+    timeline.add({
+        targets: `#rect-${i}`,
+        keyframes: Array.from(keyFrames(duration, 30)),
+      }, 0)
+}
+
+
+document.querySelector('#play').onclick = timeline.play;
+document.querySelector('#pause').onclick = timeline.pause;
+document.querySelector('#seek').onclick = function(){
+    const seekVal = Number.parseFloat(second * document.querySelector('#seek-value').value);
+    timeline.pause();
+    timeline.seek(seekVal);
+}
diff --git a/main.py b/main.py
new file mode 100644
index 0000000..f24420b
--- /dev/null
+++ b/main.py
@@ -0,0 +1,5 @@
+import cv2 as cv
+img = cv.imread("/Users/didier/ahuntsic/cours-420-301-ah/cours/images/json/001.jpg")
+
+cv.imshow("Display window", img)
+k = cv.waitKey(0) # Wait for a keystroke in the window