# Thesis about creative coding and p5.js

**URL:** <https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447>\
**Category:** Teaching\
**Created:** [July 2, 2019, 2:13pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447 "2019-07-02T14:13:17Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![emsa16](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emsa16/32/4096_2.png) [@emsa16](https://discourse.processing.org/u/emsa16)\
**Post date:** [July 2, 2019, 2:13pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/1 "2019-07-02T14:13:17Z")

</div>

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](http://urn.kb.se/resolve?urn=urn:nbn:se:bth-17941).

Take care!

---

<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:** [July 2, 2019, 4:45pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/2 "2019-07-02T16:45:29Z")

</div>

> **[FULLTEXT01.pdf](https://bth.diva-portal.org/smash/get/diva2:1319386/FULLTEXT01.pdf)**
>
> 2.20 MB

---

<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:** [July 3, 2019, 9:22pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/3 "2019-07-03T21:22:59Z")

</div>

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](http://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](https://openprocessing.org/sketch/create)**

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](http://OpenProcessing.org/sketch/608726)
2. Pjs/Java (correct) → [3D Knot (Java) - OpenProcessing](http://OpenProcessing.org/sketch/608725)

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](http://GitHub.com/processing/p5.js/wiki/Global-and-instance-mode)

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](http://GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/p5js-instance)
- [GoSubRoutine.GitHub.io/Ball-in-the-Chamber/p5js-instance](http://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](http://GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-cs)
- [GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-cs](http://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.

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [July 4, 2019, 1:35am UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/4 "2019-07-04T01:35:32Z")

</div>

@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?

---

<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:** [July 4, 2019, 1:53am UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/5 "2019-07-04T01:53:19Z")

</div>

> [@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](https://discourse.processing.org/t/vertex-loop-and-draw-along-a-vertex-path/4545):
>
> 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](https://www.youtube.com/watch?v=r6YMKr1X0VA&t=104s) This is my code: let beta; let arr =[]…

---

<div class="post-metadata">

**Author:** ![emsa16](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emsa16/32/4096_2.png) [@emsa16](https://discourse.processing.org/u/emsa16)\
**Post date:** [July 4, 2019, 7:28am UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/6 "2019-07-04T07:28:16Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![tribblesontoast](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tribblesontoast](https://discourse.processing.org/u/tribblesontoast)\
**Post date:** [July 4, 2019, 11:00am UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/7 "2019-07-04T11:00:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![emsa16](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emsa16/32/4096_2.png) [@emsa16](https://discourse.processing.org/u/emsa16)\
**Post date:** [July 4, 2019, 12:10pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/8 "2019-07-04T12:10:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 4, 2019, 4:36pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/9 "2019-07-04T16:36:08Z")

</div>

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

---

<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:** [July 4, 2019, 4:50pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/10 "2019-07-04T16:50:33Z")

</div>

> [@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. 😉

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 8, 2019, 3:37pm UTC](https://discourse.processing.org/t/thesis-about-creative-coding-and-p5-js/12447/11 "2019-07-08T15:37:15Z")

</div>

@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.