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

socket.on("connect", function () {

    connected = 1;

});

​

​

let btn;

​

function setup() {

  createCanvas(600, 600);

  background(220);

​

  btn=createButton("Ask Server for Shape");

  btn.mousePressed(askForShape);

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

      console.log(data);

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

});

}

​

function mouseMoved(){

  if (mouseY < 600) {

       socket.emit("shapedata",{shape: "c", x: mouseX, y: mouseY, color: "#9D66FE51"});

​

  }

}

​

​

​

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

    fill(sColor);

    if (sType=="e") {

      // ellipse

      ellipse(sX, sY, 30, 20);      

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

      // square

      rect(sX,sY,25,25);

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

      // rectangle

      rect(sX,sY,34,20);  

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

      // triangle

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

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

      // circle

      ellipse(sX, sY, 25, 25);      

    }      

}

​

function askForShape() {

  socket.emit("getshape");

}

​

function draw() {

​

}