Forem: Salar Izadi

Building a Jedi-Style Hand Gesture Interface with TensorFlow.js: Control Your Browser Without Touching Anything

Salar Izadi — Mon, 09 Feb 2026 21:20:20 +0000

Introduction: The Future of UI is Invisible

Imagine scrolling through a webpage by simply raising two fingers, dragging elements with a pinch, or resizing boxes with two hands like Tony Stark in his lab. No mouse. No keyboard. Just you and the camera.

In this tutorial, I'll show you how to build a production-ready hand gesture control system using TensorFlow.js and MediaPipe Hands that transforms any webcam into a precision input device.

🚀 Want to skip ahead? The complete source code, CSS styling, and full implementation details are available via download link at the end of this article.

What We're Building

A multi-modal gesture interface supporting:

Gesture	Action
☝️ Pinch (Index + Thumb)	Drag elements, click buttons
✌️ Peace Sign (2 fingers)	Lock & scroll containers
✊ Fist	Hold/long-press interactions
🤏 Two-hand Pinch	Resize elements from corners

The Tech Stack

// Core dependencies that make the magic happen
TensorFlow.js          // ML framework running in browser
MediaPipe Hands        // Google's hand landmark detection
Hand Pose Detection    // TensorFlow's high-level API wrapper

Why this stack?

Runs entirely client-side — no server needed, no privacy concerns
60 FPS performance on modern devices using WebGL acceleration
21 hand landmarks detected per hand (42 total for two-hand mode)

Architecture Overview

The system works in three layers:

1. Video Pipeline & Detection Loop

// Camera setup with optimized constraints
const stream = await navigator.mediaDevices.getUserMedia({
    video: { 
        width: 640, 
        height: 480, 
        facingMode: 'user'  // Front camera for hand tracking
    }
});

The detector runs on every animation frame, estimating hand keypoints in real-time. We mirror the X-axis so movements feel natural (like looking in a mirror).

2. Gesture Recognition Engine

The secret sauce is calculating relative distances between landmarks rather than absolute positions:

// Peace sign detection logic
const isPeaceSign = (keypoints) => {
    // Check if index & middle fingers are extended
    const indexExtended = distance(wrist, indexTip) > distance(wrist, indexPip);
    const middleExtended = distance(wrist, middleTip) > distance(wrist, middlePip);

    // Check if ring & pinky are curled
    const ringCurled = distance(wrist, ringTip) < distance(wrist, ringPip);
    const pinkyCurled = distance(wrist, pinkyTip) < distance(wrist, pinkyPip);

    return indexExtended && middleExtended && ringCurled && pinkyCurled;
};

This approach makes gestures lighting-independent and scale-invariant.

3. Interaction State Machine

The tricky part? Preventing gesture conflicts. We implement a lock-based priority system:

// Scroll lock mechanism - critical for UX
let scrollLocked     = false;
let scrollHandIndex  = null;
let scrollStartHandY = 0;

// When peace sign detected over scroll area:
// 1. Lock the cursor visually in place
// 2. Track Y-delta for scroll velocity  
// 3. Release when gesture changes

Without this, you'd accidentally drag elements while trying to scroll!

The "Jedi Scroll" Technique

My favorite feature: invisible scrolling. When you make a peace sign over a scrollable area:

Cursor visually locks in place (user feedback)
Hand vertical movement translates to scroll velocity
No cursor drift — the interaction feels anchored

// Map hand Y movement to scroll position
const deltaY         = scrollStartHandY - currentHandY;
const scrollSpeed    = 2;
scrollArea.scrollTop = startScrollTop + (deltaY * scrollSpeed);

Move hand up → scroll up. Move down → scroll down. Intuitive and precise.

Two-Hand Resize: The Power Move

For pro users, pinch with both hands on resize handles to scale elements proportionally:

// Calculate scale from hand distance ratio
const scale     = currentDistance / startDistance;
const newWidth  = startRect.width * scale;
const newHeight = startRect.height * scale;

// Center-based positioning keeps the box stable
const deltaX    = currentCenter.x - startCenter.x;

This uses multi-hand tracking — detecting which hand is which via handedness classification.

Performance Optimizations

WebGL backend for GPU acceleration
640×480 input resolution — sweet spot for speed vs accuracy
RequestAnimationFrame sync with display refresh
CSS transforms for cursor rendering (no layout thrashing)

Browser Support & Requirements

✅ Chrome/Edge/Firefox (WebGL 2.0)

✅ HTTPS required (camera permission)

⚠️ Mobile: Works but battery-intensive

Real-World Applications

This isn't just a demo. I've used this architecture for:

Kiosk interfaces (hygienic, touchless)
Presentation controllers (slide navigation)
Accessibility tools (motor impairment assistance)
Gaming interfaces (web-based gesture games)

What's Next?

The full implementation includes:

3D hand orientation for tilt-based controls
Gesture sequences (combo moves like "peace → pinch" for right-click)
Custom gesture training using Transfer Learning
Audio feedback for accessibility

Want the Complete Source Code?

I've packaged the full production code — including the CSS styling, error handling, and optimization tricks not shown here — along with a video tutorial walking through the MediaPipe configuration and debugging common tracking issues.

👉 Join my Telegram channel for the complete download

There, you'll also get weekly computer vision tutorials, pre-trained models, and early access to my next project: face mesh-based expression controls.

Discussion

Have you experimented with gesture interfaces? What gestures would you add to this system? Drop your ideas below — I'm particularly curious about eye-tracking hybrids and voice+gesture multimodal approaches.

#javascript #machinelearning #tensorflow #webdev #computervision #tutorial #frontend #interactive

How to Contribute to Pixalo — A Lightweight 2D Game Engine Built for Speed

Salar Izadi — Thu, 23 Oct 2025 23:47:26 +0000

Thank you for contributing to Pixalo!

This guide helps developers understand how to collaborate, structure changes, and submit pull requests properly.

🧭 General Principles

Pixalo is a lightweight and high-performance 2D game engine. Every line of code must be purposeful, clean, and efficient.
Collaboration should always be respectful and professional. Please use Issues and Discussions on GitHub for communication.
If you plan to introduce major architectural changes, open a discussion before making any pull request.

🔀 Branching & Contribution Flow

The main branch represents the stable release version.
Each developer must fork the repository and create a new branch named development in their fork.
All edits and new features should be implemented on the development branch.
Once ready, submit a Pull Request (PR) from your development branch to pixalo/main.
Direct commits or PRs to main are not accepted. Only reviewed and approved merges from development are allowed.

# 1. Fork the repository from GitHub (via web interface)

# 2. Clone your fork
git clone https://github.com/<your-username>/pixalo.git
cd pixalo

# 3. Add the original Pixalo repo as upstream
git remote add upstream https://github.com/pixalo/pixalo.git

# 4. Create and switch to your development branch
git checkout -b development

# 5. Make your changes, commit them
git add .
git commit -m "feat: improve camera performance"

# 6. Push your branch to your fork
git push origin development

# 7. Open a Pull Request from your fork's 'development' branch
#    → target: pixalo/main

🧩 Testing Changes

There are no npm-based test commands at this time.

Developers must verify their changes by running and testing the examples inside the examples/ folder.

Ensure that all example projects run correctly, frame rates remain stable, and no regressions are introduced.

📘 Documentation Structure

Documentation is versioned and organized as follows:

wiki/
  v1/
    *.md
    CHANGELOG.md
  v2/
    *.md
    CHANGELOG.md
  ...

While the project is in a specific major version (e.g., v1), only that version’s documentation may be modified.
All updates must be recorded in the corresponding CHANGELOG.md file (e.g., v1.1.0).
When a new major version is released (e.g., v2), a new folder structure will be created for it.

🧱 Code Style & Rules

The Pixalo development team is highly strict about code quality, readability, and optimization.

All code must:

Follow the same structural and documentation style as existing Pixalo source code.
Be grouped and labeled with clear comment blocks, for example:

/** ======== LOGS ======== */
log (...args) { }
info (...args) { }
warn (...args) { }
error (...args) { }
/** ======== END ======== */

These conventions are mandatory.

Any pull request that fails to follow them will be rejected.

🧠 Project Philosophy

Pixalo was built to be a fast, lightweight, and scalable 2D game engine.

Every contribution must serve that purpose — improving performance, structure, or developer experience.

🧾 Reporting Bugs & Requesting Features

Use Issues to report bugs — include your browser, OS, engine version, reproduction steps, and relevant console logs.
For new feature ideas, open an issue with the enhancement label and explain the motivation and potential API.
For general questions or coordination, use Discussions.

⚖️ Rights & Licensing

All contributors are part of the Pixalo Development Team.

Every code or documentation change you submit will be credited under your name in the project history.

The overall project ownership, branding, and core direction belong to the Pixalo team.

🎉 Final Words

Welcome to the hardworking and talented Pixalo Team!

Every commit, idea, and contribution moves this engine forward.

Code clean, test thoroughly, and keep Pixalo blazing fast 🚀

👉 Website: https://pixalo.xyz
👉 GitHub: https://github.com/pixalo/pixalo

Build a Physics-Based RagDoll with Pixalo Engine

Salar Izadi — Tue, 21 Oct 2025 16:47:34 +0000

In this tutorial, we'll walk through the creation of a simple physics-based doll using the Pixalo game engine. We will cover each part of the code step by step, explaining its purpose and functionality.

1. Importing Pixalo

First, we need to import the Pixalo engine into our project. This can be done through a CDN link. Here's how we do it:

import Pixalo from 'https://cdn.jsdelivr.net/gh/pixalo/pixalo/dist/pixalo.esm.js';

2. Initializing the Game

Next, we'll create a new instance of the Pixalo engine and set up our game canvas. We define the dimensions and background color, as well as the physics properties (in this case, gravity).

const game = new Pixalo('#canvas', {
    width: window.innerWidth,
    height: window.innerHeight,
    background: '#031C1B',
    physics: { gravity: { y: 800 } }
});
game.start();

#canvas: The ID of the HTML element where the game will be rendered.
width & height: Set to the window's dimensions.
background: The game background color.
gravity: Gravity is set to 800 units in the y-direction.

3. Creating a Static Ground

Now, let's create a static ground object that will serve as the base for our doll. This ground will be immovable.

game.append('ground', {
    x: 0,
    y: game.baseHeight - 40,
    width: game.baseWidth,
    height: 40,
    backgroundColor: '#268985',
    physics: { bodyType: 'static' }
});

We set its position, dimensions, and color, and define it as a static body using bodyType: 'static'.

4. Defining Body Part Dimensions

Next, we need to define the dimensions of the different body parts of our doll. This includes the head, torso, arms, and legs.

const HEAD_D = 44;  // head diameter
const TORSO_W = 35, TORSO_H = 70; // torso
const ARM_W = 45, ARM_H = 10; // upper arms
const LEG_W = 14, LEG_H = 65; // upper legs

These constants will help us position and size the body parts accurately.

5. Factory Function for Body Parts

We create a helper function called part to simplify creating draggable body parts.

function part(id, opts) {
    opts.draggable = true; // Pixalo flag
    return game.append(id, opts); // returns the sprite
}

This function sets the draggable property and appends a new part to the game.

6. Assembling the Doll

Now we can assemble the doll using the part function to create each body part. All parts will be positioned initially to look connected before physics kicks in.

const head = part('head', {
    shape: 'circle', width: HEAD_D, height: HEAD_D,
    backgroundColor: '#F3A71A',
    physics: { density: 1, friction: 0.3, restitution: 0.2 },
    x: (game.baseWidth - HEAD_D) / 2,
    y: 50,
    text: '> <\n_',             // Face
    lineHeight: 0.1
});

const torso = part('torso', {
    width: TORSO_W, height: TORSO_H,
    backgroundColor: '#268985',
    borderRadius: 6,
    physics: { density: 1, friction: 0.3, restitution: 0.1 },
    x: (game.baseWidth - TORSO_W) / 2,
    y: head.y + HEAD_D          // Top edge = bottom edge of head
});

const armL = part('armL', {
    width: ARM_W, height: ARM_H,
    backgroundColor: '#F3A71A',
    borderRadius: 6,
    physics: { density: 0.8, friction: 0.3 },
    x: torso.x - ARM_W,        // Right edge = left edge of trunk
    y: torso.y + 25
});

const armR = part('armR', {
    width: ARM_W, height: ARM_H,
    backgroundColor: '#F3A71A',
    borderRadius: 6,
    physics: { density: 0.8, friction: 0.3 },
    x: torso.x + TORSO_W,      // Left edge = right edge of trunk
    y: torso.y + 25
});

const legL = part('legL', {
    width: LEG_W, height: LEG_H,
    backgroundColor: '#268985',
    borderRadius: 6,
    physics: { density: 1, friction: 0.3 },
    x: torso.x,
    y: torso.y + TORSO_H
});

const legR = part('legR', {
    width: LEG_W, height: LEG_H,
    backgroundColor: '#268985',
    borderRadius: 6,
    physics: { density: 1, friction: 0.3 },
    x: torso.x + TORSO_W - LEG_W,
    y: torso.y + TORSO_H
});

Each body part is created with specific colors, physics properties (density, friction, and restitution), and initial positions calculated to center them horizontally.

7. Setting Joint Stiffness

Next, we establish a joint stiffness variable to control the flexibility of the doll.

const stiffness = 6; // 0-100 scale

This variable will affect the joints between body parts.

8. Helper Function for Joints

We will create revolute joints that connect two body parts together this way:

function join(entityA, entityB, anchorX, anchorY, lowerAngle = -45, upperAngle = 45) {
    const config = {
        type: 'revolute',
        anchor: { x: anchorX, y: anchorY },
        collideConnected: false
    };

    // Configure limits and motor based on stiffness
    if (stiffness > 5) {
        config.limits = { lower: lowerAngle, upper: upperAngle };
    }

    if (stiffness > 2) {
        config.motor = { speed: 0, torque: stiffness * 0.6 };
    }

    return game.physics.joint(entityA, entityB, config);
}

This function sets up the constraints and motors for the joints based on the stiffness level.

9. Wiring the Skeleton

In this step, we use the join function to connect all body parts together once the physics bodies are ready.

game.one('update', () => {
    join(head, torso, head.x + HEAD_D / 2, head.y + HEAD_D, -25, 25);
    join(torso, armL, torso.x, torso.y + 25, -70, 40);
    join(torso, armR, torso.x + TORSO_W, torso.y + 25, -40, 70);
    join(torso, legL, torso.x + LEG_W / 2, torso.y + TORSO_H, -30, 20);
    join(torso, legR, torso.x + TORSO_W - LEG_W / 2, torso.y + TORSO_H, -20, 30);
});

10. Adding Interactivity

Let's add keyboard controls so we can reset the doll or toggle gravity.

game.on('keydown', (e) => {
    switch (e.key) {
        case 'r':
            // Reset doll position
            head.style({ x: (game.baseWidth - HEAD_D) / 2, y: 50 });
            torso.style({ x: (game.baseWidth - TORSO_W) / 2, y: head.y + HEAD_D });
            break;
        case 'g':
            // Toggle gravity
            const currentGravity = game.physics.world.GetGravity();
            if (currentGravity.y === 0) {
                game.physics.setGravity(0, 800);
            } else {
                game.physics.setGravity(0, 0);
            }
            break;
    }
});

The keydown event allows us to reset the doll's position and control gravity dynamically.

11. Displaying Instructions

Lastly, we will add a set of instructions for the player.

game.append('instructions', {
    x: 100, y: 20,
    text: 'Drag body parts around!\nPress R to reset\nPress G to toggle gravity',
    fontSize: 16,
    color: '#FFF'
});

Conclusion

Congratulations! You've successfully created a simple physics-based doll using the Pixalo engine. This project illustrates how to work with physics, joints, and interactivity. Feel free to modify the stiffness or play around with the body's parts to create your own unique characters!

👉 Website: https://pixalo.xyz
👉 GitHub: https://github.com/pixalo/pixalo

Happy coding!

How to Make Tilemap with Pixalo Engine

Salar Izadi — Sat, 18 Oct 2025 15:53:59 +0000

Hello, dev community! I'm excited to introduce you to Pixalo, a versatile and easy-to-use game engine designed for 2D game development. Whether you're a seasoned game developer or just starting out, Pixalo provides the tools you need to create impressive games without the hassle.

If you would like to read about Pixalo, click here.

Website: pixalo.xyz
GitHub: github.com/pixalo/pixalo

Getting Started with Pixalo

Pixalo is built to be user-friendly and efficient. Below, I will show you how to create a simple top-down game using our engine.

Installation

You can import Pixalo conveniently using a CDN link in your HTML or JavaScript file as follows:

import Pixalo from 'https://cdn.jsdelivr.net/gh/pixalo/pixalo@master/dist/pixalo.esm.js';

Setting Up the Game Canvas

First, let's initialize a new Pixalo instance and create a game canvas:

const px = new Pixalo('#canvas', {
    width: innerWidth,
    height: innerHeight,
    camera: {
        zoom: 2.5,
        bounds: {
            x: 0, y: 0,
            width: innerWidth,
            height: innerHeight,
        }
    },
    collision: true,
});

px.start();

Loading Assets

Next, we need to load some assets for our game. Let's prepare the tilemap and character images using loadAsset method:

await px.wait(
    px.loadAsset('tiles', 'tiles', 'https://raw.githubusercontent.com/pixalo/pixalo/refs/heads/main/examples/assets/tiles/tiles.png', {
        tileSize: 64, tiles: {
            grass   : [0, 0],
            dirt    : [1, 0],
            tree    : [2, 0],
            bush    : [4, 0],
            headTree: [3, 0]
        }
    }),
    px.loadAsset('image', 'character', 'https://raw.githubusercontent.com/pixalo/pixalo/refs/heads/main/examples/assets/character.png')
);

Creating the Tile Map

Now, we can create a tile map for our top-down game. This includes defining the layers and tiles:

px.tileMap.create('top-down', {
    layers: {
        bg: px.tileMap.fillBoxWith('G'),
        lvl: [
            '                          ',
            'TTTTTTTTTTTTTTTTTTTTTTTTTT',
            'T             B          T',
            'T  T   B    T     B   T  T',
            'T    B        B          T',
            'T       B         B    T T',
            'T T           T          T',
            'T         B         T    T',
            'T     T     B   T        T',
            'T  B     B         T   B T',
            'T                        T',
            'TTTTTTTTTTTTTTTTTTTTTTTTTT'
        ]
    },
    tiles: {
        G: 'tiles.grass',
        B: {
            tile: 'tiles.bush',
            collision: {
                type: 'solid',
                bounds: [1, 4, 26, 24]
            }
        },
        T: {
            tile: 'tiles.tree',
            parts: [
                {
                    tile: 'tiles.headTree',
                    offsetY: -1
                }
            ],
            collision: {
                type: 'solid',
                bounds: [2, -9, 25, 51]
            }
        }
    }
});

Rendering the Tile Map

Once the tile map is set up, we can render it:

px.tileMap.render('top-down');

Adding a Player

Let’s add a player to the game and set up controls for movement:

const player = px.append('player', {
    x: 80,
    y: 100,
    width: 24,
    height: 30,
    image: 'character',
    collision: true,
    data: {
        speed: 1.5
    }
});

// Camera follows player
px.camera.follow(player);

px.on('update', () => {
    const speedPlayer = player.data('speed');
    let dx = 0, dy = 0;

    if (px.isKeyPressed('left', 'a'))
        dx = -speedPlayer;
    if (px.isKeyPressed('right', 'd'))
        dx = speedPlayer;
    if (px.isKeyPressed('up', 'w'))
        dy = -speedPlayer;
    if (px.isKeyPressed('down', 's'))
        dy = speedPlayer;

    player.move(dx, dy).style('flipX', dx < 0);
});

Conclusion

Pixalo aims to simplify 2D game development without sacrificing power or flexibility. I invite you to try out the engine and create your own games! You can check the website for more documentation and examples.

Feel free to clone the repository on GitHub and contribute to the project. I look forward to hearing your thoughts and seeing the amazing games you create with Pixalo!

Happy coding!

🎮 Introducing Pixalo — A Lightweight, Developer-Friendly 2D Game Engine for JavaScript

Salar Izadi — Thu, 16 Oct 2025 22:44:21 +0000

Building 2D games in JavaScript should be simple — not a constant struggle with complex APIs and endless setup.
That’s exactly why I built Pixalo.

💡 Why I Created Pixalo

I wanted a way to make 2D game development as easy as writing HTML, CSS, or even jQuery — where you can create, animate, and control elements effortlessly without writing dozens of lines of code for a single sprite.

While many JavaScript game engines exist, they often require heavy configurations or WebGL setup.
Pixalo skips the complexity while staying fast, lightweight, and flexible — using optimized rendering techniques and even OffscreenCanvas Workers to maintain excellent FPS, even with many objects on screen.

🚀 What Pixalo Can Do

Pixalo comes packed with everything you need to build smooth, feature-rich 2D games:

✨ Features

🎯 High-performance 2D rendering system
🎚️ Quality control and scaling
📱️ Mobile friendly
🎵 Audio management with spatial controls
📹 Camera system with zoom, rotation, and cinematic presets
💥 Collision detection system
⚙️ Physics support powered by the legendary Box2D
🏃 Advanced animation support with keyframes
🎨 Background layer management
📐 Grid system with customizable properties
🔄 Sprite sheet and asset management
🗺️ Tile map system for level design
🎆 Particle emitter system
📸 Screenshot functionality
🖱️ Support for touch, click, wheel, and mouse events
⌨️ Support for physical and logical keyboard events
🐞 Built-in debugging tools

It’s not just a game engine — you can even use it as a Canvas Editor, drawing and animating anything you want right on the canvas.

🧩 Getting Started

You can use Pixalo either via ESM import or CDN — no build tools required.

import Pixalo from 'https://cdn.jsdelivr.net/gh/pixalo/pixalo@master/dist/pixalo.esm.js';

const px = new Pixalo('#canvas', { 
    width: innerWidth,
    height: innerHeight
});
px.start();

🟦 Drawing Shapes

Creating shapes in Pixalo is ridiculously simple.

Draw a rectangle:

px.append('myRectangle', {
    width: 100,
    height: 100,
    fill: 'blue',
    borderRadius: 6
});

Draw a circle:

px.append('myCircle', {
    shape: 'circle',
    width: 100,
    height: 100,
    fill: 'red'
});

Handle click events:

px.find('myRectangle').on('click', e => {
    px.append('text', {
         x: px.baseWidth / 2,
         y: px.baseHeight / 2,
         text: 'You clicked on the rectangle',
         font: '16px Arial'
    });
});

🔺 Polygons Made Easy

Even complex shapes like polygons are straightforward to draw:

const size = 100;
px.append('polygon', {
    width: size,
    height: size,
    x: (px.baseWidth  - size) / 2,
    y: (px.baseHeight - size) / 2,
    fill: '#268984',
    shape: 'polygon',
    points: [
        {x: -size / 2, y: -size / 2},
        {x: size / 2, y: -size / 2},
        {x: size / 2, y: 0},
        {x: 0, y: size / 2},
        {x: -size / 2, y: 0}
    ]
});

🕹️ Example: Player Movement

Here’s a simple player movement example using keyboard controls:

import Pixalo from 'https://cdn.jsdelivr.net/gh/pixalo/pixalo@master/dist/pixalo.esm.js';

const game = new Pixalo('#canvas', {
    width : window.innerWidth,
    height: window.innerHeight
});

await game.loadAsset('image', 'player', 'https://raw.githubusercontent.com/pixalo/pixalo/refs/heads/main/examples/assets/character.png');

game.start();

const player = game.append('player', {
    width: 100,
    height: 100,
    x: 10,
    y: 10,
    image: 'player'
});

game.on('update', deltaTime => {
    const speed = 150;
    const step = speed * (deltaTime / 1000);
    let dx = 0, dy = 0;
    const leftKey = game.isKeyPressed('left', 'a');

    if (leftKey) dx -= step;
    if (game.isKeyPressed('right', 'd')) dx += step;
    if (game.isKeyPressed('up', 'w')) dy -= step;
    if (game.isKeyPressed('down', 's')) dy += step;

    player.style('flipX', leftKey).move(dx, dy);
});

🌐 Try Pixalo Yourself

Pixalo is still evolving — WebGL support is coming soon — but it’s already stable, fast, and fun to use.
Whether you’re prototyping or building a full indie game, Pixalo aims to make your workflow smooth and intuitive.

👉 Website: https://pixalo.xyz
👉 GitHub: https://github.com/pixalo/pixalo

💬 Final Thoughts

Pixalo was built with one simple goal:

To make 2D game development feel natural, expressive, and enjoyable — not tedious.

If you love making games in JavaScript and want a fresh, developer-friendly engine, give Pixalo a try and share your feedback. Every contribution and idea helps shape its future.