Submit and you will be freed

class Other {

  constructor(xPos, yPos) {  

    this.col = color(0,0, random(0,150), random(0,20));

    this.xPos = xPos; 

    this.yPos = yPos;

    this.size = 10;

    this.lifespan = 255;

  }

  run() {

    this.xPos += 1;

    this.yPos += -1;

    if(this.lifespan > 0){

      this.lifespan--;

    }

  }

  draw() {

    noStroke();

    fill(this.col);

    ellipse(this.xPos, this.yPos, this.size, this.size);

  }

}

​

var bg = 225;

var posX, posY;

var page = 1;

var other = [];

var angle = 0.0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  ellipseMode(CENTER);

  textAlign(CENTER);

  posX = width/2;

  posY = height/2 - 100;

}

​

function draw() {

  background(bg);

  noStroke();

  //first level: where am I going?

  if(page === 1){

    ellipse(posX + random(1,4), posY + random(1,4), 30, 30);

    fill(0);

    rect(0,0, width/2-50, height);

    rect(width/2+50,0, width/2, height);

    if(posY >= height-170){

      fill(bg);

​

      push();

      fill("orange");

      rect(width/2-50, 0, 100, 150);

      fill("white");

      textSize(20);

      text("GOAL", width/2, 130);

      pop();

      push();

      textSize(80);

      fill("red");

      textStyle(BOLD);

      text("Sorry, wrong goal.", width/2, height/2);

      textSize(30);

      text("Click to continue", width/2, height/2 + 100);

      pop();

    } else{

      fill("red"); 

      push();

      textAlign(RIGHT);

      fill("orange");

      textSize(20);

      text("MOVE TOWARDS THE GOAL"+ "\n" + "YOU CAN DO THIS!", width-130, 100);

      //text("→ = UP"+ "\n" + "← = DOWN"+ "\n" + "↓  = RIGHT" + "\n" + "↑  = LEFT", width-130, 200);

      pop();

      push();

      fill("orange");

      rect(width/2-50, height-150, 100, height);

      fill("white");

      textSize(20);

      text("GOAL", width/2, height-120);

      pop();

    }

  }

  //Second level: Where's my time?

  if(page === 2){

    background(bg);

    ellipse(posX + random(1,4), posY + random(1,4), 30, 30); 

    push();

    fill(0);

    rect(0,0, 180, height/2 - 50);

    rect(220, 0, width, height/2 - 50);

    rect(0, height/2 + 50, width/2 - 130, height);

    rect(width/2 - 20, height/2 + 50, width, height);

    rect(width/2 + 350, 0, width, height);

    pop();

    if(posX <= width/2){

      fill(bg); 

      push();

      textSize(80);

      fill("red");

      textStyle(BOLD);

      text("Time's up. Better luck next time.", width/2, height/2);

      textSize(30);

      text("Click to continue", width/2, height/2 + 130);

      pop();

    } else {

      fill("red");

      push();

      textSize(20);

      fill("orange");

      textAlign(RIGHT);

      text("YOU ARE IN CONTROL OF YOUR FUTURE." + "\n" + "CHOOSE YOUR PATH!", width-130, 100);

      //text("→ = UP"+ "\n" + "← = DOWN"+ "\n" + "↓  = RIGHT" + "\n" + "↑  = LEFT", width-130, 200);

      pop();

    }

  }

  //third level: where am I going?

  if(page >= 3){

    background(bg);

    print("[MANIFESTO] Societal rules are arbitrarily made up by the collective knowledge and agreement of the society. They are deeply flawed and contradictory. Nevertheless, we blindly follow them, make them our goals in life and surrender our power for them to dictate our decisions and behaviors. We are constantly chasing misguided success, but who are we proving ourselves to? Living is complete chaos, yet we desperately want to make meaning out of the things happening, or else how can we justifying our existence? We grab on to external objects that we think make us whole, while the power struggle is heavily internal. Are you going to be content with yourself and the chaos that surrounds? Submit and you will be freed.");

    push();

    fill(0,0,0,50);

    textSize(20);

    textStyle(BOLD);

    text("SUBMIT" + "\n" + "AND" + "\n" + "YOU WILL BE FREED", width/2, height/2);

    pop();

    for(var i=0; i < 20; i++){ 

      other.push(new Other(random(width), random(height)));

    }

    for(var j=0; j < other.length; j++) {

      var others = other[j];

      if(others.lifespan<=0 || other.length >=300){

        other.splice(j, 1);

      }

      else {

        others.run();

        others.draw();

      }

    }

    fill("red");

    translate(width/2, height/2);

    angle = frameCount / 150 * TWO_PI;

    var m = sin(angle) * 150;

    var n = cos(angle) * 150;

    ellipse(m + random(-4,4), n + random(-4,4), 50, 50);

  }

}

​

function keyPressed() {

  if(keyCode == DOWN_ARROW){

    posX +=20; //right

  } else if (keyCode == LEFT_ARROW) {

    posY +=20; //down

  } else if(keyCode == UP_ARROW) {

    posX -=20; //left

  } else if(keyCode == RIGHT_ARROW) {

    posY -=20; //up

  }

}

​

function mousePressed() {

  posX = width/2 + 250; 

  posY = height/2;

  page++;

}