Skip to content

Transformation Matricies

Fabian Morón Zirfas edited this page Jun 13, 2025 · 2 revisions

###Transformation Matricies

// Transfomr stuff
// STEP 1 Make the content

var theText = new Array(); // this is for having some text

theText.push(
	"Ziel ist es die Grundlagen von JavaScript für Adobe Anwendungen   zu erlernen,\n",
);
theText.push(
	"um diese in automatisierten Layouts und generativer Gestaltung    anzuwenden.\n",
);
theText.push("Anhand von Regeln soll roher Text in Form gebracht werden.\n");
theText.push(
	"Das Projekt beginnt mit einer Einführung in Javascript und wie es     mit InDesign\n",
);
theText.push("\n");
theText.push(
	"zusammenarbeitet, dann folgen Projekt- und Ideenentwicklung in    Einzel- und Gruppenbesprechungen.\n",
);
theText.push("Zum Abschluss gibt es ein kurze Gruppenpräsentationen.\n");
theText.push("\n");
theText.push("Vorraussetzungen:\n");
theText.push("- Sicherer Umgang mit Adobe InDesign CS4+\n");
theText.push("- Mobiler Computer\n");
theText.push("- Interesse an Programmierung\n");
theText.push("\n");
theText.push("Beginn Dienstag 2. Oktober 10 Uhr\n");
theText.push("Raum 3.16\n");

// STEP 2 define the document

var ps = 300; // the page size
// create a new document with a width and a height
var doc = app.documents.add();
doc.documentPreferences.properties = { pageWidth: ps, pageHeight: ps }; //  change the size of the page

var p = doc.pages[0]; // get the first page of that document

// STEP 3 define some values

var bounds = ps / theText.length; // this is the distance from the page sides
var pw = doc.documentPreferences.pageWidth; // the width
var ph = doc.documentPreferences.pageHeight; // the height
var distFactor = 8; // the distance between the rings

// STEP 4 create the circles on the page

var ovs = new Array(); // create a new array for the ovals

// lets make circles
// use theText.length
// so we have a circle for every line of text
for (var i = 0; i < theText.length; i++) {
	// calculate the ovals geometricBounds
	// distFactor multiplied by i makes the next circle smaller than the rest
	var y1 = bounds + i * distFactor; // from top the upper left point
	var x1 = bounds + i * distFactor; // from left  the upper left point
	var y2 = ph - bounds - i * distFactor; // from top  the lower right point
	var x2 = pw - bounds - i * distFactor; // from left  the lower right point

	//create a circle and put him into the array ovs
	ovs.push(p.ovals.add({ geometricBounds: [y1, x1, y2, x2] }));

	ovs[i].strokeWeight = 0; // we don't want to see the circles

	ovs[i].textPaths.add(); // add a text path to the circle

	// create some transformation matrices
	var rotTM = app.transformationMatrices.add({
		counterclockwiseRotationAngle: i * 10 + 180,
	}); // rotate (the 180 is for getting the line start upwards)

	var hrShiftTM = app.transformationMatrices.add({
		horizontalTranslation: i * distFactor,
	}); // transform horizontal
	var vrShiftTM = app.transformationMatrices.add({
		verticalTranslation: i * -distFactor,
	}); // transform vertical
	var vrScaleTM = app.transformationMatrices.add({ verticalScaleFactor: 0.95 }); // scale vertical with the factor 0.7 makes it smaller
	var hrScaleTM = app.transformationMatrices.add({
		horizontalScaleFactor: 0.95,
	}); // scale horizontal with the factor 0.7 makes it smaller

	// var shearTM = app.transformationMatrices.add({clockwiseShearAngle:45});  // shear

	// now connect the path with the previous one
	// this works with the second oval not the first
	// also don't scale the first circle
	if (i > 0) {
		ovs[i].textPaths[0].previousTextFrame = ovs[i - 1].textPaths[0];
		ovs[i].transform(
			CoordinateSpaces.pasteboardCoordinates,
			AnchorPoint.centerAnchor,
			vrScaleTM,
		);
		ovs[i].transform(
			CoordinateSpaces.pasteboardCoordinates,
			AnchorPoint.centerAnchor,
			hrScaleTM,
		);
	} // close if i > 0

	// apply the Transformation matrices
	ovs[i].transform(
		CoordinateSpaces.pasteboardCoordinates,
		AnchorPoint.centerAnchor,
		rotTM,
	);
	ovs[i].transform(
		CoordinateSpaces.pasteboardCoordinates,
		AnchorPoint.centerAnchor,
		vrShiftTM,
	);
	ovs[i].transform(
		CoordinateSpaces.pasteboardCoordinates,
		AnchorPoint.centerAnchor,
		hrShiftTM,
	);
}

// STEP 5 add the text to the circles

// now add some  text to the circles
// we only have to do this once. each overflow goes into the next Circle Path
ovs[0].textPaths[0].contents = theText.join(""); // pull together the theText    text to one string
// or you could use some placeholder text
//ovs[0].textPaths[0].contents = TextFrameContents.placeholderText;

// STEP 6 edit the text

/**
 * Now comes the text editing part
 * we will loop through all ovals, text paths and words and change their size and   font
 *
 */

// start a loop for all ovals
var k = 0;
while (k < ovs.length) {
	// start another loop for all text paths on every oval
	var j = 0;
	while (j < ovs[k].textPaths.length) {
		// start another loop for all words on every text path on every oval
		var i = 0;
		while (i < ovs[k].textPaths[j].words.length) {
			// this is text editing
			// this scales every word down depending on the number of words on  the text path
			// it is called "MAPPING VALUES INTO RANGES"
			var downScaleFactor = (13 / ovs[k].textPaths[j].words.length) * i;
			ovs[k].textPaths[j].words.item(i).pointSize = 23 - downScaleFactor; // could also bee--> Math.random()*10;

			i++;
		} // close i loop
		j++;
	} //close j loop
	k++;
} //close k loop

// and we are done

Home

Clone this wiki locally