Code Monkey home page Code Monkey logo

cg-animation2d's Introduction

2D Transforms and Animation

Starter code using the HTML5 Canvas API


Matrix Class API

Code includes file matrix.js used to create matrices


Constructor

Matrix(m, n)

Creates a new m×n matrix (m rows and n columns) with 1's on the diagonal and 0's everywhere else

Example:

let t = new Matrix(3, 3);

Result:

$$t = \begin{bmatrix}1 & 0 & 0\\0 & 1 & 0\\0 & 0 & 1\end{bmatrix}$$


Member variables

rows -- read only
number of rows in matrix

columns -- read only
number of columns in matrix

values
2D array of matrix values (can also set values using 1D array of length m×n)

Example:

t.values = [[1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]];
t.values = [1, 2, 3, 4, 5, 6, 7, 8, 9];

Result:

$$t = \begin{bmatrix}1 & 2 & 3\\4 & 5 & 6\\7 & 8 & 9\end{bmatrix}$$


Class Methods

multiply(matrices)

Mutliplies matrices (where matrices is an array of two or more Matrix objects). Returns null if matrices cannot be multiplied.

Example:

let t1 = new Matrix(3, 3);
t1.values = [[1, 0, -5],
             [0, 1, 10],
             [0, 0, 1]];
let t2 = new Matrix(3, 3);
t2.values = [[2, 0, 0],
             [0, 4, 0],
             [0, 0, 1]];
let t = Matrix.multiply([t2, t1]);

Result:

$$t = \begin{bmatrix}2 & 0 & -10\\0 & 4 & 40\\0 & 0 & 1\end{bmatrix}$$


Methods

determinant()

Returns the determinant of the matrix (result is null if the determinant cannot be calculated)

Example:

let t = new Matrix(3, 3);
t.values = [[2, 0, -5],
            [0, 4, 10],
            [0, 0, 1]];
let det = t.determinant()

Result:

$$det = 8$$


transpose()

Returns the transpose of the matrix

Example:

let t = new Matrix(3, 3);
t.values = [[2, 0, -5],
            [0, 4, 10],
            [0, 0, 1]];
let t_tran = t.transpose()

Result:

$$t\_tran = \begin{bmatrix}2 & 0 & 0\\0 & 4 & 0\\ -5 & 10 & 1\end{bmatrix}$$


inverse()

Returns the inverse of the matrix (result is null if the inverse cannot be calculated)

Example:

let t = new Matrix(3, 3);
t.values = [[2, 0, -5],
            [0, 4, 10],
            [0, 0, 1]];
let t_inv = t.inverse()

Result:

$$t\_inv = \begin{bmatrix}0.5 & 0 & 2.5\\0 & 0.25 & -2.5\\0 & 0 & 1\end{bmatrix}$$

cg-animation2d's People

Contributors

tmarrinan avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.