64/2404 FANCY Socket with ID

var socket = io.connect(":30000?sketch=1373221");

var tval = 'hi';

​

var sr, sg, sb; // sliders

var inp; // input box

var div; // a DOM div

​

var r;

var g;

var b;

​

var thestuff = {};

​

var myid;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  textSize(32);

  textAlign(CENTER,CENTER);

  socket.on("connect", () => {

    myid = socket.id;

  });

  socket.on("disconnect", () => {

    socket.emit('killme', myid);

  });

  socket.on('iamclicking', someoneIsClicking);  //when "iamclicking" messages is received from server, set "someoneIsDrawing" function to be called

  socket.on('hello!', someoneJoined);  //when "hello!" messages is received from server, set "someoneJoined" function to be called

  socket.on('killme', killme);  //delete from stack

  socket.emit('hello!'); //let's send a message to anyone in the room

​

  // this doesn't work:

  window.addEventListener('beforeunload', function (e) {

      //e.preventDefault();

      //e.returnValue = '';

      socket.emit('killme', myid);

  }); 

​

  // DOM:

  // background square is a "div":

  div = createDiv(''); // a div with no text

  div.position(25, 375);

  div.style("width", "175px");

  div.style("height", "225px");

  div.style("border", "1px solid #000"); // background rectangle

  div.style("background", "#FFF"); // fill color

​

  // sliders:

  sr = createSlider(0, 255, random(255)); // minimum, maximum, default

  sr.position(50, 400);

  sr.style('width', '100px');

  sg = createSlider(0, 255, random(255)); // minimum, maximum, default

  sg.position(50, 450);

  sg.style('width', '100px');

  sb = createSlider(0, 255, random(255)); // minimum, maximum, default

  sb.position(50, 500);

  sb.style('width', '100px');

​

  // input box:

  inp = createInput('');

  inp.position(50, 550);

  inp.size(100, 20);

  inp.style('font-size', '20px');

  inp.input(settext);

}

​

function draw() {

  background(0);

  noFill();

  for(let i in thestuff)

  {

    stroke(0);

    ellipse(thestuff[i].x-5, thestuff[i].y-5, 50, 50);

    text(thestuff[i].t, thestuff[i].x-5, thestuff[i].y-5);

    stroke(thestuff[i].r, thestuff[i].g, thestuff[i].b, 255);

    ellipse(thestuff[i].x, thestuff[i].y, 50, 50);

    text(thestuff[i].t, thestuff[i].x, thestuff[i].y);

    thestuff[i].x += random(-5, 5);

    thestuff[i].y += random(-5, 5);

    if(thestuff[i].x>width) thestuff[i].x = 0;

    if(thestuff[i].x<0) thestuff[i].x = width;

    if(thestuff[i].y>height) thestuff[i].y = 0;

    if(thestuff[i].y<0) thestuff[i].y = height;

  }

}

​

function mouseReleased() {

    r = sr.value();

    g = sg.value();

    b = sb.value();

    someoneIsClicking(myid, mouseX,mouseY,tval, r, g, b);

    socket.emit('iamclicking',myid, mouseX, mouseY,tval, r, g, b);

​

}

function someoneIsClicking(id,x,y,t, r, g, b){  //this function will be called to draw a red ellipse for guest user

    console.log(id);

    let s = {};

    s.x = x;

    s.y = y;

    s.t = t;

    s.r = r;

    s.g = g;

    s.b = b;

    thestuff[id] = s;

}

​

function someoneJoined(){  //this function will be called to notify users when a new user joins

  print('New user joined!');

}

​

function killme(id) {

  delete thestuff[id];

}

​

function settext()

{

  tval = this.value();

}