I'm trying to achieve this bend effect on a path, This effect takes an existing path (skeleton) and allows one to “bend” it in a shape path. The style of the bent path is taken from the style of the original shape path.
like this image
can someone tell me a way to achieve this effect?
this deformation is used in the vector drawing tool Inkscape, which uses svg as a standard, and I would like to use animating with javascript and found this library warp.js, I am not sure how to try to implement this effect, any direction would be of great help.
The description of how the effect works is on this link
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathEffects-BendTool.html
and here is the c ++ implementation of the bend tool, has a brief description of the theory from J.F. Barraud,
https://gitlab.com/inkscape/inkscape/-/blob/master/src/live_effects/lpe-bendpath.cpp
even with the description I couldn’t understand what to do as a starting point, any help is welcome
Related
I would like to try to realize the effect that you see in the image gif, I thought to base myself on the following module to realize the circle:
react-native-conical-gradient-progress
I'm having some trouble thinking about how to make it happen.
The problem is how to transform the whole circle, even portions of it into portions of semi-broken lines.
I do not know how to explain it better.
Can anyone give me some suggestions on what path I could follow?
I'm trying to build a website allowing users to upload a photo of their face and then return a stylized output such as this example :
I'm not a graphics expert by any means so I'm not sure of the correct term to describe this image manipulation effect.
I have looked at a few JavaScript image libraries (Fabric, Pixastic) but they only seem to offer a fairly basic Pixelation effect which is not quite what I am looking for.
If anyone can point me in the right direction of a suitable JavaScript library I would be eternally grateful!
This would need to implement:
Delaunay triangulation
Voronoi diagram
These are relatively complex areas in the field of polygons and the combination (Voroni/Delaunay tesselation) represent a very specific usage (as the effect in the image). You can probably get away with just the triangulation though, but there are libraries out there that can help you with the basics and from there you may be able to apply it to images and the color values.
Here are a couple of projects to start you off:
https://github.com/ironwallaby/delaunay
https://code.google.com/p/javascript-voronoi/
In my SVG application, I have images which the user can extend. I'd like to give controls to the user so they can bend them from the edges as well.
Here is a visual example of what a user could do.
Would love to hear suggestions on how to go about doing this.
One possible idea is that I put the image inside a path & add controls for stretching the edges of the path. However, I wonder how to stretch the image inside the path so that it consumes the whole available space.
There is no easy way to do what you want. However I can suggest two possible tricky ways:
(1) Convert it to a chain of images and apply an appropriate skew transform to each one.
(2) Use an <feDisplacementMap> filter to displace the pixels to the appropriate place.
I am looking to animate an image onto a canvas via a circle 'brush' [Think Photoshop default brush] wherever the circle moves on a path the image is revealed.
The image would be a bitmap, not a vector file.
The brush will not have any additional detail beyond displaying the image its 'painting'
As additional clarification, the circle brush is moving automatically the user does not move the brush. It is just animated along a path.
I am really curious to see how this can be done with Raphael.
Thanks in advance!
If you want to achieve something like that, you better think of using Canvas. Since Raphael is a library oriented exclusively to SVG. You can use non-svg images, but you are going to face lots of limitations.
On the other hand, Canvas is pixel oriented, so what you are trying to do is going to be easier.
Raphael is great when it comes to SVG and user interaction, because the elements you create, are nodes inside the DOM, and you can easily bind them to events.
If you still want to achieve something like that with Raphael, you are going to need to start digging a bit into Raphael's methods. Is to difficult for someone to explain the whole process. You better start trying, and ask some question on more particular problems.
Apart from Raphael's documentation, I recommend this exaggeratedly colorful, but useful site which have some working examples.
Either way I think you should reconsider using Raphale over Canvas!
I hope that helps!!
I want to replicate the effect seen here on the BBC iPlayer where various circles and arcs rotate around a point.
I understand I need to use the Canvas element along with some drawing code to draw arcs which the have to be rotated. Here is an example of how I have tested drawing arcs. - I discounted the use of CSS3 features as I wasn't sure it'd give me the control I wanted - perhaps I'm wrong?
I'm not sure how to rotate these arcs in a way that mimics the BBC iPlayer. Ideally I want to create either a preset pattern and rotate various sections or just create a random pattern on the fly. But either way each section will require it's own rotation speed and so forth.
Can anyone help out with either a quick demo or perhaps some pointers on how to get started on this?
I'd also appreciate any advice on any browser limitations imposed by each solution. I understand not much will work in IE though :)
You could try taking a look at this: HTML5 Canvas Machines Vortex.