Review: Basic line

This code from Arranging a Line of Items draws a line of shapes. It uses the derivation strategy, to calculate a value for x directly from i each time through the loop.

void setup() {
	size(600, 600);
}

void draw() {
	for (int i = 10; i < 20; i++) {
		float x = 10 + 50 * i;
		float y = 100;
		circle(x, 100, 40);
	}
}

Note: From here on, the definition of setup() is not shown. Each of the following code samples assumes that the sketch also contains a setup() function:

void setup() {
	size(600, 600);
}

Using sin and cos

We can use the sin() or cos() functions to make the items swing between the top and bottom of the band, as the index value progresses.

void draw() {
	for (int i = 0; i < 10; i++) {
		float x = 20 + 50 * i;
		float y = 100 + 50 * sin(i);
		circle(x, y, 50);
	}
}

void draw() {
	for (int i = 0; i < 10; i++) {
		float x = 20 + 50 * i;
		float y = 100 + 50 * cos(i);
		circle(x, y, 50);
	}
}

Note: The sketches in this section end up computing sin(0), sin(1), sin(2), all the way to sin(9). The Processing sin() function actually takes radians, so typically a sketch would take much smaller steps. These large steps happen to draw sine waves anyway for complicated math-y reasons (because 1 and $pi$ are incommensurate), and this is just a step towards a sketch that will do things correctly anyway. So use the code in the section Items in a circle to copy from, not the sketches in this section.

Trying to use sin (or cos) for both x and y arranges the items on a diagonal line. This is true any time that x and y use the same equation, because then they will have the same value.

void draw() {
  for (int i = 0; i < 10; i++) {
    float x = 100 + 50 * sin(i);
    float y = 100 + 50 * sin(i);
    circle(x, y, 50);
  }
}

The solution is to use cos for x and sin for y. These functions are cleverly designed so that using them together this way makes a circle.

Let’s look at just using sin for y (instead of x), and compare that to the code a couple of sketches above that uses cos for x.

void draw() {
	for (int i = 0; i < 10; i++) {
		float x = 100 + 50 * cos(i);
		float y = 100 + 50 * i;
		circle(x, y, 50);
	}
}

Combining cos for x with sin for y creates a circle.

void draw() {
	for (int i = 0; i < 10; i++) {
		float x = 100 + 50 * cos(i);
		float y = 100 + 50 * sin(i);
		circle(x, y, 50);
	}
}

There’s two things that may be wrong with this circle, depending on your design intent: (1) it is too small relative to the items that are placed along its edge; and, the items are wrapped around the circle more than once.

The first problem can be addressed by changing the 50 in 50 * cos(i) and 50 * sin(i) to a larger number. We will also change the 100 in 100 + 50 * cos(i) to a larger number, to move the center of the arrangement circle right so that the whole circle stays on the screen.

Items in a circle