Apply algorithm to a div

[ajmeese7]

Hey Chris, I have a question about the extent of what this library currently supports. My intended use case for this library is to use it on div elements that make up windows within my web-based operating system (demonstration), so whenever the windows are moved across the screen they can get the genuine wobbly effect.

Do you have any ideas on how to apply your project to an HTML element like such?

[ChrisVilches]

@ajmeese7 Hello!

The core of my library is quite simple. It's simply a class (src/model/Grid.ts) where you can define some parameters, including the grid dimensions, elasticity factors, etc. The class contains a matrix of points (x, y coordinates), so at every frame, if you execute the update function, the points will move one frame. You can also set the point that is the "central" point (e.g. the mouse in my web example).

I use a canvas to render the matrix, but it can be replaced by something else. You'd need to find a way to map the points to whatever you want to make wobble.

I researched some ways, and the closer I found was the CSS skew() function, but it only transforms a full div, without the possibility of adding more points for granular control. It does skew everything inside (children elements) and it looks cool. So the only way to use this with my library would be by having a 2x2 grid and map the point positions to the skew function parameters.

I didn't find any other library or tool to deform a DOM element. I think with canvas/WebGL it'd be much easier to map the grid to something you want to render with the wobble effect.