Mandelbrot Fractal
How do I make an mandelbrot fractal?
Simple Mandelbrot fractal in JavaScript.. What is a mandelbrot fractal? How do you make a mandelbrot fractal? This script and codes were developed by Billy Brown on 29 September 2022, Thursday.
Mandelbrot Fractal - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mandelbrot Fractal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas data-js="canvas" width="500" height="500"></canvas> <script src="js/index.js"></script>
</body>
</html>
Mandelbrot Fractal - Script Codes CSS Codes
* { margin: 0; padding: 0; }
html { background-color: black; }
Mandelbrot Fractal - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Complex = function () { function Complex(real, imaginary) { _classCallCheck(this, Complex); this.r = real; this.i = imaginary; } Complex.prototype.add = function add(that) { return new Complex(this.r + that.r, this.i + that.i); }; Complex.prototype.mult = function mult(that) { return new Complex(this.r * that.r - this.i * that.i, this.r * that.i + this.i * that.r); }; return Complex;
}();
var canvas = document.querySelector('[data-js="canvas"]');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var scale = 750;
draw();
window.onresize = draw;
function draw() { var z = new Complex(0, 0); var c = new Complex(1, 0); for (var x = 0; x < canvas.width; ++x) { for (var y = 0; y < canvas.height; ++y) { var green = 255; for (var i = 0; i < 255; i++) { z = z.mult(z).add(c); if (z.r > 2 || z.r < -2 || z.i > 2 || z.i < -2) { green = i; break; } } ctx.fillStyle = 'rgb(0, ' + green + ', 0)'; ctx.fillRect(x, y, 1, 1); z = new Complex(x / scale, y / scale); c = new Complex(x / scale, y / scale); } }
}

Developer | Billy Brown |
Username | _Billy_Brown |
Uploaded | September 29, 2022 |
Rating | 3.5 |
Size | 2,706 Kb |
Views | 14,161 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Chaos | 1,660 Kb |
Playing with FlexBox | 3,162 Kb |
A Pen by Billy Brown | 1,824 Kb |
Single-element Twitter button | 3,173 Kb |
HMTL and CSS calendar | 3,153 Kb |
Online Shop | 4,282 Kb |
Cropper.js example | 8,683 Kb |
Canvas Pacman | 2,074 Kb |
Aperture-style lens | 3,703 Kb |
Single Element 8-bit characters | 6,161 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple content swap | Snografx | 1,859 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Search field | Jamesbarnett | 2,100 Kb |
RSW | JordanC | 3,726 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!