Help understanding a couple JavaScript lines

Patterns and Code
1

I’m newbie programmer and am learning JavaScript so I can program the PixelBlaze. Actually, I’m trying to learn how to program it by studying the patterns that Ben provided. I can read most of it now, but there’s a couple lines Here and there that I’m not clear about. If anyone could illuminate me,I’d appreciate it.

My understanding of modulus, x % y , is that it is the remainder after division of x by y. It would follow that if x is an integer and y is 1 then x % 1 would always be 0, and if x < 1 then x % 1 = x. Am I missing something, or is this the point?

Ben uses this, for instance in the pattern for “fast Pulse” where he defines v = triangle((2*wave(t1) + index/pixelCount) % 1). Can someone explain what the modulus does here, what’s its purpose?

Also in “Fast Pulse”, he defines another variable as
S = v < .9 followed immediately by the hsv function
hsv(t1,s,v).

I understand < to be a logical operator, but I don’t understand what happens if it is true or false. I’m guessing that if v < .9 is true, then s = v, if it is false, then s doesn’t change and in this case is undefined and Thus s = 0. Am I close?

And, finally, in Color Twinkle Bounce, he has this line:
a = (a> .1 ? a : 0)
I don’t have a clue how to understand this line. I can’t seem to find what the ? character means and I think the colon refers to an object literal, but don’t understand what that is. This might be too hard to explain to a novice programmer here in the forum, but if you give me some clues I can go read about it elsewhere. Like, what is he trying to accomplish here?

Questions aside, I’m really impressed with how simple these programs are considering how beautiful and complex the resulting patterns are. I’ve never appreciated the beauty of math so much and I’m hungry to learn more.

1 Like
2

Hi Booli,
Glad you are digging in and having fun!

The remainder / modulus operator % can be used with fractional numbers as well as whole integers.

Some languages let you do this out of the box using the modulus operator ‘%’ (JavaScript included) but others like C you need to use a special fmod function.

So for example, 1.5 / 1 is 1 with a remainder of .5. I use it here to “wrap around” to keep a value between 0 and 1. Imagine a circle with circumference of 1.0. If you travel 0.5 from the top, you’ll end up half way, but if you travel 1.5 from the top, it will loop and you’ll still end up at 0.5.

In “fast pulse”, it was intended to make sure that the value stayed within triangle()'s input value as the value could be as high as 3. In older versions a value > 1.0 wouldn’t work as expected. However, since then I’ve made the waveform functions: wave, triangle, and square wrap automatically. It’s not strictly needed here, but its a handy trick!

The comparison operators evaluate to either 0.0 when false or 1.0 when true. While any non-zero value is “truthy,” 1.0 was chosen so that it can be used in math as a unit multiplier. In “fast pulse” the saturation is 1.0 as long as v < .9, but otherwise is 0.0, causing the “peak” of the pulse to be white instead of colorful.

The question mark is the “ternary operator” and works on 3 arguments. The value to the left of the ? is evaluated, and if true results in the value before the colon : otherwise results in the value after it. It’s functionally the same as this:

if (a > .1)
  a = a
else
  a = 0

What this is doing is setting any value under .1 to zero, giving it a sharp black cutoff point instead of a gradual fade.

3

Super clear and very exciting because I understand your explanation of what the code does AND I understand why you did it!

It’s fun trying to reverse engineer you intentions. For instance, I was curious why you were multiplying v and s With themselves so often, 2, 3 and sometimes 4 times. I understood it was making the value smaller and smaller and, with experimentation, I could see that It was introducing darker or whiter pixels in the waveforms giving the patterns more definition. It’s fascinating to me how everything is breaking down, for a large part, to numbers between 0 and 1.

And thanks for clarifying the auto wrap of the hsv function. I had read that and was a little confused why you were needing to use modulus. But, as you mentioned It is a cool trick.

I also really appreciate the comments you left with your example patterns. I learned tons from them.

1 Like