Face Sensing – Simple Face Detection in Scratch

😊 Face Sensing – Simple Face Detection in Scratch #

The Face Sensing extension brings easy-to-use face detection into Scratch.
It lets your sprites react to face position, tilt, and size – all in real time, right in your browser, with no setup required.
Perfect for beginners and quick interactive projects. 🎭

---

🌟 Overview #

• Detect 1 Face: Simple single-face detection for streamlined projects.
• 8 Key Points: Track essential facial features (eyes, nose, mouth, ears, and more).
• Control Sprites: Make sprites move to face parts, tilt with your head, or resize based on face size.
• Face Events: Trigger actions when a face is detected, tilted, or when sprites touch facial features.
• Simple & Fast: Lightweight detection optimized for classroom use and quick prototyping.
• Browser-Based: Works entirely in your browser – no external services needed.

---

✨ Key Features #

• Single-face tracking with 8 essential keypoints.
• Easy-to-use blocks for common face interactions.
• Real-time tilt detection (left/right).
• Face size measurement for responsive animations.
• Works fully in-browser – safe and private.
• Great for beginners learning AI concepts.

---

🚀 How to Use #

1. Go to: pishi.ai/play
2. Open the Extensions section.
3. Select the Face Sensing extension.
4. Allow camera access if prompted and check that your video preview appears.
5. Once the extension loads successfully, automatic face detection starts at approximately 15 frames per second.
6. Now you can use the command blocks to make sprites follow your face, mirror your movements, or react when you tilt your head!

Tips

• Good lighting helps the model detect your face better.
• Face the camera directly for best accuracy.
• The extension works great on most devices, including older computers and Chromebooks.
• Try combining face detection with other Scratch features for creative projects!

---

🧱 Blocks and Functions #

 

📍 Command Blocks #

go to [PART]
Moves the sprite to a specific facial feature.
[PART]: choose from the dropdown (nose, mouth, left eye, right eye, between eyes, left ear, right ear, or top of head).
The sprite will follow that part as your face moves on screen.

 

point in direction of face tilt
Sets the sprite’s direction to match your face tilt angle.
Perfect for creating mirroring effects or head-controlled steering.

 

set size to face size
Adjusts the sprite’s size to match the detected face size.
Get closer to the camera to make sprites bigger, move away to make them smaller.

---

👋 Event Blocks (Hat Blocks) #

when face tilts [DIRECTION]
Triggers when your face tilts left or right.
[DIRECTION]: choose “left” or “right”.
Tilt must exceed 10 degrees from center to trigger.

 

when this sprite touches a [PART]
Triggers when the sprite touches a specific facial feature.
[PART]: choose any of the 8 facial keypoints.
Great for creating interactive “catch the feature” games.

 

when a face is detected
Triggers when a face appears in the camera view.
Perfect for starting animations or showing welcome messages.

---

📊 Reporter Blocks #

a face is detected?
Boolean reporter that returns true when a face is detected, false otherwise.
Use in conditional statements to control program flow.

 

face tilt
Reports the face tilt angle in degrees (0–180).
90 = facing straight, less than 90 = tilted left, greater than 90 = tilted right.

 

face size
Reports the detected face height in pixels.
Larger values mean the face is closer to the camera or is a larger face.

---

😊 Available Face Parts #

The Face Sensing extension can detect 8 key facial features:

• nose – tip of the nose
• mouth – center of the mouth
• left eye – center of the left eye
• right eye – center of the right eye
• between eyes – midpoint between both eyes
• left ear – position of the left ear
• right ear – position of the right ear
• top of head – estimated top of the head (calculated from eye and mouth positions)

Note: “Left” and “right” refer to your left and right when looking at the screen (mirrored view).

---

🎓 Educational Uses #

• Introduction to AI: Show students how computers can recognize and track faces in real time.
• Coordinate Systems: Teach X/Y positioning by linking face parts to sprite locations.
• Event-Driven Programming: Practice using hat blocks that respond to face detection events.
• Accessibility Projects: Create hands-free controllers for students who benefit from alternative input methods.
• Creative Expression: Build interactive art that responds to user presence and movement.

---

🎮 Example Projects #

• Face Follower: Make a sprite follow your nose around the screen – great first project!
• Tilt Racer: Tilt your head left or right to steer a car through obstacles.
• Size Mirror: Create a sprite that grows and shrinks as you move closer or farther from the camera.
• Face-Activated Game: Start gameplay only when a face is detected – perfect for multiplayer games.
• Catch the Feature: Control a sprite and try to touch different face parts for points.
• Copycat Animation: Make a character tilt and move along with your face for mirroring effects.
• Magic Mirror: Combine face parts and costume changes to create augmented reality effects.

🧩 Try it yourself: pishi.ai/play

 

---

🔧 Tips and Troubleshooting #

 

🎯 Face Sensing Specific Tips #

• No face detected? Make sure your face is well-lit and fully visible to the camera. Avoid sitting with bright windows behind you.
• Tracking jittery? Try to keep your head relatively still. The extension has built-in smoothing, but sudden movements may cause brief instability.
• Face parts not where expected? Remember the camera view is mirrored – your left appears on the right side of the screen.
• Tilt not triggering? You need to tilt at least 10 degrees left or right from center for the hat block to activate.
• Face size seems wrong? Face size is measured in screen pixels. The value will be larger when you’re closer to the camera.
• Extension slow to load? The first load downloads the AI model. Subsequent uses will be faster thanks to browser caching.
• Sprite not following smoothly? Use “glide” blocks instead of instant “go to” commands for smoother motion.
• Multiple people on camera? The extension tracks only one face – typically the largest or most centered face in view.

---

🔒 Privacy and Safety #

• All face sensing runs locally in your browser.
• No images or video are uploaded or stored.
• The extension only detects simple face movement and does not identify people.
• Ask a teacher or parent before using the camera.
• You can turn the camera off anytime using other camera-based extensions (such as Video Sensing or FaceMesh).

---

🧪 Technical Info #

• Model: MediaPipe Face Detector
• Framework: TensorFlow.js with @tensorflow-models/face-detection – runs fully in-browser
• Faces: 1 face maximum
• Keypoints: 8 facial landmarks (nose, mouth, eyes, ears, between eyes, top of head)
• Detection Rate: ~15 frames per second (adjusts based on system performance)
• Smoothing: Built-in 5-frame smoothing to prevent false positives
• Tilt Threshold: 10 degrees deviation from center
• Coordinates: Stage-centered pixels (X right, Y up)
• Video Format: 480×360 analysis resolution
• Requires: Modern browser with WebGL support and camera permissions

---

🔗 Related Extensions #

• 😎 FaceMesh – advanced 478-point face landmark detection for detailed expression tracking
• 🖐️ Hand Pose – detect and track hand positions and gestures
• 🕺 Bolsa Net – full-body pose detection and tracking
• 🏫 Máquina de enseñanza de Google – train and use custom AI models
• 🖼️ Image Trainer – build your own image recognition models

---

↔ Swipe left or right to view full table on mobile

 

💡 When to Choose Face Sensing #

Face Sensing is perfect when you want simple, fast face detection without complexity.

• Getting started with AI: Easy blocks make it perfect for beginners and classroom introductions.
• Quick prototypes: Fast setup for testing face-controlled interaction ideas.
• Basic interactions: Following faces, reacting to tilts, and size-based effects are built right in.
• Older devices: Lightweight detection runs smoothly even on Chromebooks and older computers.
• Simple projects: When you don’t need detailed landmark tracking, Face Sensing is faster and easier.

In short:
Face Sensing is ideal for simple, beginner-friendly projects and learning the basics of face detection.
FaceMesh is for creators who need detailed facial landmark tracking and advanced expression analysis.

---

📚 Learn More #

• AI Extensions Help at pishi.ai
• MediaPipe Face Detector Documentation
• TensorFlow.js Face Detection Model
• Scratch Ideas

---