This experiment was created to try out a few different techniques in a low-risk environment. Seeds makes use of bezier curves, parallax effects, and atypical inputs.

The graphics in Seeds are all drawn using bezier curves. Curves are more imperfect and organic than straight lines or circular arcs, so they mimic the actual shape of plants more closely. Furthermore, animating the four different points that make up each curve can result in more satisfying and complex movement than a simple A to B animation, such as that of a line. In Seeds, I animate the control points using a different timing function than the endpoints of the curves, which makes the stems of the plants seem to unfurl as they grow.

As the camera moves, the plants in Seeds appear to move in 3D. This isn't done using proper 3D, but rather a technique inspired by how parallax scrolling works.

Unlike typical parallax scrolling, the "layers" in this case are actually the points (and control points) of the bezier curves that make up the plants. This allows the curves to appear connected despite spanning multiple layers.

On most computers the input for Seeds is rather ordinary: move the cursor. But on mobile devices it gets a little more interesting: you tilt the device to control the camera. In order to track this, I had to make use of the Device Orientation event.

For a simple camera like the one in this app, all we need is two of those values. By using the gamma and beta, we can mirror the input of the x and y of the cursor, respectively.

In addition to the techniques above, I decided to add in the ability to drag the plant to deform it. So through clicking or touching and dragging different parts of the plant, you can move them, even while it's growing.