Tweet

@brian_d_vaughn

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

3 Nov

@createwithplay

pro level docs for @createwithplay featuring theme-aware embedded videos 👀

This is of course a png / mp4 hamburger, with device frames laid over the video. We can record videos from our device and slap them into a Screenshot component.

I like how responsive it is, even to device height. (There's some liberal use of CSS functions.)

Read 5 tweets

Steve Ruiz

@steveruizok

13 Oct

@evanwallace

Today I found a ten year old micro-app by @evanwallace with a great arrow-drawing algorithm. I worked through the code and adapted it for perfect-arrows. Really beautiful arrows! Playground here: 2vu07.csb.app

And here's the original source: madebyevan.com/fsm/ . In this app, you can adjust the arc of an arrow by clicking and dragging. I like that! But the goal with perfect is to calculate that automatically, too. Points can also be padded out here.

These arrows are using arc segments rather than quadratic curves, which is how I've been doing things so far. I really this might just be the better way. Intersection points are much easier with circles, though I imagine the algorithm will hold up with other shapes too.

Read 4 tweets

Steve Ruiz

@steveruizok

11 Oct

Pinch zooming to the pointer on an infinite canvas. We're having to offset the camera as we change the zoom, and that offset amount was... not intuitive.

With this kind of thing, it's useful to think in terms of separate "screen space" and "document space" coordinates. These are usually very different: a pointer at x=100 y=100 on the screen could be anywhere in the document, depending on how the document is scrolled or zoomed.

The goal here is to *preserve* that document coordinate as the user zooms in or out. So as we zoom, we need to scoot the document over so that the user's pointer is still pointing at the same place in the document.

Read 5 tweets

Steve Ruiz

@steveruizok

24 Jul

It's Friday! Let's get wild 🙆‍♂️ and learn about finding intersections between line segments and boxes with rounded corners.

This is a lot like finding the points where a line segment intersects a rectangle—it's just that the rectangle has rounded corners, or a "corner radius".

Let's start with a regular rectangle. To find its intersections, we test each of its sides—or "segments"—separately. There are lots of ways to do that. Here's one: gist.github.com/steveruizok/9f…

Read 10 tweets

Steve Ruiz

@steveruizok

14 Jul

New approach on my arrows problem. More math, less logic. These are the kinds of arrows I wanted from the start!

So here's how it works. Start by drawing an edge between the two centers. We need this line to have a minimum width—this minimum is: double the length of the shortest side among the two rectangles. We also want a second edge, rotated 90 degrees.

If the distance between centers is below the minimum, add the amount of that overlap to the cross edge. Basically, we want the cross edge to grow as the two rectangles get too close. Here's a better look at it.

Read 11 tweets

Steve Ruiz

@steveruizok

11 Jul

fuck it, let's go

Unfortunately, we need to consider each axis separately. So for each axis, we're comparing the relationship between four numbers: the min and max of a, and the min and max of b.

Read 8 tweets

Share this page!

Steve Ruiz

Try unrolling a thread yourself!

More from @steveruizok

Steve Ruiz

Steve Ruiz

Steve Ruiz

Steve Ruiz

Steve Ruiz

Steve Ruiz

Did Thread Reader help you today?

Like this author's thread?