Arranging Items in a Circle or Spiral

Bending the line

	for (let i = 0; i < 10; i++) {
		let x = 20 + 50 * i;
		let y = 100;	
		circle(x, y, 50);
	}
image
	for (let i = 0; i < 10; i++) {
		let x = 20 + 50 * i;
		let y = 100 + 50 * sin(i);
		circle(x, y, 50);
	}
image
	for (let i = 0; i < 10; i++) {
		let x = 100 + 50 * sin(i);
		let y = 100 + 50 * sin(i);
		circle(x, y, 50);
	}

Items in a circle

image

	for (let i = 0; i < 10; i++) {
		let angle = i * TWO_PI / 10;
		let x = 250 + 150 * cos(angle);
		let y = 300 + 150 * sin(angle);
		circle(x, y, 50);
	}
image
	angleMode(DEGREES);
	for (let i = 0; i < 10; i++) {
		let angle = i * 360 / 10;
		let x = 250 + 150 * cos(angle);
		let y = 300 + 150 * sin(angle);
		circle(x, y, 50);
	}
image
	angleMode(DEGREES);
	for (let i = 0; i < 360; i += 10) {
		let angle = i + frameCount;
		let x = 250 + 150 * cos(angle);
		let y = 300 + 150 * sin(angle);
		circle(x, y, 50);
	}

image
	angleMode(DEGREES);
	for (let i = 0; i < 360; i += 10) {
		let angle = i;
		let x = 250 + 150 * cos(angle);
		let y = 300 + 150 * sin(angle);
		circle(x, y, 50);
	}
image

Changing some of the items

	angleMode(DEGREES);
	for (let i = 0; i < 360; i += 10) {
		let angle = i;
		let x = 250 + 150 * cos(angle);
		let y = 300 + 150 * sin(angle);
		
		if (i === 180) {
			fill('black');
		} else {
			fill('white');
		}
		circle(x, y, 50);
	}
image
	angleMode(DEGREES);
	for (let i = 0; i < 360; i += 10) {
		let angle = i;
		let x = 250 + 150 * cos(angle);
		let y = 300 + 150 * sin(angle);
		
		if (i === 180) {
			fill('black');
		} else {
			fill('white');
		}
		if (i === 90) {
			strokeWeight(5);
		} else {
			strokeWeight(1);
		}
		circle(x, y, 50);
	}
image
	angleMode(DEGREES);
	for (let i = 0; i < 360; i += 10) {
		let angle = i;
		let radius = 150;
		let x = 250 + radius * cos(angle);
		let y = 300 + radius * sin(angle);
		
		if (i % 40 === 0) {
			fill('black');
		} else {
			fill('white');
		}
		if (i === 90) {
			strokeWeight(5);
		} else {
			strokeWeight(1);
		}
		circle(x, y, 50);
	}
image

Animating the circle

	background(200);
	angleMode(DEGREES);
	for (let i = 0; i < 360; i += 10) {
		let angle = i + frameCount;
		let radius = 150;
		let x = 250 + radius * cos(angle);
		let y = 300 + radius * sin(angle);
		
		if (i % 40 === 0) {
			fill('black');
		} else {
			fill('white');
		}
		if (i === 90) {
			strokeWeight(5);
		} else {
			strokeWeight(1);
		}
		circle(x, y, 50);
	}
image

From circle to spiral


	angleMode(DEGREES);
	for (let i = 0; i <= 360; i += 10) {
		let angle = i;
		let radius = map(i, 0, 360, 10, 200) + 100;
		let x = 250 + radius * cos(angle);
		let y = 300 + radius * sin(angle);
		
		if (i % 40 === 0) {
			fill('black');
		} else {
			fill('white');
		}
		if (i === 90) {
			strokeWeight(5);
		} else {
			strokeWeight(1);
		}
		circle(x, y, 80);
	}

Increase to 720 degrees to wrap around more than once

image
	angleMode(DEGREES);
	for (let i = 0; i < 720; i += 10) {
		let angle = i;
		let radius = map(i, 0, 360, 10, 200);
		let x = 250 + radius * cos(angle);
		let y = 300 + radius * sin(angle);
		
		if (i % 40 === 0) {
			fill('black');
		} else {
			fill('white');
		}
		if (i === 90) {
			strokeWeight(5);
		} else {
			strokeWeight(1);
		}
		circle(x, y, 50);
	}
image