ASMR Coding Mandelbrot set [Part 1]
7This is an ASMR styled video. Watch me code the Mandelbrot Set using HTML canvas and JavaScript while giving you ASMR tingles.
This is Part 1 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.
My goal for this JavaScript project is to start with an empty canvas, and fill it with unit images from the first row to the last row, filling the entire canvas using a loop, where each iteration fills all the pixels of a unit image with a colour. Once the image is filled with one colour, and testing it to be filled with different colours, I can then start implementing the mathematical formula involving complex numbers and recursive iterations which is what gives the Mandelbrot Set.
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.
For part 1, I set up the colour filling functionality of the canvas, and in the next parts is where I get to the nitty gritty in terms of the Mandelbrot Set.
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
[0:00] Introduction
[1:09] boiler code, empty canvas
[2:00] coding begins: starting out drawFullImage()
[3:41] fill and insert a unit image to canvas
[6:30] testing/debugging
[10:33] more testing/debugging
[11:33] filling a row with unit images
[18:30] filling all the remaining columns to fill entire canvas
[21:36] other tests, trying to fill rows with different colours at a glance
[22:47] part 1 summary
[23:29] End