let controlpadY = 200;

let controlpadW = 50;

let controlpadH = 75;

let controlpadSpace = 25;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  controlpad();

  joystick();

}  

​

function joystick(){

  let joystickX = 100;

  let joystickY = 200;

  let size = 100;

  let angle = 0;

  //draw joystick

  stroke(0);

  fill(200);

  circle(joystickX,joystickY,size);

  //detect if mouse is within circle using euclidian distance

  if(dist(mouseX,mouseY,joystickX,joystickY) < size/2 && mouseIsPressed){

    circle(mouseX,mouseY,size/12); //draw a circle on mouse position

    angle = Math.atan2(mouseY-joystickY, mouseX-joystickX); //get angle

  }

  push();

  translate(20,20);

  rotate(angle + PI/2);

  triangle(20/2,0,-20/2,0,0,-20-5);

  pop();

}

​

​

function controlpad(){

  //lower

  rect(controlpadX-controlpadW/2,controlpadY+controlpadSpace,controlpadW,controlpadH);

  //right

  rect(controlpadX+controlpadSpace,controlpadY-controlpadW/2,controlpadH,controlpadW);

  //upper

  rect(controlpadX-controlpadW/2,controlpadY-controlpadH-controlpadSpace,controlpadW,controlpadH);

  //left

  rect(controlpadX-controlpadH-controlpadSpace,controlpadY-controlpadW/2,controlpadH,controlpadW);

  //check if mouse is in lower 

  if(mouseX >= controlpadX-controlpadW/2 && mouseX <= controlpadX+controlpadW/2 && mouseY >= controlpadY + controlpadSpace && mouseY <= controlpadY + controlpadSpace + controlpadH && mouseIsPressed){

    console.log('clicked down');

  }

  //check if mouse is in upper 

  if(mouseX >= controlpadX-controlpadW/2 && mouseX <= controlpadX+controlpadW/2 && mouseY >=controlpadY-controlpadH-controlpadSpace && mouseY <=controlpadY-controlpadSpace && mouseIsPressed){

    console.log('clicked up')

  }

  //check if mouse is in right

  if(mouseX >= controlpadX+controlpadSpace && mouseX <= controlpadX + controlpadSpace + controlpadH&& mouseY >= controlpadY-controlpadW/2 && mouseY <= controlpadY+controlpadW/2 && mouseIsPressed){

    console.log('clicked right')

  }

  //check if mouse is in left

  if(mouseX >= controlpadX-controlpadSpace-controlpadH && mouseX <= controlpadX - controlpadSpace&& mouseY >= controlpadY-controlpadW/2 && mouseY <= controlpadY+controlpadW/2 && mouseIsPressed){

    console.log('clicked left')

  }

}

​

​

class Player{

  constructor(){

    this.pos = createVector

  }

}