function setup() {
  createCanvas(560, 420);
  ellipseMode(CORNER)  
}

var unit, xp, yp;

function mouseDo() {
  x = mouseX;
  y = mouseY;

  unit = width/4.0 - 2.0;
  xs = 2.0*mouseX/width - 1.0; 
  ys = 2.0*mouseY/height - 1.0;
  
  xp = (int)(100 * xs);
  yp = (int)(100 * ys);      
}

function draw() {
  // reset mouse-based variables
  mouseDo()

  // clear screen to white
  stroke(0);
  fill(255);
  rect(0,0,width-1,height-1);

  // now get ready to draw circles
  stroke(0);
  noFill();

  for(curp=0;curp<11;curp++) {
    if(curp == 0) {
      xf = width/2.0;
      yf = height/2.0;
      sign = 1.0; 
    }
    else if(curp == 1) {
      xf = width/2.0 - unit;
      yf = height/2.0;
      sign = -1.0;
    }
    else if (curp == 2) {
      xf = width/2.0 + unit;
      yf = height/2.0;
      sign = -1.0;
    }
    else if (curp == 3) {
      xf = width/2.0 - 3*unit/2;
      yf = height/2.0 - 0.866*unit;
      sign = 1.0;
    }
    else if (curp == 4) {
     xf = width/2.0 - unit/2;
     yf = height/2.0 - 0.866*unit;
     sign = -1.0;
    }
    else if (curp == 5) {
     xf = width/2.0 + unit/2;
     yf = height/2.0 - 0.866*unit;
     sign = -1.0;
    }
    else if (curp == 6){
      xf = width/2.0 + 3*unit/2;
      yf = height/2.0 - 0.866*unit;
      sign = 1.0;
    }
    else if (curp == 7) {
      xf = width/2.0 - 3*unit/2;
      yf = height/2.0 + 0.866*unit;
      sign = 1.0;
    }
    else if (curp == 8) {
      xf = width/2.0 - unit/2;
      yf = height/2.0 + 0.866*unit;
      sign = -1.0;
    }
    else if (curp == 9) {
      xf = width/2.0 + unit/2;
      yf = height/2.0 + 0.866*unit;
      sign = -1.0;
    }
    else /* (curp == 10)*/{
      xf = width/2.0 + 3*unit/2;
      yf = height/2.0 + 0.866*unit;
      sign = 1.0;
    }
    for(i=0;i<6;i++) {
      h = (int)((unit) * (11.0 - i)/11.0);
      x = (int)(xf + (i/11.0)*(xs*unit*sign) - h/2);
      y = (int)(yf + (i/11.0)*(ys*unit*sign) - h/2);
      ellipse(x, y, h, h);
    }
  }
}