Pre-1.0: the API is not stable yet and may change from version to version. Pin the exact version in your Cargo.toml and check the changelog before upgrading.

15. Vectors and matrices

An arrow on a set of axes, a matrix that stretches the whole plane, and the numbers shown beside it.

Loading live preview…

Source of learn_15_matrices — edit in the playground
//! Lesson 15 — Vectors and matrices.
//!
//! A vector is an arrow on `Axes`. `apply_matrix` maps the whole plane
//! through a 2 × 2 matrix: the grid and every vector follow. `Matrix` shows
//! the numbers next to it.

use oxframe::prelude::*;

#[oxframe::scene]
pub async fn matrices_lesson(view: View) {
    let axes = view.add(
        Axes::new()
            .x_range(-3.0..3.0)
            .y_range(-3.0..3.0)
            .width(640.0)
            .height(640.0)
            .x(-220.0),
    );

    // An arrow from the origin; its tip is two signals.
    let v = axes.vector(1.0, 2.0);
    v.draw_on().await;
    v.label("v");

    // The matrix, beside the axes.
    let m = view.add(Matrix::new([[2, 0], [0, 1]]).font_size(56.0).x(480.0));
    m.fade_in().await;

    // Stretch x by 2: the grid and the vector follow.
    axes.apply_matrix([[2.0, 0.0], [0.0, 1.0]], 1.5).await;
    wait_for(0.5).await;

    // Move the tip on its own; it is still stretched.
    v.to(-1.0, 1.0, 1.0).await;
    wait_for(0.4).await;
}

// Try: a shear, `axes.apply_matrix([[1.0, 1.0], [0.0, 1.0]], 1.5)`.

pub fn project() -> Project {
    Project::new("matrices_lesson").scene(matrices_lesson())
}

A vector is an arrow on axes

axes.vector(1.0, 2.0) draws an arrow from the origin to the data point (1, 2). It is a line, so .draw_on() works as in lesson 9, and its tip is two signals: v.to(-1.0, 1.0, 1.0) moves it.

A matrix moves the plane

axes.apply_matrix([[2.0, 0.0], [0.0, 1.0]], 1.5) stretches x by 2. The grid bends and the vector follows, because both are drawn through the matrix every frame — the same idea as the ranges in lesson 14.

Showing the numbers

Matrix::new([[2, 0], [0, 1]]) draws the values in brackets. Each cell is a text node, so you can change or color it as the scene goes.

You made it

That is the whole core of oxframe. From here, browse all nodes and effects, open the ocean scene to see everything working together, or read how oxframe works inside.