Tools Tutorial: UV, PIXI, and SageMath

In this tutorial, we’ll detail the tools used in the Linear Algebra project, including UV, PIXI, and SageMath. This will include installation steps, basic configurations, and real-world examples tailored to this project’s context.

from uv import Plane, Vector, Transformation

# Step 1: Create a 2D plane
plane = Plane()

# Step 2: Add vectors
v1 = Vector([2, 1], color='blue')  # A vector in 2D space
v2 = Vector([1, 3], color='red')

plane.add(v1)
plane.add(v2)

# Step 3: Transform the vectors
matrix = [[2, 0], [0, 3]]  # Scaling matrix
transformation = Transformation(matrix)

plane.transform(transformation)

# Display the transformation
plane.show()

Purpose in the Project:

UV was used to visualize transformations like reflections, rotations, and scaling detailed in ../slides/week3_matrix_transformations_slides.md.

PIXI

What is PIXI?

PIXI is a JavaScript rendering library designed for creating 2D graphics efficiently. It is well-suited for creating web-based interactive visualizations for projects such as demonstrating linear transformations or eigenvector behavior.

Installation

To integrate PIXI in a project, follow these steps:

Using Node.js and npm:
```
npm install pixi.js
```

CDN Link (for quick usage): Add the following to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.0/pixi.min.js"></script>

Configuration

PIXI operates directly in the JavaScript runtime and doesn’t require additional setups if it is being loaded via a CDN. For npm-based usage:

Install dependencies (e.g., Webpack for bundling).
Import PIXI in your JavaScript entry file:
```
import * as PIXI from 'pixi.js';
```

Example Usage in Linear Algebra

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PIXI.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.0/pixi.min.js"></script>
</head>
<body>
    <script>
        // Step 1: Create a PIXI Application
        const app = new PIXI.Application({
            backgroundColor: 0xFFFFFF,
            width: 800,
            height: 600
        });
        document.body.appendChild(app.view);

        // Step 2: Create a Graphics Object
        const transformer = new PIXI.Graphics();
        transformer.lineStyle(2, 0x0000FF, 1); // Blue lines
        transformer.drawRect(150, 150, 300, 300);

        // Step 3: Apply Transformations
        const scalingFactor = 1.5;
        transformer.scale.set(scalingFactor);

        app.stage.addChild(transformer); // Add to Stage
    </script>
</body>
</html>

Purpose in the Project:

PIXI was considered for rendering transformation matrices on a browser interface but remains optional for advanced rendering needs beyond static projects.

SageMath

What is SageMath?

SageMath (or Sage) is a robust open-source mathematical software based on Python. It provides comprehensive tools for algebra, calculus, matrix computations, and various other mathematical operations.

Installation

Using Package Managers on Ubuntu:
```
sudo apt install sagemath
```

Download Precompile Binary:

Visit SageMath Download Page.

Extract and install:

tar xf SageMath-x.y.tar.gz -C /path/to/install/location
cd /path/to/install/location/SageMath-x.y
./sage

Python Integration (Optional): Install SageMath within your Python environment:
```
pip install sagemath
```

Configuration

If you are using SageMath in Jupyter or a Python notebook:

Launch SageMath:
```
sage -n jupyter
```
Sage commands become accessible as Python-like commands.

Example Usage in Linear Algebra

from sage.all import Matrix, vector

# Step 1: Define a Matrix
A = Matrix([[3, 4], [2, 1]])

# Step 2: Compute Eigenvalues and Eigenvectors
eigenvalues = A.eigenvalues()
eigenvectors = A.eigenvectors_right()

print("Eigenvalues:", eigenvalues)
print("Eigenvectors:", eigenvectors)

# Step 3: Perform a Dot Product Operation
v = vector([2, 3])
result = A * v
print("Transformation of vector:", result)

Purpose in the Project:

SageMath handled advanced computations such as eigenvalues, eigenvectors, and low-rank approximations, especially in slides like week11_svd_image_compression.

Integration Examples

Example 1: Combining SageMath with UV for Visualization

from sage.all import Matrix, vector
from uv import Plane, Vector

# SageMath Matrix
A = Matrix([[2, 1], [1, 3]])
v = vector([1, 1])

# Compute Transformation
transformed = A * v

# UV Visualization
plane = Plane()
plane.add(Vector([1, 1], color='blue'), label="Original Vector")
plane.add(Vector(transformed, color='red'), label="Transformed Vector") 
plane.show()

Example 2: Generate SageMath Data for Web Integration (PIXI)

from sage.all import Matrix, vector

# Generate Low-Rank Approximation
A = Matrix([[5, 4], [3, 2]])
U, S, V = A.singular_value_decomposition()

# Export Final Data for Web/Visualization
print({
    "Matrix A": A,
    "U Factor": U,
    "Singular Values": S,
    "V Factor": V
})

This tutorial covers the installation, configuration, and example usage of UV, PIXI, and SageMath. Together, these tools enable advanced visualization and mathematical modeling in Linear Algebra projects.

Linear Algebra for Computer Vision & Deep Learning

Comprehensive linear algebra utilities and educational resources for computer vision and deep learning

Tools Tutorial: UV, PIXI, and SageMath

Table of Contents:

UV

What is UV?

Installation

Configuration

Example Usage in Linear Algebra

PIXI

What is PIXI?

Installation

Configuration

Example Usage in Linear Algebra

SageMath

What is SageMath?

Installation

Configuration

Example Usage in Linear Algebra

Integration Examples

Example 1: Combining SageMath with UV for Visualization

Example 2: Generate SageMath Data for Web Integration (PIXI)