I have no idea what I’m doing…
So I’m trying to get some p5.js working in a droplet from digitalocean and guess what….I can’t get it to work. I know the p5.js sketch works, I can run it in the p5 web editor. I’m sure there’s something I’m doing wrong. To be quite honest, I don’t really understand how to structure the different blocks of code and what file they belong in. I’m also not sure what the best way to structure the file in my virtual private server. And can I name these files anything I want? Cause right now I feel like I have a number of files with the same name, I’m sure that could be causing issues. I’ll keep trying to work through it but for now here is the code, be fore warned there is a bunch…
Here is the error I get:
Server.js
// Express is a node module for building HTTP servers
var express = require("express");
var app = express();
// Tell Express to look in the "public" folder for any files first
app.use(express.static("public")); // This is where the HTML, p5.js, sketch.js and so on should be stored
// If the user just goes to the "route" / then run this function
app.get("/", function (req, res) {
res.send("Hello World!");
});
// Here is the actual HTTP server
var http = require("http");
// We pass in the Express object
var httpServer = http.createServer(app);
// Listen on port provided by Glitch
//httpServer.listen(process.env.PORT);
// OR if running your own server choose your own port
httpServer.listen(8080);
// WebSocket Portion
// WebSockets work with the HTTP server
var io = require("socket.io")(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on(
"connection",
// We are given a websocket object in our function
function (socket) {
console.log(socket.id + " has joined the chat.");
socket.on("mouse", function(data) {
//io.emit("mouse", data);
socket.broadcast.emit("mouse", data);
});
socket.on("disconnect", function () {
console.log(socket.id + " has disconnected.");
});
}
);
p5.js
let x1 = 0;
let y1 = 0;
let x2 = 50;
let y2 = 50;
let x3 = 25;
let y3 = 25;
let x4 = 30;
let y4 = 75;
let rep = 2;
let col1 = 10;
let col2 = 100;
let col3 = 200;
let col4 = 300;
let strk1 = 1;
let strk2 = 1;
let strk3 = 1;
let strk4 = 1;
let frmRt = 30
let shape1 = false;
let shape2 = false;
let shape3 = false;
let shape4 = false;
let deg1 = 0.33
let deg2 = 0.33
let deg3 = 0.33
let deg4 = 0.33
var socket = io.connect();
socket.on('connect', function() {
console.log("Connected");
});
socket.on('mouse', function(data) {
console.log(data);
noStroke();
fill(data.r, data.g, data.b)
ellipse(data.x, data.y, 20, 20);
});
function setup() {
createCanvas(400, 400);
background(0, 0, 0);
angleMode(DEGREES);
colorMode(HSB, 360, 100, 100, 100);
// rectMode(CENTER);
// frameRate(frmRt);
create_ui();
}
function draw() {
frameRate(frmRt);
slider_value('Rep', rep);
slider_value('frmRt', frmRt);
slider_value('x1', x1);
slider_value('y1', y1);
slider_value('Degrees1', deg1);
slider_value('x2', x2);
slider_value('y2', y2);
slider_value('Degrees2', deg2);
slider_value('x3', x3);
slider_value('y3', y3);
slider_value('Degrees3', deg3);
slider_value('x4', x4);
slider_value('y4', y4);
slider_value('Degrees4', deg4);
noFill();
translate(width / 2, height / 2);
// push();
// rectMode(CENTER);
if (shape1) {
ellipseMode(CENTER);
push();
// stroke(0, random(0, 85), 0);
// stroke(85, random(0, 85), 85);
strokeWeight(strk1);
stroke(col1, 100, 100, 50);
rotate(x1 / deg1);
// rect(x, y, rep * (random(1, 10)), rep * (random(1, 10)));
// ellipse(t1, t2, 10, t1 + 45);
ellipse(x1, y1, 10, x1 + 45);
// rect(x, y, rep * x + 1, y + 5);
// x = x + 5
pop();
x1 = x1 + rep;
if (x1 > width) {
x1 = 0;
y1 = y1 + rep;
}
} else {}
if (shape2) {
push();
ellipseMode(CENTER);
// translate(x*0.33,random(10,200));
// translate(0, 0);
rotate(x2 / deg2);
// fill(0,random(0, 255), 255,0);
// stroke(85, random(85, 170), 170);
// stroke(0, random(85, 170), 0);
strokeWeight(strk2);
stroke(col2, 100, 100, 50);
// rotate(x1 / 0.33);
// ellipse(x1, y1, 10, x1 + 45);
// circle(x, y, rep * (random(1, 10)));
ellipse(x2, y2, 20, x2 + 45);
pop();
x2 = x2 + rep;
if (x2 > height) {
x2 = 0;
y2 = y2 + rep
}
} else {}
if (shape3) {
push();
ellipseMode(CENTER);
// translate(x*0.33,random(10,200));
// translate(0, 0);
rotate(x3 / deg3);
// fill(0,random(0, 255), 255,0);
// stroke(0, random(170, 255), 0);
// stroke(170, random(170, 255), 255);
strokeWeight(strk3);
stroke(col3, 100, 100, 50);
// rotate(x1 / 0.33);
ellipse(x3, y3, 40, x3 + 45);
// circle(x, y, rep * (random(1, 10)));
pop();
x3 = x3 + rep;
if (x3 > height * 1.5) {
x3 = 0;
y3 = y3 + rep
}
} else {}
if (shape4) {
push();
rotate(x4 / deg4);
strokeWeight(strk4);
stroke(col4, 100, 100, 50);
// triangle(0, 0,x4, 20, y4, 75);
// triangle(30, 75, x2 + 58, y + 20, y1 + 86, y2 + 75);
triangle(x4, y4, x4 + 100, y4 + 150, x4 + 200, y4 + 250);
pop();
x4 = x4 + rep;
if (x4 > height) {
x4 = 0;
y4 = y4 + rep
}
} else {}
}
ui.js
function create_ui() {
createP();
{
let a_button = createButton('resize-full');
a_button.mousePressed(function() {
resizeCanvas(windowWidth, windowHeight);
background(0, 0, 0);
});
// createP();
} {
let a_button = createButton('resize-inset');
a_button.mousePressed(function() {
resizeCanvas(400, 400);
background(0, 0, 0);
});
// createP();
} {
let a_button = createButton('reset');
a_button.mousePressed(function() {
// translate(windowWidth/2,windowHeight/2);
fill(0);
rect(-windowWidth / 2, -windowHeight / 2, windowWidth, windowHeight);
});
createP();
} {
let a_span = createSpan('Rep:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 10, rep, 0.25);
a_slider.style('width', '200px');
a_slider.input(function() {
rep = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('Rep');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('frmRt:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(10, 100, frmRt);
a_slider.style('width', '200px');
a_slider.input(function() {
frmRt = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('frmRt');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
}
// X1,Y1
{
let a_check = createCheckbox('Shape 1', shape1);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape1 = this.checked();
});
createP();
} {
let a_span = createSpan('x1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, x1);
a_slider.style('width', '200px');
a_slider.input(function() {
x1 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('x1');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, y1);
a_slider.style('width', '200px');
a_slider.input(function() {
y1 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('y1');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg1, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg1 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('Degrees1');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col1);
a_slider.style('width', '200px');
a_slider.input(function() {
col1 = a_slider.value();
});
} {
let a_span = createSpan('stroke 1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk1);
a_slider.style('width', '200px');
a_slider.input(function() {
strk1 = a_slider.value();
});
createP();
}
// x2,y2
{
let a_check = createCheckbox('Shape 2', shape2);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape2 = this.checked();
});
} {
let a_span = createSpan('x2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 200, x2);
a_slider.style('width', '200px');
a_slider.input(function() {
x2 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('x2');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 200, y2);
a_slider.style('width', '200px');
a_slider.input(function() {
y2 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('y2');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg2, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg2 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('Degrees2');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col2);
a_slider.style('width', '200px');
a_slider.input(function() {
col2 = a_slider.value();
});
// createP();
} {
let a_span = createSpan('stroke 2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk2);
a_slider.style('width', '200px');
a_slider.input(function() {
strk2 = a_slider.value();
});
createP();
}
// x3,y3
{
let a_check = createCheckbox('Shape 3', shape3);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape3 = this.checked();
});
} {
let a_span = createSpan('x3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 500, x3);
a_slider.style('width', '200px');
a_slider.input(function() {
x3 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('x3');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 500, y3);
a_slider.style('width', '200px');
a_slider.input(function() {
y3 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('y3');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg3, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg3 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('Degrees3');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col3);
a_slider.style('width', '200px');
a_slider.input(function() {
col3 = a_slider.value();
});
// createP();
} {
let a_span = createSpan('stroke 3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk3);
a_slider.style('width', '200px');
a_slider.input(function() {
strk3 = a_slider.value();
});
createP();
}
//x4,y4
{
let a_check = createCheckbox('Shape 4', shape4);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape4 = this.checked();
});
} {
let a_span = createSpan('x4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, x4);
a_slider.style('width', '200px');
a_slider.input(function() {
x4 = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('x4');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, y4);
a_slider.style('width', '200px');
a_slider.input(function() {
y4 = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('y4');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg4, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg4 = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('Degrees4');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col4);
a_slider.style('width', '200px');
a_slider.input(function() {
col4 = a_slider.value();
});
// createP();
} {
let a_span = createSpan('stroke 4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk4);
a_slider.style('width', '200px');
a_slider.input(function() {
strk4 = a_slider.value();
});
}
}
function slider_value(label, num) {
let elm = select('#' + label);
num = round(num, 2);
// elm.html('[' + label + ' ' + num + '] ');
elm.html('[' + num + '] ');
}
index.html
<!DOCTYPE html><html lang="en"><head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script src="p5.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="p5.js"></script>
</body></html>