3.24.3 ES PDF OtherUsesForLoops

OTHER USES FOR LOOPS
This PDF is intended to accompany the Bonus Lesson, “Other Uses For Loops.”
New Techniques
We learned a few new techniques in this process.
Adding Elements to an Array

When we have an array, instead of specifying all of the elements at the time
we create the array, we can dynamically add elements to the end of it.
This uses the array method push().
An example:
var myArray = [];
myArray.push(“Hello”);
myArray.push(“my”);
myArray.push(“name”);
myArray.push(“is”);
myArray.push(“Zack”);
// Result: [“Hello”, “my”, “name”, “is”, “Zack”]
Adding 1 to a Variable
In our loops, every time we end the loop we add 1 to the incrementer.
Traditionally, we achieved this by: i = i + 1.
However, there’s a much more concise way of writing this same statement: i++.
Adding Another Value to a Variable

Often, we’ll want to take a variable, add another value to it, and keep working with
the (newly larger) original variable.
Traditionally, we achieved this by: banana = banana + 10.
However, there’s a much more concise way of writing this same statement: banana += 10.
Converting Arrays to Strings

It’s a common task in Javascript to convert an array of Things into a string. In our case,
it’s so that we can display things on screen nicely.
This relies on an array method called join(). Join will take 1 argument, a string, and
smudge all of the array elements together, separated by the provided string.
When using join() with the special new line token, ”\n”, each array element will be
placed on a new line.
[1, 2, 3, 4].join(“x”);
// Result: 1x2x3x4
[1, 2, 3, 4].join(“ | “);

// Result: 1 | 2 | 3 | 4
[1, 2, 3, 4].join(“\n”);
// Result:
1
2
3
4
Checking Item Index in Array

When working with arrays, we’ll occasionally need to check whether an item exists in the array.
We accomplish this with the array method indexOf(). This takes 1 argument, the element we’re
looking for in the array, and it’ll return it’s index # within the array. If it can’t find it, it’ll return -1
as a fallback.
Thus, by checking whether the index of an element in an array is -1, we can ask “does this element
exist in the array?”
[1, 2, 3, 4].indexOf(2);
// Result: 1
[1, 2, 3, 4].indexOf(4);
// Result: 3
[1, 2, 3, 4].indexOf(“elephants”);
// Result: -1
Looping While True

We’ve worked with loops a bunch in the course, but in every case we’ve had a fixed number
of runs; we always want to loop, say, 5 times. Or 10 times. Or “as many times as there are layers
in the comp”.
But there are times when we want to keep looping until a certain thing is true - no matter how
many loops it takes.
For these, we use a while() loop. These loops require a conditional in the brackets; “while this
is true, keep looping”. Thus, in practice, they’re similar to if statements, and take the same sort
of conditionals.
It’s important to ensure that the condition is possible, however! Otherwise, your code will run
forever, causing an “infinite loop” scenario, which can crash the software. This can be accounted
for by keeping track of the number of loops, and stopping when a certain threshold is met.
var counter = 0;
while (true && counter < 10) {

counter++;
}
counter;
// Result: 10
Connecting Layers
We connected layers using the createPath() path expression.
We’ve seen this before, though didn’t use loops; this was the old method:
var points = [
fromComp(thisComp.layer(“Indicator”).position),
fromComp(thisComp.layer(“Indicator 2”).position),
];
createPath(points);
Note that this is super redundant! Those 5 lines specifying the positions is the exact same
bits of text written a whole lot of times. That’s annoying.
We can improve on this by looping through all of the layers, and pushing each layer’s position
into an array of points, and using that.
var points = [];
for (var i = 2; i <= thisComp.numLayers; i++) {

var layerPosition = fromComp(thisComp.layer(i).position);
points.push(layerPosition);
}
createPath(points);
Averaging Layer Positions

The second example was looking at how to get the average position of all of our layers, so that
our target layer could be stuck smack dab in the middle of the rest.
To do this we started with an array of [0, 0], and at each iteration, added that layer’s position to
this empty array.
We also counted the number of steps we looped, so that we could divide the total by the number
of steps to get the average.
var totalPosition = [0, 0];

var counter = 0;
for (var i = 2; i <= thisComp.numLayers; i++) {

var layerPosition = thisComp.layer(i).position;
totalPosition += layerPosition;
counter++;
}
totalPosition / counter;
Generating Random Numbers

The final example was looking at how to generate a series of random numbers.
We began by specifying the minimum and maximum numbers to generate, as well as the amount of
numbers we want. Once we had those values, we created a loop to generate a (rounded) number in
that range, and push it into an array.
Finally, we joined that array using a new-line character, resulting in our nice list of changing numbers.
posterizeTime(2);
var min = 1000;
var max = 9999;
var numNumbers = 10;
var randomNums = [];
for (var i = 0; i < numNumbers; i = i + 1) {

var randomNum = Math.round(random(min, max));
randomNums.push(randomNum);
}
randomNums.join(“\n”);
Extra Love: Unique Values

As an extra task, we set out to ensure that each randomly generated value was unique. This
process isn’t foolproof and relies on a few new techniques (including one that risks crashing
AE - our favourite!)
We kept the same general structure, but added some additional things to it. Primarily a new
type of loop - a while loop - that will keep looping until the condition in the brackets is met.
Think of it like a mix between a loop and an if statement.
For our purposes, we told the expression to keep looping as long as the value it generated
already existed in our random number list. If, after 20 tries, it can’t generate a new number - then
it can give up.
The detection of whether or not the number existed in our list used a new array method called
indexOf(), which looks into an array and tries to tell us the location of a specified element
in the array.
posterizeTime(2);
var min = 10;
var max = 19;
var numNumbers = 9;
var randomNums = [];
for (var i = 0; i < numNumbers; i = i + 1) {

var randomNum = Math.round(random(min, max));
var loopCounter = 0;
while (randomNums.indexOf(randomNum) !== -1 && loopCounter < 20) {

randomNum = Math.round(random(min, max));
loopCounter++;
}
randomNums.push(randomNum);
}
randomNums.join(“\n”);

3.24.3 ES PDF OtherUsesForLoops

Uploaded by

Copyright:

Available Formats

3.24.3 ES PDF OtherUsesForLoops

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3.24.3 ES PDF OtherUsesForLoops

Uploaded by

Copyright:

Available Formats

OTHER USES FOR LOOPS

Adding Elements to an Array

This uses the array method push().

var myArray = [];

// Result: [“Hello”, “my”, “name”, “is”, “Zack”]

Traditionally, we achieved this by: i = i + 1.

Adding Another Value to a Variable

Traditionally, we achieved this by: banana = banana + 10.

Converting Arrays to Strings

[1, 2, 3, 4].join(“ | “);

Checking Item Index in Array

Looping While True

while (true && counter < 10) {

var points = [];

for (var i = 2; i <= thisComp.numLayers; i++) {

Averaging Layer Positions

var totalPosition = [0, 0];

for (var i = 2; i <= thisComp.numLayers; i++) {

Generating Random Numbers

for (var i = 0; i < numNumbers; i = i + 1) {

Extra Love: Unique Values

for (var i = 0; i < numNumbers; i = i + 1) {

while (randomNums.indexOf(randomNum) !== -1 && loopCounter < 20) {

You might also like