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.