Tweet

Steve Ruiz

29 Jun, 7 tweets, 2 min read

perf breakthru on ios, panning and zooming back to 60 FPS

I was over here staring at the performance tab, all signs green, no dropped frames reported—while also watching things obviously skip around at <30 fps. Super frustrating, couldn't figure it out.

Finally I think, maybe I'm not actually updating the state on every frame? Of course I was, but somehow in a way that didn't quite count for Safari.

It looks like between react, immer's proxies, my own attempts to cheat around those proxies for performance reasons, and some tiny difference in how the two JavaScript engines work with frozen objects, Safari was only recognizing mutations on _every other frame_.

The fix was just to deep clone the part of the tree that I was changing, so that those proxies resolved, and everything suddenly caught up again.

I would love to isolate this one but only when the pain fades.

This is the actual delta that fixed it. The camera only has one other property ( zoom ). Camera.point would have been a new array in both cases. 🤷‍♂️

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @steveruizok

Steve Ruiz

@steveruizok

30 Jun

Live cursors are interesting. You don't really want to be constantly sending updates but you do want the cursors to move smoothly and naturally like this. What's the trick?

Here's what it looks like without any animations.

Regular tweens/duration-based animations won't work here because each new update will "redirect" the animation. While the cursor is moving from A to B, a new update may come in that means it should move instead from its current point (C) to point D instead.

Read 6 tweets

Steve Ruiz

@steveruizok

27 Jun

A few updates to tldraw.com. First off, lots of perf improvements, even when lots of shapes are on the screen. Slickest SVG canvas on the web.

Slick when creating shapes, too.

I'm also handling window resize events much better. There's a slight debounce before showing shapes that had previously fallen outside of the viewport.

Read 9 tweets

Steve Ruiz

@steveruizok

18 May

Let's look at rotation in a canvas UI. Rotation is hard. 💀

When we have a single shape selected, we can start dragging on a handle here and then rotate the shape. The shape rotates around its center point.

When more than one item is selected, we do something a little different. We're actually making two changes to these shapes as we rotate the group. I'll show each change separately.

Read 12 tweets

Steve Ruiz

@steveruizok

16 May

something new

This is building on some of the patterns that I used in globs.design: a normal design canvas space and a code editor that can be used to create things on the canvas.

I've added the ability to create controls like these. A control's values may be used in the code; and when you change the control's value, the code will run again with the new value.

Read 6 tweets

Steve Ruiz

@steveruizok

25 Feb

Turning brush strokes into polygons is fun, but what does a regular dab-style brush engine look like in the browser? brush-engine.vercel.app

This is a *much* easier problem than creating pressure-sensitive stroke polygons. All we do is repeat a texture (in this case, a circle) at a regular distances along a line, with the pressure (real or simulated) determining the size of the texture.

This is how apps like Photoshop or Procreate work. There's some interpolation between points in order to fill in the blank spaces—and you can use a lot more data to determine the texture's size, skew, opacity, etc—but that's the general idea.

Read 5 tweets

Steve Ruiz

@steveruizok

25 Feb

Would you a design tool's exported code in a project?

Ok, some context. I've spent the week researching these kinds of features, maybe it'll help to tweet through it. 🧵

These days, we expect that a modern design tool will include some kind of "inspection" mode where a developer can view dimensions, export values for colors, typography, etc. Pretty basic but a dev can use this information in any kind of project with zero commitment.

Read 13 tweets

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!