Understanding and Implementing Bézier Curves in Android: Quadratic and Cubic Simulations

Overview

A Bézier curve can transform any arbitrary curve into an exact mathematical formula. The pen tool in many drawing applications is a typical use case; an online simulator is available at http://bezier.method.ac/ .

Key Terminology

Data points: the start and end points of a path.

Control points: they determine the curvature of the path. Depending on the number of control points, Bézier curves are classified as first‑order (no control points), second‑order (one control point), third‑order (two control points), etc.

For a deeper theoretical background, see the Wikipedia article: https://en.wikipedia.org/wiki/B%C3%A9zier_curve .

Bézier Curve Simulation on Android

Android developers usually work with quadratic (second‑order) and cubic (third‑order) Bézier curves; the SDK provides APIs for both. Higher‑order curves are typically decomposed into multiple lower‑order segments (degree reduction).

A dynamic demonstration can be found at http://myst729.github.io/bezier-curve/ .

Quadratic (Second‑Order) Simulation

The Android APIs are quadTo() and rQuadTo() (absolute vs. relative coordinates). The final visual result is shown below:

A quadratic curve uses two data points and one control point; the control point can be moved via onTouchEvent .

Cubic (Third‑Order) Simulation

The corresponding Android APIs are cubicTo() and rCubicTo() . Building on the quadratic example, a single additional control point creates the cubic curve. The effect is shown below:

Key code snippets are provided in the original article (see GitHub repository).

Web‑Based Simulation

An interactive web page ( http://cubic-bezier.com/ ) lets you drag the curve to obtain the coordinates of the two control points, with start points at (0,0) and (1,1).

Applications of Bézier Curves

Smooth Drawing

When drawing paths (e.g., on a handwriting pad), using Path.lineTo creates sharp corners. Replacing straight segments with quadratic Bézier curves yields much smoother results. Example code:

mPath.quadTo(preX, preY, cX, cY);

Comparisons between straight‑line and Bézier‑smoothed drawings demonstrate the reduction of jagged edges.

Curve Deformation

By adjusting Bézier control points, a path can be deformed, enabling animations such as morphing a circle into a heart or a star.

Wave Effect

Wave patterns can be generated with Bézier curves; the animation is driven by simple displacement rather than complex trigonometric functions. Developers can explore trigonometric visualizations at https://www.desmos.com/calculator .

Path Animation

Bézier curves serve as motion trajectories for smooth object movement. The animation uses a custom TypeEvaluator that computes points on the curve based on the parameter t . The evaluator implementation is provided in the source code.

Advanced Topics

De Casteljau Algorithm

Computing any point on a Bézier curve relies on the De Casteljau algorithm. A detailed tutorial can be found at http://www.cs.mtu.edu/~shene/…/de-casteljau.html . An app demonstrating multi‑order Bézier curves is available on GitHub: https://github.com/venshine/BezierMaker .

Bezier Curve Fitting

MetaBall effects and other animations often require fitting Bézier curves to shapes. Simple rectangular fitting works for small circles but fails for larger radii, necessitating tangent‑based fitting. The tangent method ensures the control‑point‑to‑circle connection follows the circle’s tangent, yielding consistent results regardless of size.

Circle Approximation

Approximating a circle with Bézier curves is non‑trivial; established formulas are documented at http://spencermortensen.com/articles/bezier-circle/ and StackOverflow discussion http://stackoverflow.com/… .

Source Code

All example code referenced in this article is available on GitHub:

https://github.com/xuyisheng/BezierArt