Here’s how to use basic trigonometry to position things in a circle:

[js]

var numObjects = 10;

var centerX;

var centerY;

var angle = 0;

var distance = 100;

function setup() {

createCanvas(600, 600);

centerX = width/2;

centerY = height/2;

noStroke();

ellipseMode(CENTER);

}

function draw() {

background(0);

//divide the circle 360 degrees according to the number of objects

var angleObject = 360/numObjects;

for (var i=0;i<numObjects ;i++)

{

//you can have a circular motion if you sum the same angle to all objects

//angle = frameCount;

//and the speed can be also linked to the object number

//angle = frameCount*i / 2;

//fun with trigonometry and oscillations

//distance = sin(radians(frameCount))*150;

//the sin(angle) cos(angle) has to be

//multiplied by the distance from the center

//because trigonometric functions assume a circle with radius=1

//centerX and centerY is the offset from the top left corner

//remember to convert in radians

var posX = centerX + distance *cos( radians(angleObject*i + angle) );

var posY = centerY + distance *sin( radians(angleObject*i + angle) );

fill(255);

ellipse(posX, posY, 10, 10);

}

}

[/js]

Doing more or less the same without trigonometry and with push/pop transformations

[js]

var numObjects = 10;

var centerX;

var centerY;

var angle = 0;

var distance = 100;

function setup() {

createCanvas(600, 600);

centerX = width / 2;

centerY = height / 2;

noStroke();

ellipseMode(CENTER);

}

function draw() {

background(0);

angle++;

var angleObject = 360 / numObjects;

for (var i = 0; i < numObjects; i++) {

push();

translate(centerX, centerY);

rotate(radians(i * angleObject + angle));

//or you can draw at 0,0 and translate again

//translate(distance,0);

ellipse(distance, 0, 10, 10);

pop();

}

}

[/js]

Make an animated mandala/hypno-disc composition using the rotational symmetry algorithms below.

*You have to use at least two .png images with transparency loaded from an external file.

*You can mix bitmap and processing-generated images.

**Bonus:** use nested for-loops to give the illusion of a 3D tunnel.