var cIndex = 0;

var w = 50;

var h = 50;

var shape = 1;

var f = ['Arial', 'Calibri', 'Century Gothic', 'Comic Sans', 'Courier', 'Georgia'];

var fIndex = 0;

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

  noStroke();

}

​

function draw() {

  background(255);

​

  textSize(32);

​

  c.forEach(drawShape);

​

​

}

​

function drawShape(element, index) {

  var x = width * 3 / 4;

  var y = (index + 1) * height / (c.length + 1);

  var h = height / (c.length + 2) - 10;

​

  fill(c[cIndex]);

  textFont(f[fIndex]);

  text(c[cIndex], width / 5, y);

​

  if (shape == 0) {

    rect(x, y, w, h);

  } else if (shape == 1) {

    ellipse(x, y, w, h);

  } else if (shape == 2) {

    triangle(x, y - h / 2, x - h * 2 / 3, y + h / 2, x + h * 2 / 3, y + h / 2);

  } else {

    arc(x, y, w, h, mouseX / width * PI, mouseY / height * 2 * PI);

  }

​

  cIndex = (cIndex + 1) % c.length;

  fIndex = (fIndex + 1) % f.length;

  shape = (shape + 1) % 3;

}

​

function mousePressed() {

  shape = (shape + 1) % 3;

​

  fIndex = (fIndex + 1) % f.length;

}