Falling objects

<Pile> drops count copies of its children from above the visible area over duration seconds. They collide with each other and the screen edges, roll and heap up at the bottom, and never leave the screen. Each kind of object is drawn in one call, however many fall. Once everything rests the scene stops rendering and onSettled fires.

import { Apple } from "@apricot/assets";
import { Pile, Scene } from "@apricot/react";

export function AppleDrop() {
  return (
    <Scene style={{ flex: 1 }} look="soft" camera={{ position: [0, 0, 20], fov: 30 }}>
      <Pile count={45} duration={5} scale={[0.58, 0.68]}>
        <Apple />
      </Pile>
    </Scene>
  );
}

How it works#

• Area. By default the pile fills what the camera sees, depth (0.5) units deep on each side of z = 0. It follows resizes, so after a rotation the pile re-forms for the new screen. Pass bounds={{ min: [x, y, z], max: [x, y, z] }} to use a fixed box instead; its floor is min[1].
• Children are templates. Each child is one kind of object, not drawn itself. Their own position, rotation and scale are ignored: every copy gets a random place, tumble and size. Only meshes work (shapes, <Mesh>, <Apple>, <Coin>, <Peach>); a <Group> or <Model> is skipped with a warning.
• Collisions treat every object as a sphere. Its radius is the mesh's userData.radius if set (the fruit assets set it), or else its geometry's bounding sphere.
• Size. scale is a random range relative to each child's own size (default [0.9, 1.1]). With the camera at [0, 0, 20] and fov 30°, the screen is about 10 units tall, so [0.58, 0.68] makes a 1-unit apple about a sixteenth of the screen height.

Mixing kinds#

Give several children; each copy picks one of them at random.

import { Apple, Peach } from "@apricot/assets";
import { Pile } from "@apricot/react";

export const Fruit = () => (
  <Pile count={60} duration={4}>
    <Apple />
    <Apple color="#7bc043" />
    <Peach />
  </Pile>
);

Over a screen#

Make the scene transparent and let touches through, so the screen below stays usable while objects fall on it. The falling-pile recipe wraps this as a component.

import { Coin } from "@apricot/assets";
import { Pile, Scene } from "@apricot/react";
import type { ReactNode } from "react";
import { StyleSheet, View } from "react-native";

export function Celebrate({ children }: { children: ReactNode }) {
  return (
    <View style={{ flex: 1 }}>
      {children}
      <Scene transparent pointerEvents="none" style={StyleSheet.absoluteFill} camera={{ position: [0, 0, 20], fov: 30 }}>
        <Pile count={40} duration={3} scale={[0.6, 0.7]}>
          <Coin />
        </Pile>
      </Scene>
    </View>
  );
}

Replaying and removing#

The drop starts when the pile mounts and restarts when an option changes (options are compared by value, so inline arrays do not restart it). To replay it, change its key; to remove it, unmount it.

import { Apple } from "@apricot/assets";
import { Pile, Scene } from "@apricot/react";
import { useState } from "react";
import { Button, StyleSheet, View } from "react-native";

export function Replay() {
  const [round, setRound] = useState(0);
  const [done, setDone] = useState(false);
  return (
    <View style={{ flex: 1 }}>
      <Scene style={StyleSheet.absoluteFill} camera={{ position: [0, 0, 20], fov: 30 }}>
        <Pile key={round} count={30} duration={3} onSettled={() => setDone(true)}>
          <Apple />
        </Pile>
      </Scene>
      {done && (
        <Button
          title="Again"
          onPress={() => {
            setDone(false);
            setRound((r) => r + 1);
          }}
        />
      )}
    </View>
  );
}

Options#

physics tunes the solver:

Cost#

The solver is plain JavaScript on the JS thread. A few dozen objects are cheap; a few hundred keep the JS thread busy until they settle. Prefer fewer, larger objects.

Related#

• falling-pile recipe.
• Motion reference.
• Assets: Apple, Peach, Coin.