Skip to content

Latest commit

 

History

History
83 lines (83 loc) · 4.46 KB

fhend.md

File metadata and controls

83 lines (83 loc) · 4.46 KB
<title>FHEND - adamgulde.github.io</title> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d/control_utils_3d.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js" crossorigin="anonymous"></script>

On-site Fitness Program

To Home To Fitness Main Page

FHEND: Fitness High END

Experimental fitness program built for high-end devices to run in the browser.

Pose reference image

<script src="" async defer></script> <script type="module"> let video = document.querySelector("#video"); const videoElement = document.querySelector("#video"); const canvasElement = document.getElementsByClassName('output_canvas')[0]; const canvasCtx = canvasElement.getContext('2d'); const landmarkContainer = document.getElementsByClassName('landmark-grid-container')[0]; const grid = new LandmarkGrid(landmarkContainer); function onResults(results) { if (!results.poseLandmarks) { grid.updateLandmarks([]); return; } canvasCtx.save(); canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height); // canvasCtx.drawImage(results.segmentationMask, 0, 0, // canvasElement.width, canvasElement.height); // Only overwrite existing pixels. canvasCtx.globalCompositeOperation = 'source-in'; canvasCtx.fillStyle = '#00FF00'; canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height); // Only overwrite missing pixels. canvasCtx.globalCompositeOperation = 'destination-atop'; canvasCtx.drawImage( results.image, 0, 0, canvasElement.width, canvasElement.height); canvasCtx.globalCompositeOperation = 'source-over'; drawConnectors(canvasCtx, results.poseLandmarks, POSE_CONNECTIONS, {color: '#00FF00', lineWidth: 4}); drawLandmarks(canvasCtx, results.poseLandmarks, {color: '#FF0000', lineWidth: 2}); canvasCtx.restore(); grid.updateLandmarks(results.poseWorldLandmarks); } const pose = new Pose({locateFile: (file) => { return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`; }}); pose.setOptions({ modelComplexity: 1, smoothLandmarks: true, enableSegmentation: true, smoothSegmentation: true, minDetectionConfidence: 0.5, minTrackingConfidence: 0.5 }); pose.onResults(onResults); const camera = new Camera(videoElement, { onFrame: async () => { await pose.send({image: videoElement}); }, width: 320, height: 240 }); camera.start(); </script>