Placeholder Image

Subtitles section Play video

  • Hello.

  • In this video, you're going to see me do a coding challenge.

  • Why make this relation?

  • This is a visualization of the recommendation number sequence.

  • I'll talk about what that number sequence is, how it works and then write the code to draw this using job script in the P five library.

  • This is all thanks to and inspired by a number file video, which I will also reference, and you can find links to in the video description.

  • So apparently it's spooky, so I look scary circles running away.

  • All right, so the idea for this coding challenge originates from this wonderful number file video about this thing called the record Monza sequence.

  • Now the recommend sequence is a numeric sequence, a sequence of numbers, and I am a kind of prison who really likes.

  • I keep a book, a 1,000,000 random numbers in it around.

  • It soothes me.

  • It's to sooth.

  • Sooth is me.

  • It soothes me at night time when I'm feeling stressed or anxious just to read some random numbers.

  • And so this particular number sequence is a fascinating one, is invented by a Colombian mathematician named Bernardo.

  • Recommend Santos, and you can find out more about it at the guess what?

  • There's a website which is actually the online encyclopedia of integer sequences.

  • And I think now, possibly for the rest of my life, I'm just gonna be at home browsing this way.

  • Oh, my God.

  • It's a whole website dedicated.

  • I can't, but I didn't really know about this till now.

  • So here's the thing.

  • I'm not gonna go too much into the background of this numeric sequence or number sequences.

  • I've definitely recommend that you also check out the number file video.

  • Really?

  • Just gonna try to code it and visualize it.

  • That's what I'm gonna do in this video.

  • I'm gonna do it in Java script.

  • And if I'm feeling a little saucy afterwards, I might I might do a video where we try to make something musical out of the number sequence.

  • So anyway, okay, so what?

  • How does that let me first attempt to just describe to you what the number sequences a number sequence is just exactly that.

  • A sequence of numbers like 123456789 That's a integer sequence counting up by one.

  • There's the Fibonacci sequence.

  • 11235 eight right where you add the two numbers before and get the next.

  • So maybe you want to pause this video right down, invent your own number sequence.

  • This particularly recommend a number sequence is particularly beautiful and interesting as a kind of the strange balance between order and chaos.

  • So anything that has a thing dialectic quality of having both order and chaos is always fascinating to visualize.

  • Well, mostly always, I think.

  • All right, so let's say we have a number line and I'm really just regurgitating here.

  • A bit of the explanation that is in the number file video, in my own words, probably not nearly as well.

  • 0123456789 10.

  • And this, in theory, go on to Infinity.

  • Apologies.

  • There's a little glare there, but I think everything will be fine.

  • All right, now let's say I have a counter, and that counter is going to start at once.

  • The idea here and it's going to go up.

  • 23456 Now, for every number in the counter, I'm going to try to go backwards.

  • But I thought if I guess I'm gonna start somewhere gonna start right here.

  • And I'm going to attempt to go backwards if I can go backwards by this number of spaces and land somewhere that hasn't been landed on before.

  • Great.

  • I'm gonna go there.

  • If not, I'm gonna go forward.

  • It seems weird, and I don't know if that explosion made sense, but it's going to make sense to you if you keep watching.

  • I hope.

  • I think All right, so, one, I'm gonna try to go backwards.

  • There's no spot.

  • There's no negative numbers in the sequence, so I can't go backwards.

  • I'm gonna go forwards.

  • I'm gonna go to here.

  • So my sequence is now 01 Now I'm going to go.

  • I'm gonna try to go backwards by two.

  • Won t.

  • Oh, no, I can't.

  • So I need to go forwards by two.

  • So I'm gonna go here three now.

  • I'm gonna try to go backwards by 3123 up.

  • Know that spot is.

  • Take it.

  • That spot's taken.

  • I can't go there.

  • I'm going to go.

  • 1234 Now I'm gonna try to go back for 123 I guess what?

  • Guess what?

  • This spot is open.

  • So I can go backwards for now.

  • In the visual ization of it, I'm going to want to draw the moving backwards below in.

  • This is an arbitrary decision.

  • It's sort of the common way to visualize this sequence.

  • It's certainly what's done.

  • Number, File, video.

  • The point of me showing this year is the code it, But you might invent your own way of visualizing, but I could go back for now.

  • By the way, forgot to keep updating this 0136 two.

  • And then now I'm gonna go forward.

  • Five.

  • No, I'm gonna try to go backwards.

  • Five.

  • I can't.

  • There's nothing there.

  • So go forwards.

  • 512345 So now I go here so we can see how this goes.

  • And this is now.

  • Now it's just double check.

  • So s so on and so forth.

  • So I could keep doing this.

  • It's gonna be a bit easier for me to write a computer program to do this than for me to do this manly on the board.

  • First of all, I really, really hope that I didn't Bosch.

  • I'm gonna go check the encyclopedia and see if this sequence matches with their 0136 to 7 0136 to 7.

  • All right, so let's begin and write some actual code.

  • Now s.

  • So here I am in a jobs program with P five gs library loaded.

  • I What do I need?

  • So I need to keep track of if I come back to this, I need to keep track of, you know, the number sequence would be nice to keep track of.

  • I want to keep track of the counter.

  • Like what spot of my own.

  • I need to keep track of which spots have been landed on or not.

  • All right, so I'm going to say let numbers This will be an array that's going to basically have a value in it.

  • You know, something like this for every spot that's been landed on.

  • That's kind of my idea.

  • I'm gonna have that.

  • Then I'm going to.

  • What else do I did?

  • I say I need I needed a counter that's going to start.

  • The counter is going to start at one.

  • Um, and I guess this could, like, have true, innit?

  • To start, because the zero spot by definition, is what's been landed on at the beginning Let's see.

  • How is that?

  • And then, um let me just say, What is the sequence?

  • This will be the sequence.

  • So let's right, let's let's right.

  • Let's use the fact that p five lucques automatically with the draw, Lou, But let's write a function called Step.

  • So it is to keep track of where I am.

  • So I guess I'm gonna call that index because I'm think of it as the index into this array.

  • And so, actually, what I'm gonna do is at the beginning, I'm just going to say numbers Index equals true because that's where I am.

  • And every time I want to step, the first thing I'm gonna do is I'm gonna say num index minus.

  • I'm going to say I'm going to say next equals index minus account.

  • This is me attempting to go backwards, right?

  • And then I will say numbers.

  • Oh, I will say if numbers next, if it's been landed on or if next is less than zero.

  • If next is less than zero or if it's already been landed on, then that is no good.

  • Next needs to equal index plus count, and then I can simply say numbers next equals true, because that's now a spot that I've landed on and the sequence I can add to it, the value Next and then I could say Index equals next.

  • So let's do this for.

  • And actually let me forget about draw for a second.

  • Let's see if this algorithm works.

  • What's a four letter?

  • I equals zero eyes.

  • Listen, 10 I plus plus step.

  • Let's just do this 10 times and then say console dot log.

  • I'm sure I've made a mistake.

  • The sequence.

  • So this is my idea for the hour.

  • Then we try to go backwards.

  • If that is a negative number, it's no good.

  • Or if it's a place that's already been landed on, then I need to go forwards.

  • I need to set the forward spot to be true.

  • And add that to the sequence.

  • And now that's my new my next spot.

  • So I suppose in addition to saying numbers, Index is zero.

  • Technically, the first number.

  • That's the question.

  • Zero is the first number, So I also want to say a sequence dot push index in set up.

  • So let's run this a code.

  • And C, Is this the sequence?

  • No, no, no No, no, no, no, no.

  • That is definitely wrong.

  • I could see in the chat.

  • Some present count didn't increments.

  • So I forgot a really crucial step, right?

  • The whole point of this is I go forward ones.

  • Then I tried that and twice, then three times in four times trying to go backwards.

  • I was always any increment counter.

  • So it's just going, you know, try to go backwards once each time.

  • It's never gonna work.

  • All right, good mistake.

  • Are good mistake.

  • Tohave.

  • So I am now going to say, When do I want to do that?

  • I guess right at the end, I just say count plus plus right?

  • I just wanted the next time I want two steps.

  • That's probably count enough is the right variable name for this.

  • Could be like number of steps.

  • But right now, let's try this again.

  • Let's see 0136 to 7 13 2012 2111 0136 to 7 13 2012 2111 The next one should be 22.

  • Let's just double check this a little bit more and see if I've got 22.

  • All right, who I feel someone confident that at least programmed an algorithm to generate that number sequence.

  • So now we already to visualize it.

  • Okay, this is the fun part.

  • Are that's all the fun part for any of it's the fun part for you.

  • All right, so let's think about this.

  • So what I'm gonna do is I'm gonna take this out of set up and I'm gonna put the step function in draw and let's just say console dot log index so we can see if this is kind of doing what I expected to D'oh.

  • Yes.

  • So this is the sequence.

  • Now, this is the Rika Mance sequence Just going and going and going to see The numbers are getting bigger and bigger and bigger over time.

  • Does that count?

  • Value is always increasing.

  • All right.

  • Uh, okay.

  • So, uh, I'm gonna take out this console log.

  • Refresh.

  • Now, what do I want to do now?

  • Each time I need to draw right, what I want to do is draw an ellipse.

  • Right?

  • So let's say I'm trying to draw on Arc actually lets them trying to draw this one here between three.

  • And six.

  • Well, I know that I could use the ellipse function thehe lips function and I need an ex a y in the diameter.

  • So the axe the why is going to just be a fixed it?

  • I'm gonna do this.

  • Plot this on basically a horizontal number line.

  • The X is going to be the 4.5 these start plus the end divided by two right, the center and the diameter of this circle again, this is just a way to visualize it.

  • Maybe you want to do it a totally different way.

  • The ark will be an ellipse with diameter of six minus three.

  • The end the next, minus the start.

  • So if we think about this, what I'm what I What's important here?

  • If I'm gonna do the drawing right here, the diameter is next minus index.

  • The X value is, um, sorry, the X values.

  • What did I say Next?

  • Plus index divided by two.

  • This is assuming there's one pixel per one pixel per number.

  • And then I could draw an ellipse.

  • Just gonna draw full lips now at X, the why just set the Wyatt zero and with this diameter.

  • Okay, so let's see what happens.

  • Let me add a stroke of 2 55 No, Phil.

  • And let me just see if what happens if these ellipses start appearing.

  • And the other thing that I should probably do is write is oh, I should just make the why the middle of the window.

  • Okay, so actually, you know what to do about it.

  • That's fine.

  • This is fine.

  • This is fine.

  • Okay, we hit refresh, and we could see Okay, circles are appearing.

  • So this I think this is already somewhat interesting that you can see this pattern that's emerging just from visualizing the recommend sequence on a number line between zero and 600.

  • And eventually we won't see anything anymore because the numbers are getting way too big.

  • But let's try to make this a little bit more interesting.

  • And so I actually misspoke earlier.

  • I hadn't watched the number file video earlier today, and some reason in my head, I was thinking if I'm going forward, I'm gonna go on the top.

  • If I'm going backwards, I'm gonna go along the bottom.

  • And I think actually what the con That standard visualization of the one that's in that video is just alternating.

  • So I go forward and go forward.

  • I go, Uh, sorry, I go.

  • Well, today I go forward above then if I'm going forward to go forward below that, if I'm going backwards So it's always this.

  • It's more of a continuous loop.

  • So let me try to implement that.

  • So one thing, first of all, is what if I just want to draw the top of the circle the arc above the number line or below the number line?

  • Well, this is actually easy thing for me to dio.

  • I can just change to using the ark function instead of a lips.

  • I'm going to have to specify both with within the height.

  • But now, at the end of this, I get to have a start and an end angle.

  • So if I say between zero and two pie that's between zero and 360 degrees.

  • That's the entire circle.

  • So this should look exactly the same.

  • But now, if I were to say just go from zero to pie, we can see here.

  • Look, I'm always getting just the bottom Now, If I were to go from pie down to zero, I am getting the top.

  • So what I can do is.

  • I can say if account module is to equal zero, do it one way, otherwise do it the other way, and there's probably more.

  • It might be like a more elegant way of doing this, but this should be fine.

  • So let's I think I want to start.

  • The 1st 1 count is one.

  • And so that should be going.

  • I think I want to do it this way.

  • What?

  • The 1st 1 to be over the top.

  • So now we can see.

  • There we go.

  • So this, I believe, should match.

  • Precisely.

  • The circle starts with.

  • Down, up.

  • Okay, so, uh, let's try.

  • I mean, let's try with town up.

  • What's again?

  • This should be precisely the algorithm of visualization that you find in that number file video.

  • If I got something wrong, I'm sure we'll hear about it in the comments.

  • Please let me know.

  • All right, so this probably should be the end of the video, and I should be now giving you some exercises, but I So you should pause right now and try something if you're following along Cooch.

  • What if Right now this I'm only seeing the results here because I'm layering each lips over and over again.

  • But what if I want to animate or change the scale?

  • Like what If I want to shrink the space as I'm drawing more and more circles, I'm gonna need to store all of these arcs in some sort of data structure.

  • So I'm actually gonna do that right now just to add a little bit more to this video, and then I'll give you some other ideas of things you could try to do at the end.

  • So what I want to add to this is I want to create another array.

  • I'm just gonna call it arcs, and I'm actually going to create an ark class.

  • I'm gonna use a little object oriented programming.

  • So what makes up a particular arc?

  • Well, it has, um it has a start, and it has an end and has a direction.

  • S o.

  • I will say this dot start equal start this dot end equals end, and this dot direction equals direction.

  • So then all this drawing thing or I could take all of this drawing stuff and put it in a function in the object called show.

  • The difference would be this would be saying this dot and minus this stuff start.

  • Oh, you know what I should be doing?

  • The end could be this is a little bit this kind of work by accident, But this should really be absolute value, right, Because the end could be before the start of this would be a negative number.

  • I think p five doesn't really care.

  • It's like negative diameter is the same as a positive diameter.

  • But that's probably better for me to put this in here.

  • And then I'm just going to say if direction equal zero have the direction be zero or one X is also this dot end plus this dot start divided by two on and so this should be good now.

  • And so what I want to do here is create a ark between index and next with the direction.

  • That is what I say.

  • Count module is too.

  • Okay, so this is what I want to create.

  • I want to say arcs push a And then in draw, I can now set the background in draw, and I'm just going to say four.

  • Let of all the arcs, I'll just call it a of arcs a dot show.

  • So this you're being I did this kind of quickly, but basically what I did is I just took the drawing code that I was doing, kind of like live as the album of going.

  • And I encapsulate the idea of drawing one of these arcs in an object, and then I build up a big array of them.

  • So now I have this big array, and every time through draw, I want to draw everything in that array.

  • And this is gonna allow probably you if Okay, direction is not to find, Um this has to be, as always, I always forget that this was not the center, but I forgot the vista, obviously.

  • All right, so this should be exactly what we had before.

  • But here's the thing.

  • Now, this is actually an animation.

  • So let me try something.

  • What?

  • I have this idea, which is I want to actually scale scale the visualization according to how far I am in the sequence.

  • So, for example, what I'm going to do now is I'm actually I think it might help to draw the ark.

  • Everything centered around the the left side of the screen, so I'm gonna draw the ark.

  • It zero in draw.

  • I'm going to say I'm going to say translate zero height divided by two and then I'm gonna use scale.

  • So the scale function, for example, I would say scale like five.

  • That's gonna draw everything five times the size at 500%.

  • So you can see it's already, like, thicker and bigger at the start.

  • If I were to say scale 0.1, you can see everything is really, really tiny.

  • Now it's being drawn a 10%.

  • So what?

  • I want the scale to be right.

  • I have a window that is 600 pixels wide and so that each pixel is one number in the number sequence.

  • I want the whole number line.

  • If I've done five numbers, I want that to be the with.

  • So I think I can actually just say scale with divided by count.

  • That should do it.

  • Lips.

  • Yeah, so now you can see it is like live adjusting itself to how, what?

  • How many numbers I've done so far.

  • And let us, um let me give myself There's really no reason.

  • Let me give myself the full.

  • Is this how I do this in p five, the full window with and height.

  • And let me actually also say style body.

  • Oh, boy, I do not know.

  • See assess margin zero.

  • Is that going to do it?

  • I just don't wanna have any padding.

  • Is that this is Cole and go here.

  • No, Colin, no.

  • Colin.

  • There we go.

  • No, Colin, guess what?

  • This video is not over yet.

  • I really in the chat, I got the comment, which is I can't believe I didn't think of myself, which I actually I can, because I never think of these things.

  • Well, I really shouldn't be scaling to the to the where the where the count is.

  • I should be scaling to What's the biggest number that's been been part of the sequence so far?

  • What is the end of one of these circles?

  • I'm not actually seeing the full sequence right now, so if I go back into my code and I add something What?

  • You just did it.

  • I have a variable called biggest equal zero than what I can do is each time through step I could check, especially if index is greater than the biggest number.

  • Then I want biggest to be that new index And then here I want to scale not by the count, but by the biggest number.

  • So let me add that in hit Refresh and you can see now.

  • Now I think this is what I meant to show you.

  • This is now, I believe the visualization that you will find in the number file video.

  • So what can you do?

  • I hope you will make your own creative twist on this.

  • You can think about different ways of visualizing this.

  • Besides just arcs.

  • You could think about using color.

  • You could think about putting this in three D space.

  • I mean, what would the Z axis mean In terms of visualizing this, I would love to see it animates.

  • Right now.

  • It is currently just, you know, this stamp of each ellipse one at a time.

  • What if you drew animate the full of art one time?

  • What if you animate that ark so should make those exciting different versions of them.

  • Share them with me on Twitter hashtag coating rec commons.

  • And there's also, if you look at the coding train thought the Coney train dot com web page in this video's description, there's a place with instructions of how you can submit your own version of this there as well.

  • Okay, so I hope you enjoyed this coding challenge.

  • I am going to come back in a moment.

  • I'm gonna do one more version of this, but instead of visualizing it, I'm going to play it as musical notes and those musical notes.

  • Our sounds like something.

  • I forgot what I was talking about.

  • This is also something It's in the number file video.

  • And I thought I'd be worth exploring the P five sound library as well.

  • All right, see you soon.

Hello.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it