How to obfuscate P5js?

p5.js Project Guidance
1

I embedded some P5js sketches in another app (python+flask).
Any way to obfuscate P5js code?

How is the code in Hungry Bird 3: Drop a seed obfuscated obtained?

I tried some javascript minifiers online and offline ( YUI Compressor, UglifyJS, Packer, JSCompress.com) but the code doesn’t work anymore…

This is a reduced demo I would like to embed for test purposes:

"use strict";

let DemoSketch = function(p) {

    p.setup = function() {
        p.createCanvas(p.windowWidth * 0.9, p.windowHeight * 0.8);  // based on a col-12 container
        p.smooth();
        p.scale(1);
        p.pixelDensity(1);
        p.displayDensity(2);
    };

    p.draw = function() {
        p.resizeCanvas(p.windowWidth * 0.9, p.windowHeight * 0.8);  // based on a col-12 container
        p.background("white");
        p.stroke(0);
        p.fill("white");
        p.line(0, 0, p.mouseX, p.mouseY);
        p.line(p.width, 0, p.mouseX, p.mouseY);
        p.line(0, p.height, p.mouseX, p.mouseY);
        p.line(p.width, p.height, p.mouseX, p.mouseY);

        p.fill(p.mouseIsPressed ? "red" : window.circle_color);
        p.ellipse(p.mouseX, p.mouseY, 50,50);
        p.fill("black");
        p.text(p.frameCount, p.mouseX-15, p.mouseY);
    }
}
2

Hi @nemecsek69,

I found this interesting SO thread about obfuscating JavaScript:

And some quotes:

The only way to truly keep something secret is to not send it to the client . If they don’t have it, they can’t read it. Sending it encrypted is just asking for trouble at the hands of the few people who actually care, and everyone else won’t poke around even if you send it in the clear (link)

Obfuscation can never really work. For anyone who really wants to get at your code, it’s just a speed bump. Worse, it keeps your users from fixing bugs (and shipping the fixes back to you), and makes it harder for you to diagnose problems in the field. Its a waste of your time and money. (link)

Also if you could tell us why you want to obfuscate your JavaScript code :wink:

In principle, minifying your code should not break the code unless you use evals or other weird syntax. Have you tried terser? (use module: false in the options)

2 Likes
3

@josephh , Sorry for the delay but for a week I was not online.

Why to obfuscate code?
I am implementing in p5js a special chart to represent data, and including it into an existing app.
It is not meant to be FBI-top secret, but it would be better if a customer cannot reverse engineer it too easily, because the calculations inside come from my company’s expertise. The boss wouldn’t be too happy.

Thank you for the link! I already checked on stackoverflow, and I don’t know how it was possible to overlook terser.
It works!

1 Like