We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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.
Answers
Maybe here: https://forum.processing.org/two/discussion/436/svg-pshape-wrong-position#latest
Those M commands in the svg suggest that the start of the shape is 400 odd pixels right of the origin and about 160 pixels below.
Thanks Bird, I've tried that but it didn't do it for me for whatever reason. I might revisit that though, thanks!
Thanks Koogs, I'm not sure why it's offset like that but you gave me a great starting point to explore it further, since I didn't know where in the SVG to look. I appreciate the help.