Not sure if I’m not understanding the subject or if this sentence was not the best way to communicate behavior?
Page 214 of “Getting Started with p5.js”
The author communicates the arc behavior as such:
“If it has, we set the value of x to a negative value, so that as it continues to increase, it will enter the screen from the left.”
The part that threw me off, “…, so that as it continues to increase,…”
I don’t see x continuing to increase? It seems to me that x is reset to -40 after “… x has increased beyond the width of the screen (plus the radius of the shape).”
If I’m correct, maybe a better way of communicating this behavior:
“If it has, we reset the value back to -RADIUS so that arc will again enter the screen from the left.”
Not an author, but I’ll mention that the code and passage in question is:
var radius = 40;
var x = -radius;
var speed = 0.5;
function setup() {
createCanvas(240, 120);
ellipseMode(RADIUS);
}
function draw() {
background(0);
x += speed; // Increase the value of x
if (x > width+radius) { // If the shape is off screen
x = -radius; // move to the left edge
}
arc(x, 60, radius, radius, 0.52, 5.76);
}
On each trip through draw(), the code tests to see if the value of x has increased beyond the width of the screen (plus the radius of the shape). If it has, we set the value of x to a negative value, so that as it continues to increase, it will enter the screen from the left. See Figure 8-1 for a diagram of how it works.
No matter what, x will always continue to increase, because of the first line in draw:
x += speed; // Increase the value of x
Literally, every time draw continues for another frame, x increases, regardless of what value it is set to. “Continue” is what draw does as it loops (and is also a keyword in JavaScript that means “go on to the next iteration of the loop”) JavaScript Break and Continue. I wonder if the confusion might be that you were thinking of “as it continuously increases” – that is, in an unbroken and uninterrupted way, which x does not do (it jumps around, but keeps on marching up from where-ever you set it).
Not sure if we’re getting into semantics here, or I’m still not clear. Either way, I’m happy to discuss.
Okay, got some pad and paper out and started to follow the code step-by-step.
I did some multiplication and see that on iteration 214, x = 321, which is greater than width+radius. Therefore x is assigned the value -40. On iteration 215, x = -38.5, and so on…
So, how is x “increasing”? The value of x went from 321 to -40 on iteration 214. That doesn’t look like an increase to me
Still, in case it is conceptual: A balloon is full of helium. The helium causes it to rise. When it touches the ceiling we bump the balloon down below the table. The balloon was rising before we bumped it down. It will continue to rise after we bumped it, because it is still full of helium. As it continues to rise, it will rise above the edge of the table. In fact no matter how many times we bump it down, it will continue to rise – we have been bumping it down all afternoon and it has been continuing to rise all afternoon. The important point to understand about a helium balloon is not it’s position, it is that it imparts a continuous rising action on whatever it happens to be doing.
Put another way, there is a force (x+=) applied, which we understand acts to increase the value – independent of other forces which are also applied. Put another way, in the code we are talking about velocity, not position. We can make an instantaneous change to the position, but the velocity remains positive.
