var cycles            //pattern group loops

var type = 0          //pattern

var loops = 0         //times patterns changed 

var expo = 0.15       //growth rate

var pattern_set = 6   //amount of patterns

var size = 10         //shape size

var reset = 2

var fr = 60/2         //Frame per second

var side_length = 600 // canvas size

var reset_square = reset*reset           //How many squares it resets at

function setup() {

  createCanvas(side_length, side_length);

  frameRate (fr)

}

function draw() {

size=size+expo                            //growth function

for (var x=0; x<=width; x+=size) {

for (var y=0; y<=height; y+=size) {

fill(random(255),random(255),random(255)) //colour

if (type == 0) {

  stroke(0)

  rect (x,y,size,size)

}

if (type == 1) {

  noStroke()

  rect (x,y,size,size)

}

if (type == 2) {

  stroke(0)

  ellipse (x,y,size,size)

}

if (type == 3) {

  noStroke()

  ellipse (x,y,size,size)

}

if (type == 4) {

  stroke(0)

  rect (x,y,size,size)

  ellipse (x,y,size,size)

}

if (type == 5) {

  noStroke()

  rect (x,y,size,size)

  ellipse (x,y,size,size)

}

}

}

var xlen=width/size

var ylen=height/size

var area=round(xlen*ylen)

textSize(40)

text(area,1,side_length-10) //TEXT SHOWING NUMBER OF SQUARES

if(area<=reset_square){     //looping

size=10                     //reset size

loops = loops+1

type = type +1

console.log(loops)

cycles = floor(loops/6)

console.log(cycles)

}

if (type == pattern_set){  //pattern group reset 

  type = 1

}

}