var sc = 8; // Scale of the yin-yang image

var centerX, centerY;

var fixFloat = 0;

var angle = 0;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  colorMode(HSB);

  textStyle(BOLD);

}

​

function draw() {

  var size = sc*height/10;  // Change the size of the yin-yang

  var border = 3;   // Change the thickness of the outer circle

  if(fixFloat == 0) {

    centerX = width/2;

    centerY = height/2;

  } else {

    centerX = mouseX;   // Comment these lines out to center the symbol

    centerY = mouseY;   // Comment these lines out to center the symbol

  }

  if (keyIsDown(RIGHT_ARROW)) {

    angle+=2;

  } else if (keyIsDown(LEFT_ARROW)) {

    angle-=2;

  }

  push();

  translate(centerX,centerY);

  rotate(angle);

  var h = int(map(mouseX,0,width,0,360));   // Hue of background

  var b = int(map(mouseY,0,height,100,0));  // Brightness of background

  background(h,s,b);

  strokeWeight(border);

  stroke(0);

  fill(255);

  ellipse(0, 0, size+border);

  fill(0);

  arc(0, 0, size, size, 270, 90);

  noStroke();

  ellipse(0, 0+size/4, size/2);

  fill(255);

  ellipse(0, 0+size/4, size/8);

  ellipse(0, 0-size/4, size/2);

  fill(0);

  ellipse(0, 0-size/4, size/8);

  pop();

  stroke(255);

  strokeWeight(5);

  text('Hue = ' + h, 10, 20);

  text('Sat = ' + s + '%', 10, 40);

  text('Bri = ' + b + '%', 10, 60);

}

​

function mouseClicked() {

  s += 50;

  if(s > 100) {

    s = 0;

  }

}

​

function keyPressed() {

  if (key === '1') {

    sc = 1;

  } else if (key === '2') {

    sc = 2;

  } else if (key === '3') {

    sc = 3;

  } else if (key === '4') {

    sc = 4;

  } else if (key === '5') {

    sc = 5;

  } else if (key === '6') {

    sc = 6;

  } else if (key === '7') {

    sc = 7;

  } else if (key === '8') {

    sc = 8;

  } else if (key === '9') {

    sc = 9;

  } else if (key === '0') {

    sc = 10;

  }

  if (key === 'f') {

    fixFloat++;

    fixFloat %= 2;

  }

}