› › ›

SVG animation not drawing at correct location

krizkriz
edited August 2016 in Questions about Code

I'm trying to make a simple, quick and dirty demo interface in Processing, with the widget animations being made up of SVG frames that I loop through. I'm just learning and I don't really have any experience in this area, so bear with me. The problem is that the x,y coordinates I have entered are not where the SVG is drawing. Here is a screenshot comparing expected draw location vs actual draw location:

I've checked my original SVGs (created in Adobe Animate CC and exported frame by frame), I played with shapeMode(), I tried to translate with path coordinates from the viewBox (it didn't change anything), and I've spent way too much time searching online. Here is the code:

ArrayList<Button> buttons;

//creating grid to clarify location
int nbOfHorizontalLines = 20;
int nbOfVerticalLines = 30;

void setup() {
  size(1500, 1000);
  buttons = new ArrayList<Button>();

  // button constructor: x, y, width, height, text
  buttons.add(new Button (100, 100, 100, 100, "100,100 (top left corner of button should be drawn here)"));

}

void draw() {
  background(200);
  frameRate(20);

  //grid to clarify location
  float distanceBetweenHorizontalLines = (float)height/nbOfHorizontalLines;
  float distanceBetweenVerticalLines = (float)width/nbOfVerticalLines;

  for(int i = 0; i < nbOfHorizontalLines; i++)
  {
    stroke(#56A9FA);
    line(0, i *distanceBetweenHorizontalLines, width, i*distanceBetweenHorizontalLines);  
  }

  for(int i = 0; i < nbOfVerticalLines; i++)
  {
    stroke(#56A9FA);
    line(i*distanceBetweenVerticalLines, 0, i*distanceBetweenVerticalLines, height);
  }

  // draw buttons
  for (Button b : buttons) {
    b.drawButton();

  }
  textSize(15);
  text("~210,140", 210, 128);
}

And the Class for the Button:

class Button {

  float x, y;
  //width and height
  float w, h;
  //cycles through the animation files 
  ArrayList<PShape> restFrames;
  ArrayList<PShape> currentFrames;
  //var to load current frame
  PShape frame;
  int frameIndex;
  //assign text string from parameter to t
  String t;


  public Button(float newX, float newY, float newWidth, float newHeight, String newText) {

    x = newX;
    y = newY; 
    w = newWidth ;
    h = newHeight;
    frameIndex = 0;
    t = newText;
    restFrames = new ArrayList<PShape>();

    //animate basic unclicked button state
    int i;
    for (i = 1; i < 52; i++) {
      restFrames.add(loadShape("cleanBreathingNoBG_" + i + ".svg"));
    }
    currentFrames = restFrames;
  }

  void drawButton() {
    shapeMode(CORNER);
    PShape frame = currentFrames.get(frameIndex);

    shape(frame, x, y, w, h);  
    frameIndex++;
    if (frameIndex == currentFrames.size()) {
      frameIndex = 0;
    }
    textSize(18);
    fill(0);
    textAlign(LEFT, TOP);
    text(t, x, y);
  }
}

And finally, the code for the SVG (suspect this is where the problem is, but I have little to no experience with SVG code and I don't know what I'm looking for):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="386px" height="363px" viewBox="0 0 386 363">
<defs>
<path id="Layer0_0_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 160.95
Q 478.0671875 309.616015625 464.95 476.9"/>

<path id="Layer0_1_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 464.95 476.9
Q 607.547265625 499.9689453125 769.9 479.9"/>

<path id="Layer0_2_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 770.9 481.9
Q 761.9529296875 312.828515625 769.9 158.95"/>

<path id="Layer0_3_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 157.95
Q 614.925 174.6916015625 769.9 156.95"/>

<path id="Layer0_4_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 463.95 475.9
L 442.95 502.9"/>

<path id="Layer0_5_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 769.9 478.9
L 783.9 503.9"/>

<path id="Layer0_6_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 771.9 158.95
L 782.9 183.95"/>

<path id="Layer0_7_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 785.9 505.9
Q 781.89296875 341.61796875 784.9 187.95"/>

<path id="Layer0_8_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 446.95 504.9
Q 616.425 506.6560546875 780.9 505.9"/>

<path id="Layer0_9_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 452.95 159.95
L 439.95 182.95"/>

<path id="Layer0_10_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 442.95 501.9
Q 449.8580078125 337.425 439.95 186.95"/>
</defs>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_0_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_1_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_2_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_3_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_4_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_5_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_6_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421.7,-148.75) ">
<use xlink:href="#Layer0_7_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_8_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_9_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_10_1_STROKES"/>
</g>
</svg>

If additional information is needed, please let me know if I missed anything! I appreciate the help.

Tagged:

Best Answer

Answers

Sign In or Register to comment.