multi-touch for Android Processing

100%

multi-touch for Android Processing

✓ Published0🌍 Public

Last edited Mar 7, 2010

Created on Mar 7, 2010

This example demonstrates two-finger pinch-to-zoom and panning of a nested set of square outlines on an Android device. It uses the `MultiTouchController` library, which processes `MotionEvent` data to detect drags and stretches, and the sketch maintains a world offset and scale via `translate` and `scale`. A `TouchHelper` implements the controller’s callback interface, updating the translation and scale values based on touch positions, while the `draw()` function renders the scaled geometry with Processing for Android.

AI-generated description

Similar vizzes

Loading thumbnail…

Multitouch

This multitouch visualization maps each finger contact to a colored circle on an SVG canvas, with touches tracked by identifier. The example uses D3’s `d3.touches` API to capture touch events and `d3.event` to prevent default scrolling. Newly detected touches enter with an elastic scaling animation via `transition.attr("r", …)`, while removed touches shrink and exit. Circle positions update directly from touch coordinates, and color assignment uses `d3.scale.category10`. The code relies on touch-supporting browsers, such as iOS Safari, to dispatch the appropriate events.

Mmbostock

65% match

Loading thumbnail…

Multitouch Drag

Twenty colored circles move freely over a full-window SVG canvas. Each circle is draggable with a multitouch pointer, and its position updates live to follow the finger. The code uses `d3.behavior.drag` with `dragstart`, `drag`, and `dragend` handlers to manage interaction, while `d3.select` and `.transition().ease("elastic")` animate the radius from 32 to 48 pixels on grab and back on release. Random starting coordinates come from `d3.range(20).map()`.

Mmbostock

60% match

Loading thumbnail…

Multitouch Drag II

Twenty colored divs drift across the browser window, each rendered as a circle via CSS border-radius and positioned using a CSS transform translate. Dragging a circle with a mouse or touch lifts it visually: it expands, gains a soft box-shadow, and uses an elastic ease during the size transition. The implementation uses D3 v3’s `d3.behavior.drag` for pointer handling, `d3.scale.category10` for colors, and `d3.interpolate` to animate box-shadow between drag states. Data is randomly generated from 20 coordinate pairs.

Mmbostock

59% match

Loading thumbnail…

Zooming and Panning

Four multicolored circles arranged in a square pattern sit at the center of an SVG canvas. The visualization demonstrates zooming and panning through d3.behavior.zoom, which captures mouse wheel drags and touch gestures. Users can scale the view between 1× and 10× magnification and pan freely by dragging. The circles’ positions are defined in data arrays and rendered as SVG circle elements with a translate transform applied to the parent group during zoom events.

IIgathi

57% match

Loading thumbnail…

d3.js: mouse drag a la iphone: decceleration

This example demonstrates an interactive image viewer that supports panning, zooming, centering, and resetting using mouse drags, scrollwheel, and keyboard shortcuts. It implements a swipe gesture with deceleration, where releasing the mouse during a drag continues the image’s momentum. The interface also displays a cycling tip-of-the-day overlay after five seconds of inactivity, which fades in and out using D3 transitions. The code relies on `d3.behavior.drag`, `d3.timer`, and `d3.json` to load the configuration, while rendering a large external JPEG image inside a clipped container.

GGerHobbelt

57% match

Loading thumbnail…

Zoom + Pan

This example demonstrates interactive zooming and panning on a simple coordinate grid with axes, controlled both by mouse gestures and on-screen buttons. The visualization uses d3.behavior.zoom to link the scale domains to user input, with the axes redrawn on each zoom event. Button clicks trigger animated transitions that adjust the zoom scale or translate the view, recalculating the center point in data space to maintain focus. The rendering uses SVG with d3.v3, and the code explicitly handles coordinate conversion between screen and data space via the zoom object's scale and translate properties.

663anp3ca

56% match

Loading thumbnail…

Drag & Zoom

This example combines `d3.drag` and `d3.zoom` on a Canvas to allow both panning the view and moving individual points. Clicking and dragging on the background pans the zoomable world, while dragging on a circle moves that circle in world coordinates. The code explicitly converts between pointer coordinates and world coordinates using the zoom transform’s `invertX`/`invertY` and `applyX`/`applyY` methods. It renders 2,000 points generated by a phyllotaxis pattern, drawn as a single Canvas path with `arc` calls.

Mmbostock

56% match

Loading thumbnail…

Drag & Zoom II

This example demonstrates a zoomable SVG canvas containing two thousand circles arranged in a phyllotaxis pattern, where users can click and drag on the background to pan the view or drag individual circles to reposition them. The visualization combines d3-drag and d3-zoom, using the `d3.zoomIdentity` transform to update the group’s `transform` attribute during zooming, while the drag handler updates each circle’s `cx` and `cy` attributes directly. Rendering relies on SVG’s built-in hit-testing and coordinate transformation, avoiding the need for manual redraws or complex event logic.

Mmbostock

54% match