xxxxxxxxxx
//cat image by Frankie
//from this tutorial https://openprocessing.org/sketch/753214/
//let socket = io.connect(":30000?sketch=1457144"); //connect to the socket server
var socket = io.connect($OP.getEchoServerURL("1457144"));
let all_cats = []; //our array of all of our cats
let myCat; //this is ours
let zees = []; //no lasers shot yet
let imgCat;
function preload(){
imgCat = loadImage('https://deckard.openprocessing.org/user281109/visual1453415/he87e779690d583e80027762ff2fba2f2/smallCat.png');
}
function setup() {
let c = min(windowWidth, windowHeight)*0.9
createCanvas(c,c);
background(255);
frameRate(20);//run everyone at the same rate (frames/sec)
myCat = {
'x':0,
'y':0,
'name': prompt('Name for your kittycat?')
};
all_cats.push(myCat);//push means that you add myCat to the array of all cats
socket.on('update', updateCat);
}
function draw() {
t = frameCount/10;
background(100,100,120,20);
//update our own cat position
myCat.x = mouseX;
myCat.y = mouseY;
myCat.zzz = mouseIsPressed;
socket.emit('update', myCat); //let others know of our new position
//draw all all_cats
noStroke();
fill(30, 30, 30, 90);
for (let cat of all_cats) { //draw each ship
image(imgCat,cat.x - 10,cat.y,100,50);
text(cat.name,cat.x+20,cat.y-20);
if(cat.zzz){ //add a laser to the screen
let newzees = {
x: cat.x,
y: cat.y
};
zees.push(newzees);
}
}
//draw any zees that are shot
stroke(0);
for (let zee of zees) {
zee.x -=10
zee.y -= 10; //laser goes up a few pixels
text('z',zee.x+70,zee.y+20)
}
//remove zeess out of screen, for performance
zees = zees.filter(function(l){ return l.y > 0});
}
function updateCat(cat) {
//see if cat already exists
let bs = all_cats.filter(d=>d.name == cat.name);
if(bs.length == 0){ //if a new cat, create a new one
all_cats.push(cat);
}else{ //if exists, then update its data
bs[0].x = cat.x;
bs[0].y = cat.y;
bs[0].zzz = cat.zzz;
}
}
var socket = io.connect($OP.getEchoServerURL(1457144));
Learn more See an example