Rotational symmetry – sin cos


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

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);
}
}

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


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();
}
}

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.

Posted in