HTML5分形艺术 Peter De Jong 吸引子

Peter De Jong Attractor 算法实现基于分形火焰算法： http://en.wikipedia.org/wiki/Fractal_flame

JavaScript，art

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2123
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class DeJongAttractor {
    constructor(size, density, sensitivity, iterations) {
        this.mouseX = 0;
        this.mouseY = 0;

this.size = size || 800;
        this.canvas = document.createElement('canvas');

this.canvas.width = this.canvas.height = this.size;
        this.canvas.style.width = this.canvas.style.height = this.size + 'px';
        this.canvas.style.marginTop = this.canvas.style.marginLeft = '-' + this.size / 2 + 'px';

document.body.appendChild(this.canvas);
        this.ctx = this.canvas.getContext('2d');

this.steps = 0;
        this.stopped = false;
        this.limit = 800;

this.initDensity = density || 12;
        this.sensitivity = sensitivity || 0.02;
        this.iterations = iterations || 8000;

this.reseed();
        this.animate();

var button = document.getElementById('export');
        document.addEventListener('mousedown', (event) => this.pause(event), false);
        document.addEventListener('mousemove', (event) => this.record(event), false);
        document.addEventListener('mouseup', (event) => this.resume(event), false);
        button.addEventListener('click', (event) => this.exportImage(event), false);
    }

reseed() {
        this.clear();
        this.seed();
        this.plot(1);
    }

animate() {
        this.interval = requestAnimationFrame(() => this.animate());
        this.tick();
    }

stopLoop() {
        clearInterval(this.interval);
    }

tick() {
        if (this.stopped) {
            this.reseed();
        }

this.steps += 1;
        this.plot(5);

if (this.steps > this.limit) {
            this.stopLoop();
        }
    }

pause(event) {
        event.preventDefault();
        if (event.target.tagName.toLowerCase() == 'canvas') {
            this.stopped = true;
            if (!this.interval) {
                this.loop();
            }
        }
    }

record(event) {
        if (this.stopped) {
            this.mouseX = event.pageX - this.canvas.offsetLeft;
            this.mouseY = event.pageY - this.canvas.offsetTop;
        }
    }

resume(event) {
        this.stopped = false;
        this.steps = 0;
    }

clear() {
        this.image = this.ctx.createImageData(this.size, this.size);
        let x, y;

// create and populate a two dimensional array
        this.density = (function(size) {
            let i, results;
            results = new Array();

for (x = 0; x < size; x++) {
                results.push((function() {
                    let j, results1;
                    results1 = new Array();
                    for (y = 0; y < size; y++) {
                        results1.push(0);
                    }
                    return results1;
                })());
            }
            return results;
        })(this.size);

this.maxDensity = 0;
    }

seed() {
        this.xSeed = (this.mouseX * 2 / this.size - 1) * this.sensitivity;
        this.ySeed = (this.mouseY * 2 / this.size - 1) * this.sensitivity;
        this.x = this.size / 2;
        this.y = this.size / 2;
    }

populate(samples) {
        var x, y, row;
        var iterations = this.iterations;

for (let i = 0, len = samples * iterations; i < len; i++) {
            x = ((Math.sin(this.xSeed * this.y) - Math.cos(this.ySeed * this.x)) * this.size * 0.2) + this.size / 2;
            y = ((Math.sin(-this.xSeed * this.x) - Math.cos(-this.ySeed * this.y)) * this.size * 0.2) + this.size / 2;
            this.density[Math.round(x)][Math.round(y)] += this.initDensity;

this.x = x;
            this.y = y;
        }

this.maxDensity = Math.log(Math.max.apply(Math, (() => {
            var row, results = new Array();
            for (let i = 0, len = this.density.length; i < len; i++) {
                row = this.density[i];
                results.push(Math.max.apply(Math, row));
            }

return results;
        }).call(this)));
    }

plot(samples) {
        this.populate(samples);
        var data = this.image.data;

let hexToRgb = (hex) => {
            const red = (parseInt(hex) >> 16) & 0xff;
            const green = (parseInt(hex) >> 08) & 0xff;
            const blue = (parseInt(hex)) & 0xff;

return {
                r: red,
                g: green,
                b: blue
            }
        }

for (let x = 0; x < this.size; x++) {
            for (let y = 0; y < this.size; y++) {
                let idx = (x * this.size + y) * 4;
                let dens = this.density[x][y];
                data[idx + 3] = 255;

if (dens <= 0) continue;
                let light = Math.log(dens) / this.maxDensity * 255;
                let current = data[idx];

let red = Math.min(255, hexToRgb(current).r + 255 / light);
                let green = Math.min(255, hexToRgb(current).g + 255 / light);
                let blue = Math.min(255, hexToRgb(current).b + 255 / light);
                let rgb = (red << 16 & 0xff) | (green << 08 & 0xff) | (blue & 0xff);

let color = this.illuminate(light, rgb);
                data[idx] = red / color;
                data[idx + 1] = color / green;
                data[idx + 2] = color;
            }
        }

this.ctx.putImageData(this.image, 0, 0);
    }

illuminate(a, b) {
        return ((a * b) >> 7) + ((a * a) >> 8) - ((a * a * b) >> 15);
    }

exportImage(event) {
        event.stopPropagation();

this.ctx.fillStyle = "#333333";
        this.ctx.font = 'bold 16px Helvetica, Arial, sans-serif';
        this.ctx.textBaseline = "top";
        var textSize = this.ctx.measureText("esimov.com");
        this.ctx.fillText("esimov.com", this.size - textSize.width - 10, 5);

//retrieve canvas image as data URL:		
        var dataURL = this.canvas.toDataURL("image/png");
        //open a new window of appropriate size to hold the image:
        var imageWindow = window.open("", "DeJongAttractor", "left=0,top=0,width=" + this.size + ",height=" + this.size + ",toolbar=0,resizable=0");
        //write some html into the new window, creating an empty image:
        imageWindow.document.write("<title>DeJong Attractor</title>");
        imageWindow.document.write("<img id='exportImage'" + " alt=''" + " height='" + this.size + "'" + " width='" + this.size + "'" + " style='position:absolute;left:0;top:0'/>");
        imageWindow.document.close();
        //copy the image into the empty img in the newly opened window:
        var exportImage = imageWindow.document.getElementById("exportImage");
        exportImage.src = dataURL;
    }

}

(() => new DeJongAttractor(800))(window);

编译

CSS

HTML

Peter De Jong Attractor 算法实现基于分形火焰算法： http://en.wikipedia.org/wiki/Fractal_flame

JavaScript，art

编辑器支持Emmet

快捷键

Peter De Jong Attractor 算法实现基于分形火焰算法： http://en.wikipedia.org/wiki/Fractal_flame

JavaScript，art

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：