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,168 |
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 |
Better Transparent input boxes | 2,286 Kb |
Online Shop | 4,282 Kb |
Simple jQuery dice roller | 2,187 Kb |
HMTL and CSS calendar | 3,153 Kb |
Cropper.js example | 8,683 Kb |
A Pen by Billy Brown | 1,824 Kb |
Number game | 3,790 Kb |
Group Contact Form | 3,150 Kb |
Playing with FlexBox | 3,162 Kb |
CSS-Tricks lodge button | 3,247 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 |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Blog | Rottingroom | 1,430 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Tooltip in table | Roine | 3,713 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
FCC - Tribute Page | Cmwebby | 0 Kb |
Direction-icon | Alexandremasy | 3,323 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!