noFill() not working in processing 3.4

I’m testing the example found in this link where I create either a rectangle or a box and try to draw it without a fill but it doesn’t seem to be working for me. Instead of transparent, I see it filled up with colours. I’m using processing 3.4.


Alternatively, if I try the same example in the online editor everything seems to be working fine.

Can someone reproduce this? I wanted to make sure it’s a bug before opening an issue on GitHub. Otherwise, any idea of what might be happening?

Thanks a bunch! :smile:

Can you post the exact code that you’re running?

I was running this example that I now figured works if I remove the WEBGL mode from the createCanvas:

function setup() {
  createCanvas(screen.width, screen.height, WEBGL);

function draw() {
  rect(15, 10, 55, 55);
  rect(20, 20, 60, 60);

However the second example still doesn’t work:

function setup() {
  createCanvas(screen.width, screen.height, WEBGL);

function draw() {
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);

this example appears like this for me:


You might be using an outdated version of p5. Try getting it from here to always get the most recent version available. Here is an example.

<script src=""></script>

otherwise it might be a good tip, but in Processing IDE 3.4 p5.js mode index.html
you can not link that way,

still correct, there is a revision to check on:
when you enable p5.js Mode ( i work on RASPBIAN linux )
i find
/*! p5.js v0.5.7 February 08, 2017 /
i can replace that with a download
! p5.js v0.7.2 September 02, 2018 */
( and not need to fiddle inside the index.html file of each project )

BUT i still see a color cube.

so, @formap
could be good idea to report that.

In the end I stopped using processing and ran it outside, using the latest version of p5 from cloudfare and it works! I’ll still report it on GitHub so that it’s a known issue and the team can decide if it’s worth having a look at.

Also, if someone still wants to use processing, I figured out that you can change the p5 template used by updating the content in Processing/modes/p5jsMode/template/libraries/p5.js with the latest version of processing that you can get from cloudfare.

Thanks for the help everyone! :smile: