link to FWCV

Author: collidingScopes

README.md

@@ -2,11 +2,10 @@
 
 A threejs / WebGL / MediaPipe-powered interactive demo that allows you to control create and move 3D shapes using hand gestures in real-time.
 
-<img src="demo.png">
+[Video](https://youtu.be/oE3a0ghsrBk?si=UCcnjHjpWj21bBA0) | [Live Demo](https://collidingscopes.github.io/shape-creator-tutorial/) | [More Code & Tutorials](https://www.funwithcomputervision.com/)
 
-## Demo
+<img src="demo.png">
 
-Try the live demo: [https://collidingscopes.github.io/shape-creator-tutorial/](https://collidingscopes.github.io/shape-creator-tutorial/)
 
 ## Requirements
 
@@ -45,6 +44,11 @@ MIT License
 
 ## Related Projects
 
+I've released several computer vision projects (with code + tutorials) here:
+[Fun With Computer Vision](https://www.funwithcomputervision.com/)
+
+You can purchase lifetime access and receive the full project files and tutorials. I'm adding more content regularly :)
+
 You might also like some of my other open source projects:
 
 - [Threejs hand tracking tutorial](https://collidingScopes.github.io/threejs-handtracking-101) - Basic hand tracking setup with threejs and MediaPipe computer vision

index.html

@@ -32,14 +32,22 @@
   <canvas id="canvas"></canvas>
   <div id="three-canvas"></div>
   <img id="recycle-bin" src="recyclebin.png" alt="Recycle Bin" />
-  <div id="instructions">
+  <div id="instructions" class="text-box">
     Bring hands close and pinch to create a shape<br>
      > Move hands apart to make the shape larger<br>
     Hover over a shape / pinch to move it<br>
     Move a shape into the recycle bin to delete it
   </div>
-  <span id="links-para"><a href="https://x.com/measure_plan" target="_blank">Twitter</a> | <a href="https://www.instagram.com/stereo.drift/" target="_blank">Instagram</a> | <a href="https://github.com/collidingScopes/shape-creator-tutorial" target="_blank">Code</a></span>
-  <span id="coffee-link"><a href="https://buymeacoffee.com/stereodrift" target="_blank">Support my free tutorials & code ❤️</a></span>
+
+  <div id="social-links" class="text-box">
+      <a href="https://www.x.com/measure_plan/" target="_blank">Twitter</a><br>
+      <a href="https://www.instagram.com/stereo.drift/" target="_blank">Instagram</a><br>
+      <a href="https://www.youtube.com/@funwithcomputervision" target="_blank">Youtube</a>
+  </div>
+  <div id="logo-container" class="text-box">
+      <span id="logo">🪬</span><br>
+      <a href="https://www.funwithcomputervision.com/" target="_blank">code & tutorials here</a>
+  </div>
 
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>

styles.css

@@ -32,13 +32,14 @@ body, html {
   position: absolute;
   top: 5px;
   left: 5px;
-  color: white;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 10px 15px;
+  text-align: left;
+  /* color: white; */
+  /* background: rgba(0, 0, 0, 0.5); */
+  /* padding: 10px 15px; */
   /* border-radius: 10px; */
-  font-family: sans-serif;
-  font-size: 14px;
-  z-index: 30;
+  /* font-family: sans-serif; */
+  /* font-size: 14px; */
+  /* z-index: 30; */
 }
 
 #links-para{
@@ -63,4 +64,42 @@ a {
   font-size: 16px;
   background-color: rgba(255, 255, 255, 0.5);
   padding: 10px;
+}
+
+.text-box {
+    padding: 8px 15px;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
+    border-radius: 4px;
+    font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
+    border: 2px solid black;
+    box-shadow: 3px 3px 0px black;
+    font-size: clamp(13px, 2vw, 15px);
+    text-align: center;
+    z-index: 200;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out, box-shadow 0.2s ease;
+}
+
+
+#social-links {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+}
+
+#logo-container {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+#video-link {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+#logo {
+    font-size: 2em;
 }