let circleY = 0;

let sz = 20;

let alpha = 255;

let circleAlpha = 0;

let maxSize = 160;

let buttonSize = 30;

let buttonMinSize = 30;

let buttonMaxSize = 50;

let w = 2;

let buttonX = 370;

let buttonY = 30;

let fontfile = "SuisseFont/SuisseIntl-Book.ttf";

let svg1 = "Omino.svg";

let tSize = 24;

let inButton = false;

let overOmino = false;

let ominoX = 0;

let ominoY = 0;

let ominoR = 0;

let i = 0;

​

function preload() {

  suisse = loadFont(fontfile);

  omino = loadImage(svg1);

}

​

function setup() {

  createCanvas(400, 400);

}

​

//this is needed to reset the board

function mousePressed() {

  if (mouseButton == CENTER) {

    alpha = 255;

  }

}

​

function mouseReleased() {

  if (mouseButton == CENTER) {

    alpha = 0;

  }

}

​

function draw() {

  i++;

  push();

  background(255, alpha);

​

  noStroke();

  fill(0, 255);

  circle(mouseX, mouseY, sz);

  //circleX++;

  //circleY = 50 + 20*sin(circleX/10);

  //sz = sz + 5*sin(circleX/10);

​

  // here's is checkd the mouse press to determine if draw or not

  if (mouseIsPressed == true) {

    if (mouseButton == LEFT && sz <= maxSize) {

      sz = sz + 8;

      circleAlpha = circleAlpha + 50;

    } else if (mouseButton == LEFT && sz <= maxSize) {

      sz = maxSize;

      circleAlpha = circleAlpha + 50;

    }

  } else if (mouseIsPressed == false && sz > 20) {

    sz = sz - 10;

    circleAlpha = 0;

  }

​

  push();

  blendMode(EXCLUSION);

  noFill();

  stroke(255);

  strokeWeight(w);

  rectMode(CENTER);

  rect(buttonX, buttonY, buttonSize - 2);

  line(

    buttonX - buttonSize / 3,

    buttonY - buttonSize / 3,

    buttonX + buttonSize / 3,

    buttonY + buttonSize / 3

  );

  line(

    buttonX + buttonSize / 3,

    buttonY - buttonSize / 3,

    buttonX - buttonSize / 3,

    buttonY + buttonSize / 3

  );

  pop();

​

  //interface interactivity

​

  if (

    mouseX < buttonX + buttonSize / 2 &&

    mouseX > buttonX - buttonSize / 2 &&

    mouseY > buttonY - buttonSize / 2 &&

    mouseY < buttonY + buttonSize / 2

  ) {

    inButton = true;

  } else {

    inButton = false;

  }

​

  if (

    mouseX < 250 &&

    mouseX > 150 &&

    mouseY > 150 &&

    mouseY < 250

  ) {

    overOmino = true;

  } else {

    overOmino = false;

  }

​

  if (inButton === true && buttonSize < buttonMaxSize) {

    buttonSize += 4;

  } else if (inButton === true && buttonSize == buttonSize) {

    buttonSize = buttonSize;

  } else if (inButton === false && buttonSize > buttonMinSize) {

    buttonSize -= 4;

  } else if (inButton === false && buttonSize == buttonMinSize) {

    buttonSize = buttonMinSize;

  }

  if (overOmino == true && mouseIsPressed == true) {

    ominoR = sin(i/2)/3;

  } else if (overOmino == false && ominoR <= 0){

    ominoR -= ominoR/3;

  } else if (overOmino == false && ominoR >= 0){

    ominoR -= ominoR/3;

  } else if (overOmino == false && ominoR == 0){

    ominoR = 0 ;

  }

  push();

  imageMode(CENTER);

  filter(INVERT);

  translate(width / 2, height / 2);

  rotate(ominoR);

  image(omino, ominoX, ominoY, 100, 100);

  pop();

​

  push();

  blendMode(EXCLUSION);

  fill(255);

  textAlign(LEFT, TOP);

  textSize(tSize);

  textFont(suisse);

  textLeading(tSize - tSize / 16);

  text("Click to discover this little shit ", 15, 340, 230);

  pop();

​

  //this makes sure that opacity of the background goes back to 0

  //alpha = alpha - 255;

  pop();

}