New to p5js - strokeWeight & Order of Operations?

p5.js Beginners
1

Good Morning!

I am making my way (no pun intended) through the book Make: Getting Started with p5.js. I am having trouble understanding Example 3-12: Set Stroke Weight. Based on the code I have included in this post, the book example shows that the stroke weight of the leftmost ellipse as unchanged, remaining at the default of 1px. However, as you can see from my example, the leftmost ellipse is utilizing the stroke weight of the ellipse on the right, strokeWeight(20). I have recreated this issue in the p5js web editor, in my desktop, vscode environment, and in the Processing app both in Java mode and in p5.js mode. The same thing occurs for me when I change the color() of an element on the screen. Even if I place the line in a function I have created, a strokeWeight() or color() will affect other elements above it. So am I doing something wrong? Am I missing something?

Thank you in advance for your help!

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

function draw() {
  background(204);
  ellipse(75, 60, 90, 90);
  strokeWeight(8);
  ellipse(175, 60, 90, 90);
  ellipse(279, 60, 90, 90);
  strokeWeight(20);
  ellipse(389, 60, 90, 90);
}

Screenshot 2023-09-21 at 05.27.08
Screenshot 2023-09-21 at 05.27.08982×262 6.6 KB

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

noLoop()

1 Like
3

Yes! That does work, thank you! My question now is, why doesn’t the book example function properly without noLoop()? Also, if I place strokeWeight() in a function and call it, it affects the rest of the sketch. I thought placing it in a function would keep it from affecting all other elements?

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

function draw() {
  background(204);
  
  ellipse(75, 60, 90, 90);
  strokeWeight(8);
  ellipse(175, 60, 90, 90);
  ellipse(279, 60, 90, 90);
  
  function lastOne() {
    strokeWeight(20);
    ellipse(389, 60, 90, 90);
  }

 lastOne();
  
}
4

When you use stroke, strokeWeight, fill you are setting the drawing parameters to be used in all subsequent drawings until changed explicitly.
So in your code

function draw() {
  background(204);
  ellipse(75, 60, 90, 90);
  strokeWeight(8);
  ellipse(175, 60, 90, 90);
  ellipse(279, 60, 90, 90);
  strokeWeight(20);
  ellipse(389, 60, 90, 90);
}

the draw function is looped so in the first frame the stroke weights used are
1 (default) 8 8 20
but on the next frame and subsequent frames they are
20 8 8 20

The easiest solution would be to add strokeWeight(1); immediately before drawing the first ellipse i.e.

function draw() {
  background(204);
  strokeWeight(1);
  ellipse(75, 60, 90, 90);
  strokeWeight(8);
  ellipse(175, 60, 90, 90);
  ellipse(279, 60, 90, 90);
  strokeWeight(20);
  ellipse(389, 60, 90, 90);
}
2 Likes
5

Thank you for the swift reply. I thought it might be something like this. I appreciate you and the initial responder for the great input. It was so confusing because the book example does not suggest what you have suggested. As you can see below, there is no noLoop() or strokeWeight(1) in the sketch. Maybe an oversight? The downloadable code is the same as the book example and as a result, also incorrect. Thank you again!

IMG_5287
IMG_52872651×2607 2.02 MB

6

I believe it was so. Anyways, another workaround is adding push() + pop():

const X = 75, Y = 60, DIAM = 90, GAP = 110;

function setup() {
  createCanvas(480, 120);
  // noLoop() // alternative workaround
}

function draw() {
  background(204).circle(X, Y, DIAM);

  push(); // save current styles [ default strokeWeight(1) ]

  strokeWeight(8).circle(X + GAP, Y, DIAM).circle(X + GAP * 2, Y, DIAM);
  strokeWeight(20).circle(X + GAP * 3, Y, DIAM);

  pop(); // restore saved styles [ default strokeWeight(1) ]
}
2 Likes
7

Thank you for writing out this alternative. I really appreciate all of the help!

1 Like