Thesis about creative coding and p5.js

[emsa16]

Hi there,

I recently finished my bachelor’s thesis about creative coding on the web, and p5.js in particular, so for anyone that might be interested, I wanted to share the link to the final paper.

Take care!

[GoToLoop]

FULLTEXT01.pdf

[GoToLoop]

I’d like to add some points to your thesis related to Processing.js (Pjs) retired library.

At 1.1 Introduction - Background on page 7, you state:

However, as it is built with Java, Processing projects cannot directly be put on the web.
Previously this had been solved through the use of Java applets, small programs that could be integrated on websites, but these are practically defunct on the web nowadays.
Instead, a modern solution is using a JavaScript library called p5.js.
It was created by Lauren McCarthy and the first beta version was released in 2014.

Indeed Java applets were used back then in order to put Processing’s Java Mode sketches on web pages.

However, for sketches which used only the Processing API w/o 3rd-party libraries, Pjs was pretty much capable to transpile most of those sketches to the JS language, as far back as 2010 it seems:
ProcessingJS.org/blog/2010/02/03/processingjs-04-released.html

And it is still so even today! As an example, the sketch hosting site OpenProcessing still accepts & runs Java Mode sketches via an engine switch (default is p5.js):

My Sketch - Guest User - OpenProcessing

Although it’s a retired project and less featured than p5.js, it’s much more mature than the latter, especially when using the 3D WebGL renderer, as can be seen on the “3D Knot” sketch versions below:

1. p5.js (buggy) → 3D Knot (p5js) - OpenProcessing
2. Pjs/Java (correct) → 3D Knot (Java) - OpenProcessing

Obviously, p5.js is still at beta stage for years. And hopefully it will catch up on Pjs someday.

And although Pjs was primarily made as a transpiler from Processing/Java to Pjs/JS, it can perfectly be used as a regular JS library too, as p5js is.

However, we need to use what in p5js is called “instance mode” style when dealing w/ Pjs:

• Global and instance mode · processing/p5.js Wiki · GitHub

Like this sketch written in p5js/TS transpiled to JS using the instance mode approach:

• GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/p5js-instance
• GoSubRoutine.GitHub.io/Ball-in-the-Chamber/p5js-instance

Below is the same sketch above, but now re-written in Pjs/CS transpiled to JS:

• GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-cs
• GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-cs

So Pjs can also be a viable p5js replacement if we prefer a closer API to Processing Java than what p5js offers.

[dan850]

@GoToLoop just a quick question and observation, the p5.js sketch thats buggy seems to work as intended. The Pjs/java sketch just shows a dot at the center. am i understanding the sketches correctly?

[GoToLoop]

@dan850

The Pjs/java sketch just shows a dot at the center.

Ru referring to the 3D Knot sketches? Both should draw a rotating knot.

Actually there’s a bug in the Pjs/Java version:
In its online version, strokeWeight(8.0); isn’t affecting the shape; while it works perfectly when running on the desktop Processing.

In the p5js version strokeWeight(8.0); is in effect.
However, the whole shape becomes the color of the last used stroke()!

Original post for the “3D Knot” sketches:

Vertex, loop and draw along a vertex path

Hi, I’m trying to adapt the code which has been written in java by Daniel Shiffman on his youtube channel into P5.js and I’ve met some problems. The loop which I used to draw the shape doesn’t work properly. In object which I created a vector values x,y and z are still 0 ( 0: Vector {vx: 0, vy: 0, vz: 0} 1: Vector {vx: 0, vy: 0, vz: 0} etc. etc). Where am I wrong? This is a video which I mentioned -> https://www.youtube.com/watch?v=r6YMKr1X0VA&t=104s This is my code: let beta; let arr =[]…

[emsa16]

@GoToLoop those are good points. I chose not to discuss Processing.js as the project has been archived, which is mentioned in the introduction. Maybe I overlooked the potential of that library and it could have been interesting to throw in a more thorough examination of Pjs as well.

[tribblesontoast]

I’m doing a Dissertation on generative Graphic Design. I’ll definitely give this a read!
Cool if I reference this in my Dissertation?

Edit: The link just hangs and then fails, can’t get your paper.

[emsa16]

Please, be my guest!

It seems like the school’s portal is down atm. Send me a DM with you email adress and I’ll get you a copy.

[kfrajer]

@GoToLoop

In the p5js version strokeWeight(8.0); is in effect.
However, the whole shape becomes the color of the last used stroke() !

@GoToLoop so that is a bug in p5js?

BTW, the pjs version of 3D knot works for me except the strokeWeight(). I can see it renders smoother than the p5js version.

Thxs for sharing!

[GoToLoop]

@kfrajer

… so that is a bug in p5js?

Yup! And I dunno any workaround for it.

@kfrajer

BTW, the pjs version of 3D knot works for me except the strokeWeight().

Copy & paste it in the Processing IDE for the actual 100% intended behavior.

[jeremydouglass]

@emsa16 – many congratulations on completing your bachelor’s thesis, and thank you so much for sharing your work.

This represents lots of hard work on the survey and on the community interviews, and it is nice that the community has an opportunity to learn more about itself in this way.