I would like to convert text to single-line paths with Adobe Extend Script.
I think the first step would be to convert text to a shape layer which can be done with the menu command in After Effects. I would appreciate it If you have any additional ideas on how to make an algorithm to find the middle points of the shape and connect it to the line (see images below for better understanding).
This algorithm has to be written in JavaScript or better in Adobe Extend Script.
Related
I'm working on an application for generating a path for custom-made CNC machine. It is based on a PLC controller which does not support G-code, therefore I need to define the whole path as a list of commands.
I'm having a trouble with defining the toolpath for pocket milling. As an input, I use DXF files with different kind of shapes in it. Each shape is located on different layer and built of simple elements such as LINE, ARC etc. What I need is to analyze these simple elements as a closed contour and generate toolpath for milling the whole material inside this contour. Do you know of any library or simple algorithm where I can define the shape (in this case, based on the DXF data) and the lib/algorithm would generate the whole toolpath, taking the tool diameter into consideration?
For simple shapes like circles or rectangles, I'm able to generate such toolpath manually but when the shape is more complex (e.g. like below) I'm running out of ideas how to do so.
There is a lot of freeware CAM software in the internet and each of them generates the toolpath in form of G-Code, so I assume such kind of algorithm is implemented there somehow. I thought about using such CAM software but the G-code output is not usable for me, besides I do not need any GUI. Most of them is also written in higher-level languages whilst I'm writing my app in JavaScript running under node.js.
Do you mean you know how to process each entity individually and don't know how to combine them together? Since they touch you just need to find the next entity according to its starting/ending point (1), from the current entity's ending point. And if the point (1) was an ending point of that entity, you will need to process the found entity in reverse, or process it in normal order and reverse the resulting line. Of course taking care to offset it in the correct direction.
For faster neighbor search sort them first by either X or Y coordinate of both their starting and ending points.
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
I want to create a 2D skeletal animation using JavaScript library to make interactive 2D animations in the browser.
I'd like to create a human body. Let's consider this simple scenario to better explain what I want to achieve. I have a text box where I can enter an instruction like "say Hi", then the body should raise a hand up and give hi five. I am working to draw the both images and make them show up at every time.
When Init() : I show the body (Image One)
When I request to say Hi : I show the next body taking the hands up (Image two)
And I do animation by creating a HTML5 canvas, the same way as: http://jsfiddle.net/FZyA3/
The problem is that I have to make more than 50 instructions. It's heavy to draw all the scenarios where I have common cases. Is there any open source character to use, like Three.js and babylon.js?
Is there any other better solution, like pixelising the arm and making it movable within an HTML5 canvas?
I highly recommand spine: http://esotericsoftware.com/
It's an editor which comes with an JS-runtime.
I got some graphic design that was made using JavaScript / Html5 Canvas.
Take a look here:
http://yeda.us/js/logos.js
now, i need to give this graphic element to a graphic designer in some format he can work with: in either photoshop or Illustrator friendly formats.
Now, of course i can take a screenshot and start working my way from there, but i do need this graphic in a vector format i could use later more robustly.
Is there a way to convert the above mentioned code into graphics? perhaps convert it to SVG somehow?
Check out SVGCanvas which defines an API compatible with HTML5 canvas that creates SVG output from the drawing commands. It probably doesn't handle everything, but your simple example should hopefully work just fine.
Just paste the relevant bits of your code into one of the left textareas and click "do it", then copy the svg output from the textarea on the right.
Like others commented, there's no tool that would help you make a Canvas -> SVG conversion. However, the code isn't too different. Since the sample you gave is rather small, you could use Raphael.js to generate SVG and convert the code you posted to Raphael.js:
http://raphaeljs.com/
UPDATE
A little more detail
include Raphael.js
go through your script line by line and try to find equivalents in Raphael.js. For example, the rgb color stuff you're doing would use this: http://raphaeljs.com/reference.html#Raphael.rgb
run the resulting js
save the generated SVG
I'm wondering how to go about marking up and coding hover effects for a map similar to this image.
When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)
Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?
Edit: I know people are suggesting the <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.
Edit 2: I might use this: http://www.netzgesta.de/mapper/
Another self answer...
A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?
Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html
The only issue I came across:
I wanted the map background to be transparent. Setting fill to transparent whilst allowing the section to accept mouseover worked in Firefox, but in IE, it failed. I instead opted for filling the path with white, then setting the opacity to 0.01. After that I duplicated the path and didn't fill it to create the border.
You can use HTML <area> Tag
If you use jQuery you can use the maphilight plugin. documented at http://davidlynch.org/projects/maphilight/docs/ and available from github at https://github.com/kemayo/maphilight
I see what the problem here is: making let's say a world map the usual way is quite a load. If I get it right, what you want is to have a territory map image and put hover effects making hover area match country borders exactly. SVG can be used for the map (the drawing part is already done) but the problem is how to generate HTML area map using SVG map coordinates. There's a solution (I've tried it, looks good at least with the demo provided) which translates SVG into Raphael (generates the coords) using PHP. But again you need raphael.js for that... well if you change your mind: https://github.com/atirip/svg2raphael. And if you're not familiar with Raphael it will take a time to get used to it, documentation is not so good -for me-.
Edit: I can confirm that translation from SVG->rapahel.js works but SVG files needs some tweaks. For what I see in the example SVG provided in svg2raphael the files were made with Adobe Illustrator. I've tried with SVG (plain) from Inkscape and it didn't work properly, but I could manage to fix the issues, for example:
svg2raphael won't translate Inkscape generated <path style="fill:#ff0000" ...></path> (will set fill="none"!!! so the result is invisible, but will translate correctly <path fill="#ff0000" ...></path> Seems like it will ignore everything inside style="".
svg2raphael misreads the alignments from Inkscape SVG, so you need to either move the illustration inside Inkscape or edit the SVG file with text editor and change the M value to M0,0.
svg2raphael can translate multiple svg elements, but looks at the main tag which Inkscape generates to align groups of illustrations, sometimes the whole illustration moves away from the render area and you see nothing. Hope this helps!
Edit 2: You can use Inkscape's style="" for creating CSS rules to apply to the SVG, that works great ang keeps style outside SVG/Raphael!