clicker.pde

int time = 60, rate = 15;

int state, timer, frameCounter, score, missed, outer, inner;
int[] xs;
int[] ys;
int id;

PFont biotype, sans;

void setup() {
  size(800, 600);
  state = 0;
  biotype = loadFont("/fonts/Biotyp.svg");
  sans = loadFont("/fonts/GeosansLight.svg");
  frameRate(rate);
  textFont(biotype, 12);
}

void centerText(String str, PFont font, int size, int y) {
  textFont(font, size);
  text(str, width / 2 - font.width(str) * size / 2, y);
}

void newSet() {
  id = 0;
  int l = random(4, 10);
  xs = new int[l];
  ys = new int[l];

  for (int i = 0; i < l; i ++) {
    xs[i] = random(width);
    ys[i] = random(height);
  }
}

void draw() {
  background(0, 0, 0, 120);
  switch (state) {
    case 0:
      title();
      break;
    case 1:
      game();
      break;
    case 2:
      result();
      break;
  }
}

void title() {
  // title text
  fill(255);
  stroke(255);
  strokeWeight(1);

  centerText("Processing.js", biotype, 60, 40);
  centerText("Clicker", biotype, 120, 75);
  line(20, 105, width - 20, 105);

  // instruction text
  centerText("Instructions", biotype, 30, 280);
  centerText("In " + time + " seconds, click on the circles as much as possible and as accurate as possible.", sans, 20, 320);
  fill(100, 200, 255);
  centerText("Click to Start", biotype, 60, 400);
}

void game() {
  noStroke();
  // write score
  centerText("Score: " + score, sans, 30, 5);

  // show timer
  fill(255, 255, 255, 80);
  centerText(timer + "", biotype, 300, height / 2 - 150);

  // draw lines
  strokeWeight(8);
  stroke(255, 255, 255, 20);

  // for clicked
  for (int i = 0; i < id; i ++) {
    line(xs[i] - 1, ys[i], xs[i + 1], ys[i + 1]);
  }
  // for unclicked
  stroke(255, 255, 255, 100);
  for (int i = id; i < xs.length - 1; i ++) {
    line(xs[i] - 1, ys[i], xs[i + 1], ys[i + 1]);
  }

  // draw circles
  for (int i = 0; i < xs.length; i ++) {
    fill(180, 230, 255, i == id ? 60 : 0);
    noStroke();
    ellipseMode(CENTER);
    ellipse(xs[i], ys[i], 140, 140);
    fill(130, 230, 255, i == id ? 200 : 30);
    ellipse(xs[i], ys[i], 30, 30);
  }

  // advance timer
  frameCounter ++;
  if (frameCounter == rate) {
    frameCounter = 0;
    timer --;
  }

  // change state
  if (timer < 0) {
    state = 2;
    frameCounter = 0;
  }
}

void result() {
  fill(255);
  noStroke();

  // title
  centerText("Results", biotype, 110, 45);

  // score
  fill(200, 255, 255, 180);
  centerText("Score: " + score, biotype, 70, 155);
  stroke(255);
  line(50, 165, width - 50, 165);

  fill(255, 255, 255, 150);
  // stats
  centerText("Missed Clicks: " + missed, sans, 30, 280);
  centerText("Outer Circle Clicks: " + outer, sans, 30, 330);
  centerText("Inner Circle Clicks: " + inner, sans, 30, 380);
  fill(255);
  centerText("Total Clicks: " + (inner + outer + missed), biotype, 40, 440);

  frameCounter ++;
}

void mouseClicked() {
  switch (state) {
    case 0:
      // initialize game
      state = 1;
      score = 0;
      missed = 0;
      inner = 0;
      outer = 0;
      frameCounter = 0;
      timer = time;
      newSet();
      break;
    case 1:
      // add score
      int dx = mouseX - xs[id];
      int dy = mouseY - ys[id];
      int d = sqrt(dx * dx + dy * dy) + 1;
      score += Math.round((max(-d, -70) + 70) / 2 + (max(-d, -15) + 15) * 4 + max(0, 1000 - d) / 250);

      // add count
      if (d < 15) {
        inner ++;
      } else if (d < 70) {
        outer ++;
      }  else {
        missed ++;
      }

      // next circle
      id ++;
      if (id >= xs.length) {
        newSet();
      }
      break;
    case 2:
      if (frameCounter > rate * 2) {
        state = 0;
      }
      break;
  }
}