What do I mean by smarter? Let's say each of our blocks has a position in a grid, [x, y]. (It's actually a 3D grid, so [x, y, z], but we can ignore the z for now)
The positions map to the block's index in z/y/x arrays. This means that a block's position can only be an integer like 1 or 2, but never a float like 1.25 or 2.81.
So a position like [0, 0] is fine but [0.5, 0] is not.
However, in order to animate between positions we need to interpolate that position, right?
The (very old) trick is to give the block an "offset" and then find the block's "draw position" by adding the two together. In the image below, both blocks have the same "position" but the one on the right has an offset that causes it to "draw" at a different place.
So to animate a block, the process is: 1) move the block to its new position, 2) set its offset so that it draws at its old position...
And then 3) animate the offset back to zero.
Throw in some delay after each animation cycle and you've got your animating blocks!
• • •
Missing some Tweet in this thread? You can try to
force a refresh
Build popular open source library, train
own model on docs + examples (some private?), guarantee that model is updated with every release, sell as integration with user IDEs
Let’s say @threejs went this route. The core product is free (wedge) but AI assisted coding environments sometimes trip over out of date versions or make poor choices based on bad examples in their training data.
The threejs team announced ThreeAssist, an “expert” model fine-tuned on each minor release, fresh docs, etc. Outscores commodity models, produces better results, guaranteed to be true to the given version, etc.
I see a lot of AI uses for the @tldraw SDK. I’d say about 25% of our customers are full on AI apps and another 30% are looking to integrate AI tools into their canvas in the future
No surprise, the most shippable / effective use cases are currently where generated artifacts can augment existing use-cases
Figma has a “wireframe view” that might help here as a fallback, if it means keeping images etc out of memory, though it would be up to the app to switch into that. (And actually I’m not even sure if that would work)
For tldraw we have a limit of shapes per page and pages per project but it’s still theoretically possible to crash it out via memory depending on your browser.
Here's the full interaction, complete with hover indicators.
|
Note that you can interact with text directly either: a) when editing text or b) when the text tool is selected. This will mean you can't create text on top of other text, but I'm guessing this is okay.
In @figma, holding shift while drawing a selection box over items will: 1. select deselected items 2. deselect selected items
Is this the right behavior? Have you ever accidentally selected / deselected items while shift-selecting?
@figma I remember working out some more complicated logic here with a rule like "if any new items are being added to the selection, don't deselect any other items"
Remind me next time to migrate the database before shipping runtime validation 💀
In tldraw’s beta db, there were lots of different versions of our data scattered around, including some from the wild times before we wrote client-side migrations, and some that just included broken data, x = NaN etc.
We’d written validation in order to catch this type of bad data when it came into the app. We didn’t write any recovery from the bad data, the app would just throw as soon as it ran into it.