trace a simple object using bezier curves, in canvas or sonic.js format

Question

I'd like to trace the outline of a simple object using arcs and bezier curves. Easy to do using Photoshop/pen tool, but I need the actual coordinates of the curves in the following format:

['bezier', startX, startY, endX, endY, cp1x, cp1y, cp2x, cp2y]
['arc', cx, cy, radius, startDegree, endDegree]

Is there an app that makes this easy? Because just playing around with these inputs by trial and error is incredibly non-intuitive. Here's a sample of what I'd like to be able to trace:

This... does not seem like a programming question, asking about the process that comes *before* having program-usable data. Were you asking about how to do this "in code", or manually? Because your own answer suggests you did this manually, which makes this definitely off-topic for Stackoverflow and more something for a graphics or illustration board. Converting once you *have* data is trivial, so that doesn't seem part of your question at all, instead you seem to ask about how to do the tracing, which is not what SO is for. — Mike 'Pomax' Kamermans, Sep 01 '16 at 17:28

score 0 · Accepted Answer · answered Aug 26 '16 at 15:49

For anyone who needs to be able to do this, I was able to get the curves in the format I needed (sonic.js format) by first drawing my curve in inkscape using curves. I was then able to use the XML editor (EDIT>XML Editor in Inkscape) to copy the svg 'd=' attribute of my path describing my curves. Next I used svg-to-canvas to get the html5 canvas code (ctx.bezierCurveTo format). I saved the relevant lines to a text file and wrote this bash script to convert the canvas code to sonic.js paths. Usage convert.sh data.txt. Output works well in sonic. Here's the final result: probe.

#!/bin/bash
round() {
        float=$1
        echo "($float+0.5)/1" | bc
}
INDEX=1
while IFS='' read -r rawline || [[ -n "$rawline" ]]; do
line=$(echo $rawline | cut -d "(" -f2 | cut -d ")" -f1)
if [ $INDEX -eq 1 ];
then
        STARTX=$( round $(echo $line | cut -d',' -f1) )
        STARTY=$( round $(echo $line | cut -d',' -f2) )
        INDEX=2
else
        CP1X=$( round $(echo $line | cut -d',' -f1) )
        CP1Y=$( round $(echo $line | cut -d',' -f2))
        CP2X=$( round $(echo $line | cut -d',' -f3))
        CP2Y=$( round $(echo $line | cut -d',' -f4))
        ENDX=$( round $(echo $line | cut -d',' -f5))
        ENDY=$( round $(echo $line | cut -d',' -f6))
        echo "['bezier', $STARTX, $STARTY, $ENDX, $ENDY, $CP1X, $CP1Y, $CP2X, $CP2Y],"
        STARTX=$ENDX
        STARTY=$ENDY
fi
done < "$1"

trace a simple object using bezier curves, in canvas or sonic.js format

1 Answers1