Created
March 10, 2018 21:05
-
-
Save marcintustin/908ace50363598cd9bf5712da7963deb to your computer and use it in GitHub Desktop.
Basic mandelbrot set with p5.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.0.0/math.min.js" integrity="sha256-SXLRPQMQE3pP06076EMmcA5x6Qv5Wu0rfyH51xcMd8c=" crossorigin="anonymous"></script> | |
| <link rel="stylesheet" type="text/css" href="main.css"> | |
| </head> | |
| <body> | |
| <script src="sketch.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| background: #e6e9e9; | |
| background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| body { | |
| background: #fff; | |
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); | |
| color: #545454; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 16px; | |
| line-height: 1.5; | |
| margin: 0 auto; | |
| max-width: 800px; | |
| padding: 2em 2em 4em; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #222; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| } | |
| h2 { | |
| margin-top: 1.3em; | |
| } | |
| a { | |
| color: #0083e8; | |
| } | |
| b, strong { | |
| font-weight: 600; | |
| } | |
| samp { | |
| display: none; | |
| } | |
| img { | |
| animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | |
| background: transparent; | |
| border: 10px solid rgba(0, 0, 0, 0.12); | |
| border-radius: 4px; | |
| display: block; | |
| margin: 1.3em auto; | |
| max-width: 95%; | |
| } | |
| @keyframes colorize { | |
| 0% { | |
| -webkit-filter: grayscale(100%); | |
| filter: grayscale(100%); | |
| } | |
| 100% { | |
| -webkit-filter: grayscale(0%); | |
| filter: grayscale(0%); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //var x_offset = 300 | |
| //var y_offset = 200 | |
| var max_x = 300 | |
| var max_y = 200 | |
| var actual_height_range = 2 | |
| var actual_height_offset = -1 | |
| var actual_width_range = 3 | |
| var actual_width_offset = -2; | |
| var divergence_threshold = 2 | |
| var max_iterations = 10; | |
| function pixelToComplex(x, y) { | |
| imag = (y / max_y) * actual_height_range + actual_height_offset; | |
| real = (x / max_x) * actual_width_range + actual_width_offset; | |
| return math.complex(real, imag) | |
| } | |
| function setup() { | |
| createCanvas(max_x, max_y); | |
| // normally draw is called continuously | |
| // but this sucks for this case, because (a) our draw is expensive | |
| // (b) it does the same thing every time | |
| noLoop(); | |
| } | |
| function nonDivergentMandelbrotIteration(c) { | |
| // right now just returns a boolean | |
| // later return number of iterations until divergence | |
| var value = c; | |
| var num_iterations = 0; | |
| while (value.abs() <= divergence_threshold && num_iterations <= max_iterations) { | |
| num_iterations += 1; | |
| value = value.mul(value).add(c) | |
| } | |
| // if didn't hit max iterations, this is divergent not non-divergent | |
| return num_iterations < max_iterations; | |
| } | |
| function draw() { | |
| background(51); | |
| stroke(255); | |
| point(10, 10); | |
| for (var x = 0; x < max_x; x++) { | |
| for (var y = 0; y < max_y; y++) { | |
| //console.log([x,y]) | |
| var pxAsComplex = pixelToComplex(x, y); | |
| //var inMandelbrot = pxAsComplex.abs() < 2; | |
| var inMandelbrot = nonDivergentMandelbrotIteration(pxAsComplex); | |
| if(inMandelbrot) { | |
| point(x,y) | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment