Mobile app version of vmapp.org
Login or Join
Cooney243

: How to rotate all items as a group? (In a script, Illustrator) I have an SVG with a few curved paths. I'd like to create n versions of this, by rotating them around as a group (360 / n

@Cooney243

Posted in: #IllustratorScripting #Javascript #Rotate #Script #Svg

I have an SVG with a few curved paths.
I'd like to create n versions of this, by rotating them around as a group (360 / n degrees apart), around the center of the square-shaped canvas they're in, like this:



Then, I'd like to save these into separate SVG files.

Based on some initial research, this should be possible in Illustrator. However, I can't even get it to rotate all objects as a group, I can only rotate each object around its center with:

doc = app.activeDocument;
sel = doc.pageItems;
for (var i = 0; i < sel.length; i++) {
sel[i].rotate(30);
}


How could I do this? (I'm also open to any software alternative.)

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Cooney243

4 Comments

Sorted by latest first Latest Oldest Best

 

@Ravi4787994

Combining joojaa's matrix manipulation and Cai's SVG exporting loop, I ended up with this script:
#target illustrator

var doc = app.activeDocument;
var docDir = ( doc.path != '' ) ? doc.path : '~';

var n = 20,
iterations = n - 1,
angle = 360 / n,
destFolder = 'rotated'; // output files are saved in this subfolder

rotateAndExport();

function rotateAndExport() {
var pos = [doc.width / 2, doc.height / 2];
var layer = doc.layers[0];
exportFile(1); // save the original file into the output folder
for ( var r = 0; r < iterations; r++ ) {
for ( var j = 0; j < layer.pageItems.length; j++ ) {
var item = layer.pageItems[j];
rotate_around_global_pos(item, -angle, pos);
}
exportFile(r + 2);
}
}

function pad(number) { // pad with a leading zero (%02d)
if (number <= 9) number = "0" + number;
return number;
}

function exportFile( iteration ) {
// create folder if it doesn't exist
var destPath = docDir + '/' + destFolder;
if ( false == Folder( destPath ).exists ) {
new Folder( destPath ).create();
}

// export options
var destFile;
var type;
var exportOptions;

var svgPath = destPath + '/';
destFile = new File( svgPath + '/output_' + pad(iteration) + ".svg");

type = ExportType.SVG;
exportOptions = new ExportOptionsSVG();
exportOptions.preserveEditability = false;
exportOptions.embedRasterImages = true;
exportOptions.embedAllFonts = false;
exportOptions.encoding = SVGDocumentEncoding.UTF8;
exportOptions.fontType = SVGFontType.OUTLINEFONT;

doc.exportFile( destFile, type, exportOptions );
}

function rotate_around_global_pos(obj, ang, pos) {
var rot = app.getRotationMatrix(ang);
var mov = app.getTranslationMatrix(pos[0], pos[1]);
var inv = app.invertMatrix(mov);
var mtx = app.concatenateMatrix(inv, rot);
var mtx = concatenateMatrix(mtx, mov);

obj.transform(mtx, 1, 1, 1, 1, 1, Transformation.DOCUMENTORIGIN);
}


This script creates a subfolder next to the file currently open, and saves n states, each of which are rotated clockwise with the same angle one after another. (The paths don't need to be grouped, and no additional rectangle needs to be added.)

10% popularity Vote Up Vote Down


 

@Cugini998

Quick primer into computer graphics programming. Whenever you are trying to do a compound transform it is best to compose the transform onto a matrix operation. Mainly because you can specify a complex transformation in one go.

OK so no we have to compute the bounds. But then you might rotate around a arbitrary point in some case too (this makes it easy).
#target illustrator

var doc = app.activeDocument;
var sel = doc.pageItems;
var bounds = calculate_bounds(sel);
var center = [(bounds[0]+bounds[2])/2,
(bounds[1]+bounds[3])/2]

for (var i = 0; i < sel.length; i++) {
rotate_around_global_pos(sel[i], 30, center);
}


/********* Support functions *********/

function rotate_around_global_pos(obj, ang, pos) {
var rot = app.getRotationMatrix(15);
var mov = app.getTranslationMatrix(pos[0], pos[1]);
var inv = app.invertMatrix(mov);
var mtx = app.concatenateMatrix(inv, rot);
var mtx = concatenateMatrix(mtx, mov);

obj.transform(mtx, 1, 1, 1, 1, 1, Transformation.DOCUMENTORIGIN);
}

function calculate_bounds(sel){
var minX = Number.POSITIVE_INFINITY;
var maxX = Number.NEGATIVE_INFINITY;
var minY = Number.POSITIVE_INFINITY;
var maxY = Number.NEGATIVE_INFINITY;


for (i = 0; i < sel.length; i++){
var item = sel[i];
var bounds = sel[i].controlBounds;

minX = Math.min( minX, bounds[0], bounds[2] );
maxX = Math.max( maxX, bounds[0], bounds[2] );
minY = Math.min( minY, bounds[1], bounds[3] );
maxY = Math.max( maxY, bounds[1], bounds[3] );
}
return [maxX, maxY, minX, minY];
}

10% popularity Vote Up Vote Down


 

@Gloria351

You could always record an action on one file (Window > Actions) and then run the rest as a batch using that action...

I did a test creating, saving out the first group and then rotating and saving out 7 copies... and it worked just fine:



Here is my action so you can see how I did it:

10% popularity Vote Up Vote Down


 

@Kaufman565

If you are using an SVG file, you can open it in Adobe Illustrator.
Then select all of your objects that you wish to rotate. Ctrl + A should do.
Then right click and group them.
Now, you can easily rotate them as one.

You can ungroup them later as well.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme