Education on Data Structure

[gaspowers]

Can you clarify the data structure that is produce when using the native format? Here's what I'm trying to do take the data and use it server side in java. Java has a 2d Graphics helper see below for the info: Graphics.drawLine(int x1, int y1, int x2, int y2) Draws a line, using the current color, between the points (x1, y1) and (x2, y2) in this graphics context's coordinate system. Parameters: x1 the first point's x coordinate. y1 the first point's y coordinate. x2 the second point's x coordinate. y2 the second point's y coordinate.

My problem I'm trying to understand this output per the documentation below. What are you calling a stroke? In the example below would coordinates 98,23 be my x2,y2 if x1,y1 equal to 101,1? Why are there multiple stroke arrays? * var data = [ * { // stroke starts * x : [101, 98, 57, 43] // x points * , y : [1, 23, 65, 87] // y points * } // stroke ends * , { // stroke starts * x : [55, 56, 57, 58] // x points * , y : [101, 97, 54, 4] // y points * } // stroke ends * , { // stroke consisting of just a dot * x : [53] // x points * , y : [151] // y points * } // stroke ends * ]

I guess I'm trying to do the following "If we want classical vectors later, we can always get them in backend code." but can't quite figure out where to start. "classical vectors where numbers indicated shift relative last position"

[dvdotsenko]

Structure of "native" format is very similar to this:

// Array of strokes, where 'stroke' is a continuous line or a dot
[
    { /* Stroke object as a collection of points' coordinates */ }
    , { /* Another Stroke object as a collection of points' coordinates */ }
    , { /* Another Stroke object as a collection of points' coordinates */ }
]

The "Stroke object as a collection of points' coordinates" is regular JavaScript object (dictionary, hash) signifying a CONTINUOUS curve, in the following format:

{
    x: [/* list of ABSOLUTE x coordinates */]
    , y: [/* list of ABSOLUTE y coordinates */]
}

For example if person clicked on point (2,15) and moved the mouse over 2 more coordinate points (5, 11), (8, 24) you would have:

[
    {x:[2,5,8],y:[15,11,24]}
]

Then, they clicked once (to signify a dot / period) at point (22,38) you would have:

[
    {x:[2,5,8],y:[15,11,24]}
    , {x:[22],y:[38]}
]

Iteration over the strokes, then points would look like this:

// pseudocode!!!!
for (stroke in data):
    for (i = 0; i < stroke.length; i++):
        point = new Point(stroke.x[i], stroke.y[i])

Here is an example of turning the absolute values into relative in the data:

// pseudocode!!!!!
newdata = new Array()

for (stroke in data):
    newstroke = new Array()
    newdata.append(newstroke)

    // adding starting point. It must remain absolute coordinate
    newstroke.append(new Point(stroke.x[0], stroke.x[0]))

    for (i = 1 /* !!!!!! <- ONE there */ ; i < stroke.length; i++):
        newstroke.append(
            new Vector(stroke.x[i] - stroke.x[i-1], stroke.y[i] - stroke.y[i-1])
        )

I admit, the "native" format is not instantly easy to understand. Something like:

[
    // stroke
    [
        {x:number, y:number} // starting point
        , {x:number, y:number} // next point, possibly relative coords
    ]
    , [
        // another stroke
        ...
    ]
]

Would make more sense, BUT making each point an object (instantiating new object for every point) is horribly inefficient. The format was tunned for fast addition of points and looping. I think it achieves both.

[gaspowers]

Thank you