Fractal animation in pure JavaScript

Fractal animation in pure JavaScript

In this article, you'l llearn make real-time animated fractal in only 32 lines of Javascript code!

Fractal animation

1. The fractal

We'll use the Julia fractal. If you're not interested in the mathematical details, feel free to skip the gray section below. All you need to know is:

  • it's a great Javascript exercise
  • Julia fractals are mathematical images generated by iterating the calculation in rows 13-22 as long as the condition in row 24 is fulfilled. Then we plot the color corresponding to the value of i (=number of iterations).

For a fixed point c (its coordinates [c real and c imaginary] are defined in lines 4-5: experiment with different values between -2 and 2) in the complex plane, we'll iterate the formula:

(lines 19-21) until the number of iterations reaches 255 or the result is higher than 4 (line 24). We could use a higher limit of iterations to get a more detailed image, but 255 is the highest value that HTML allows to assign to an RGB component. A result of 4 or more means that for complex coordinates that are currently being calculated the orbit escapes to infinity - this is what actually gives Julia its amazing shape.

We'll plot the color corresponding to the number of iterations (lines 26-30). Lines 9-14 convert the the screen coordinates into complex coordinates.

Each point in the Mandelbrot set corresponds to a Julia set.

When it comes to animation, you can zoom into the Mandelbrot set, but Julia is more interesting because its shape is different for different c points.

2. Animation

With only a couple of additional lines (see the comments in the code), we can bring the fractal to life. All we're doing is changing the c point with each animation frame and redrawing the fractal. By using the sin and cos functions, we're moving it around on the complex plane, so that it ends up where it started. Experiment with the formulas in lines 37 and 38! We'll also reduce the number of maximum iterations to 25 to allow even slower machines enough time for the calculations in each frame.

3. The colors

In the final step, we can replace the grayscale with a colorful pallette. The modified lines of code are commented below.

So far, we set the number of iterations for a given point as the Red, Green and Blue components of its color. This time we'll create an array of 24 colors in 3 ranges, 8 colors in each. In each of the ranges, one of the RGB components will gradually increase from 0 to 255 (minimum and maximum values allowed by HTML), while the other two components are constant for each of the ranges.


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.