Part 2 of my series about kinetic typography! Let's move some text around with HTML, CSS and JS! If you missed how I came about throwing around te...
For further actions, you may consider blocking this person and/or reporting abuse
Hey, I created this account just to comment here. I followed along with the article but I seem to have been stuck. In toBody() Bodies.fromVertices() expects a Matter.Vector[][], but toVertices returns a Matter.Vector[]. Even Vertices.scale(), used in the codepen, returns Matter.Vector[]. I tried looking up but matterjs has terrible docs apparently. If you could help me I would appreciate it a lot. Thanks.
Hey, thank you for the feedback and for your time. I'm sure we can debug this.
First, Codepen uses matter.js 0.18.0. Since the post is already over two years old, I assume you're using a newer version. What version do you have installed?
Hey again. I was using version
0.19.0when I tried this. This was in sveltekit. I did not continue beyond the toVertices() and toBody() func code you provided since that is where I encountered the errors. I could provide the actual code I had if you need.I second this @eioluseyi
Challenge: Can anyone figure out what font I used? Hint: It's a Google Font.
I think the font is a regular sans font for which you made an edit to the letter "D" and the path for the letter O didn't close completely.
I call Roboto!
Correct! I at least tried to fix these letters, Matter.js is doing weird things with composite/hollow bodies, that's why the letter "D" and "O" look off. But, it's indeed Roboto!
Oh..
Let's hope that subsequent updates would fix that on their end.
However, the resulting effects on those letters are not that bad either; plus it made the challenge even tougher! 😂
Cool! This is a little similar to something I've done a few months back with Rapier.rs
If you plan to do more things with physics I highly recommend checking rapier, from my experience performance is much better than matter.js (wasm!).
demo elastic-banach-bbcb85.netlify.app/ (press let's get physical to start, only desktop)
repo github.com/jerzakm/rapier-dom-physics
Oh wow, that's amazing! Although it's a bit hard to press the "close" button on the magenta box when physics is turned on 😜 Will definitely have a look, thank you for the recommendation!
Oh yeah, it's definitely hacky and not user friendly. Yet another unfinished idea waiting for it's turn on a forever growing list :D
I had to actually retrace the letters, but I'm sure there's some sophisticated tool out there that can do exactly that.
Here's a link to a resource I think can help:
danmarshall.github.io/google-font-...
Thank you for linking this tool! Gotta retry soon with that and see if it works better than my Sisyphean approach with trial and error until it looks halfway decent lol