Guest Tutorial #6: The Modulo Operator with Golan Levin

Golan Levin visits the Coding Train studio for a tutorial about the modulo operator. He explains what modulus means and its applications in creative coding with p5.js and Processing.
Golan Levin is an artist and educator living in Pittsburgh. He teaches at Carnegie Mellon University, where he also directs the STUDIO for Creative Inquiry, an interdisciplinary arts-research center.
Source code:
gist.github.co...
To contact Golan:
Twitter: / golan
Personal website: www.flong.com/
Support this channel on Patreon: / codingtrain
To buy Coding Train merchandise: www.designbyhu...
To Support the Processing Foundation: processingfoun...
p5.js: p5js.org/
For more Guest Tutorials, Talks and Interviews: • Guest Tutorials and In...
For an Introduction to Programming: • Start learning here!
Help us caption & translate this video!
amara.org/v/bxQE/
📄 Code of Conduct: github.com/Cod...

[@CPUwhisperer]

I didn't think it was possible to make a full-length, meaningful video about just the Modulus operator... I stand corrected. Well done Golan!

[@CameronChardukian]

Agreed. Awesome video, that clearly managed to get many of us viewers excited about such a simple part of Javascript!

[@NatetheAceOfficial]

I really liked this lesson. Golan is passionate and great to watch. Thank you Daniel for bringing him on!

[@cameronmcnulty2240]

This guest really made it make sense for me! When he explained it as "how many times does this number go into this number + whatever is left over" it all clicked! Thank you so much!

[@Will-oo7nh]

First video out of hundreds that addressed if and when the dividend is smaller than the diviser. You are a great, thank you for not just repeating this stupid clock analogy

[@skatetrippy7932]

Thank you so much. I REALLY did not understand the modulo operator until this tutorial. It is frustrating how simple it is, yet everyone else on the internet describes it in a mystical & complex way, seemingly for no reason. Thanks again.

[@romanmontoya5950]

What a great tutorial! Clear, succinct explanations with meaningful examples that build upon one another, which help to synthesize the concept, and uses, of the modulo. Thank you!

[@alinawaz4034]

this is the best tutorial i ever seen on modulus. very helpful and awesome!!

[@jordyngines7251]

I could not understand modulo operations till this video. Thank you!

[@mcf9794]

This helped me a ton, before watching this video no website or video could explain it to me in a way that I could visualize and understand it. Thank you :D

[@stephand2846]

Thank you so much for explaining this! I did not found a better explanation so far.

[@ezeprojects5425]

Finally! I have been struggling with this for a few hours. GREAT. Thank you.

[@MaZe741]

mod is also a really good way of visually arranging items into a grid say you have i items, but you only want 6 per row, you can use mod 6 to determine its horizontal position (i % 6 ). meanwhile the rounded down result of the division is its vertical position ( rounddown(i / 6) ). this results in a neat grid of your items, and can dynamically be changed. the same can be done for a paging mechanism

[@mr.shredder5430]

wow wonderful tutorial, this is what every beginner needs, thanks 💜💜

[@berenger44]

Awesome video ! Modulo rules ! this is probably one of the mathematical features I use the most when I code. It's essential for making musical step sequencer, and to make nice grid designs !

[@dotaphoenix4870]

i was so confused after a few hours of looking in to the topic then found this video Thanks man

[@urielmromano]

As a beginner, I stumbled through several videos on the topic and still wasn't able to understand the operator. This video was extremely simple and entertaining!

[@bluebellrose8]

Thankyou! You just saved me. I was overthinking it. Thanks for clearly explaining the obvious:)

[@53Strat]

This is way ahead of where I am at now but it was a verry good watch. Still learned some things.

[@MrEven9401]

This was useful and genuinely interesting to watch! Love the way it was explained! Would love to see more of Golan! :D

[@TheCodingTrain]

you will today in fact!

[@MarcGamesons]

Thanks for the video, now I finally know what this operator stands for and how one can use it.

[@3mroos4]

great explanation on modulo! i've personally always struggled to understand this but now it's all clear! great guest and great video as always!

[@TanjoGalbi]

@8:17 This close-up shot shows a bug with the line command in P5! When the line length is 0 it does not draw anything but when the line length is 1 it actually draws 2 pixels, when length 2 it draws 3 pixels and so on, it's always 1 pixel longer than it should be. @12:55 For the checker board example you can replace your if/else conditions with a single fill command: fill( (i%2) * 255); This does have the effect of reversing your checkers, the odd squares will be white instead of the even ones. Although the if/else blocks are easier to read there may be speed issues with live animations like when reacting to sounds. The single command is faster than using if().

[@nickthomas8238]

This was a very interesting tip and these memory savers are what I look for

[@marianagrnk]

Dudeeeee! thankyou so much sir! now I understand, I saw some videos, but yours helped me a lot

[@seanearnest]

Fantastic, thanks so much for making this clearer!

[@cprogramming5640]

Excellent visual of modulus. Thank you.

[@Cent-bi6xy]

Very well explained, sir!

[@celestepesce8553]

Very usefull and intresting!!! Love the explanation!

[@marcotronic]

Excellent video! Thanks a lot!

[@FritsvanDoorn]

Wonderful! Clearly stated. Thanks a lot !

[@victorNDSL]

Lovely tutorial, thanks a million times!

[@_goldfarb_]

Mark the whiteboard with borders as viewed from the camera and you'll know how much room you have! thanks for the tutorial!

[@golanlevin]

We did do that. The problem was that I'm a lefty, and Dan's weatherman rig is set up for a righty. So I was pretty confused about where to look.

[@_goldfarb_]

you'll just have to do more guest spots to get used to it :) thanks again

[@christianek.963]

It was so helpful, and he explained it so well!!!

[@hallorudi91]

wow. I love this guy.😍

[@katharine6584]

Thank you! I'm just starting to learn JavaScript and the modulo operator was confusing me a bit. This video explained it perfectly!

[@xetop]

I really enjoyed this video, thanks Golan.

[@xetop]

Even though i already knew what the mod operator did, i still watched it :)

[@user-uz7gb7gb4v]

Using pos.x %= width and pos.y %= height is an easy way of making a moving object wrap around when it reaches the edge of the screen. It's easier (and I believe more efficient) than using an if statement.

[@user-uz7gb7gb4v]

soulshined2 Nope. %= is an assignment operator, like +=, not a boolean operator (like ==). It's the same as writing: pos.x = pos.x % width pos.y = pos.y % height That way, when the position goes above the height or width, accordingly, it just wraps back around to 0.

[@user-uz7gb7gb4v]

soulshined2 Just to be explicit, the full if statement that would achieve the same thing is something like: if (pos.x >= width) { pos.x = 0; }

[@roamingcelt]

"a" is a variable not a remainder. The remainder is the solution that is put in to a.

[@daaaniel21]

17.27 minutes long video on mod?? it was still awesome sir. thanks

[@workflowinmind]

Great guest! But I'm pretty sure you already did one a long time ago. Still really useful and conscice for newcomers. Modulo is really powerful

[@paintingjo6842]

1:50 I love the "what's that?"

[@wnnsdm3160]

Great explanation. Thanks a ton!

[@iosgamer158]

A really helpful tutorial, thanks!

[@zeldamax4741]

Nice tutorial! :)

[@TechMarketer]

great job!

[@SanderVermeer]

You can use modulo to generate sawwave and squarewave sounds. Might be an interesting Coding Challenge...

[@thaboluvhimbi4208]

Thanks a lot 😊😊

[@trovr]

i really love your tuts.. learned a lot about regex / javascript for exemple. Enjoying this kind of "solution" for problems? are there more tuts like these, showing some mathematical thoughts? These are fantastic. :)

[@rain3377]

Awesome bro

[@chriscalver8595]

Thanks Golan

[@Meyaleleth]

Thank you!

[@scienceandstuff_24]

Good job. Thanks

[@Quidoute]

i finallly understund the modulo operator

[@jupiterelizalde]

Thanks! Useful

[@jackfrost884]

Excellent

[@fakerrain]

And here I thought modulo was just a weird division operation that programmers used to find if things were odd or even. My mind is blown.

[@imosdefinite]

THANK YOU

[@stevedoetsch]

You had me at modulo

[@michalbotor]

what really sucks about 'a |-> a % n' operator in javascript is that it differs from the mathematical 'a |-> a mod b' operation, once the dividend 'a' becomes negative, causing the pattern '.. 4 0 1 2 3 4 0 ..' shown at 4:54 to break. as a result one has to frequently use the operator 'a |-> [(a % n) + n] % n' instead to fix this issue, without resorting to any conditional statements. the need for such an operator (i.e. mod) arises naturally and frequently in p5.js anytime we treat canvas as a torus whose left edge is guled with right edge and whose top edge is glued with the bottom edge (think of the snake game or the asteroids games for example). now i do understand, that in half of the programming languages out there the '%' operator behaves this way (by the way, can anyone please enlighten me when this behaviour (i.e. -1%5=-1 instead of 4) becomes actually desireable?), but at least their math libraries provide us with the 'mod' operation (like processing/java does with its 'Math.floorMod' function) as well, which javascript's does not..

[@alonattar3836]

350K subs congo

[@enivaldobonelli]

Great!

[@sacheras3]

is good idea, have guests

[@sevolund]

So, as you can repeat motifs forever, that basicly means modulo is perfect to draw fractals

[@ethanma3916]

So it’s like, for the pattern in mod 5, the pattern is just the possible digits in base 5?

[@ambikajoshi]

+thecodingtrain could you link your videos where you used mod in the examples? Just for reference. Thanks.

[@sayanghosh6996]

what would happen if a sketch is run for longer than 2.2698 years (frameCount would be greater than 2^31 [ largest possible value for an int])?

[@zackmercurys]

Before I opened the video, I saw "with Golan...", I was expecting a tutorial in Golang xD

[@zackmercurys]

I'm subscribed to him, but not interested in Go yet.

[@j.lo.5784]

you could calculate the color with fill (255*(i%2));

[@l0m-dev]

Jürgen Lochner Yes, you *could*

[@j.lo.5784]

ok, so I guess " fill( 255* (1 - (i%2) ) ); " might fix it, but it is less readable code

[@sadhlife]

Alessandro Astone that wasn't the point of the video, it was to get an alternate black and white. so it's fine

[@DaniIvanov7]

I understand how 6 % 5 = 1 because 5 fits once into 6 and the remainder is 1, 7 % 5 = 2, 8 % 5 = 3 etc. However, why is 4 % 5 = 4 and 3 % 5 = 3 when 5 doesn't even fit once into 4 or 3?

[@jamiemeadowcroft6744]

Jordan Ivanov think of modulo as a clock, example 15 % 12, the 12 is your clock face so 15 hours would point to 3, if it was 10 % 6, now you have half a clock face, count 10 steps around your clock and the answer is 4, 10%6 =4

[@swateen]

Because 5 fits 0 times in 4. So what's left is the 4 that you tried to fit the 5 in. Same goes for the 3. 5 fits 0 times in 3 and thus you are left with that 3. Hope that helps.

[@wiscatbijles]

Some redundancy there: if (i %2 == 0) is the same as if (i %2). As the 0 and 1 translate to false and true.

[@DaveBriccetti]

Sjors van Heuveln no, you have it reversed

[@wiscatbijles]

Yeah you're right. add the ! -> if (!i % 2)

var instead of let **triggered**

[@CameronChardukian]

Hahaha

[@Fay-bm1vd]

But what if it is 20% 8 then you have 12 as leftover right? Thanks for the video btw :D

[@kzOFFBEAT]

Fay schouten I get how you think but then it acts as subtraction. You get 4 leftover since 8 goes in to 20 two times (16) and 4 is left to reach 20. ^^

[@haideralipunjabi]

Did he like what we did with the port of 12oclocks?

[@TheCodingTrain]

Yes, he was amazed!

[@rifatahsan5636]

Sir, where are you writing the code?

[@redhen]

Learn CSE Looks like the p5 editor. I think you can still download it from the p5js.org website.

[@TheCodingTrain]

Golan is using an older, deprecated desktop editor. You can find it here but it's buggy: github.com/processing/p5.js-editor/releases/tag/v0.6.2

[@rifatahsan5636]

Thanks !

[@merijndenhouting4149]

How long ago was this recorded?

[@TheCodingTrain]

A little over a week ago.

[@golanlevin]

Last week. But, yes, I'm aware that I'm using the now-obsolete p5.js editor. There are some reasons. But anyway, the code is the point.

[@merijndenhouting4149]

Golan Levin the gray background and the old mac os bar threw me of.. but anyways, great tutorial, good that there is finally some attention to the modulo! :)

[@PaulMcCannWebBuilder]

Why weren't you my math teacher!?!?!!

[@funkyb6598]

Chess board: var cols, rows, square_size, x1, y1, x2, y2; cols = 8; rows = 8; square_size = 10; for (var xx = 0; xx < cols; xx++) { for (var yy = 0; yy < rows; yy++) { // Set color if (xx mod 2 == 0) && (yy mod 2 == 0) || (xx mod 2 != 0) && (yy mod 2 != 0) { draw_set_color(c_white); } else draw_set_color(c_black); // Draw square x1 = xx * square_size; y1 = yy * square_size; x2 = xx * square_size + square_size; y2 = yy * square_size + square_size; draw_rectangle(x1, y1, x2, y2, false); } }

[@withcheesepls]

It's so hard being left handed and writing on a whiteboard. :(

[@hylawillis8572]

carriage return bell - hahaha

[@sadhlife]

Dan, you shouldve atleast told him... var is let, let is var, let is var, var is let!

[@golanlevin]

'let' is relatively new syntax for me; in the version of JavaScript I learned, it wasn't valid syntax yet. I stuck to the more widely used 'var'.

[@bjornsundin5820]

i'd do "fill(frameCount & 1 ? 255 : 0);"

[@Goel25]

you can also do "fill(255 * (frameCount % 2));"

[@bjornsundin5820]

Goel oh yes! I like to use "x & 1" for finding out if a number is odd

[@Goel25]

What does the & do?

[@bjornsundin5820]

Goel it's the bitwise AND operator, if a bit in both numbers at the same index are 1, that bit in the output is also 1. If one of them are 0, the output bit at that position is 0. Numbers in computers are stored in binary, and a bit is one 0/1 in the number, if you didn't know. So binary 010 & 011 = 010, which means 2 & 3 = 2 in base 10 and x & 1 is 1 if the number is odd.

[@bjornsundin5820]

Since it's such a low level operator, i think it should be faster than modulo. I'm not sure tho, and the difference wouldn't be big

[@alvarobyrne]

left handed

[@oi_faen]

-1 since youtube doesn't count them

[@rezn5447]

As a left hander myself, the left handed whiteboard struggle is real.

[@tibimose823]

I kinda expected a clock, but ok

[@grainfrizz]

I am pretty sure Golan is not a physician.

[@ujjwalgupta2890]

3%5 explain please

[@Graeme_Lastname]

Please, sound effects or speech, not both.

[@dominiclam994]

#2

[@Twitchi]

I was all with him until he showed his favorite color.. now I feel a revulsion like none I have felt before

[@naiki1409]

let a....

[@tcocaine]

Seems like a very nice dude!