The Mandelbrot Set is one of the most incredible things I've ever witnessed in life. This is part 1 of a 2 part series where I share it with Huiqi and you. I give a step by step tutorial for how to create a Mandelbrot Set visualization yourself, using nothing by HTML and JavaScript. Enjoy! If you'd like, the source code produced in the episode can be found at https://github.com/airportyh/thumbprint-of-god.

The following transcript was automatically generated by an algorithm.

- 00:00 : let's do this so i'm i'm really excited
- 00:02 : about this so we're going to talk about
- 00:04 : the mandelbrot set
- 00:06 : the mandelbrot set
- 00:08 : is
- 00:09 : one of the most incredible things that
- 00:12 : i've ever witnessed
- 00:14 : period i i think you sort of have to
- 00:17 : experience it firsthand to get the full
- 00:20 : experience and i guess part of why i
- 00:23 : want to do this session is to try to
- 00:26 : allow more people to see that so one
- 00:28 : thing i want to show is some screenshots
- 00:30 : that i've taken of the mandelbrot set oh
- 00:35 : what
- 00:38 : these are some screenshots that i took
- 00:41 : yesterday so i built a mandelbrot set
- 00:44 : visualizer and i went zoomed into the
- 00:47 : world of the mandelbrot set and these
- 00:49 : are some of the images that i captured
- 00:51 : from that world um this is one of my
- 00:54 : favorites what does this look like a
- 00:57 : galaxy
- 00:58 : yeah yeah yeah it kind of looks like a
- 01:00 : galaxy there's two spyros
- 01:03 : it's also got these like these what do
- 01:05 : you call this medieval knight armor
- 01:08 : has these a little protective layer
- 01:10 : maybe
- 01:11 : it also looks like a guy with goofy
- 01:14 : glasses it looks like a swirl just keep
- 01:17 : going in this one this one maybe looks
- 01:20 : like a big pond it looks like a volcano
- 01:23 : oh yeah yeah yeah it's got this tiny
- 01:26 : craters on the side in addition to the
- 01:28 : huge crater this one
- 01:30 : this one could be lava maybe or it could
- 01:33 : be coral sort of it's like giant animal
- 01:37 : legs but
- 01:39 : like an elephant that has more toes than
- 01:42 : the normal elephant this is like a drool
- 01:44 : it's like a decoration in a palace yeah
- 01:47 : like that it looks like a gem
- 01:49 : in the center that's been cut and
- 01:52 : polished and it's got this star
- 01:54 : decoration around it this is another one
- 01:56 : it's so symmetrical yeah it is extremely
- 01:59 : symmetrical one thing i want to mention
- 02:02 : is that these designs are not actually
- 02:05 : designed as in i did not design these
- 02:08 : things
- 02:09 : this could be like a pendant on your
- 02:12 : necklace yeah this is another swirl pool
- 02:15 : galaxy kind of scene which is really
- 02:18 : beautiful so i was saying these are not
- 02:20 : actual designs it was not designed by a
- 02:23 : human
- 02:24 : uh instead it was all created with an
- 02:27 : algorithm using just one very simple
- 02:30 : formula this one looks like a sunflower
- 02:33 : that's been infected by bugs
- 02:38 : actually yeah it's like some of them are
- 02:41 : beautiful
- 02:42 : some of them are like pristine clean but
- 02:45 : some of them look very disturbing this
- 02:47 : is actually the top level view
- 02:50 : okay of the mandelbrot set if you think
- 02:53 : of the earth as this round sphere this
- 02:56 : is us looking at the high level view of
- 02:59 : the mandelbrot set these images is like
- 03:03 : looking at different places inside the
- 03:05 : earth this could be a water body maybe
- 03:09 : with channels that are they're coming
- 03:11 : out of it i don't know what this is this
- 03:13 : doesn't resemble anything we see on
- 03:16 : earth maybe some mountains or
- 03:18 : a coral well maybe like there's a lot of
- 03:22 : things we don't see right at the
- 03:23 : microscopic level yeah so it could be
- 03:26 : that some of the things that we see here
- 03:28 : might resemble those things so the
- 03:30 : mandelbrot set at the top level looks
- 03:33 : like this but if you zoom in sort of the
- 03:35 : same way that we zoom in on google earth
- 03:38 : then you find amazing incredible
- 03:41 : pictures uh the same way that we can
- 03:43 : find incredible images when we're
- 03:45 : zooming into google earth there's so
- 03:47 : much complexity inside of it if you zoom
- 03:50 : into it it's almost like a divine
- 03:53 : creation a human could not possibly have
- 03:56 : created this because human minds are too
- 03:59 : limited another name people have given
- 04:01 : to the mandelbrot set is
- 04:03 : the thumbprint of god
- 04:05 : okay i'm going to teach you how to draw
- 04:07 : the thumbprint of god you can read about
- 04:10 : it on wikipedia
- 04:12 : so so i'm going to do this sort of like
- 04:13 : a step-by-step tutorial this is gonna be
- 04:16 : something like the final result you only
- 04:19 : get the full effect of amazement
- 04:22 : if you write the code yourself uh so
- 04:25 : yeah even you which if you have time
- 04:27 : later i i recommend you like do this
- 04:29 : yourself afterwards there might be some
- 04:31 : people that like prefer to figure things
- 04:34 : out themselves and if you want to do
- 04:36 : that i recommend these two videos in the
- 04:40 : center from the number file channel
- 04:43 : watch one of these two and see if after
- 04:46 : watching that you can
- 04:48 : reproduce the mandelbrot set
- 04:51 : in code
- 04:52 : and after that you can come back to my
- 04:54 : video and and compare notes with me so
- 04:57 : without further ado
- 05:01 : i'm gonna make a very basic html file
- 05:06 : uh
- 05:07 : maybe about ahead
- 05:09 : maybe the head has some style i'll need
- 05:12 : some styles
- 05:13 : later
- 05:15 : and i'll have a body
- 05:18 : and we'll have a canvas i'll give it an
- 05:21 : idea of canvas
- 05:25 : let's also add a label
- 05:29 : which later on we'll use that
- 05:32 : for diagnostics
- 05:34 : and then i will link the javascript file
- 05:39 : let's load this in the browser
- 05:47 : i'll try to
- 05:48 : make sure the javascript file is linked
- 05:50 : correctly by printing out something okay
- 05:53 : there's the hello
- 05:54 : and then i will um i will give some
- 05:57 : styles
- 05:58 : uh to the canvas so i can see where it
- 06:01 : is
- 06:01 : give the body a gray background color
- 06:08 : and then i'll give the canvas a white
- 06:10 : background color
- 06:15 : now let's give this
- 06:17 : body some padding
- 06:20 : so it looks less cramped
- 06:23 : and then i'll give
- 06:26 : the canvas
- 06:30 : i'll give the canvas the width and
- 06:32 : height of 500 okay
- 06:36 : and uh oh
- 06:39 : i'll make these variables so that i can
- 06:42 : use them later on let's grab the canvas
- 06:52 : okay all right so we have the canvas
- 06:54 : we're ready to draw into it
- 06:58 : now we're gonna try to figure out how to
- 07:01 : plot points on here we can have a
- 07:04 : function that plots a point somewhere on
- 07:07 : the canvas and we can also do like when
- 07:10 : you click on any part of the canvas it
- 07:13 : plots a point there in order to draw
- 07:16 : anything onto a canvas you first have to
- 07:18 : get a drawing context
- 07:20 : okay
- 07:21 : have you ever done any canvas
- 07:22 : programming so far yes i made a snake oh
- 07:26 : yeah i remember that
- 07:27 : so i'm gonna call it ctx for short don't
- 07:31 : have to spell out context all the way
- 07:34 : and then the way you uh
- 07:35 : plot a point in in canvas is you
- 07:39 : actually have to use the arc
- 07:41 : function so let me spell it out i'm
- 07:43 : gonna do a dot right in the middle of
- 07:45 : the canvas so 250 and 250
- 07:49 : and then you specify the radius right
- 07:51 : let's say five and then you have to say
- 07:53 : the starting angle and the ending angle
- 07:56 : and the idea of the arc is you're
- 07:59 : drawing an arc
- 08:00 : like this
- 08:01 : okay and then this is your starting
- 08:04 : angle and this is your ending angle
- 08:07 : from the center right so why i would try
- 08:10 : an
- 08:11 : because i'm trying to draw a circle
- 08:14 : they don't have a circle method in the
- 08:16 : canvas context for some reason so i have
- 08:18 : to use an arc to draw a circle so with a
- 08:20 : circle
- 08:21 : what i'm gonna do is i'm gonna have the
- 08:23 : starting angle at zero and then i'm
- 08:26 : gonna say hey arc all the way
- 08:29 : around so this is should be just
- 08:31 : starting angle
- 08:33 : comma and then this should be the
- 08:35 : ending angle so i'm gonna have starting
- 08:37 : angle at zero and the ending angle
- 08:40 : should be 360 degrees but except we
- 08:44 : don't do it in degrees
- 08:45 : we do it in radians
- 08:47 : so what's the equivalent to 360 degrees
- 08:50 : in radians it's two pi uh okay so do you
- 08:54 : put two
- 08:55 : pi
- 08:56 : yeah oh
- 08:58 : okay
- 08:59 : luckily you don't have to type pi
- 09:03 : but uh but this just draws the arc it
- 09:06 : doesn't fill it in once you draw this
- 09:09 : arc
- 09:10 : in order to fill it in you actually have
- 09:12 : to say
- 09:13 : start a path before you draw the arc and
- 09:16 : then draw the arc and then you say fill
- 09:18 : and and then it'll look at the path
- 09:20 : you've drawn and then
- 09:22 : fill in the inside you'll do that
- 09:25 : if you don't close the arc
- 09:28 : you don't close the arc i think it'll uh
- 09:31 : automatically close it it draws an extra
- 09:33 : line between your
- 09:35 : start point and end point so i'm going
- 09:37 : to say begin path
- 09:39 : and then after drawing the arc i'm going
- 09:42 : to say fill
- 09:44 : and let's see if that works ah there's
- 09:46 : my dot here there's my little dot so
- 09:49 : that's how i'm gonna plot points i'm
- 09:51 : just gonna
- 09:52 : i'm gonna extract this guy into i'm
- 09:55 : gonna call this x and y
- 09:57 : all right i'll call this the radius
- 10:00 : and then i'll put this inside a function
- 10:02 : i'll call it plot point
- 10:05 : take x and y and a radius and i'll
- 10:08 : default the radius at five
- 10:11 : pixels wide
- 10:13 : and that's my plot point and now i can
- 10:15 : call plot
- 10:17 : uh
- 10:18 : i'll go get 200 210
- 10:23 : all right and now i can plot points
- 10:25 : anywhere cool now let's do a mouse
- 10:27 : handler so that anywhere i click on the
- 10:31 : canvas uh it'll plot the point there
- 10:34 : i'm gonna do one
- 10:37 : that in the center first
- 10:39 : using the default radius
- 10:41 : okay and then i'm gonna do canvas at
- 10:44 : event listener
- 10:47 : click
- 10:50 : and
- 10:52 : the event object has a offset x
- 10:56 : which we'll use as our x coordinate uh
- 11:00 : the reason we want to use offset x is
- 11:02 : because it's offset
- 11:04 : from the top left corner of our canvas
- 11:06 : if it were just the mousex it probably
- 11:09 : would be starting from the top left
- 11:11 : corner of the whole window but we want
- 11:13 : it to be relative to the corner of our
- 11:16 : canvas so we use offset x
- 11:22 : okay now we have the x y let's just
- 11:24 : print that out
- 11:26 : just to know what it is
- 11:29 : and we'll also just call plot point
- 11:38 : that that works
- 11:40 : cool
- 11:44 : now what we want to do is convert the
- 11:47 : coordinate system
- 11:50 : so
- 11:51 : um
- 11:52 : i happen to know
- 11:54 : from experience
- 11:56 : that at the top level of the mandelbrot
- 11:58 : set image that that sort of global view
- 12:01 : as as i described that lies within
- 12:05 : these bounds uh
- 12:07 : negative 2
- 12:09 : 2
- 12:10 : in the x direction
- 12:13 : and negative 2 and 2 in the y direction
- 12:18 : and this is
- 12:19 : 0 0 according so we're looking at like a
- 12:22 : cartesian coordinate system
- 12:25 : um
- 12:26 : and i i happen to know the mandelbrot
- 12:29 : set is like
- 12:31 : somewhere here okay so if we want to get
- 12:34 : that view um that then what we want to
- 12:37 : do is sort of scale our canvas's
- 12:41 : coordinate system
- 12:42 : to these bounds now our canvases
- 12:45 : coordinate system is actually 0 0 on the
- 12:49 : top left hand corner and then because i
- 12:51 : made the canvas 500 by 500 it's going to
- 12:55 : be 500 at the end here
- 12:58 : going across and then it's going to be
- 13:00 : 500
- 13:01 : over here right we'll call this
- 13:04 : coordinate system these green
- 13:06 : coordinates
- 13:07 : and then once we convert it into that
- 13:10 : negative two to two
- 13:12 : region we call it the world coordinate
- 13:15 : and also one more thing
- 13:16 : usually we call this the x direction and
- 13:19 : then this is the y direction
- 13:22 : instead of calling x and y however i'm
- 13:25 : gonna call it
- 13:26 : r
- 13:28 : standing for real
- 13:31 : and then i
- 13:33 : standing for imaginary
- 13:36 : okay
- 13:38 : because it turns out that what we're
- 13:40 : plotting are actually complex numbers
- 13:44 : when we're dealing with the mandelbrot
- 13:46 : set what we're visualizing is actually
- 13:49 : the space of all complex numbers what
- 13:52 : are complex numbers what is complex
- 13:54 : numbers complex numbers are
- 13:57 : numbers that have a real part
- 14:00 : and an imaginary part a is the real part
- 14:04 : and b is the imaginary part right and
- 14:08 : the imaginary part is the part that is
- 14:10 : multiplied to i and what is i well i
- 14:14 : is the square root of negative one
- 14:18 : square root of negative one is
- 14:20 : impossible because if you square any
- 14:23 : real number
- 14:24 : it will not be a negative number so
- 14:27 : there couldn't possibly be a thing which
- 14:30 : when multiplied by itself it gives you a
- 14:34 : negative one a negative number of any
- 14:36 : sort right unless
- 14:38 : it's imaginary
- 14:40 : so that's what is some some of you might
- 14:43 : have been taught imaginary numbers i
- 14:45 : don't want to dig all the way into
- 14:47 : imaginary numbers uh maybe this is
- 14:50 : enough there are interesting properties
- 14:52 : though about imaginary numbers one of
- 14:54 : them is if you square i or you square
- 14:58 : anything that's multiplied to i you
- 15:00 : actually end up with a real number
- 15:04 : because the because if you square
- 15:08 : the square root of negative one you you
- 15:11 : end up with negative one and then so
- 15:14 : there's a there's a there's a way for an
- 15:16 : imaginary number to go back into
- 15:20 : the real number realm by squaring it and
- 15:23 : that that is actually going to come into
- 15:25 : play later
- 15:26 : so that's what i wanted to say about
- 15:28 : this number axis we're actually plotting
- 15:31 : real on the horizontal direction and
- 15:34 : then imagining on the vertical direction
- 15:37 : if i want to convert the screen x to the
- 15:42 : coordinate in the world in the real
- 15:44 : direction i'll call this r
- 15:46 : i want to center this point at the
- 15:48 : middle of the canvas right which would
- 15:51 : be width divided by 2. so what i want to
- 15:53 : do is x minus with
- 15:57 : divided by 2.
- 15:58 : and that's going to have the effect of
- 16:00 : centering it right
- 16:02 : and then i want to multiply it by a
- 16:05 : scale factor whereas previously this
- 16:08 : horizontal line spanned 500 pixels
- 16:12 : now i want it to span
- 16:15 : uh
- 16:16 : from negative two to two which is just
- 16:20 : four ticks yeah
- 16:22 : so each tick
- 16:24 : is uh
- 16:25 : 125 pixels yep
- 16:28 : so that's what i'm going to use
- 16:30 : okay
- 16:31 : so i'm going to say
- 16:33 : after after this adjustment this
- 16:35 : subtraction i'm going to
- 16:37 : multiply it by the scale factor
- 16:41 : and the scale factor is going to be
- 16:44 : 1 over 125 okay
- 16:48 : and that gets us the r and then the
- 16:50 : imaginary part is uh similar
- 16:53 : i just do it in the other direction
- 16:59 : okay and then now i'm gonna see whether
- 17:02 : we get the right answer i'll just print
- 17:04 : them out
- 17:09 : okay
- 17:11 : this should be zero zero
- 17:15 : close enough and then this should be
- 17:17 : close to two oh except the i direction
- 17:20 : is negative i want it to be positive in
- 17:23 : this quadrant and negative so i'll just
- 17:26 : flip the sign
- 17:27 : on the i
- 17:29 : so now both i
- 17:31 : both are and i are positive in this
- 17:33 : quadrant this one the i is negative
- 17:37 : that's what i want
- 17:38 : and then this one both of them are
- 17:40 : negative and then this one
- 17:42 : the r our horizontal direction is
- 17:45 : negative but the i vertical direction is
- 17:47 : positive so this is what i want so now i
- 17:51 : have a way to convert from the screen
- 17:53 : coordinate to the world coordinate i'm
- 17:55 : gonna make a function that does that for
- 17:57 : me
- 18:06 : i'll return both of the numbers in an
- 18:08 : array like that i also want to convert
- 18:11 : the other way as well
- 18:12 : so i want to convert from the world to
- 18:14 : screen
- 18:17 : and to do that the calculation is going
- 18:20 : to be exactly inverse so i'm going to do
- 18:24 : starting from r we want to divide by the
- 18:27 : scale factor
- 18:29 : looks like and then
- 18:31 : i want to add the width divided by 2.
- 18:46 : okay i hope this works i'm gonna do
- 18:49 : 36 should that be like minus uh not this
- 18:54 : this
- 18:54 : this one
- 18:56 : uh plus it shouldn't be the same because
- 18:58 : you reverted so it's minus oh yeah yeah
- 19:02 : yeah good point yes thank you
- 19:05 : so you should do that
- 19:07 : first
- 19:08 : yeah
- 19:09 : i want to just verify that i got these
- 19:12 : correct well i already tested this one
- 19:14 : so i i'm going to assume that green 2
- 19:17 : world is correct but i want to make sure
- 19:20 : the other direction is correct so i do
- 19:24 : it
- 19:25 : uh i have it come back and print them
- 19:28 : out and see if we get the correct answer
- 19:41 : has already been declared oh
- 19:46 : um okay
- 19:48 : yeah the original x y is same as the
- 19:52 : neo x y
- 19:55 : that's the original x y that's the
- 19:58 : after being converted there and back
- 20:01 : okay so i'm happy with these functions
- 20:04 : so we're able to convert coordinates now
- 20:08 : oh one more thing i want to have a
- 20:10 : function that plots a line as well
- 20:14 : uh it will come in handy a little bit
- 20:17 : later on
- 20:22 : and the way you plot a line is you bit
- 20:24 : begin a path
- 20:28 : and then you say move to
- 20:32 : one location
- 20:35 : and then you say line to the second
- 20:37 : location
- 20:40 : and then you say
- 20:42 : stroke
- 20:43 : and that's how you plot a line
- 20:45 : maybe now i make it when you click it's
- 20:48 : going to plot a line
- 20:50 : from 0
- 20:52 : 0
- 20:53 : to your point see if that works
- 20:58 : well
- 21:00 : oh yeah that actually makes sense i was
- 21:02 : thinking 0 0 is in the center but it's
- 21:05 : but it's not in in screen coordinates 0
- 21:08 : 0 is the top left corner
- 21:10 : so this is correct
- 21:12 : 250.
- 21:17 : and that would come out from the center
- 21:19 : whoa
- 21:21 : okay so pretty cool
- 21:25 : now we're gonna start doing the
- 21:27 : iteration the formula that makes
- 21:30 : this thing work the mandelbrot set work
- 21:33 : is this
- 21:36 : i think they write it like this
- 21:42 : this sign that says going back and forth
- 21:45 : it means you take the output of the
- 21:48 : function and then you feed it back into
- 21:50 : the input this is actually a numeric
- 21:53 : sequence
- 21:54 : z of zero is always zero
- 21:57 : okay um and c is a constant is some
- 22:02 : number is a complex number both z and c
- 22:05 : are complex numbers they could
- 22:07 : potentially have a imaginary part but c
- 22:10 : is the point on the canvas
- 22:14 : that is being plotted so like if we pick
- 22:16 : that point that that is the c and for
- 22:19 : each point on the canvas we're going to
- 22:21 : get a c constant to be used in this
- 22:24 : formula and fc means we're applying this
- 22:27 : function specifically for that constant
- 22:30 : c if you have a point on the screen but
- 22:33 : you will have two coordinates how does
- 22:35 : this counts work oh okay if i do that
- 22:38 : then my c is basically that
- 22:43 : oh you add them together it has a real
- 22:46 : part and an imaginary part that is c
- 22:49 : equals
- 22:50 : 0.856
- 22:54 : plus
- 22:55 : one point one two times i
- 22:59 : oh there's still the i okay
- 23:02 : and normally when we think of a
- 23:04 : cartesian coordinate system we think of
- 23:06 : x and that's y but here it's still two
- 23:09 : numbers it's just one is the real part
- 23:11 : one is the imaginary part not sure so
- 23:14 : that's how c is arrived at first we pick
- 23:16 : the c and
- 23:18 : just to have a simple example we're
- 23:20 : gonna use a simple number say c is one
- 23:23 : and it has no imaginary part because we
- 23:26 : we're just keeping it simple for now but
- 23:28 : this is the z not to be confused with
- 23:30 : two
- 23:31 : z zero is always zero
- 23:34 : so so we start calculating this formula
- 23:37 : with z equal to zero so zero
- 23:41 : squared is zero plus c which is one
- 23:45 : is going to be
- 23:46 : f of one
- 23:48 : because c is one f of one of zero
- 23:54 : is one
- 23:55 : okay because of this uh this two wave
- 23:59 : thing which which means we take the
- 24:01 : output of the function we feed it back
- 24:03 : into the input in order to get the next
- 24:06 : number in the sequence
- 24:10 : and then we do the equation again
- 24:12 : so
- 24:13 : 1 squared is
- 24:15 : 1
- 24:16 : plus c which is one we get two
- 24:20 : uh the f
- 24:21 : two
- 24:22 : y oh sorry sorry that that was a mistake
- 24:25 : this is still f one because c one is the
- 24:29 : constant good catch
- 24:33 : and then still f1 but
- 24:36 : with z equal to two now because we feed
- 24:39 : the output back into the input
- 24:42 : and now uh we're gonna get four plus one
- 24:46 : five
- 24:47 : and we do it again
- 24:54 : uh
- 24:55 : 25 plus one 26
- 24:58 : you can see very quickly this is gonna
- 25:00 : get really big as this z increases uh
- 25:03 : this number is going to infinity the
- 25:05 : limit of the sequence is going to
- 25:08 : infinity it turns out that the
- 25:10 : mandelbrot set
- 25:12 : is its definition has to do with whether
- 25:16 : this number will grow to infinity or not
- 25:20 : so to give you an idea like a number for
- 25:23 : c that will not go to infinity would be
- 25:26 : c equals zero if c was
- 25:30 : zero that means
- 25:31 : less than one then it's not gonna go to
- 25:34 : infinity is that true that's not exactly
- 25:38 : true because
- 25:39 : let's just do it in code
- 25:42 : and we will see so let's do this so we
- 25:45 : convert the screen coordinate to the
- 25:47 : world coordinate here
- 25:50 : when whenever we click
- 25:52 : and then what we're going to do is
- 25:54 : do the iteration
- 25:56 : let's iterate a number of times
- 25:58 : i'll call this k
- 26:00 : let's do it seven times
- 26:03 : for now
- 26:05 : uh we're gonna initialize
- 26:08 : z
- 26:09 : there's a z real part i'll call it zr
- 26:12 : okay
- 26:14 : uh actually i'm gonna call this cr for
- 26:17 : for the real part of c and the
- 26:19 : imaginary part of c so there's a cr and
- 26:22 : a ci the real part of z
- 26:25 : is starts at zero and the imaginary part
- 26:29 : because z of zero is always zero but for
- 26:32 : now let's don't worry about the
- 26:34 : imaginary part i'm gonna comment that
- 26:36 : out for now and then we're going to say
- 26:38 : hey the next version of
- 26:40 : zr
- 26:42 : is zr times itself squared and then
- 26:45 : we're going to add
- 26:47 : cr
- 26:48 : to the equation and again i'm ignoring
- 26:50 : the imaginary part just for now okay and
- 26:53 : then we're gonna do that seven times but
- 26:56 : each time i'm actually going to plot the
- 26:59 : point
- 27:01 : i'm gonna convert it to the screen
- 27:03 : coordinates or
- 27:10 : a world
- 27:11 : to screen
- 27:14 : for the imaginary part because i want to
- 27:17 : ignore the y-coordinate i'm just gonna
- 27:20 : say height divided by two
- 27:22 : which is the center of the screen
- 27:24 : vertically
- 27:26 : the y and then when we get to here
- 27:31 : i'll just use the c's coordinate which
- 27:34 : will be the center of the screen always
- 27:36 : okay
- 27:38 : and then i'll plot
- 27:41 : see what that looks like okay
- 27:50 : um
- 27:51 : [Music]
- 27:52 : now it's the
- 27:53 : coordinate the
- 27:56 : coordinate
- 27:58 : so if i click on zero it stays at zero
- 28:01 : zero squared is zero zero plus zero is
- 28:04 : zero so if you click zero
- 28:06 : it basically stays there so that's an
- 28:09 : example of a number that will not go to
- 28:11 : infinity now there's a rainbow color
- 28:13 : scheme that i prepared
- 28:16 : and
- 28:17 : what i'm going to do is get a color
- 28:22 : okay mod colors length
- 28:26 : okay to tell the canvas that i want to
- 28:29 : use this color i'm going to say
- 28:31 : fill style equal this color
- 28:37 : whoa
- 28:39 : okay so this is the colors of the
- 28:41 : rainbow i will put it on the side here
- 28:44 : where's the red color did i do it wrong
- 28:49 : i don't see the red
- 28:51 : yeah
- 28:52 : that's red though oh
- 28:55 : did i plot the point at the beginning oh
- 28:58 : maybe the first point i'm gonna
- 29:01 : plot it black
- 29:05 : okay
- 29:06 : oh i see red now okay okay so each time
- 29:09 : i iterate i plot that point with a
- 29:11 : different color basically so and and
- 29:14 : based on the order of the colors of the
- 29:16 : rainbow we can kind of see
- 29:18 : which one happened first and then second
- 29:21 : etc
- 29:25 : so
- 29:26 : if we go here
- 29:29 : now maybe here i guess
- 29:32 : oh wait why are we going for oh i don't
- 29:34 : want to do this
- 29:36 : i don't want to plot that line wait why
- 29:39 : is it always plotting the point at the
- 29:42 : center i didn't mean oh because of that
- 29:46 : okay so what i'm gonna do is clear the
- 29:48 : canvas
- 29:50 : at
- 29:50 : the beginning
- 29:52 : okay
- 29:55 : so that each time i click it'll erase
- 29:57 : the previous one
- 29:59 : and now you can actually see
- 30:02 : uh
- 30:03 : and actually i'll change this to the
- 30:05 : mouse move even
- 30:09 : well
- 30:12 : let's start with zero so if you're near
- 30:14 : zero then it just converges to zero very
- 30:17 : quickly that's obvious
- 30:20 : if you get a little bit more past a
- 30:23 : certain point you can see it's going to
- 30:25 : infinity like
- 30:27 : um
- 30:28 : and then yeah that's definitely going to
- 30:30 : infinity if even here it's probably
- 30:32 : already going to infinity if i just
- 30:34 : increase the number of times you iterate
- 30:38 : [Music]
- 30:41 : yeah it's like
- 30:42 : bam
- 30:44 : and this is
- 30:46 : r equal to
- 30:48 : 0.216 this is an interesting point of
- 30:52 : this is negative one
- 30:54 : f of negative one with
- 30:57 : zero
- 30:59 : so this is the formula
- 31:02 : well
- 31:03 : negative one negative one squared is one
- 31:06 : and then minus one is zero
- 31:09 : and then
- 31:11 : you plug zero oh sorry yeah you plug
- 31:14 : zero back in and then zero squared
- 31:17 : is zero minus one
- 31:19 : you get negative one it's gonna be back
- 31:21 : to zero yeah so it's gonna oscillate
- 31:24 : between zero and negative one and you
- 31:26 : can you can see that here you put
- 31:28 : negative one here you see two points one
- 31:30 : at negative one one to zero but in
- 31:32 : between you can see these is still
- 31:34 : jumping back and forth but then they're
- 31:36 : sometimes they're closer sometimes
- 31:38 : they're farther apart that's very
- 31:40 : interesting
- 31:41 : yeah and then here it splits into four
- 31:46 : and then actually at some points it
- 31:48 : probably splits into eight and 16 and so
- 31:51 : forth it's really mesmerizing it's kind
- 31:55 : of crazy how it works you go to the
- 31:57 : negative direction it's going to split
- 32:00 : into more
- 32:02 : parts but if you go into the positive
- 32:05 : it's only going one direction well in
- 32:07 : negative direction only some because if
- 32:09 : you go greater than two it's blowing up
- 32:12 : for sure although that's not in our view
- 32:25 : i think the dot itself is cool even just
- 32:28 : from like one direction
- 32:30 : yeah even one direction is already
- 32:32 : fascinating vegan bomb constant
- 32:36 : um
- 32:37 : bifurcation what we're seeing here is
- 32:40 : this bifurcation and this happens in the
- 32:44 : population of animal in the wild they
- 32:46 : use rabbits as an example usually as the
- 32:49 : rabbit's population grow more eventually
- 32:52 : they exceed the capacity of the
- 32:54 : resources that can support the rabbits
- 32:57 : so then the next year the population
- 32:59 : will decline because of that so there's
- 33:02 : these two forces that's drying driving
- 33:04 : the population
- 33:06 : but there can be scenarios where the
- 33:08 : population number oscillates from year
- 33:11 : to year
- 33:12 : like one year is
- 33:14 : one number then the next year is lower
- 33:17 : and then the next year it's higher again
- 33:19 : back to the original number and then the
- 33:21 : next year is back to the lower number
- 33:23 : again that's called bifurcation and
- 33:25 : that's what's happening here the number
- 33:27 : is oscillating just jumping back and
- 33:29 : forth between two spots but you can get
- 33:31 : into condition where it bifurcates again
- 33:36 : into four spots and that's what that's
- 33:39 : what's going on but you can bifurcate
- 33:41 : even more probably have to put my mouse
- 33:44 : at a very specific location to get the
- 33:46 : eight spots the same thing that's
- 33:48 : happening with the rabbit population is
- 33:51 : happening here this bifurcation is
- 33:53 : jumping back and forth between two spots
- 33:55 : or four spots or eight spots or even 16
- 33:59 : spots and even more and then when they
- 34:01 : graft it
- 34:02 : it looks like this thing
- 34:05 : and like this is where it bifurcates
- 34:07 : between two things and then here the two
- 34:10 : split again into four and then later on
- 34:13 : they split again and then again and then
- 34:15 : again does like extremely fascinating
- 34:18 : and this phenomenon
- 34:21 : exists in the mandelbrot set as well i
- 34:24 : think it's interesting how they like uh
- 34:27 : compare the shape of whatever the
- 34:29 : formula is to like a real life data
- 34:33 : i think that's very fascinating because
- 34:36 : it seems to be so random like why this
- 34:39 : rapid data can go
- 34:42 : can be exactly the same shape as this
- 34:45 : mass
- 34:46 : format shape i show you the wave like
- 34:49 : the japanese wave and it's just similar
- 34:52 : to the mandelbrot set
- 34:54 : but it's completely like
- 34:57 : i shouldn't say it's random but it's
- 34:58 : just fascinating why
- 35:01 : it's like how the nature can work out
- 35:04 : yes phenomenon that happens
- 35:07 : in very different scenarios very very
- 35:09 : different settings
- 35:11 : that seems to be completely unrelated
- 35:14 : yeah exactly but you see the same
- 35:17 : pattern
- 35:18 : yeah
- 35:19 : it is extremely fascinating and that's
- 35:21 : one of the reasons i'm enjoying this and
- 35:23 : am i really into this