let socket = io("https://itpcamp-workshop-shapeserver.glitch.me", {

  transports: ["websocket", "polling", "flashsocket"],

});

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

  connected = 1;

});

​

let btn;

let btnClear;

let btnAsk;

​

function setup() {

  createCanvas(600, 600);

  background(220);

  btn = createButton("Draw Random Shape");

  btn.mousePressed(drawIt);

  btnClear = createButton("Clear me!");

  btnClear.mousePressed(clearIt);

  btnAsk = createButton("Ask for shape pls");

  btnAsk.mousePressed(askForShape);

​

  //an anon function that is created when a message comes in

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

    console.log(data);

  });

}

​

function askForShape() {

  socket.emit("getshape");

}

​

function drawIt() {

  gimmeSquare();

}

​

function clearIt() {

  background(220);

}

​

function gimmeSquare() {

  fill(random(100, 200), 0, random(255), 100);

  rect(

    random(width - 100),

    random(height - 100),

    random(10, 300),

    random(10, 300)

  );

}

​

function draw() {}

​