# Understanding p5 server side with node

**URL:** https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498
**Category:** Project Guidance
**Created:** [August 26, 2022, 7:07pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498 "2022-08-26T19:07:17Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [August 26, 2022, 7:07pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/1 "2022-08-26T19:07:17Z")

</div>

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](https://www.npmjs.com/package/node-p5/v/1.0.4). 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

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [August 26, 2022, 8:49pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/2 "2022-08-26T20:49:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [August 26, 2022, 9:56pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/3 "2022-08-26T21:56:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [August 27, 2022, 9:19am UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/4 "2022-08-27T09:19:16Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [August 29, 2022, 4:18am UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/5 "2022-08-29T04:18:30Z")

</div>

How are you going to use this? I mean p5.js at server side? To display? Manipulate the DOM?

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [August 29, 2022, 8:25am UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/6 "2022-08-29T08:25:50Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [August 29, 2022, 8:52am UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/7 "2022-08-29T08:52:46Z")

</div>

> [@vkbr](#):
>
> I mean p5.js at server side?

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()**](https://p5js.org/reference/#/p5/httpGet) & [**httpPost()**](https://p5js.org/reference/#/p5/httpPost) in order for the client sketch to communicate w/ your server code.

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [August 29, 2022, 10:08am UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/8 "2022-08-29T10:08:15Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [August 29, 2022, 3:37pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/9 "2022-08-29T15:37:25Z")

</div>

> 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 !!

---

<div class="post-metadata">

### Author: ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [August 29, 2022, 3:41pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/10 "2022-08-29T15:41:15Z")

</div>

Next piece I’ll add to my stack is `mongoDB`… Well I’ll try…  
:)) let’s see how it goes…

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [August 29, 2022, 7:08pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/11 "2022-08-29T19:08:05Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [August 29, 2022, 7:16pm UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/12 "2022-08-29T19:16:59Z")

</div>

I see, thanks for your time. I might try something with this idea next… just to understand the possibilities.  
👍

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [August 30, 2022, 9:52am UTC](https://discourse.processing.org/t/understanding-p5-server-side-with-node/38498/13 "2022-08-30T09:52:58Z")

</div>

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/](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
