Some Ideas #6
Replies: 3 comments 6 replies
-
|
Hey Miles, the animation test looks great! There are a lot of different directions we could take the library, excited to have you thinking about it too. As we're still pre-1.0, I'm happy to consider all possibilities. A monorepo would be a great way to make the library ala-carte, encouraging a dev to take only the features that they need. However, the library is so far very small (and will be made much smaller by splitting out polygon-clipping or perhaps reimplementing just the parts we need) so while I'm open to adding more utilities, I'm in no rush to carve it up just yet. It's also a good question what the "core" actually would be: I've considered stripping it down to only returning the path points and leaving it up to the developer to implement flattening / pathing as they choose. With plenty of examples to copy and paste, of course. This approach worked well for perfect-arrows. |
Beta Was this translation helpful? Give feedback.
-
|
You're definitely right, I was thinking after the fact that separate packages are a bit overkill for minimal 1-2 file utilities. I guess what spurred the thoughts was that I currently don't know of any solid, frictionless means of quickly creating organically drawn shapes and animating them. You might have a good gauge of the solution that this lib is solving and where it roughly fits in amongst similar libraries. As someone who knows very little about the field of drawing and brush simulation it's all quite interesting and novel. I think the approach you've taken so far with giving as much as a developer needs to generate a pretty svg is great, and as you mentioned has worked well with perfect-arrows. The underlying functions give everything needed to build out custom features on top as I managed to use them for the pathing animation. I've probably mistaken the essence of the library; instead of a foundational set of drawing functions I was seeing its development as more of a feature heavy drawing framework. It probably makes more sense for that kind of project to be build upon core libraries such as this one. |
Beta Was this translation helpful? Give feedback.
-
Oh, this is it. There are some good closed source solutions but drawing lines is a very difficult problem for vector tools, even apart from the pressure-sensitive nature of organic lines, and so I'm confident that this library is the best open source solution for that. That said, my math knowledge is really limited compared to the complexity of the problem so I've really only scratched the surface here. Hopefully the project attracts more contributors who took some higher level math courses at uni. :) As for animating them, let's figure it out! I've parked the |
Beta Was this translation helpful? Give feedback.
-
|
Also, you may have noticed a few changes in the last update: I cleaned up the code, removed its only dependency ( We're sitting on about 1.2kb min+gzipped now, which feels great.
Could still be that, or a good place to organize. I really like the idea of creating utility libraries for visual tools. (I've gone pretty deep on it in other projects). At the very least, my focus so far has been getting the core working well and right now it's about as good as I can make it. |
Beta Was this translation helpful? Give feedback.
-
|
Hi there! @steveruizok, I'm working in a same direction with perfect-freehand (animating/editing etc). these are drawn from models right on a phone screen this is an example with transforms recording the latest story is from the beach: https://www.facereplays.com/story/8 still far from publishing ( a lot to do with listing etc.) P.S. I'm educated as an artist/designer not as a coder , so do not hit me))) |
Beta Was this translation helpful? Give feedback.
-
|
Wow, these are great! |
Beta Was this translation helpful? Give feedback.
-
|
What kinds of questions did you have, or problems you've run into? |
Beta Was this translation helpful? Give feedback.
-
|
Pressure and simulating pressure. (i.e. IOS, ipad) Also there is an option to broadcast alive drawing via websocket. |
Beta Was this translation helpful? Give feedback.
-
|
Pressure and simulating pressure. (i.e. IOS, ipad)
I used to draw in google keep app on android - my initial idea was to
extend its functionality (vector, timelapse, etc)
[image: 294346113_10228851077887675_766524073296096500_n]
<https://user-images.githubusercontent.com/1828088/180601585-99876d3c-ac88-4c3f-ab3e-de681689e621.jpg>
[image: 294693526_10228860959134700_7718201656051446728_n]
<https://user-images.githubusercontent.com/1828088/180601587-b66daa0c-986d-4241-8895-a5d08823f193.jpg>
these are done on a same touchscreen by myself in google keep
i want to have brush that will be very close to the pen of googlekeep
(pressure, thinning etc.)
maybe there should be some threshold for pressure...
Also there is an option to broadcast alive drawing via websocket.
…On Sat, 23 Jul 2022 at 12:53, Steve Ruiz ***@***.***> wrote:
What kinds of questions did you have, or problems you've run into?
—
Reply to this email directly, view it on GitHub
<#6 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAN6J6FYK4PTCWC7ZRXS3IDVVO6IJANCNFSM4YOUHSAQ>
.
You are receiving this because you commented.Message ID:
***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
Thanks for refactoring the clipboard code to use
state-designerit helped me understand the library a bit better alongside reading the docs more thoroughly. I'm new to "state machine"-esque architecture but it seems pretty powerful - keeping a solid handle on the various states with transitions and branches etc. I'll definitely be considering it as a useful tool in the future.I spent a bit of time building out a naive algorithm for animating a perfect-freehand mark using some of the core functions of the lib. Checkout the gif below where the mark is re-drawn after pressing the play button.
It doesn't currently sync the animation up with timestamps from when the points were placed but this would certainly be a cool feature.
I'm going to be using it in the project I'm working on, but while building it out I thought of some various expansions for this library also.
I wanted to get your thoughts on whether an animator utility would be an appropriate feature for this repo or rather a separate thing. I was thinking maybe it would be structured in a similar monorepo style to
state-designer.There could be various different packages:
perfect-freehand/core- Current library functionsperfect-freehand/animator- Creates animator objects that manage animations for a give target svgperfect-freehand/drawable- Utilities for instantiating a drawable svg (ie. event binding, state management), using some of the functions of the currentexampleperfect-freehand/react- Drop-in React components that harness the other libraries above such as<Animator data={} settings={} />or<Drawable config={} />perfect-freehand/presets- A selection of preset JSONs (with points and metadata like configs) that can be imported into an animator or drawable. Check out the mockup below of some common patterns I think people might use in designs.On hover the circle could animate drawing or the underline squiggle could animate on sight.
I think breaking the project into these different packages would improve usability from a users perspective, allowing developers to quickly drop in a designer's drawings and setup animation with little friction. While also providing different levels of abstraction from React -> Feature Libraries -> Core, giving a developer a choice of how they might want to integrate it into their project.
Anyway, let me know if this is a bit too far of an overstep for your vision of the library, or where you think any ideas may suit.
Beta Was this translation helpful? Give feedback.
All reactions