P5.js: P5 with a capital P

[AgentMulder]

New to Processing but not new to JavaScript. I am very interested in The Nature of Code and the amusing lectures from Daniel Schiffman. This rocks!

Having spent a few days installing p5.js and playing around with the code, I feel that "instance mode" is the way to go to scale my projects. That means the JavaScript will look like this:

 new p5( function(p5) {

     var x = 100; 
     var y = 100;

     p5.setup = function() {
         p5.createCanvas(700, 410);
     };

     p5.draw = function() {
         p5.background(0);
         p5.fill(255);
         p5.rect(x,y,50,50);
     };
 })

(are you still with me?) I somehow feel that the global namespace for p5 should be named P5, with a capital P, as is traditional in most other JavaScript libraries.

[lmccart]

Totally hear you. Indeed, namespaces in JS are generally capitalized, this is a good point. However, we chose the lowercase "p" to indicate that we were breaking with tradition a bit with this library. That is, breaking the tradition of capitalizing, but also trying to break with the "tradition" of many open source projects that are male dominated, lacking diversity, and privileging experienced developers in discussion over beginners.

To this end, we are explicit in our community statement and github code of conduct, and are really trying to see what happens if you build an open source toolkit founded on core values of diversity and inclusivity, letting all design decisions flow from there. There's is a lot of new stuff in the works that I'm really excited about, aimed at facilitating artists and programmers that are beginners, have disabilities, speak different languages, are of underrepresented groups, or have alternative and unique perspectives and backgrounds. For me the lowercase "p" suggests a new tradition of including as many different kinds of people as possible in this project.

Hope that makes sense!

[joecridge]

I totally second Lauren’s reply to this – my favourite feature of p5 is the community behind it, and the plucky little ‘p’ embodies it well.

Besides that, p5 differs by design from most other JavaScript _libraries_ – I’d describe it more as a _DSL_ that happens to use a JavaScript syntax/runtime. You can dip into as much native JS-goodness as you like on the side, but the core API (with it’s global flags, and characteristic setup()/draw() structure) is accessible to anyone familiar with Processing – even if they have little (or no) knowledge of JavaScript.

Sure, there are things that could be changed to make p5 more _idiomatic JavaScript_, but I think that keeping things ‘idiomatic Processing’ is closer to the project’s goal – even if it means being a little exceptional 😛

[lmccart]

I realized that the p5 name in general is not often explained, but there's a little history to it. When Processing began in the early 2000s, the domain was http://proce55ing.net/ and Processing was sometimes referred to as P5 for short. it's neat, you can see some original forum discussions here. so we wanted to also reference Processing and P5 but leave the capital P for the original. so in some ways the little p is suggesting a younger sibling relationship, too.

[AgentMulder]

Thank you for the explanation. And thank you for p5 :+1: I'll take the lowercase p as a (harmless) oddity, as JavaScript itself is full of oddities. Where other languages are like cars and machines, JavaScript is more like a furry animal. I love it!

Here is a song for you to stick in your head for the rest of the day:

Soul with a capital S

One more thing. Probably worth a discussion on its own. Will there be support for TypeScript anywhere soon? TypeScript is a relatively new programming language that spits out JavaScript, ready to be run in the browser. It makes programming JavaScript much easier, because it does all kinds of checks on your code that JavaScript itself, by design, cannot do. It's fun and lightweight and open source.

[limzykenneth]

@AgentMulder Since Typescript is a superset of Javascript, it can be said all valid p5 sketches are valid in Typescript as well, I haven't tried it but it will probably work if you use typed variables in Typescript for your p5 sketches. However if you are looking for Typescript definitions for p5, I believe @toolness was looking at it, not sure about its progress though.

[AgentMulder]

Ghe ghe, I hijacked the name P5 (with a capital P) with this idiom:

var P5 = new p5(function (p) {

    var bubble;

    p.setup = function () {
        p.createCanvas(377, 510);
        bubble = new Bubble();
    };

    p.draw = function () {
        console.log('running...');
        bubble.move();
        bubble.display();
    };
});

var Bubble = (function () {

    function Bubble() {
        console.log("width  = " + P5.width);
        console.log("height = " + P5.height);
        this.x = P5.width / 2;
        this.y = P5.height / 2;
    }

   Bubble.prototype.display = function () {
        this.red = P5.floor(P5.random(0, 255));
        this.green = P5.floor(P5.random(0, 255));
        this.blue = P5.floor(P5.random(0, 255));
        P5.fill(this.red, this.green, this.blue);
        P5.ellipse(this.x, this.y, 34, 55);
    };

   Bubble.prototype.move = function () {
        this.x = this.x + P5.random(-10, 10);
        this.y = this.y + P5.random(-10, 10);
    };

    return Bubble;
}());

[joecridge]

@AgentMulder I couldn’t help noticing that you keep reformatting your code blocks – on GitHub fenced code blocks use a triple backtick, optionally followed by the syntax highlighting language:

``````

// Some JavaScript…

``````

If you don’t want highlighting then you can just indent the whole block by at least 4 spaces instead (sans backticks) – which is what has happened to the function body of your first post.

Single backticks only work for inline code.

GitHub have a pretty good guide on their flavour of Markdown if you’re interested.

Hope that helps!