How does p5js and node integrate? There is 2 ways as I’ve found: serving a js file to be executed in the client and a implementation using node-canvas found at npm: node-p5 here. Although, I got a little confused, as the example provided does save a pict but there’s no display involved.
My knowledge is limited.
There’s always gonna be a served p5 script to be executed client side, right? (assuming a simple, normal app that get inputs and responds with some graphics)
thanks
To the best of my knowledge P5 scripts won’t be served, it is only information mostly data in JSON format that will be served to merge and execute the P5 code on the server side.
As a rule of thumb all server side languages spit out only HTML, CSS and Javascript codes which are then executed by the browser. P5.js is a Javascript framework whose main objective is to remove the headache/complexities of learning and mastering HTML, CSS and Javascript. It’s main focus is writing of complicated HTML,CSS and Javascript codes in very few lines of P5 framework codes.
Thanks a lot for your time.
To the best of my knowledge P5 scripts won’t be served, it is only information mostly data in JSON format that will be served to merge and execute the P5 code on the server side.
That’s what I meant.
…All server side languages spit out only HTML, CSS
perfect, makes sense, I got confused by this node implementation of p5js
cheers
You’re very welcome, thanks for raising this question, I have learnt something new. I didn’t know that programmers can now write P5.js codes at the server side. It will be very useful to me because I have a website where I built some Web Apps using P5.js, though I obfuscated the codes, I was still bothered that all my so many days of hard work can just be copied with little effort.
How are you going to use this? I mean p5.js at server side? To display? Manipulate the DOM?
The main objective why server side(back end) was created was for data security and copyright protection else front end programming can solve every Web Application problem ranging from API Keys to database design. With the adoption of server side programming, users and other Programmers will only see the results of your work but not the code hence they cannot steal your work.
For instance on the front-end your code is;
function setup(){
createCanvas(400,400);
input = createInput();
input.position(20, 65);
}
function draw(){
background(r);
greet()
}
function greet() {
const r = input.value();
And at the server side your code is:
if(r>200){
r=255;
}
if(r<200){
r=0;
}
–‐--------------------------
When a value say 180 is typed into the text box and you press enter, the information is sent to the server and the server code executes it and spits out 0 in JSON format back to the front end and the background becomes dark. It is only the result that will be seen at the browser, the server side code won’t be seen by users.
This example is a very simple case scenario, in real life very complicated codes are written at the back end.
Unless you really need p5js on server backend side & it’s just 2d graphics, you’re better off running p5js on client frontend side.
You can use httpGet() & httpPost() in order for the client sketch to communicate w/ your server code.
As a beginner, you shouldn’t be bothered about backend programming. You should delve into backend after you have gained mastery of front end programming.
When a value say 180 is typed into the text box and you press enter, the information is sent to the server and the server code executes it and spits out 0 in JSON format back to the front end and the background becomes dark. It is only the result that will be seen at the browser, the server side code won’t be seen by users.
Yep, I got that, what I was asking you is why/how you need the node-p5 implementation? As per in this example you only uses p5 at the client code. Are you passing p5 objects built at server? or what?
Also, thanks for all advices, including the one saying I shouldn’t be concerned with server side programming. But this is actually what brought me back, and my new subject of learning. 
When applet was deprecated I slowly stop coding, as deploying p5 (java one) to web was not so simple anymore. Also I had some ideas that needed some backend.
So now I got my node server up and running. I’m writing my foundation as I learn new stuff, specially
from here!! From you guys! For me the one thing that Processing, any flavor, has is this vibrant and welcoming community that has always helped me.
A lot of the little I know I learned here.
So thanks, and that goes to you too @GoToLoop !!
Next piece I’ll add to my stack is mongoDB… Well I’ll try…
:)) let’s see how it goes…
I intended to also write p5 on the server side but I don’t know how to yet. That was just an illustration.
To answer your question, yes if you learn and master p5-node.js syntax you can write p5-node.js codes on the server side that will spit out p5.js codes to the browser. Remember they should also spit out links of the p5.js cdn scripts.
I see, thanks for your time. I might try something with this idea next… just to understand the possibilities.
I will also advise that if your project is not so complex and do not require copyright protection, you can rather use only P5.js and then obfuscate your codes so they become unreadable by humans.
You can obfuscate your codes by using this website: https://obfuscator.io/
With P5.js alone your Web Apps will be very fast, interactive and efficient because all the codes are on the browser, you can also create a broke mans database etc and it’s free :), you can also use Firebase as database.
Alternatively you can learn other robust back end programming languages where they have strong community support. Cheers