noFill() not working in processing 3.4

p5.js Coding Questions
1

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.

image

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:

2

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

3

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);
  noFill();
  rect(20, 20, 60, 60);
}

However the second example still doesn’t work:

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

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

this example appears like this for me:

image

4

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="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
5

@PHuzzeyMusic
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
/sketchbook/modes/p5jsMode/template/libraries/p5.js
/*! p5.js v0.5.7 February 08, 2017 /
i can replace that with a download
https://github.com/processing/p5.js/releases/download/0.7.2/p5.js
/! 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.

6
7

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: