ASMR Coding Mandelbrot set [Part 2]
11This is an ASMR styled video. Watch me code the Mandelbrot Set using HTML canvas and JavaScript while giving you ASMR tingles.
This is Part 2 of a series where I code the Mandelbrot Set from an empty canvas where the next part continues from the previous, until the completion of the project.
I continue from where I have left off from part 1, in where I have reached a point where I got to render all the unit images/"pixels" that make up the image onto the whole canvas, as well as getting them to a different colour in each iteration of a loop. In this part this is where I apply the mathematical formula that generates the Mandelbrot set into a coordinate class. It involved some operations with complex numbers involving i (the imaginary number you get when taking the square root of -1). The coordinate class I created will be used to make Coordinate objects with methods that square a coordinate to make a new Coordinate, magnitude (the length of the vector from origin to the point in the graph) and addition of another coordinate. That way I can use these objects to pass into an iterative function that determines the number of iterations, as well as a function that determines the colour to be plotted in the graph based on the number of iterations.
Once I get the Mandelbrot set displayed in the canvas, I plan to add functionality such as zooming and panning the view using either arrow keys and HTML inputs, as well as some CSS and improvements in the next part.
For part 2 I get the rendering of the set down. This is the process that led up to that point.
I make typing sounds with my keyboard as I type code as well as whisper for your ASMR tingles. Although this is not meant to be a coding JavaScript/HTML tutorial 100%, you might learn something as you watch me code the project with canvas.
Part 1 link: https://youtu.be/NaHCn8Rbi4s
[0:00] intro and recap of part 1
[1:35] Coordinate js class
[13:36] determine iterations function
[21:39] plot colour based on iterations
[25:27] convert row/column number to Mandelbrot coordinate
[33:19] plotting the mandelbrot set using new functions
[41:35] part 2 conclusion
[42:28] End