Get Started Components Styling Theming Math & Science

Science

Model Lab

Pick any model from the science engine, move the sliders and watch it change live. Physics (Newton, pendulum, spring, orbit, incline, collision, projectile, fluid flow, waves), chemistry (atoms, molecules), biology (DNA, cell, population growth) and math (functions, lines, trigonometry, surfaces, quadratics) all come from one catalog.

@indoku/science decides which models exist and which knobs they have (catalog.list()), and computes every frame (catalog.build()). ModelLab only draws the controls and the scene, so a new model in the engine shows up here with no UI change.

Markdown

Import

tsx

import { ModelLab } from "@indoku/ui"import { catalog } from "@indoku/science"<ModelLab catalog={catalog} />

Examples

Every model

All categories. Switch the tab, pick a model, drag a slider.

Pick a shape, its size and rotation, and optionally spin / orbit / oscillate / pulse it.

Shape

Size X

Size Y

Size Z

Rotate X (°)

Rotate Y (°)

Rotate Z (°)

Spin axis

Spin speed (rev/s)

Motion

Motion amount

Color

Wireframe Wireframe

Volume 2 u³

0.00 / 6.67 s

Volume: 2 u³

tsx

function LabAll() {  return <ModelLab catalog={catalog} renderLatex={renderLatex} />}

Physics: Newton and friends

Raise the friction until the block stops: F − μmg = ma.

A block pushed along a rough floor: F − μmg = ma. Increase friction until it stops moving.

Applied force F (N)

Mass m (kg)

Friction μ

F_{net} = F - \mu m g = m aa = 2.038\,\mathrm{m/s^2}

a 2.038 m/s²v 0 m/sx 0 mfriction 9.81 N

0.00 / 6.00 s

a: 2.038 m/s²v: 0 m/sx: 0 mfriction: 9.81 N

tsx

function LabPhysics() {  return <ModelLab catalog={catalog} categories={["physics"]} defaultModel="newton-second" renderLatex={renderLatex} />}

Atoms, molecules, DNA, cells

Change the atomic number from 1 to 18 and the shells refill.

Protons, neutrons and electrons in shells (2, 8, 8). Pick an atomic number from 1 to 18.

Atomic number

Orbit tilt (rad)

C:\; 2,4

protons 6neutrons 6electrons 6

0.00 / 12.00 s

protons: 6neutrons: 6electrons: 6

tsx

function LabLifeScience() {  return <ModelLab catalog={catalog} categories={["chemistry", "biology"]} defaultModel="bohr-atom" renderLatex={renderLatex} />}

Math: functions, lines, trigonometry

Type any expression of x, e.g. x^3 - 4*x or sin(x)/x*5.

Any expression of x. A tangent line sweeps along the curve and shows the slope f'(x).

f(x)

Range

Tangent sweep (s)

f(x) = sin(x)/x\cdot 5

x -10f(x) -0.272f'(x) 0.392

0.00 / 8.00 s

x: -10f(x): -0.272f'(x): 0.392

tsx

function LabMath() {  return <ModelLab catalog={catalog} categories={["math"]} defaultModel="function-plot" renderLatex={renderLatex} />}

Props

ModelLab

Prop	Type	Default	Description
`catalog*`	`{ list(category?): ModelInfo[]; build(id, params?): Scene }`	–	`catalog` from `@indoku/science`, or any object with the same two methods.
`defaultModel`	`string`	–	Model id shown first.
`categories`	`string[]`	–	Limit the tabs: physics, chemistry, biology, math, shapes.
`renderLatex`	`(latex: string) => ReactNode`	–	Shows the formula lines of each scene, e.g. `(latex) => <MathRenderer latex={latex} />`.
`view3d`	`(scene, t) => ReactNode`	–	Custom 3D renderer. Default: `Plot3D`.
`height`	`number`	`380`	Height of the built-in 3D viewport, in px.

* required. Style props and HTML attributes are accepted as well.

Notes

Add your own model with registerModel({ id, title, category, params, build }) from @indoku/science; it appears in the lab automatically.

← Chat Plot 2D →

Created by @indokudev