i’m playing with drawn letters in svg, and put together to build words.
Something to make poster drawn by an axidraw
I would like to group letters to manipulate group easily. (center word in the screen, etc, etc)
I have a PShape Array with all my svg drawing (file) (my letters) and put (words) in the sketch with a shape(file[index],letterX,letterY, file[index].width/5, file[index].height/5);
letterX = initX;
letterY = initY;
if (words!="") {
for (int i=0; i<words.length();i++) {
int index = int(words.charAt(i));
shape(file[index],letterX,letterY, file[index].width/5, file[index].height/5);
if (int(words.charAt(i)) == 10) {
letterX = 0;
letterY += file[index].height/5;
} else {
letterX += (file[index].width-100)/5;
}
}
}
i’m not sure to undestand how to group these shapes together!
i can’t do word.addChild(shape(xxxx));
While of course this would work, it would be a great deal more convenient if you could group the head and body into one PShape. With a PShape “GROUP”, you can.
// Make the parent shape
PShape alien = createShape(GROUP);
// Make two shapes
PShape head = createShape(ELLIPSE, 0, 0, 50, 50);
PShape body = createShape(RECT, 0, 50, 50, 100);
// Add the two "child" shapes to the parent group
alien.addChild(head);
alien.addChild(body);
// Draw the group
translate(width/2, height/2);
shape(alien);
For a full example that demonstrates a PShape that groups together a primitive shape, custom polygon, and path, see “GroupPShape” (under File → Examples → Topics → Create Shapes).
yes i read the GROUP example.
but it use createShape(primitive, x,y,w,h);
there is no example with a loaded svg.
therefor i tried
letterX = initX;
letterY = initY;
if (words!="") {
// create the lines (ther is certainly a betterway, nevermind)
ligne[0] = createShape(GROUP);
ligne[1] = createShape(GROUP);
ligne[2] = createShape(GROUP);
// for each letter of the string
for (int i=0; i<words.length();i++) {
int index = int(words.charAt(i));
// create a group
PShape lettre = createShape(GROUP);
// add the svg to the group
lettre.addChild(file[index]);
lettre.setName("lettre"+index); // it doesn't give a name to the group
// translate the letter next the last one
lettre.translate(letterX,letterY);
ligne[li].addChild(lettre); // add the child
// adjust next letter position
if (int(words.charAt(i)) == 10) {
ligne[li].scale(.2);
shape(ligne[li], 0,0);
li++;
letterX = 0;
letterY += file[index].height;
} else {
letterX += (file[index].width-100);
}
}
// scale all letters
ligne[li].scale(.2);
// add the shape to the display ?
shape(ligne[li], 0,0);
}
in fact this code do the same svg structure as the first one. Each letter is in a group, but there is no group for a line (at least one group of group (letter)) as i expected with the code.
Also, i name the group, setName("letter"+index) (in javaDoc), but i do not understand what it is supposed to do ! there is no name attribute in the svg exported structure file.
Do i lost my time to attempt to produce a useless structure. in fact i don’t know if Processing is able to determine the size (width and height) of a group. if it don’t, i just have to calculate myself and store the size to center the line.
setName() give a name to the group but does not export to svg → what for? getWidth() does not sendback a width of the group even after shape() (add to the “displaylist”).
