Linear Algebra with JavaScript: Animating Linear Transformations with ThreeJS

This is part of the course “Linear Algebra with JavaScript”.

Image for post
Image for post
GitHub Repository with Source Code

Recently I finished a story about linear transformations with JavaScript, two-dimensional examples rendered on SVG grid(was covered in this part) served well, but something was missing — examples in three-dimensional space… GitHub repository can be found there and commit with the state of this story there.

Goal

In this part, we want to make a component that will visualize the linear transformation of object in three-dimensional space. The final result of this part you can see below, also, you can play with it here.

Image for post
Image for post
applying different linear transformations on cube

Component

The first library that comes to mind when we think about doing 3D in the browser is three.js. So let’s install it and also, library to allow user move camera.

npm install --save three three-orbitcontrols

We are building a component that will receive matrix in properties from the parent component and will render an animated transformation of the cube. You can see the structure of the component below. We wrap our component with functions from styled-components and react-sizeme to have access to the theme with colors and to detect when the size of the component changed.

In the constructor, we initialize state that contains the size of the view, so that we can compare it with a new one in componentWillReceiveProps method. Since we will need to access the actual DOM element to inject ThreeJS renderer, we are using ref in render method.

In componentDidMount, we initialize everything we need to animate cube transformation. First, we create a scene and position camera. Then we create the renderer, set color and size and append it to View component.

Then we create objects that will be rendered — axes, cube and cube edges. Since we will change matrix by ourselves, we set the matrixAutoUpdate property on cube and edges to false. When we are done with objects creation, we add them to the scene. To allow user move camera with the mouse, we are using OrbitControls.

Then we convert matrices from our library to ThreeJS ones and getting functions that will return color and transformation matrix depending on time. In componentWillUnmount, we cancel the animation frame and remove renderer from the DOM.

Without the animate function, nothing will be rendered. First, we update the transformation matrix of both the cube and its edges and update the color of the cube. Then we render everything and request animation frame.

In componentWillReceiveProps, we receive the current size of the component, and if it differs from the previous one, we update the state, change the size of renderer and camera aspect.

Animations

To animate color change and transformation we need to write functions that will return animation functions. Before we cover them let’s look at some converters — functions from StackOverflow that convert RGB to hex and back and functions that convert matrix from our library to ThreeJS one and back.

colors converts
matrices converts

Color

First, we need to calculate the distances between each part of the colors(red, green, blue). The function that will return new color sets timestamp on the first call. Then by knowing the distances between the pair of colors and time spend from the first call, it calculates a new RGB color.

Linear Transformation

To animate linear transformation, we are doing the same steps. We find the difference between matrices and in animation function we update each component with relation to time from the first call.

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store