xxxxxxxxxx
123
function setup() {
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);
}
}