let connected=0;

let socket = io('https://itpcamp-workshop-shapeserver.glitch.me', { transports: ['websocket', 'polling', 'flashsocket'] });

//CREATE BUTTON

let btn;

​

function setup() {

  //background(220);

  createCanvas(400, 400);

  btn=createButton("Get Shape from server");

  btn.mousePressed(getShape);

  //ANONUMOUS CALLBACK FUNCTION THAT REACTS TO THE REQUEST FOR DATA FROM THE SERVER

  socket.on('shapedata', function(data){

      drawShape(data.shape,data.color,data.x,data.y);

    });

}

​

function mousePressed(){

  if(mouseY<height){

    socket.emit("shapedata", {shape: "r", x: mouseX, y: mouseY, color:(155,0,200)});

  }

}

​

function drawShape(sType,sColor,sX,sY){

  fill(sColor);

  if (sType == "e"){

   ellipse (sX,sY,30,20);

  }else if (sType == "r"){

    rect(sX,sY,34,20);

  } else if(sType == "t"){

    triangle(sX-12,sY-12,sX+12,sY-12,sX,sY+12);

  } else if (sType=="c") {

      // circle

      ellipse(sX, sY, 25, 25);      

    }      

}

​

//RUN THE FUNCTION THAT IS IN THE SERVER

function getShape(){

 socket.emit("getshape"); 

}

​

function draw() {

}