Canvas 树枝生长模拟出人像

数学的艺术，包含一个Vector（向量）对象的JS实现。

canvas, math

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

第三方库
作品简介 1401
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var _canvas = document.getElementById("_canvas");
var _ctx = _canvas.getContext("2d");
var cw = canvas.width = _canvas.width = 291,
    cx = cw / 2;
var ch = canvas.height = _canvas.height = 303,
    cy = ch / 2;

var rad = Math.PI / 180;

var img = document.getElementById("img");
var w = img.width;
var h = img.height;
_ctx.drawImage(img, 0, 0, w, h);
ctx.strokeStyle = "white";
ctx.lineWidth = 2;
var _imgData = _ctx.getImageData(0, 0, cw, ch);
var _pixels = _imgData.data;

for (var i = 0; i < _pixels.length; i += 4) {
    if (_pixels[i + 0] > 0 && _pixels[i + 0] < 70) {
        _pixels[i + 0] = 0;
        _pixels[i + 1] = 0;
        _pixels[i + 2] = 0
    } else {
        _pixels[i + 0] = 250;
        _pixels[i + 1] = 250;
        _pixels[i + 2] = 250
    }

}

_ctx.putImageData(_imgData, 0, 0);
_ctx.beginPath();

var imgData = _ctx.getImageData(0, 0, cw, ch);
var pixels = imgData.data;

var tree;
var max_dist = 8;
var min_dist = 3;
var numLeaves = 0;

var roots = [{
        x: 0,
        y: 280
    }, {
        x: 290,
        y: 280
    }, {
        x: 145,
        y: 10
    }, {
        x: 145,
        y: 200
    }, {
        x: 90,
        y: 90
    }, {
        x: 210,
        y: 90
    }, {
        x: 125,
        y: 125
    }, {
        x: 180,
        y: 125
    }]
    ////////////////////////////////////////
function Tree() {
        this.leaves = [];
        this.branches = [];

for (var x = 0; x < imgData.width; x++) {
            for (var y = 0; y < imgData.height; y++) {
                var i = (x + y * imgData.width) * 4;
                if (pixels[i] == 0 && Math.random() > .8) {
                    this.leaves.push(new Leaf(x, y));
                    numLeaves++
                }

}
        }
        console.log(numLeaves)
        this.show = function() {
            for (var i = 0; i < this.leaves.length; i++) {
                this.leaves[i].draw();
            }
            for (var i = 0; i < this.branches.length; i++) {
                this.branches[i].draw();
            }
        }

for (var i = 0; i < roots.length; i++) {
            var rootPos = new Vector(roots[i].x, roots[i].y);
            var dir = new Vector(0, -1);
            var root = new Branch(null, rootPos, dir);

this.branches.push(root);
        }

this.grow = function() {
                for (var i = 0; i < this.leaves.length; i++) {
                    var leaf = this.leaves[i];

var closestBranch = null;
                    var record = 1000;
                    for (var j = 0; j < this.branches.length; j++) {
                        var branch = this.branches[j];
                        var d = dist(leaf.pos, branch.pos);

if (d < min_dist) {
                            leaf.reached = true;
                            closestBranch = null;
                            break;
                        } else if (d > max_dist) {
                            // ignore, do nothing 
                        } else if (closestBranch == null || d < record) {
                            closestBranch = branch;
                            record = d;
                        }
                    } //for j loop

if (closestBranch != null) {
                        var newDir = leaf.pos.copy().sub(closestBranch.pos);
                        newDir.normalize();
                        closestBranch.dir.add(newDir);
                        closestBranch.count++;
                    }

} // for i loop

// delete all the reached leaves
                for (var i = this.leaves.length - 1; i >= 0; i--) {
                    if (this.leaves[i].reached) {
                        this.leaves.splice(i, 1)
                    }
                }

for (var i = this.branches.length - 1; i >= 0; i--) {
                    var branch = this.branches[i];
                    if (branch.count > 0) {
                        branch.dir.div(branch.count);

this.branches.push(branch.next());
                    }
                    branch.reset()
                }
            } //this.grow
    }
    ////////////////////////////////////////

////////////////////////////////////////
function Leaf(x, y) {
        this.pos = new Vector(x, y);
        this.r = 2;
        this.reached = false;
        this.draw = function() {
            ctx.beginPath();
            ctx.rect(this.pos.x, this.pos.y, this.r, this.r)
        }
    }
    ////////////////////////////////////////

////////////////////////////////////////
function Branch(parent, pos, dir) {
        this.pos = pos;
        this.parent = parent;
        this.dir = dir;
        this.origDir = dir;
        this.count = 0;
        this.branchLength = 3;

this.d = dist(this.pos, {
            x: cx,
            y: cy
        });

this.reset = function() {
            this.dir = this.origDir.copy();
            this.count = 0;

}

this.draw = function() {
            if (this.parent != null) {
                //var index = (~~this.pos.x + ~~this.pos.y * imgData.width )*4;
                //var rgb = pixels[index];
                //ctx.strokeStyle = "rgb("+rgb+","+rgb+","+rgb+")"
                ctx.beginPath();
                ctx.moveTo(this.pos.x, this.pos.y);
                ctx.lineTo(this.parent.pos.x, this.parent.pos.y);
                ctx.stroke();

}
        }

this.next = function() {
            //this.branchLength = map(this.d, 0, R, 16, 4);
            var nextDir = this.dir.copy().mult(this.branchLength)

var parent = this;
            var nextPos = this.pos.copy().add(nextDir);
            var nextBranch = new Branch(parent, nextPos, this.dir.copy());
            return nextBranch;
        }
    }
    ////////////////////////////////////////

tree = new Tree();
tree.show();

function Draw() {
    requestId = window.requestAnimationFrame(Draw);
    ctx.clearRect(0, 0, cw, ch);
    tree.grow();
    tree.show();

if (tree.branches.length > numLeaves) {
        window.cancelAnimationFrame(requestId);
    }
}
requestId = window.requestAnimationFrame(Draw);

function dist(p1, p2) {
    var dx = p2.x - p1.x;
    var dy = p2.y - p1.y;
    return Math.sqrt(dx * dx + dy * dy);
}

function map(n, a, b, _a, _b) {
    var d = b - a;
    var _d = _b - _a;
    var u = _d / d;
    return _a + n * u;
}

编译

CSS

HTML

if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function() {
                        callback(currTime + timeToCall);
                    },
                    timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };

if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
    }());
</script>
<script>
    function Vector(x, y) {
        this.x = x;
        this.y = y;

this.add = function() {

if (arguments.length === 1 && typeof arguments[0] === "object") {
                // should do something for Array.isArray
                this.x += arguments[0].x;
                this.y += arguments[0].y;
            } else if (arguments.length === 2) {
                this.x += arguments[0];
                this.y += arguments[1];
            }
            return this;
        }

this.sub = function() {
            if (arguments.length === 1 && typeof arguments[0] === "object") {
                this.x -= arguments[0].x;
                this.y -= arguments[0].y;
            } else if (arguments.length === 2) {
                this.x -= arguments[0];
                this.y -= arguments[1];
            }
            return this;
        }

this.mult = function(n) { // scale   
            this.x *= n || 0;
            this.y *= n || 0;
            return this;
        }

this.div = function(n) { // scale
            if (n != 0) {
                this.x /= n;
                this.y /= n;
            }
            return this;
        }

this.set = function() {
            if (arguments.length === 2) {
                this.x = arguments[0];
                this.y = arguments[1];
            }
        }

this.magSq = function() {
            return (this.x * this.x + this.y * this.y)
        }

this.mag = function() {
            return Math.sqrt(this.magSq());
        }

this.limit = function(n) {

var mSq = this.magSq();
            if (mSq > n * n) {
                this.div(Math.sqrt(mSq)); //normalize it
                this.mult(n);
            }
            return this;
        }

this.setMag = function(n) {
            /*
            this.normalize();
            this.mult(n);
            */
            return this.normalize().mult(n);
        }

this.dot = function(vector) {
            //Calculates the dot product of two vectors
            //https://www.mathsisfun.com/algebra/vectors-dot-product.html
            return (this.x * vector.x + this.y * vector.y)
        }

this.dist = function(v) {
            var dx = v.x - this.x;
            var dy = v.y - this.y;
            var dist = Math.sqrt(dx * dx + dy * dy);
            return dist;
        }

this.normalize = function() {
            /*
            var theta = Math.atan2(this.y, this.x); 
            this.x = Math.cos(theta);
            this.y = Math.sin(theta);
            */
            return this.div(this.mag());
        }

this.copy = function() {
            return new Vector(this.x, this.y);
        }

}

/////////////////////////////////

Vector.prototype.angleBetween = function(vector) {
        return (Math.acos(this.dot(vector) / (this.mag() * vector.mag())));
    }

Vector.randomNormalizedVector = function() { //static method
        var theta = Math.random() * 360 * rad;
        var x = Math.cos(theta);
        var y = Math.sin(theta);
        return new Vector(x, y)
    }
</script>

数学的艺术，包含一个Vector（向量）对象的JS实现。

canvas, math

编辑器支持Emmet

快捷键

数学的艺术，包含一个Vector（向量）对象的JS实现。

canvas, math

Canvas 超炫的霓虹灯树枝生长动画

Canvas 大树枝干和绿叶生长动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：