You are browsing as a guest. Sign up (or log in) to start making projects!

Matrix Transformation Visualiser

  • 4 Devlogs
  • 2 Total hours

A website that visualises how matrix transformations change a 2d grid using javascript canvas.

Ship #1

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
Try project → See source code →
Open comments for this post

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.

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.

Replying to @crazydave

0
22
Open comments for this post

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

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

Replying to @crazydave

0
14
Open comments for this post

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.

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.

Replying to @crazydave

0
127

Followers

Loading…