createCanvas(300, 300);

}

​

//For color change animation

A1 = 0; //Color

A2 = 1; //Speed

​

function draw() {

  background("White");

​

  //Flag Colors

  noStroke();

  var B = "Black";

  var Gy = "LightGray";

  var Wh = "White";

  var Pu = "Purple";

  var G = "LimeGreen";

  var lG = "PaleGreen";

​

  var FlagXAro = 0;

  var FlagXAce = width / 2;

  var FlagW = width / 2;

  var FlagHAro = height / 5;

  var FlagHAce = height / 4;

​

  //Aro Flag

​

  fill(G);

  rect(FlagXAro, 0, FlagW, FlagHAro);

​

  fill(lG);

  rect(FlagXAro, height - 240, FlagW, FlagHAro);

​

  fill(Wh);

  rect(FlagXAro, height - 180, FlagW, FlagHAro);

​

  fill(Gy);

  rect(FlagXAro, height - 120, FlagW, FlagHAro);

​

  fill(B);

  rect(FlagXAro, height - 60, FlagW, FlagHAro);

​

  //Ace Flag

  fill(B);

  rect(FlagXAce, 0, FlagW, FlagHAce);

​

  fill(Gy);

  rect(FlagXAce, height - 225, FlagW, FlagHAce);

​

  fill(Wh);

  rect(FlagXAce, height - 150, FlagW, FlagHAce);

​

  fill(Pu);

  rect(FlagXAce, height - 75, FlagW, FlagHAce);

​

  //Spade

​

  var X1 = width - 170;

  var X2 = X1 + 40;

  var Y = height / 2;

  var W = 55;

  var H = 70;

​

  strokeWeight(4);

  fill(A1);

  ellipse(X1, Y, W, H); //Left

  ellipse(X2, Y, W, H); //Right

​

  triangle(135, 210, 165, 210, 150, 170); //Base

  triangle(111, 126, 190, 126, 150, 80); //Top

​

  //Arrow

  var LXY1 = 100;

  var LXY2 = 200;

​

  stroke(A1);

  strokeWeight(8);

  line(LXY1, LXY1, 200, 200);

  line(LXY2, LXY2, 190, 200);

  line(LXY2, LXY2, 200, 188);

  line(LXY1, LXY1, 100, 90);

  line(LXY1, LXY1, 90, 100);

​

  //Animation

​

  A1 += A2;

  if (A1 > 70 || A1 < 0) {

    A2 *= -1;

  }

​

  //Interaction

​

  noStroke();

  textSize(15);

  fill(B);

​

  //Left text

  if (mouseX < width / 2) {

    text("Aromanticism", 50, 35);

    text("Aromantic", 15, 85);

    text("Spectrum", 15, 105);

    text("Platonic +", 15, 145);

    text("Aesthetic", 15, 165);

    text("Grayromantic +", 25, 205);

    text("Demiromantic", 25, 225);

    fill(Wh);

    text("Sexuality", 75, 265);

    text("Spectrum", 75, 285);

​

    //Right text

  } else if (mouseX > width / 2) {

    fill(Wh);

    text("Asexuality", 160, 40);

    fill(B);

    text("Demisexual", 200, 115);

    text("Non-Ace", 218, 180);

    text("Allies", 218, 200);

    text("Ace", 160, 255);

    text("Community", 160, 275);

  }

}

​