let y = 200;

let x_blau, y_gruen

​

function setup() {

  let w = min(displayWidth, 400);

  createCanvas(400, 400);

  x_blau = color(100, 149, 237);

  y_gruen = color(154, 205, 50);

  rectMode(CENTER);

  textAlign(CENTER);

  frameRate(5);

}

​

function draw() {

  let links = false;

  if(x>width-150){

    links = true;

  }

  background(152,245,255);

  strokeWeight(10);

  stroke(x_blau);

  line(5, 5, x, 5);

  stroke(y_gruen);

  line(x, 5, x, y);

  stroke(255, 0, 0);

  fill(255);

  ellipse(x, y, 20);

  // x

  fill(x_blau);

  noStroke();

  if(links){

    rect(x-52, y-15, 55, 20);

  } else {

    rect(x+47, y-15, 55, 20);

  }

  fill(0);

  noStroke();

  textSize(15);

  xAlsString = "x: " + str(x);

  if(links){

    text(xAlsString, x - 50, y - 10, 50, 20);

  } else {

    text(xAlsString, x + 50, y - 10, 50, 20);

  }

  xWegAlsString = str(x) + "\nPixel\nnach\nrechts\n––>";

  fill(0);

  noStroke();

  text(xWegAlsString, 30, 30);

  // y

  fill(y_gruen);

  noStroke();

  if(links){

    rect(x-52, y+10, 55, 20);

  } else {

    rect(x+47, y+10, 55, 20);

  }

  fill(0);

  noStroke();

  textSize(15);

  yAlsString = "y: " + str(y);

  if(links){

    text(yAlsString, x - 50, y+15, 50, 20);

  } else {

    text(yAlsString, x + 50, y+15, 50, 20);

  }

  yWegAlsString = str(y) + "\nPixel\nnach\nunten\n––>";

  if(links){

    translate(x-35, 50);

    rotate(PI/2)

    text(yWegAlsString, 0, 0);

  } else {

    translate(x+90, 50);

    rotate(PI/2)

    text(yWegAlsString, 0, 0);

  }

​

​

}

​

function mousePressed(){

  x = mouseX;

  y = mouseY;

}