Twitter | Search | |
Steve Ruiz
designing creative tools •
2,458
Tweets
458
Following
3,529
Followers
Tweets
Steve Ruiz 4h
Replying to @steveruizok
Like my little arrows here, this is all running on very cheap math, so you can use these functions for lots and lots of boxes! It's a classic interaction, one of my favorites. 🌈 the end
Reply Retweet Like
Steve Ruiz 4h
Replying to @steveruizok
Corner resizing applies the same logic to both axes at once. It still matters whether we're dragging from the top / left or bottom / right, but this logic is the same as for the edges.
Reply Retweet Like
Steve Ruiz 4h
Replying to @steveruizok
It gets tricky if the user drags an edge across its opposite edge. When this happens, we need to reverse those measurements, e.g. using the maxX normal to find the x, and the x normal for the maxX.
Reply Retweet Like
Steve Ruiz 4h
Replying to @steveruizok
Same idea for the top and bottom edges.
Reply Retweet Like
Steve Ruiz 4h
Replying to @steveruizok
As the bounding box resizes, we need to preserve those relative positions. This is easy: we just multiply the snapshot normals against the bounds' dimensions. (e.g. box.maxX = snapshot.nmx * bounds.width).
Reply Retweet Like
Steve Ruiz 4h
Replying to @steveruizok
When a resize begins, we store a snapshot of each box's x, maxX, y, and maxY as a normal relative to the bounding box, with the bounds left/top edge at 0 and 1 at the bounds right/bottom edge. Here box0 will be nx = 0, nmx = ~.2, while box1 would be around nx = ~.5 and nmx = 1.
Reply Retweet Like
Steve Ruiz 4h
I've spun out my bounding-box-transform logic into its own sandbox. Here's how it works. 🧶 🔗 🥪
Reply Retweet Like
Steve Ruiz 12h
Replying to @dluzar @Vjeux
Hey, you’re right! I’ve never noticed that. (Here I’m using it for individual elements, rather than the whole canvas.)
Reply Retweet Like
Steve Ruiz 17h
I was just coming back here to reply about the side panel :D Those social previews are sick!
Reply Retweet Like
Steve Ruiz 17h
I'd never seen before. Great work! I love the debugging overlays.
Reply Retweet Like
Steve Ruiz Oct 18
Replying to @taggosaurus
See my reply above! Here's a file with all of the box transform functions. They're not 100% pure but I think you could adapt them pretty easily to any project.
Reply Retweet Like
Steve Ruiz Oct 18
Replying to @steveruizok
In other news: I'm doing a rewrite of my arrows playground now that I have most of the issues figured out. Still early but I have the canvas + bounding box resizing + alignment + distribution done. 🔗 🥡
Reply Retweet Like
Steve Ruiz Oct 18
Replying to @GrantForrest8
I'm actually using HTML canvas for this demo, and so I'm doing my own hit testing. I switch on the hit (and the UI's state machine) to see what the cursor should be!
Reply Retweet Like
Steve Ruiz Oct 18
Replying to @lily___digital
There are *very* few products that I would want to be professionally responsible for shipping / testing / maintaining. But send me into a spooky problem space and I'll be sure to bring back more than best guesses.
Reply Retweet Like
Steve Ruiz Oct 18
Replying to @lily___digital
my line: certain products just can't be designed without some amount of "building" because that's where the design decisions need to happen; and so it's good to have a designer (you!) who can design while building
Reply Retweet Like
Steve Ruiz Oct 18
If there's one thing missing in today's design tools, it's an appropriate use of the "grab" and "grabbing" cursors. 🖐️✊👍
Reply Retweet Like
Steve Ruiz Oct 17
pear shaped designer
Reply Retweet Like
Steve Ruiz retweeted
Guillermo Rauch Oct 17
This looks so good that it makes me think that a terminal client would actually work great 😆
Reply Retweet Like
Steve Ruiz Oct 16
Replying to @steveruizok
your link is over............ there
Reply Retweet Like
Steve Ruiz Oct 16
I just wrote perhaps the worst link hover effect ever
Reply Retweet Like