Matrix Transformation Visualiser

Ship #1

@crazydave on Matrix Transformation Visualiser · about 2 months ago

I made a website that lets you visualise linear transformations with matrices where you can enter a transformation matrix and it will apply it to a grid so you can visually see what is going on. It was challenging to figure out converting the canvas coordinates to world coordinates so the matrix transformations were to scale, and it was cool when I added the animation of the matrix transformation so you can see the grid move from one position to the next.

4 devlogs
2h
8.58x multiplier
20 Stardust

Try project → See source code →

Open comments for this post

@crazydave on Matrix Transformation Visualiser · about 2 months ago

15m 58s logged

finished the ui so it doesn’t suck

Open comments for this post

@crazydave on Matrix Transformation Visualiser · about 2 months ago

26m 2s logged

added animation to the vector transformations so now I just need to improve the ui and then the MVP will be complete, also added an FPS counter to see how it performs when I change the size of the grid.

Open comments for this post

@crazydave on Matrix Transformation Visualiser · about 2 months ago

18m 42s logged

just a quick one, made it so that the matrix transform also applies to the coordinate grid by making the line coordinates be based off of the transformed world coordinates

Open comments for this post

@crazydave on Matrix Transformation Visualiser · about 2 months ago

1h 21m 1s logged

I started making a website that will allow people to visualise how matrix transformations change how the 2d grid looks. I have so far set up the project, made a 2d grid using html canvas, and added an input where the user can type in a transformation matrix and it will apply it to the red vector. Next time I work on it I will make the matrix transformation apply to the entire grid. For some reason the grid doesn’t display properly on the vercel deployment so I will try to fix that next time. Let me know if you have any suggestions.