JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Any URL's added here will be added as `<script>`

s in order, and run *before* the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

` ````
<output id=coord></output>
```

` ````
body {
background:#111;
color:#fff;
margin: 0;
display: flex;
align-items:center;
justify-content:center;
flex-direction:column;
height: 100vh;
font:1em Consolas,monospace;
}
canvas {
display: block;
box-shadow: 0 0 60px -10px black;
margin:0 auto;
cursor:crosshair;
}
#coord{
display: block;
order:2;
}
@media screen and (max-height:480px) {
body {
display: block;
text-align: center;
}
}
```

` ````
// Maximum number of iterations for each point on the complex plane
const MAX_ITERATIONS = 32;
let cnv_mandel;
let cnv_julia;
let prev_ca = 0, prev_cb = 0;
let elem_coord = document.getElementById("coord");
function setup() {
pixelDensity(1);
createCanvas(320,480);
cnv_mandel = createGraphics(320, 240);
cnv_julia = createGraphics(320, 240);
colorMode(HSB);
updateMandel();
}
function draw() {
image(cnv_mandel,0,0);
updateJulia();
image(cnv_julia,0,height/2);
}
var zoom = 4;
// function mouseWheel(e) {
// if (e.delta > 0) {
// zoom *= 1.1;
// } else {
// zoom /= 1.1;
// }
// }
function updateJulia() {
//var ca = lerp(prev_ca, map(mouseX, 0, cnv_julia.width, -2, 1),.3);//-0.70176;
//var cb = lerp(prev_cb, map(mouseY%cnv_julia.height, 0, cnv_julia.height, -1, 1),.3);//-0.70176;
let ca = map(mouseX, 0, cnv_julia.width, -2, 1);
let cb = map(mouseY%cnv_julia.height, 0, cnv_julia.height, -1, 1);
prev_ca = ca;
prev_cb = cb;
cnv_julia.background(255);
elem_coord.innerHTML = ca.toFixed(4) + " + " + cb.toFixed(4) + "i";
// Establish a range of values on the complex plane
// A different range will allow us to "zoom" in or out on the fractal
// It all starts with the width, try higher or lower values
//float w = abs(sin(angle))*5;
let w = zoom;
let h = (w * cnv_julia.height) / cnv_julia.width;
// Start at negative half the width and height
let xmin = -w/2;
let ymin = -h/2;
// Make sure we can write to the pixels[] array.
// Only need to do this once since we don't do any other drawing.
cnv_julia.loadPixels();
// x goes from xmin to xmax
let xmax = xmin + w;
// y goes from ymin to ymax
let ymax = ymin + h;
// Calculate amount we increment x,y for each pixel
let dx = (xmax - xmin) / (cnv_julia.width);
let dy = (ymax - ymin) / (cnv_julia.height);
// Start y
let y = ymin;
for (let j = 0; j < cnv_julia.height; j++) {
// Start x
let x = xmin;
for (let i = 0; i < cnv_julia.width; i++) {
// Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
let a = x;
let b = y;
let n = 0;
while (n < MAX_ITERATIONS) {
let aa = a * a;
let bb = b * b;
// Infinity in our finite world is simple, let's just consider it 16
if (aa + bb > 8.0) {
break; // Bail
}
let twoab = 2.0 * a * b;
a = aa - bb + ca;
b = twoab + cb;
n++;
}
// We color each pixel based on how long it takes to get to infinity
// If we never got there, let's pick the color black
let pix = 4 * (i + j*width);
if (n == MAX_ITERATIONS) {
cnv_julia.pixels[pix] = 0;
cnv_julia.pixels[pix+1] = 0;
cnv_julia.pixels[pix+2] = 0;
cnv_julia.pixels[pix+3] = 255;
} else {
// Gosh, we could make fancy colors here if we wanted
let hu = ((n / MAX_ITERATIONS) * 360) % 360;
let c = color(hu,100,Math.pow(n/MAX_ITERATIONS,.25)*100);
cnv_julia.pixels[pix] = red(c); // color(hu, 100, 100);
cnv_julia.pixels[pix+1] = green(c); // color(hu, 100, 100);
cnv_julia.pixels[pix+2] = blue(c); // color(hu, 100, 100);
cnv_julia.pixels[pix+3] = 255; // color(hu, 100, 100);
}
x += dx;
}
y += dy;
}
cnv_julia.updatePixels();
}
function updateMandel() {
cnv_mandel.background(255);
// Start at negative half the width and height
let xmin = -2;
let ymin = -1;
// Make sure we can write to the pixels[] array.
// Only need to do this once since we don't do any other drawing.
cnv_mandel.loadPixels();
// x goes from xmin to xmax
let xmax = 1;
// y goes from ymin to ymax
let ymax = 1;
// Calculate amount we increment x,y for each pixel
let dx = (xmax - xmin) / (cnv_mandel.width);
let dy = (ymax - ymin) / (cnv_mandel.height);
// Start y
var y = ymin;
for (let j = 0; j < cnv_mandel.height; j++) {
// Start x
let x = xmin;
for (let i = 0; i < cnv_mandel.width; i++) {
// Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
let a = x;
let b = y;
let ca = a;
let cb = b;
let n = 0;
while (n < MAX_ITERATIONS) {
let aa = a * a - b * b;
let bb = 2 * a * b;
a = aa + ca;
b = bb + cb;
if (a * a + b * b > 16) {
break;
}
n++;
}
// We color each pixel based on how long it takes to get to infinity
// If we never got there, let's pick the color black
let pix = 4 * (i + j*cnv_mandel.width);
if (n == MAX_ITERATIONS) {
cnv_mandel.pixels[pix] = 0;
cnv_mandel.pixels[pix+1] = 0;
cnv_mandel.pixels[pix+2] = 0;
cnv_mandel.pixels[pix+3] = 255;
} else {
// Gosh, we could make fancy colors here if we wanted
let hu = ((n / MAX_ITERATIONS) * 360) % 360;
let c = color(hu,100,Math.pow(n/MAX_ITERATIONS,.25)*100);
cnv_mandel.pixels[pix] = red(c); // color(hu, 100, 100);
cnv_mandel.pixels[pix+1] = green(c); // color(hu, 100, 100);
cnv_mandel.pixels[pix+2] = blue(c); // color(hu, 100, 100);
cnv_mandel.pixels[pix+3] = 255; // color(hu, 100, 100);
}
x += dx;
}
y += dy;
}
cnv_mandel.updatePixels();
}
```

999px

Shift F
Opt F
Find & Replace

Also see: Tab Triggers