Morphing Fractal

by Julien Etienne

HTML

<canvas id="canvas"></canvas>

CSS

html, body {
    background: #222;
    margin: 0;
    padding: 0;
}
canvas {
    width: 100%;
    background: yellow
}

JavaScript

//for debug messages while testing code




function morphFractal() {

/* PART 1 */
    // Get canvas element and set dimensions
    // We'll use HD for this example
    var cEl = document.getElementById("canvas");
        cEl.width = '1280';
        cEl.height = '720';
    
    // Get context and declare vars 
    var context = cEl.getContext("2d"),
        circles,
        timer,
        i,j, maxR, minR;

    // Options 
    var opt = {
        numCircles: 1,
        maxMaxRadius: cEl.width /4,
        minMaxRadius: 200,
        minRadiusFactor: 0,
        iterations: 9,
        drawsPerFrame: 3,
        lineWidth: 1,
        strokeStyle: '#cc0000',
        fillStyle: '#ffffff',
        morphDuration: 1/100,
        spinSpeed: 12,
        stutter: 1  // 0 to 1. 1 = smoothest
    };

/* PART 3 */
// I recommend checking out part 2 before this function
//Here is the function that defines a noisy (but not wildly varying) data set which we will use to draw the curves.
function setLinePoints(iter) {

    var pointList = {};
    pointList.first = {x:0, y:1};
    pointList.first.next = {x:1, y:1};
    var minY = 1;
    var maxY = 1;
    var point;
    var nextPoint;
    var dx, newX, newY;
    var ratio;
    var minRatio = 0.5;

function thing(){
    while (point.next){
                pointNextByVal = point.next; // So we don't create a circular reference
                
                dx = point.next.x - point.x;            // differnce of new and old x point
                newX = 0.5*(point.x + point.next.x);    // Average of new and old x point 
                newY = 0.5*(point.y + point.next.y);    // Average of new and old y point
                newY += dx*(Math.random()*2 - 1 );       // Increment y by difference with randomness
                
                var newPoint = {x:newX, y:newY};
                
                //min, max
                if (newY < minY) {
                    minY = newY;
                }
                else if (newY >...