Stained Glass Generator Using Processing - Notre Dame Inspired

The Cathedral Notre Dame de Paris, located on Île de la Cité, in the French capital, is one of the prominent landmarks of the place and will be the object of study for this work. The cathedral started in 1163 and finished in 1345. It was built in the molds of the Basilica of Saint-Denis, therefore following the same Gothic style.

This project aims to generate random "stained glasses" inspired on the Notre Dame's Rose Window, using Processing. It is a cool little project to show some essential functions of Processing with an interactive code to let students play while changing the variables. 

A computer with Processing installed.

For this project, I thought it would be poetic to use the proportions of the Cathedral to create the primary forms for the generator. On the western facade, the most famous, there are several proportions and geometric ratios to be analyzed. I used on this project the height and width of the Cathedral, the vertical divisions of the parapets and floors, the center of the stained glass, and the size of some of the windows. As seen on the image 1.

Using the geometry taken from the proportions of the Cathedral [image 1], the eight circles were made using Processing [image 2]. The formed image and the code can be seen below:

(...)
void onlyLines(int x,int y, int r, int aro){
 stroke(0);
 strokeWeight(aro);
 noFill();
 ellipse(x,y-r/1.62,r*2*1.62,r*2*1.62);//big circle
 ellipse(x,y,r*2,r*2);//down circle
 ellipse(x-r,y-r,r*2,r*2);//left circle
 ellipse(x+r,y-r,r*2,r*2);//right circle
 ellipse(x,y+r/2.6,r*2/1.62,r*2/1.62);//down (small) circle
 ellipse(x,y+r/2.6-r/1.62,r*2/1.62,r*2/1.62);//down+1(small)
 ellipse(x,y+r/2.6-(r/1.62)*2,r*2/1.62,r*2/1.62);//down+2(small)
 ellipse(x,y-r-r/1.62,r*2/1.62,r*2/1.62);//up(small)
}
(...)

With the shapes from the last step, you can finally make the "Stained Glass Generator," which was the ultimate goal.

How it works: Using shapes taken from geometric proportions and Processing's "rotate" and "translate" functions, it is possible to make an infinity of "stained glass" by changing the angle of rotation, the x, and y of the translation, the width of the "rims" and the colors of the circles.

Below are examples of some of the results obtained using the same colors, changing only the angle, x, y, and width of the "rim."

//Modiying section:
int modX = 50; //Mod X
int modY = 50; //Mod Y 
int size = 100; // Size
int angleMore = 60; // Angle
int rim = 5;
int a;
int cont;
void setup(){
 size(600,600);
 frameRate(60);
 background (0);
}
void draw(){
 a+=angleMore;
 cont ++;
 println(360/angleMore);
 translate(width/2, height/2);
 rotate(radians(a));
 if (cont<=100){
  circulos(modX,modY,size);
 }
 if (cont>100 && cont <=200){
  soLinhas(modX,modY,size,rim);
 }
 if (cont>200){
  stop();
 }
}
void circles(int x,int y,int r){
 noStroke();
 fill(0,0,0,10);
 ellipse(x,y-r/1.62,r*2*1.62,r*2*1.62);//big circle
 fill(0,200,255,20);
 ellipse(x,y,r*2,r*2);//down circl
 fill(255,0,0,20);
 ellipse(x-r,y-r,r*2,r*2);//left circle
 fill(255,0,0,20);
 ellipse(x+r,y-r,r*2,r*2);//right circle
 fill(255,220,20,150);
 ellipse(x,y+r/2.6,r*2/1.62,r*2/1.62);//down(small) circle
 fill(255,220,20,150);
 ellipse(x,y+r/2.6-r/1.62,r*2/1.62,r*2/1.62);//down+1(small) circle
 fill(0,220,255,120);
 ellipse(x,y+r/2.6-(r/1.62)*2,r*2/1.62,r*2/1.62);//down+2(small) circle
 fill(255,255,255,120);
 ellipse(x,y-r-r/1.62,r*2/1.62,r*2/1.62);//up(small) circle
}
void onlyLines(int x,int y, int r, int aro){
 stroke(0);
 strokeWeight(aro);
 noFill();
 ellipse(x,y-r/1.62,r*2*1.62,r*2*1.62);//big circle
 ellipse(x,y,r*2,r*2);//down circle
 ellipse(x-r,y-r,r*2,r*2);//left circle
 ellipse(x+r,y-r,r*2,r*2);//right circle
 ellipse(x,y+r/2.6,r*2/1.62,r*2/1.62);//down (small) circle
 ellipse(x,y+r/2.6-r/1.62,r*2/1.62,r*2/1.62);//down+1(small)
 ellipse(x,y+r/2.6-(r/1.62)*2,r*2/1.62,r*2/1.62);//down+2(small)
 ellipse(x,y-r-r/1.62,r*2/1.62,r*2/1.62);//up(small)
}