Interactive Effects

Create visual expressions that respond to mouse and keyboard interactions.

Interaction Basics

Mouse Operations

Live Editor

function Canvas() {
        const iMovement = uniform([0, 0]) // movement delta in px
        const fragment = () => {
                // Rounded rectangle SDF
                const sdf = Fn(([xy]) => {
                        let ret = vec2(0).max(xy).length()
                        ret = max(xy.x, xy.y).min(0).add(ret).sub(0.025)
                        return smoothstep(0.002, 0, ret)
                })
                // Convert movement
                let xy = iMovement.div(1024).add(0.5)
                xy = uv.sub(xy).mul(2).abs().sub(0.25)
                const color = vec3(0.9, 0.4, 0.6).mul(sdf(xy))
                return vec4(color, 1)
        }
        // Use rege's useHover
        const ge = useHover(() => {
                const { event, movement } = ge
                event.preventDefault()
                iMovement.value = [movement[0], -movement[1]]
        })
        const gl = useGL({
                width: 256,
                height: 256,
                isWebGL: true,
                frag: fragment(),
                mount: () => ge.ref(gl.el),
        })
        return <canvas ref={gl.ref} />
}

Result

Loading...

Drag Operations

Live Editor

function Canvas() {
        const iMovement = uniform([0, 0]) // movement delta in px
        const fragment = () => {
                // Rounded rectangle SDF
                const sdf = Fn(([xy]) => {
                        let ret = vec2(0).max(xy).length()
                        ret = max(xy.x, xy.y).min(0).add(ret).sub(0.025)
                        return smoothstep(0.002, 0, ret)
                })
                // Convert movement
                let xy = iMovement.div(256).add(0.5)
                xy = uv.sub(xy).mul(2).abs().sub(0.25)
                const color = vec3(0.9, 0.4, 0.6).mul(sdf(xy))
                return vec4(color, 1)
        }
        // Use rege's useD
        const ge = useDrag(() => {
                const { event, isDragging, movement } = ge
                event.preventDefault()
                iMovement.value = [movement[0], -movement[1]]
        })
        const gl = useGL({
                width: 256,
                height: 256,
                isWebGL: true,
                frag: fragment(),
                mount: () => ge.ref(gl.el),
        })
        return <canvas ref={gl.ref} />
}

Result

Loading...

Pinch Operations

Live Editor

function Canvas() {
        const iMovement = uniform([0, 0]) // movement delta in px
        const fragment = () => {
                // Rounded rectangle SDF
                const sdf = Fn(([xy]) => {
                        let ret = vec2(0).max(xy).length()
                        ret = max(xy.x, xy.y).min(0).add(ret).sub(0.025)
                        return smoothstep(0.002, 0, ret)
                })
                // Convert movement
                let xy = iMovement.div(256).add(0.5)
                xy = uv.sub(0.5).mul(xy).mul(4).abs().sub(0.25)
                const color = vec3(0.9, 0.4, 0.6).mul(sdf(xy))
                return vec4(color, 1)
        }
        // Use rege's usePinch
        const ge = usePinch(() => {
                const { event, isPinching, movement } = ge
                event.preventDefault()
                iMovement.value = [-movement[0], movement[1]]
        })
        const gl = useGL({
                width: 256,
                height: 256,
                isWebGL: true,
                frag: fragment(),
                mount: () => ge.ref(gl.el),
        })
        return <canvas ref={gl.ref} />
}

Result

Loading...

Next Steps

Once you've mastered interactive expressions, you have completed the fundamentals of visual programming!

What you learned in this tutorial:

• ✅ Basic Interactions: Mouse, keyboard, drag operations
• ✅ Advanced Operations: Touch, device sensors, particle systems
• ✅ Implementation Patterns: Integrated management with useGL mount events

In the next chapter, you'll learn about expressions in 3D space and how to manipulate three-dimensional objects.