hello in this video you're gonna see me
do a coding challenge where I make this
visualization this is a visualization of
the recommen no mercy quints I'll talk
about what that number sequence is how
it works and then write the code to draw
this using javascript in the p5 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's description
so I know apparently it's spooky alright
so the idea for this coding challenge
originates from this wonderful
numberphile video about this thing
called the recommendations acquits is a
numeric sequence a sequence of numbers
really like I keep a book that does lots
of million random numbers in it around
it sooo this me if suit soothe the sooth
is me it soothes me at nighttime but 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
recommence Antos 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 going to be at home
browsing this website know about this
till now so here's the thing I'm not
going to go too much into the background
of this numeric sequence or number
sequences I definitely recommend that
you also check out the numberphile video
I'm really just gonna try to coat it and
visualize it that's what I'm gonna do in
this video I'm gonna do it in JavaScript
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 sequence is now for a number
sequence is just exactly that a sequence
of numbers like 1 2 3 4 5 6 7 8 9 that's
a integer sequence counting up by one
there's
Fibonacci sequence 1 1 2 3 5 8 right
where you add the two numbers before and
get the next of it so maybe you want to
pause this video right now and invent
your own number sequence this particular
this recommen a numbered sequence is
particularly beautiful and interesting
as a kind of this strange balance
between order and chaos
so you know anything that has a nice
this dialectic quality of having both
order and chaos that's always
fascinating to visualize well mostly all
these 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 numberphile
video in my own words
probably not nearly as well 0 1 2 3 4 5
6 7 8 9 10 and this could in theory go
on to infinity apologies there's a
little glare there but I think
everything would be fine all right now
let's say I have a counter and that
counter is going to start at 1 the idea
here and it's going to go up 2 3 4 5 6
now for every number in the counter I'm
going to try to go backwards but it's
like so I'm gonna start so I'm 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 this seems
weird and I don't really know if that
explanation made sense but it's going to
make sense to you if you keep watching I
hope I think alright 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 0 1 now I'm
going to go I'm gonna try to go
backwards by 2 1 - uh nope I can't so I
need to go forwards by 2 so I'm gonna go
here 3 now I'm gonna try to go backwards
by 3 1 2 3 up no that spot is take it
that spots taken I can't go there I'm
going too
one two three four now I'm gonna try to
go back four one two three guess what
guess what this spot is open so I can go
backwards for it now in the
visualization of it I'm going to want to
draw the moving backwards below in and
this is an arbitrary decision it's sort
of the common way to visualize this
sequence it's certainly what's done in
the numberphile video the point of these
showing this choose to code it but you
might invent your own way of visualizing
this but I can go back for now by the
way I forgot to keep updating this zero
one three six 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 I'll go forwards five one two
three four five so now I go here so we
can see how this goes and this is now
now it's just double check so so on and
so forth so I could you know I could
keep doing this it's gonna be a bit
easier for me to write a computer
program to do this then for me to do
this manually on the board first of all
I really really hope that I didn't botch
this so I'm gonna go check though it's
like a PDA and see if this sequence
matches what's there zero one three six
two seven zero one three six two seven
all right so let's begin it and write
some actual code now so here I am in a
JavaScript program with the p5.js
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 the number
sequence will be nice to keep track on 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 alright 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 so I'm gonna have that then
I'm going to what else do I did I say I
need that I needed a counter that's
gonna start the counter is going to
start at 1 and I guess this could like
have true in it too
because the zero spot by definition is
what's been landed on at the beginning
let's see how is that and then let me
just say what is the sequence this will
be the sequence
so let's write let's let's write let's
use the fact that p5 Luc's
automatically with the draw loop but
let's write a function called step so oh
and I need to keep track of where I am
so I guess I'm going to 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 going to say num index minus
or I'm going to say I'm gonna say next
equals index minus count 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 0 if next is less
than 0 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 can 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
let's say for let a equals 0 I is less
than 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
algorithm we tried
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 I need to add
that to the sequence and now that's my
new my next spot and so I suppose in
addition to saying numbers index it 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
setup so let's run this code and see is
this the sequence no no no no no no no
that is definitely wrong oh I could see
in the chat so does that count didn't
increment so I forgot a really crucial
step right the whole point of this is I
go forward once then I tried then and
twice then three times then four times
trying to go backwards I was always an
increment counter so it's just going you
know trying to go backwards once each
time it's never going to work all right
okay good mistake are good mistake to
have 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
want to the next time I want two steps
that's probably count I don't know if is
the right variable name for this could
be like number of steps but all right
now let's try this again and let's see 0
1 3 6 2 7 13 2012 21 11 0 1 3 6 2 7 13
2012 21 11 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 whoo-hoo I feel so much confident
that at least programmed an algorithm to
generate that number sequence so now we
are ready to visualize it okay this is
the fun part
that's all the fun part for yeah any of
its the fun part for you alright so
let's think about this so one thing I'm
going to do is I'm going to take this
out of setup and I'm going to 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 do yes so this
is the sequence now this is the rickum
on sequential and going and going you
see the numbers are getting bigger and
bigger and bigger over time because I'd
count value is always increasing alright
okay so I'm gonna take out this
console.log refresh now what do I want
to do now each time I need to draw write
what I want to do is draw an ellipse
right so let's say I'm trying to draw an
arc actually let's say I'm trying to
draw this one here between 3 & 6
well I know that the I could use the
ellipse function the ellipse function
and I need an X or Y in the diameter so
the X the Y is gonna just be a fixed is
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 N
divided by 2 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 R will be an ellipse with diameter
of 6 minus 3 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
going to do the drawing right here the
diameter is next
- index the x-value is sorry the x-value
is what did I say next plus index
divided by 2 this is assuming there's
one pixel per one pixel per number and
then I could draw an ellipse
I'm just gonna draw a full ellipse now
at X the Y is I'm just at the Y at 0 and
with this diameter okay so let's see
what happens
let me add a stroke of 255 no fill and
let me just see if what happens if these
ellipses start appearing and the other
thing that I should probably do is right
oh I should just make the Y the middle
of the window okay so
and actually you know what I'm gonna do
well that's fine this is fine this is
fine okay we hit refresh and we can 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 the recommend sequence
on a number line between 0 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 had watched the
numberphile video earlier today and in
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 what the comp that standard
visualization are the one that's in that
video is just alternating so I go
forward I go forward I go look sorry I
go sorry alternate I go forward above
then if I'm going forward I go forward
below then if I'm going backwards so
it's always this could 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 do I
can just change to using the arc
function instead of ellipse I'm going to
have to specify both the width and 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 2pi that's between
zero and 360 degrees that's the entire
circle so this this should look exactly
the same but now if I were to say just
go from zero to PI we can see here look
I'm always getting just the bottom now
if I were to go from PI down to zero I
am getting the top so what I can do is I
can say if count modulus two equals 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 well the first one count
is one and so that should be going I
think I want to do it this way I want
the first one 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 someone's
telling me okay so let's try I mean
let's try with count up once again this
should be precisely the algorithm of a
visualization that you find in that
numberphile video if I got something
wrong I'm sure I'll hear about it in the
comments please let me know alright so
this probably should be the end of the
video and I should be now giving you
some exercises but I kind of so you
should pause right now and try something
if you're following along couch what if
like right now this I'm only seeing the
results here because I'm layering each
ellipse over and over again but what if
I want to animate or change the scale
like what if I want to sort of 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 arc
class I'm gonna use a little
object-oriented programming so what
makes up a particular arc well it has it
has a start and it has an end and it has
a direction so I'm gonna say this dot
start equals 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 and the difference
would be this would be saying this dot
and minus this dot start oh you know
what I should be doing the end can be
this is a little bit this kind of worked
by accident but this should really be
absolute value right because
the end could be before the start this
would be a negative number I think p5
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 equals zero I
have the direction be 0 or 1 X is also
this dot n plus this dot start divided
by 2 and so this should be good now and
so what I want to do here is create a
arc between index and next with the
direction that is what did I say count
modulus 2 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 for let um all the arcs I'll just
call it a of arcs a dot show so this
should be I did this kind of quickly but
basically if what I did is I just took
the drawing code that I was doing kind
of like live as the algorithm was going
and I encapsulated 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 going to allow
probably you if okay Direction is not
defined this has to be but I forgot the
fist on 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 arc
everything centered around the left side
of the screen so I'm going to draw the
arc at 0 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 if I were to say scale like
five that's gonna draw everything at
five times the size at five hundred
percent so you can see it's already like
thicker and bigger at the start if I
were to say scale zero point one you can
see everything is really really tiny now
it's being drawn at ten percent so what
I want the scale to be right I have a
window that is six hundred 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
width so I think I can actually just say
scale with divided by count that should
do it
whoops yeah so now you can see it is
like live adjusting itself
- how many numbers I've done so far and
let us let me give myself there's really
no reason let me give myself the full is
this how I do this in p5 the full window
width and height and let me actually
also say style body oh boy I do not know
CSS margin zero it's not gonna do it I
just don't want to have any padding is
this does this call and go here no : no
: there we go
no : guess what this video is not over
yet I realize 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 in 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 which we just did if I
have a variable called biggest equals
zero then what I can do is each time
through step I can check it's basically
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 I know I max this is what I
meant to show you this is now I believe
the visualization that you will find in
the numberphile 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 3d space I mean what
would the z-axis mean in terms of
visualizing this I would love to see it
animate 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 its
arc one at a time what if you animate
that arc so ship make those exciting
different versions of them share them
with me on Twitter hashtag coding
recommen and there's also if you look at
the coding train dot the coding train
calm web page that's in this video
subscription 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'm going to come back in a
moment and I'm going to do one more
version of this but instead of
visualizing it I'm going to play it as
musical notes and those musical notes
are will sounds like something I forgot
what I was talking about and this is
also something that's in the numberphile
video and I thought it'd be worth
exploring the p5 sound library as well
alright see you soon
[Music]