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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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();
}
Also see: Tab Triggers