xxxxxxxxxx
var s = io('https://echoserver.lrCr.repl.co')
let c = '#000',
ps = 1,
es = 30,
m = 0,
ch = [],
l, l1, wd = 0,
l2, a, sr,
msp = 1,
tmouseX, tmouseY, ptmouseX, ptmouseY,
qrls = 0,
offline = 0,
lastframe,
lastframe2
let n = localStorage.getItem('offline-connect-spline')
if (n == 'offline') offline = 1
preload = _ => {
a = new p5.Shader(this.renderer, vert, frag)
}
setup = _ => {
createCanvas(960, 540);
l = createGraphics(width, height);
l.noFill();
l1 = createGraphics(width, height);
l2 = createGraphics(width, height);
sr = createGraphics(width, height, WEBGL)
s.emit('init', 'draw');
s.on('data', (e) => {
if (offline || e.offline) return
if (e.id == s.id) return
if (e.type[0] == 'draw') {
if (e.type[1] == 'line') {
if (e.p[0][1] < 50) l1.clear();
l.clear();
l.stroke(e.c);
if (e.r && e.r2) {
l.fill(e.c)
} else {
l.noFill()
}
l.strokeWeight(e.t);
l.beginShape();
l.curveVertex(e.p[0][0], e.p[0][1])
for (i = 0; i < e.p.length; i++) l.curveVertex(e.p[i][0], e.p[i][1]);
if (e.r) {
l.endShape(CLOSE)
} else {
l.endShape()
}
l1.image(l, 0, 0, width, height)
} else if (e.type[1] == 'erase') {
l1.stroke(255);
l1.strokeWeight(es);
l1.line(e.n[0], e.n[1], e.n[2], e.n[3])
} else if (e.type[1] == 'text') {
l1.noStroke()
l1.fill(e.c)
l1.textSize(15)
l1.textAlign(LEFT, BOTTOM)
l1.text(e.t, e.p[0], e.p[1])
} else if (e.type[1] == 'paste') {
loadImage(e.p, img => l1.image(img, 0, 0, width, height))
} else if (e.type[1] == 'trace') {
if (e.p) loadImage(e.p, img => l2.image(img, 0, 0, width, height));
else l2.clear()
} else if (e.type[1] == 'sc') {
if (e.a) {
s.emit('data', {
id: s.id,
type: ['draw', 'sc'],
a: 0,
p: saveImg(),
p2: saveImg2(),
offline: offline
})
} else {
loadImage(e.p, img => l1.image(img, 0, 0, width, height))
loadImage(e.p2, img => l2.image(img, 0, 0, width, height))
}
}
}
})
s.on('connect', _ => {
s.emit('data', {
id: s.id,
type: ['draw', 'sc'],
a: 1,
offline: offline
})
})
document.getElementsByClassName("p5Canvas")[0].addEventListener("contextmenu", (e) => e.preventDefault())
}
draw = _ => {
ptmouseX = tmouseX;
ptmouseY = tmouseY
tmouseX += movedX / msp
tmouseY += movedY / msp
if (!(document.pointerLockElement === canvas || document.mozPointerLockElement === canvas)) {
tmouseX = mouseX * 2 - pmouseX * 1;
tmouseY = mouseY * 2 - pmouseY * 1
}
tmouseX = Math.min(width, Math.max(0, tmouseX))
tmouseY = Math.min(height, Math.max(0, tmouseY))
background(255)
image(l2, 0, 0, width, height)
if (!keyIsDown(17)) background(255)
background(255, 100)
image(l1, 0, 0, width, height)
noFill();
stroke(0);
rect(50, 50, width - 100, height - 51)
rect(0, 0, width, height)
if (mouseIsPressed) {
if (m == 0) {
if (wd > 10 || qrls) {
ch.push([tmouseX, tmouseY]);
wd = 0
} else {
wd += Math.sqrt((tmouseX - ptmouseX) * (tmouseX - ptmouseX) + (tmouseY - ptmouseY) * (tmouseY - ptmouseY))
}
if (ch.length > 500) ch = []
noFill();
strokeWeight(ps);
stroke(c);
beginShape();
for (i = 0; i < ch.length; i++) vertex(ch[i][0], ch[i][1]);
endShape();
} else {
l1.stroke(255);
l1.strokeWeight(es);
l1.line(tmouseX, tmouseY, ptmouseX, ptmouseY)
s.emit('data', {
id: s.id,
type: ['draw', 'erase'],
n: [tmouseX, tmouseY, ptmouseX, ptmouseY],
offline: offline
})
}
}
noFill();
stroke(m ? 200 : c);
strokeWeight(3);
circle(tmouseX, tmouseY, m ? es : ps)
if (!m) {
stroke(255);
strokeWeight(1);
circle(tmouseX, tmouseY, 0.5)
}
strokeWeight(1)
qrls = 0
fill(0);
noStroke();
textAlign(LEFT, TOP);
if (offline) text('Offline mode on', 10, 10)
}
mousePressed = _ => {
if (!(document.pointerLockElement === canvas || document.mozPointerLockElement === canvas)) {
tmouseX = mouseX;
tmouseY = mouseY;
ptmouseX = mouseX;
ptmouseY = mouseY
requestPointerLock()
}
}
keyPressed = _ => {
if (keyCode == 17) {
sr.clear()
sr.shader(a)
a.setUniform('cr', l1)
sr.rect(0, 0, width, height)
l1.clear()
l1.image(sr, 0, 0, width, height)
}
}
mouseReleased = _ => {
if (tmouseX < 0 || tmouseX > width || tmouseY < 0 || tmouseY > height) return
if (m == 0) ch.push([tmouseX, tmouseY]);
if (m == 0) ch.push([tmouseX, tmouseY]);
l.clear();
if (tmouseY < 50) {
lastframe = saveImg()
l1.clear()
}
if (tmouseX < 50) m = !m;
if (m == 0) {
l.strokeWeight(ps);
l.stroke(c);
if (Math.pow(tmouseX - ch[0][0], 2) + Math.pow(tmouseY - ch[0][1], 2) < 100 && keyIsDown(16)) {
l.fill(c)
} else {
l.noFill()
}
l.beginShape();
l.curveVertex(ch[0][0], ch[0][1]);
for (i = 0; i < ch.length; i++) l.curveVertex(ch[i][0], ch[i][1]);
if (Math.pow(tmouseX - ch[0][0], 2) + Math.pow(tmouseY - ch[0][1], 2) < 100 && (keyIsDown(16) || keyIsDown(32))) {
l.endShape(CLOSE)
} else {
l.endShape()
}
s.emit('data', {
id: s.id,
type: ['draw', 'line'],
p: ch,
c: (m == 0 ? c : 255),
t: (m == 0 ? ps : es),
r: Math.pow(tmouseX - ch[0][0], 2) + Math.pow(tmouseY - ch[0][1], 2) < 100 && (keyIsDown(16) || keyIsDown(32)),
r2: keyIsDown(16),
offline: offline
});
ch = [];
wd = 20
l1.image(l, 0, 0, width, height)
if(lastframe2)lastframe=lastframe2
lastframe2 = saveImg()
}
if (tmouseX > width - 50) c = prompt('color?')
}
keyReleased = _ => {
if (key == '1') {
if (lastframe) {
loadImage(lastframe, img => {
lastframe = saveImg();
l1.clear();
l1.image(img, 0, 0, width, height)
})
}
}
if (key == 'c') {
c = prompt('color?')
}
if (key == 'z') {
if (offline) {
offline = 0
localStorage.setItem('offline-connect-spline', 'online')
} else {
offline = 1
localStorage.setItem('offline-connect-spline', 'offline')
}
}
if (key == 't') {
lastframe = saveImg()
tn = prompt('text').replaceAll('[ent]', '\n')
s.emit('data', {
id: s.id,
type: ['draw', 'text'],
p: [tmouseX, tmouseY],
c: c,
t: tn,
offline: offline
})
l1.noStroke()
l1.fill(c)
l1.textSize(15)
l1.textAlign(LEFT, BOTTOM)
l1.text(tn, tmouseX, tmouseY)
}
if (key == 's') copyString(saveImg(), 1)
if (key == 'd') copyString(saveImg2(), 1)
if (key == 'a') {
pt = prompt('Paste data here')
if (pt) {
loadImage(pt, img => l1.image(img, 0, 0, width, height))
s.emit('data', {
id: s.id,
type: ['draw', 'paste'],
p: pt,
offline: offline
})
}
}
if (key == 'g') {
pt = prompt('Paste data here')
if (pt) loadImage(pt, img => l2.image(img, 0, 0, width, height));
else l2.clear()
s.emit('data', {
id: s.id,
type: ['draw', 'trace'],
p: pt,
offline: offline
})
}
if (key == 'q') {
qrls = 1
}
if (keyCode == 18) msp = (msp * 3) % 26
}
saveImg = _ => {
background(255)
image(l1, 0, 0, width, height)
return canvas.toDataURL()
}
saveImg2 = _ => {
background(255)
image(l2, 0, 0, width, height)
return canvas.toDataURL()
}
copyString = (x, a) => {
try {
let q = document.createElement("textarea");
document.body.appendChild(q)
q.value = x;
q.select();
document.execCommand("copy");
document.body.removeChild(q)
if (a) alert('Copied!')
} catch (e) {
alert('error: ' + e)
}
}
var socket = io.connect($OP.getEchoServerURL(1331617));
Learn more See an example