I came in 6th place! Thanks everyone that played and voted! This was my first ever 3D game, and really only the third game I’ve ever made. At the end of last year’s JS13K I knew I wanted to move to 3D, so I went on Kahn Academy and learned about vector math, matrix math, […]

What is a matrix? A matrix is a rectangular array of numbers arranged in rows and columns: $$\begin{bmatrix} 1 & 2\\ 3 & 4 \end{bmatrix}$$ You may think, isn’t a vector also a rectangular array of numbers? Yes, you can also think of a vector as a matrix with one row or one column (row vs column […]

Now that we know how to find the x and y position of an angle, can we just take an angle and draw our points there? Not quite. Any given point already has an angle, as you can see here: The point (4, 3) already has the angle shown as α. Now what we could do […]

Now we’re going to talk about math with triangles and certain measurements and properties of triangles. Also known as, trigonometry. It’s not as scary as it sounds. We already know the Pythagorean theorem, we used it to find the magnitude (aka length) of our vector. It turns out that other properties of triangles are very […]

We’re getting into rotation now which means we are going to be doing a lot of math with angles. When doing math with angles, you generally won’t use degrees like you may be used to. In math you generally want to use radians. A radian measures the angle as related to the radius of the circle. […]

In the last post we talked about what a vector was, how to add and subtract vectors, and how to find the magnitude of a vector. We also demonstrated that by adding vectors we could translate (aka, move) a square around in two dimensions. Now we’ll look at scaling vectors using multiplication. Multiply Vector by Scalar […]

After rekindling my interest in 3D game development, I looked at WebGL. Being a web dev, this made sense. Unfortunately resources for this are mediocre at best. While WebGL2Fundamentals and the Introduction to Computer Graphics book do cover some of what’s needed, they largely skip the actual math and just tell you to do something. […]

Learn to transform the mouse cursor into transformed canvas coordinates, allowing you to drag, zoom to cursor, and interact with graphics in the canvas regardless of the canvas’s current transformation state. Extremely useful for html games and image editing programs. This post takes a modern approach to solving the problem using vanilla JavaScript, and explains the solution simply and in detail.

Uploading files, and especially uploading images taken via the phone camera or gallery, is a common pain point when trying to develop a Cordova or Ionic app. We explore the best way to handle uploading multiple images at once by building a simple Instagram-like app.

A simple way to avoid horrible image paths (../../../../images/ooh.jpg) and keep a more modular design. Makes use of Webpack and gives a very simple example from Angular, although this will work in any framework. Inspired by my Stack Overflow question about setting an image src to a relative path in Angular.