XPUB
/
SI21
57
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

new folder

Browse Source
master
ada 1 year ago
parent cfc87d25ac
commit 4f6d25ccd0
15 changed files with 200783 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
switchboard/.DS_Store vendored
View File

Binary file not shown.

107125
switchboard/p5-1.js
View File

File diff suppressed because one or more lines are too long

3
switchboard/p5.sound.min-1.js
View File

File diff suppressed because one or more lines are too long

7
switchboard/switchboard.css
Unescape Escape View File

@ -0,0 +1,7 @@
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}

15
switchboard/switchboard.html
Unescape Escape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5-1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min-1.js"></script>
<link rel="stylesheet" type="text/css" href="switchboard.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="switchboard.js"></script>
</body>
</html>

131
switchboard/switchboard.js
Unescape Escape View File

@ -0,0 +1,131 @@
let noiseFilter;
let offset = 0.0;
function setup() {
createCanvas(windowWidth, windowHeight);
//button
let button = createButton("S I 2 1");
button.position(358, 319);
button.size(48, 17);
button.style("background-color", "#000000");
button.style("font-size", "10px");
button.style("color", "#ffffff");
button.mousePressed(goLink);
// //noise
noiseFilter = createImage(width, height);
noiseFilter.loadPixels();
let pix = noiseFilter.width * noiseFilter.height * 4;
for (let i = 0; i < pix; i += 4) {
noiseFilter.pixels[i] = random(255);
noiseFilter.pixels[i + 1] = random(255);
noiseFilter.pixels[i + 2] = random(255);
noiseFilter.pixels[i + 3] = 30;
}
noiseFilter.updatePixels();
}
window.alert("HELLO, OPERATOR HERE! YOU HAVE A COLLECT CALL FROM NY. TO ACCEPT, CLICK ON SI21.");
function drawCircles(circleX, circleY) {
strokeWeight(2);
// bigcircle
fill("#fffff");
circle(circleX, circleY, 30);
//smallercircle
fill("#fffff");
circle(circleX, circleY, 25);
//smallestcircle
fill("#000000");
circle(circleX, circleY, 20);
}
function drawRect(rectX, rectY) {
stroke(28, 40, 51 );
strokeWeight(1);
fill("#000000");
rect(rectX, rectY, 45, 15);
}
function drawLights(lightX, lightY) {
fill(255, 105, 180, 50);
noStroke();
circle(lightX, lightY, 18);
fill(255, 105, 180, 64);
noStroke();
circle(lightX, lightY, 13);
fill(255, 105, 180);
strokeWeight(0.5);
stroke(170, 51, 106);
circle(lightX, lightY, 8);
}
//button again
function goLink() {
window.open('https://hub.xpub.nl/breadcube/webcam.html');
}
function draw() {
background(111, 78, 55);
stroke(3);
// apply noise filter
image(noiseFilter, 0, 0, width, height);
//circles pattern
for (let col = 30; col < windowWidth; col = col + 70) {
for (let row = 30; row <= windowHeight; row = row + 90) {
drawCircles(col, row);
}
} //endcircles
//labels pattern
for (let col = 9; col < windowWidth; col = col + 70) {
for (let row = 50; row <= windowHeight; row = row + 90) {
drawRect(col, row);
}
} //endlabels
//lights pattern
for (let col = 30; col < windowWidth; col = col + 70) {
for (let row = 2; row <= windowHeight; row = row + 90) {
drawLights(col, row);
}
} //endlights
//flickerin light
function greenLight() {
fill(255, 255, 255);
circle(380, 272, 8);
fill(0, 204, 51, 50, flickering());
noStroke();
circle(380, 272, 18);
fill(0, 204, 51, 64, flickering());
circle(380, 272, 13);
fill(0, 204, 51, flickering());
circle(380, 272, 8);
}
greenLight();
//the flickering bit
function flickering(){
offset += 0.2;
let n = noise(offset);
if(n < 0.40) return 0;
else return 100;
}
}

BIN
switchboard/webcam/.DS_Store vendored
View File

Binary file not shown.

93039
switchboard/webcam/p5-2.js
View File

File diff suppressed because one or more lines are too long

3
switchboard/webcam/p5.sound.min-2.js
View File

File diff suppressed because one or more lines are too long

380
switchboard/webcam/p5livemedia.js
Unescape Escape View File

@ -0,0 +1,380 @@
/**
*
* @class p5LiveMedia
* @constructor
* @param {p5.sketch} [something] blah blah blah.
* @param {p5LiveMedia.MEDIA TYPE}
* @param {WebRTC stream}
* @example
*
function setup() {
// Stream Audio/Video
createCanvas(400, 300);
// For A/V streams, we need to use the createCapture callback method to get the "stream" object
video = createCapture(VIDEO, function(stream) {
let p5lm = new p5LiveMedia(this,"CAPTURE",stream)
p5lm.on('stream', gotStream);
p5lm.on('data', gotData);
p5lm.on('disconnect', gotDisconnect);
});
video.muted = true;
video.hide();
// OR //
// Stream Canvas as Video
let c = createCanvas(400, 300);
video = createCapture(VIDEO);
video.muted = true;
video.hide();
let p5lm = new p5LiveMedia(this,"CANVAS",c);
p5lm.on('stream', gotStream);
p5lm.on('data', gotData);
p5lm.on('disconnect', gotDisconnect);
// OR //
// Just Data
createCanvas(400, 300);
let p5lm = new p5LiveMedia(this,"DATA");
p5lm.on('data', gotData);
p5lm.on('disconnect', gotDisconnect);
}
function draw() {
image(video,0,0,width/2,height);
ellipse(mouseX,mouseY,100,100);
if (ovideo != null) {
rect(10,10,10,10);
image(ovideo,width/2,0,width/2,height);
}
}
// We got a new stream!
function gotStream(stream, id) {
print("New Stream from " + id);
// This is just like a video/stream from createCapture(VIDEO)
ovideo = stream;
//ovideo.hide();
}
function gotData(data, id) {
print("New Data from " + id);
// Got some data from a peer
print(data);
}
function gotDisconnect(id) {
print(id + " disconnected");
}
*/
class p5LiveMedia {
constructor(sketch, type, elem, room, host) {
this.sketch = sketch;
//sketch.disableFriendlyErrors = true;
this.simplepeers = [];
this.mystream;
this.onStreamCallback;
this.onDataCallback;
this.onDisconnectCallback;
if (!host) {
this.socket = io.connect("https://p5livemedia.itp.io/");
} else {
this.socket = io.connect(host);
}
//console.log(elem.elt);
if (type == "CANVAS") {
this.mystream = elem.elt.captureStream(30);
} else if (type == "CAPTURE") {
this.mystream = elem;
} else {
// Assume it is just "DATA"
}
this.socket.on('connect', () => {
//console.log("Socket Connected");
//console.log("My socket id: ", this.socket.id);
//console.log("***"+window.location.href);
// Sends back a list of users in the room
if (!room) {
this.socket.emit("room_connect", window.location.href);
} else {
this.socket.emit("room_connect", room);
}
});
this.socket.on('disconnect', (data) => {
// console.log("Socket disconnected");
});
this.socket.on('peer_disconnect', (data) => {
//console.log("simplepeer has disconnected " + data);
for (let i = 0; i < this.simplepeers.length; i++) {
if (this.simplepeers[i].socket_id == data) {
//console.log("Removed the DOM Element if it exits");
this.removeDomElement(this.simplepeers[i]);
//console.log("Removing simplepeer: " + i);
this.simplepeers.splice(i,1);
break;
}
}
this.callOnDisconnectCallback(data);
});
// Receive listresults from server
this.socket.on('listresults', (data) => {
//console.log(data);
for (let i = 0; i < data.length; i++) {
// Make sure it's not us
if (data[i] != this.socket.id) {
// create a new simplepeer and we'll be the "initiator"
let simplepeer = new SimplePeerWrapper(this,
true, data[i], this.socket, this.mystream
);
// Push into our array
this.simplepeers.push(simplepeer);
}
}
});
this.socket.on('signal', (to, from, data) => {
//console.log("Got a signal from the server: ", to, from, data);
// // to should be us
// if (to != this.socket.id) {
// console.log("Socket IDs don't match");
// }
// Look for the right simplepeer in our array
let found = false;
for (let i = 0; i < this.simplepeers.length; i++)
{
if (this.simplepeers[i].socket_id == from) {
//console.log("Found right object");
// Give that simplepeer the signal
this.simplepeers[i].inputsignal(data);
found = true;
break;
}
}
if (!found) {
//console.log("Never found right simplepeer object");
// Let's create it then, we won't be the "initiator"
let simplepeer = new SimplePeerWrapper(this,
false, from, this.socket, this.mystream
);
// Push into our array
this.simplepeers.push(simplepeer);
// Tell the new simplepeer that signal
simplepeer.inputsignal(data);
}
});
}
// // use this to add a track to a stream - assuming this is a stream, it will have to extract the track out
// addtrack(stream, type) {
// if (type == "CANVAS") {
// this.mystream = elem.elt.captureStream(30);
// } else if (type == "CAPTURE") {
// this.mystream = elem;
// }
// }
send(data) {
for (let i = 0; i < this.simplepeers.length; i++) {
if (this.simplepeers[i] != null) {
this.simplepeers[i].send(data);
}
}
}
on(event, callback) {
if (event == 'stream') {
this.onStream(callback);
} else if (event == 'data') {
this.onData(callback);
} else if (event == "disconnect") {
this.onDisconnect(callback);
}
}
onDisconnect(callback) {
this.onDisconnectCallback = callback;
}
onStream(callback) {
this.onStreamCallback = callback;
}
onData(callback) {
this.onDataCallback = callback;
}
callOnDisconnectCallback(id) {
if (this.onDisconnectCallback) {
this.onDisconnectCallback(id);
}
}
callOnDataCallback(data, id) {
if (this.onDataCallback) {
this.onDataCallback(data, id);
}
}
removeDomElement(ssp) {
if (ssp.domElement) {
document.body.removeChild(ssp.domElement);
}
}
callOnStreamCallback(domElement, id) {
if (this.onStreamCallback) {
//////////////////////
// Copied from createCapture and addElement in p5.js source 10/12/2020
//const videoEl = addElement(domElement, this.sketch, true);
document.body.appendChild(domElement);
let videoEl = new p5.MediaElement(domElement, this.sketch);
this.sketch._elements.push(videoEl);
videoEl.loadedmetadata = false;
// set width and height onload metadata
domElement.addEventListener('loadedmetadata', function() {
domElement.play();
if (domElement.width) {
videoEl.width = domElement.width;
videoEl.height = domElement.height;
} else {
videoEl.width = videoEl.elt.width = domElement.videoWidth;
videoEl.height = videoEl.elt.height = domElement.videoHeight;
}
videoEl.loadedmetadata = true;
});
/////////////////////////////
this.onStreamCallback(videoEl, id);
}
else {
//console.log("no onStreamCallback set");
}
}
}
// A wrapper for simplepeer as we need a bit more than it provides
class SimplePeerWrapper {
constructor(p5lm, initiator, socket_id, socket, stream) {
this.simplepeer = new SimplePeer({
initiator: initiator,
trickle: false
});
this.p5livemedia = p5lm;
// Their socket id, our unique id for them
this.socket_id = socket_id;
// Socket.io Socket
this.socket = socket;
// Are we connected?
this.connected = false;
// Our video stream
this.stream = stream;
// Dom Element
this.domElement = null;
// simplepeer generates signals which need to be sent across socket
this.simplepeer.on('signal', data => {
this.socket.emit('signal', this.socket_id, this.socket.id, data);
});
// When we have a connection, send our stream
this.simplepeer.on('connect', () => {
//console.log('simplepeer connection')
//console.log(this.simplepeer);
//p.send('whatever' + Math.random())
// We are connected
this.connected = true;
// Let's give them our stream, if we have a stream that is
if (stream != null) {
this.simplepeer.addStream(stream);
//console.log("Send our stream");
}
});
// Stream coming in to us
this.simplepeer.on('stream', stream => {
//console.log('Incoming Stream');
// This should really be a callback
// Create a video object
this.domElement = document.createElement("VIDEO");
this.domElement.id = this.socket_id;
this.domElement.srcObject = stream;
this.domElement.muted = false;
this.domElement.onloadedmetadata = function(e) {
e.target.play();
};
//document.body.appendChild(ovideo);
//console.log(this.domElement);
this.p5livemedia.callOnStreamCallback(this.domElement, this.socket_id);
});
this.simplepeer.on('data', data => {
let stringData = String(data);
this.p5livemedia.callOnDataCallback(stringData, this.socket_id);
});
this.simplepeer.on('error', (err) => {
// ERR_WEBRTC_SUPPORT
// ERR_CREATE_OFFER
// ERR_CREATE_ANSWER
// ERR_SET_LOCAL_DESCRIPTION
// ERR_SET_REMOTE_DESCRIPTION
// ERR_ADD_ICE_CANDIDATE
// ERR_ICE_CONNECTION_FAILURE
// ERR_SIGNALING
// ERR_DATA_CHANNEL
// ERR_CONNECTION_FAILURE
console.log(err);
});
}
send(data) {
if (this.connected) {
this.simplepeer.send(data);
} else {
//console.log("Can't send, not connected");
}
}
inputsignal(sig) {
this.simplepeer.signal(sig);
}
}

6
switchboard/webcam/simplepeer.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
switchboard/webcam/socket.io.js
View File

File diff suppressed because one or more lines are too long

7
switchboard/webcam/webcam.css
Unescape Escape View File

@ -0,0 +1,7 @@
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}

17
switchboard/webcam/webcam.html
Unescape Escape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://p5livemedia.itp.io/simplepeer.min.js"></script>
<script type="text/javascript" src="https://p5livemedia.itp.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5-2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min-2.js"></script>
<script type="text/javascript" src="https://p5livemedia.itp.io/p5livemedia.js"></script>
<link rel="stylesheet" type="text/css" href="webcam.css">
<meta charset="utf-8" />
</head>
<body>
<script src="webcam.js"></script>
</body>
</html>

41
switchboard/webcam/webcam.js
Unescape Escape View File

@ -0,0 +1,41 @@
let y = 0;
let myVideo;
let otherVideo;
function setup() {
createCanvas(windowHeight, windowWidth,WEBGL);
let constraints = {audio: true, video: true};
myVideo = createCapture(constraints,
function(stream) {
let p5l = new p5LiveMedia(this, "CAPTURE", stream, "NYAMST")
p5l.on('stream', gotStream);
}
);
myVideo.elt.muted = true;
myVideo.hide();
}
function draw() {
background(0);
strokeWeight(3);
translate(-200,-90)
texture(myVideo);
circle(0, 0, 300);
if (otherVideo) {
blend(otherVideo, 0, 0, otherVideo.width, otherVideo.height, 0, 0, width, height, MULTIPLY);
strokeWeight(3);
translate(-400,-90)
texture(otherVideo);
circle(0, 0, 300);
}
}
// We got a new stream!
function gotStream(stream, id) {
// This is just like a video/stream from createCapture(VIDEO)
otherVideo = stream;
//otherVideo.id and id are the same and unique identifiers
otherVideo.hide();
}
Write Preview
Loading…
Cancel
Save