Exercise: Mandala (rotational symmetry)

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.
Bonus: I’ve never tried it but you can use this library to export an animated gif

Important: In order to make external image files work in open processing you have to:
1. export the sketch as applet
2. copy the images you load in the “applet” folder
3. compress the applet folder
4. upload the zip file and remember to set the canvas size manually on openprocessing before you approve the publication

void setup() {
  size(300, 300);
  //noLoop();
  noStroke();
  smooth();
  background(0);
  ellipseMode(CENTER);
}
 
 
int numObjects = 10;
int centerX = 150;
int centerY = 150;
float distance = 50;
float angle = 0;
 
void draw() {
  background(0);
  //divide the circle 360 degrees according to the number of objects
  float angleObject = 360/numObjects;
 
 
  for (int 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
    float posX=centerX + distance *cos( radians(angleObject*i + angle) );
    float posY=centerY + distance *sin( radians(angleObject*i + angle) );
    ellipse(posX, posY, 10, 10);
 
 
  }
}

This is another way to position objects in a circle using 2D transformations:

void setup() {
  size(300, 300);
  smooth();
  noStroke();
  ellipseMode(CENTER);
}
 
int numObjects = 10;
int centerX = 150;
int centerY = 150;
float distance = 50;
float angle = 0;
float angleObject = 360/numObjects;
 
void draw() {
  background(0);
  angle++;
 
  for (int i=0;i<numObjects ;i++)
  {
 
    pushMatrix();
    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);
    popMatrix();
  }
}
Posted in

Post a comment