noStroke() affects shapes above and below

p5.js Beginners
1

Hello everyone. Absolute beginner here, and I appreciate your help already. I’m using the Make: Getting Started with p5.js book, and I’m confused about example 3-15.

Using noStroke() affects all the shapes, when I believe it is only supposed to affect the ellipse below. If I remove noStroke(), then all of the shapes are stroked.

Is noStroke() intended to remove the stroke of all shapes, above and below? Or is something wrong with this code that I’m just not seeing?

The code is as follows:

function setup() {
  createCanvas(480, 120);
}

function draw() {
  background(204);
  fill(153);
  ellipse(132, 82, 200, 200);
  noFill();
  ellipse(228, -16, 200, 200);
  noStroke();
  ellipse(268, 118, 200, 200);
}

I’ve used this code locally, as well as on a few p5.js online editors.

Thank you,
Justin

1 Like
2

Hello,

It affects everything below but draw() loops around it will set everything (above on next loop) until it is changed.

Try this with noLoop() (commented and uncommented) to see stroke() and fill() cycle wrap around and do their thing on the next cycle.

function setup() 
  {
  createCanvas(500, 500);
  noLoop();  // loops through draw() once and stops
  }

function draw() 
  {
  background(128);
  
  //defalult stroke and fill
  ellipse(width/4, height/4, 200, 200);
  
    // 
  stroke(255, 0, 0);
  fill(255, 255, 0);
  ellipse(3*width/4, height/4, 200, 200);
  }

Experiment a little and you will quickly learn how it works.
That is the cool thing about Processing… is the visual feedback.

function setup() 
  {
  createCanvas(500, 500);
  }

function draw() 
  {
  background(128);
  noStroke();
  noFill();  
  ellipse(width/4, height/4, 200, 200);
  
  stroke(255, 0, 0);
  noFill();
  ellipse(3*width/4, height/4, 200, 200);
  
  noStroke();
  fill(255, 255, 0);
  ellipse(width/4, 3*height/4, 200, 200);
    
  stroke(0, 255, 0);
  strokeWeight(3);
  fill(255, 0, 255);
  ellipse(3*width/4, 3*height/4, 200, 200);
  }

:)

2 Likes
3

Thank you so much for your helpful response! I suspected something like a loop was going on from some other experimenting that I did.

Is the Make: Getting Started With p5.js text outdated? I just scanned through later parts of the text and they go into how draw() loops, but I find it odd that the code was presented as functional without noLoop(), which isn’t even mentioned in the index.

1 Like
4

Hello,

In draw() you are usually looping endlessly at 60 fps (frames per second), which is the default, and this gives the impression of animation.

I used noLoop() to stop after first loop for the example above; it has its uses and you can add it to your tool chest.

You will get the hang of it soon enough.
Keep experimenting!

:)