(p5.dom is now part of p5js, no need to enable if using v0.10+). p5.dom library lets you use video, audio, webcam, input, and text.
Examples: Dom - Video
SocketIO allows you to connect to a socket connection to make multiple sketches speak in realtime. To use OpenProcessing Echo Socket Server, you can use the code below: var socket = io.connect($OP.getEchoServerURL(1020258));Learn moreSee an example
“0014” by Elisse Chow
https://openprocessing.org/sketch/1020258
License CreativeCommons Attribution ShareAlike
https://creativecommons.org/licenses/by-sa/3.0
{{filePath}}
{{width}} x {{height}}
Report Sketch
Oh, that naughty sketch! Please let us know what the issue is below.
Apply Template
Applying this template will reset your sketch and remove all your changes. Are you sure you would like to continue?
Report Sketch
Report Comment
Please confirm that you would like to report the comment below.
We will review your submission and take any actions necessary per our Community Guidelines. In addition to reporting this comment, you can also block the user to prevent any future interactions.
Please report comments only when necessary. Unnecessary or abusive use of this tool may result in your own account being suspended.
Are you sure you want to delete your sketch?
Any files uploaded will be deleted as well.
Delete Comment?
This will also delete all the replies to this comment.
Delete this tab? Any code in it will be deleted as well.
Select a collection to submit your sketch
We Need Your Support
Since 2008, OpenProcessing has provided tools for creative coders to learn, create, and share over a million open source projects in a friendly environment.
Niche websites like ours need your continued support for future development and maintenance, while keeping it an ad-free platform that respects your data and privacy!
Please consider subscribing below to show your support with a "Plus" badge on your profile and get access to many other features!
WASD
CC Attribution ShareAlike
0014
Chow
xxxxxxxxxx
var socket = io.connect(":30000?sketch=1020978"); //connect to the socket server
let cnv;
let people = []; //everyone connected
let me; //this is ours
let synth, panner;
let wait_message = false;
let isTyping = false;
let fps = 30;
let NOTES = ['C3','D3','E3','F3','G3','A3','B3','C4','D4','E4','F4','G4','A4','B4','C5'];
function setup() {
cnv = createCanvas(windowWidth, windowHeight);
cnv.mousePressed(notTyping);
frameRate(fps);
colorMode(HSB,360,100,100);
background(0);
noStroke();
textAlign(CENTER);
message_field = createInput();
message_field.position(10,0);
message_field.size(width/4);
message_field.mousePressed(typing);
synth = new p5.PolySynth();
panner = new p5.Panner3D();
me = {
'x': width/2,
'y': height/2,
'v': 4,
'd': 40,
'h': random(360),
'note': random(NOTES),
'message': '',
'message_cooldown': 0,
'playing': false
};
me.name = prompt('Name?');
while(!me.name) { me.name = prompt('Please enter a name'); }
// me.panner.process(me.synth);
people.push(me);
socket.on('update', updatePerson);
}
function notTyping() {
isTyping = false;
}
function typing() {
isTyping = true;
}
function draw() {
background(0);
personControls();
dealMessage();
updatePerson(me);
socket.emit('update', me); //let others know of our new position every 1.5 seconds
textAlign(CENTER);
for (let person of people) { //draw each ship
fill(person.h,70,100,0.8);
ellipse(person.x,person.y,person.d);
text(person.name,person.x,person.y-person.d/2-5);
text(person.message,person.x,person.y+person.d/2+20);
if(person.playing) {
playSynth(person);
}
}
if(me.playing) {me.playing = false;}
textAlign(LEFT);
fill(90);
instructions();
}
function instructions() {
let cooldown_seconds = round(me.message_cooldown/fps);
text(`Message Cooldown: ${cooldown_seconds}`,10,40);
if(wait_message) {text(`Please wait for cooldown to send again`,10,60);}
text(`Use WASD to move around`,10,height-20);
text(`Send messages in the top input by typing and pressing enter`,10,height-40);
}
function playSynth(person) {
// note velocity (volume, from 0 to 1)
// time from now (in seconds)
let time = 0;
// note duration (in seconds)
let dur = 0.75;
let velocity;
if(person.name == me.name) {velocity = 0.1;}
else {velocity = map(dist(me.x,me.y,person.x,person.y),0,1000,1,0);}
let pos = get_position(person);
panner.set(pos[0],pos[1],0);
synth.play(person.note, velocity, time, dur);
}
function get_position(person){
return[me.x-person.x,person.y-me.y];
}
function dealMessage() {
if(me.message_cooldown > 0) {
coolDown();
}
if(me.message_cooldown == 0) {
me.message = ''; //clear a message after cooldown
wait_message = false;
}
}
function coolDown() {
me.message_cooldown -= 1;
me.d += 20/(fps*3);
}
function personControls() {
if(!isTyping){
if(keyIsDown(65) && (me.x > me.d/2)) { // Moving left
me.x -= me.v;
me.v += 0.1;
}
if(keyIsDown(68) && (me.x < width - me.d/2)) { // Moving right
me.x += me.v;
me.v += 0.1;
}
if(keyIsDown(87) && (me.y > me.d/2)) { // Moving up
me.y -= me.v;
me.v += 0.1;
}
if(keyIsDown(83) && (me.y < height - me.d/2)) { // Moving down
me.y += me.v;
me.v += 0.1;
}
}
}
function keyReleased() {
if((keyCode == 65 || keyCode == 68 || keyCode == 87 || keyCode == 83) && noKeysDown()){
me.v = 4;
}
}
function noKeysDown() {
return !(keyIsDown(65) || keyIsDown(68) || keyIsDown(87) || keyIsDown(83));
}
function keyPressed() {
if(keyCode == ENTER) { //user updates their message
if(me.message_cooldown == 0) {
sendMessage();
me.playing = true;
me.d = 20;
} else {wait_message = true;}
}
}
function sendMessage(){
me.message = message_field.value();
me.message_cooldown = fps*3;
}
function updatePerson(person) {
let ch = people.filter(p=>p.name == person.name);
if(ch.length == 0){
people.push(person);
}else{ //if exists, then update its data
ch[0].x = person.x;
ch[0].y = person.y;
ch[0].message = person.message;
ch[0].playing = person.playing;
}
}
Examples: Play - Synthesis - Microphone
p5.dom library lets you use video, audio, webcam, input, and text.
Examples: Dom - Video
var socket = io.connect($OP.getEchoServerURL(1020258));
Learn more See an exampleSee More Shortcuts