Spaces:
Runtime error
Runtime error
update
Browse files- public/index.html +22 -2
- public/sketch.js +9 -4
public/index.html
CHANGED
|
@@ -1,12 +1,32 @@
|
|
| 1 |
<html>
|
| 2 |
<head>
|
|
|
|
| 3 |
<script src="https://cdn.jsdelivr.net/npm/p5@1.8.0/lib/p5.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
|
| 5 |
</head>
|
| 6 |
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
<main>
|
| 8 |
-
<h1>Hola</h1>
|
| 9 |
-
<script src="sketch.js"></script>
|
| 10 |
</main>
|
|
|
|
| 11 |
</body>
|
|
|
|
| 12 |
</html>
|
|
|
|
| 1 |
<html>
|
| 2 |
<head>
|
| 3 |
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
|
| 4 |
<script src="https://cdn.jsdelivr.net/npm/p5@1.8.0/lib/p5.js"></script>
|
| 5 |
+
<style>
|
| 6 |
+
body {
|
| 7 |
+
background: #0b0f19;
|
| 8 |
+
color: white;
|
| 9 |
+
}
|
| 10 |
+
</style>
|
| 11 |
|
| 12 |
</head>
|
| 13 |
<body>
|
| 14 |
+
<header>
|
| 15 |
+
<h1>Docker Opencv APP</h1>
|
| 16 |
+
<p>A App developed for apply IA in streaming video in JavaScript</p>
|
| 17 |
+
<p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
|
| 18 |
+
<p>Right now, only apply a halftone over the webcam video</p>
|
| 19 |
+
</header>
|
| 20 |
+
|
| 21 |
+
<script src="sketch.js"></script>
|
| 22 |
+
<p>Blur Size: <input type="range" id="blurSize" value="30"></p>
|
| 23 |
+
<p>Low Threshold: <input type="range" id="lowThreshold" value="15"></p>
|
| 24 |
+
<p>High Threshold: <input type="range" id="highThreshold" value="25"></p>
|
| 25 |
+
|
| 26 |
+
<div>
|
| 27 |
<main>
|
|
|
|
|
|
|
| 28 |
</main>
|
| 29 |
+
</div>
|
| 30 |
</body>
|
| 31 |
+
|
| 32 |
</html>
|
public/sketch.js
CHANGED
|
@@ -12,12 +12,15 @@ function setup() {
|
|
| 12 |
|
| 13 |
function draw() {
|
| 14 |
background(0);
|
| 15 |
-
|
| 16 |
-
let
|
|
|
|
| 17 |
|
| 18 |
video.loadPixels();
|
| 19 |
-
|
| 20 |
-
|
|
|
|
|
|
|
| 21 |
let i = (y * video.width + x) * 4;
|
| 22 |
|
| 23 |
let r = video.pixels[i];
|
|
@@ -36,6 +39,8 @@ function draw() {
|
|
| 36 |
diameter,
|
| 37 |
diameter
|
| 38 |
);
|
|
|
|
| 39 |
}
|
|
|
|
| 40 |
}
|
| 41 |
}
|
|
|
|
| 12 |
|
| 13 |
function draw() {
|
| 14 |
background(0);
|
| 15 |
+
|
| 16 |
+
let xw = constrain(mouseX, 0, width);
|
| 17 |
+
let stepSize = floor(map(xw, 0, width, 4, 10));
|
| 18 |
|
| 19 |
video.loadPixels();
|
| 20 |
+
|
| 21 |
+
for (let y = 0; y < video.height; y += stepSize) {
|
| 22 |
+
for (let x = 0; x < video.width; x += stepSize) {
|
| 23 |
+
|
| 24 |
let i = (y * video.width + x) * 4;
|
| 25 |
|
| 26 |
let r = video.pixels[i];
|
|
|
|
| 39 |
diameter,
|
| 40 |
diameter
|
| 41 |
);
|
| 42 |
+
|
| 43 |
}
|
| 44 |
+
par = !par;
|
| 45 |
}
|
| 46 |
}
|