CANVAS 跟着鼠标走的鱼群

boid-where-prohibited

CANVAS

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var seed = 5625463739 + 3;
var maxArriveForce = 0.01;
var maxSeparationForce = 0.05;
var maxCohesionForce = 0.002;
var maxAlignmentForce = 0.08;
var maxSeekForce = 0.01;
var frictionForce = 0.985;
var boidCount = 30;
var boidSpeed = 1;
var futureSteps = 40;

var random = function() {
    var s = seed;
    return function() {
        return alea(s++)();
    };
}();

setTimeout(function() {
    var canvasEl = document.getElementById('js-canvas');
    var width = canvasEl.width;
    var height = canvasEl.height;

var canvasCtx = canvasEl.getContext('2d');
    var boids = createBoids(boidCount, width, height, 8);
    var input = {
        x: width / 2,
        y: height / 2
    };
    canvasEl.addEventListener('mousemove', moveHandler(input, width, height), false);
    animate(canvasCtx, width, height, boids, input);
}, 0);

function createBoids(count, width, height, radius) {
    return Array.apply(undefined, Array(count)).map(function() {
        return new Boid(random() * width, random() * height, radius);
    });
}

function moveHandler(input, width, height) {
    var halfWidth = width / 2;
    var halfHeight = height / 2;
    return function(e) {
        var rect = this.getBoundingClientRect();
        var xPos = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
        var yPos = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
        input.x = xPos;
        input.y = yPos;
    };
}

function limit(_ref, maxLength) {
    var x = _ref[0];
    var y = _ref[1];

var len = vec2.len([x, y]);
    if (vec2.len([x, y]) > maxLength) {
        return vec2.mul([], vec2.normalize([], [x, y]), [maxLength, maxLength]);
    }
    return [x, y];
}

var boidBehaviors = {
    /*
    wander: (boid, stepCount, maxForce) => {
      let futurePosition = vec2.mul([], [boid.vX, boid.vY], [stepCount, stepCount]);
      vec2.add(futurePosition, futurePosition, [boid.x, boid.y]);
      const wanderRange = Math.PI / 4;
      boid.futureHeading += random() * wanderRange - wanderRange / 2;
      const pos = [Math.cos(boid.futureHeading) * boid.radius, Math.sin(boid.futureHeading) * boid.radius];
      const desired = vec2.add([], futurePosition, pos);
      return boidBehaviors.seek(boid, desired, maxForce);
    },
    */

cohere: function cohere(boid, neighbors, separationDistance, maxForce) {
        var count = 0;
        var vectorSum = [0, 0];
        var steeringVector = [0, 0];
        neighbors.forEach(function(neighbor) {
            var distance = vec2.dist([boid.x, boid.y], [neighbor.x, neighbor.y]);
            if (boid.id !== neighbor.id && distance < separationDistance) {
                vec2.add(vectorSum, vectorSum, [neighbor.x, neighbor.y]);
                count++;
            }
        });
        if (boid, count > 0) {
            var baryCenter = vec2.div([], vectorSum, [count, count]);
            var desired = vec2.sub([], baryCenter, [boid.x, boid.y]);
            vec2.normalize(desired, desired);
            vec2.mul(desired, desired, [boid.speed, boid.speed]);
            vec2.sub(steeringVector, limit(desired, boid.speed), [boid.vX, boid.vY]);
            vec2.mul(steeringVector, steeringVector, [maxForce, maxForce]);
        }
        return steeringVector;
    },

seek: function seek(boid, targetLocation, maxForce) {
        var desired = vec2.sub([], targetLocation, [boid.x, boid.y]);
        vec2.normalize(desired, desired);
        vec2.mul(desired, desired, [boid.speed, boid.speed]);
        return vec2.mul([], vec2.sub([], desired, [boid.vX, boid.vY]), [maxForce, maxForce]);
    },

align: function align(boid, neighbors, separationDistance, maxForce) {
        var count = 0;
        var vectorSum = [0, 0];
        var steeringVector = [0, 0];
        neighbors.forEach(function(neighbor) {
            var distance = vec2.dist([boid.x, boid.y], [neighbor.x, neighbor.y]);
            if (boid.id !== neighbor.id && distance < separationDistance) {
                vec2.add(vectorSum, vectorSum, [neighbor.vX, neighbor.vY]);
                count++;
            }
        });
        if (count > 0) {
            var desired = vec2.div([], vectorSum, [count, count]);
            vec2.sub(steeringVector, limit(desired, boid.speed), [boid.vX, boid.vY]);
            vec2.mul(steeringVector, steeringVector, [maxForce, maxForce]);
        }
        return steeringVector;
    },

separate: function separate(boid, neighbors, separationDistance, maxForce) {
        var count = 0;
        var vectorSum = [0, 0];
        var steeringVector = [0, 0];
        neighbors.forEach(function(neighbor) {
            var distance = vec2.dist([boid.x, boid.y], [neighbor.x, neighbor.y]);
            if (boid.id !== neighbor.id && distance < separationDistance) {
                var scaleFactor = distance / separationDistance;
                var awayVector = vec2.sub([], [boid.x, boid.y], [neighbor.x, neighbor.y]);
                vec2.mul(awayVector, awayVector, [scaleFactor, scaleFactor]);
                vec2.normalize(awayVector, awayVector);
                vec2.add(vectorSum, vectorSum, awayVector);
                count++;
            }
        });
        if (count > 0) {
            var desired = vec2.div([], vectorSum, [count, count]);
            vec2.sub(steeringVector, limit(desired, boid.speed), [boid.vX, boid.vY]);
            vec2.mul(steeringVector, steeringVector, [maxForce, maxForce]);
        }
        return steeringVector;
    },

arrive: function arrive(boid, targetLocation, radius, maxForce) {
        var desired = vec2.sub([], targetLocation, [boid.x, boid.y]);
        vec2.normalize(desired, desired);
        vec2.mul(desired, desired, [boid.speed, boid.speed]);
        return vec2.mul([], vec2.sub([], desired, [boid.vX, boid.vY]), [maxForce, maxForce]);
    }
};

function applyForces(boid, neighbors, targetLocation) {
    var acceleration = [0, 0];
    var desired = vec2.sub([], targetLocation, [boid.x, boid.y]);
    var distance = vec2.len(desired);
    if (distance > 60) {
        vec2.add(acceleration, acceleration, boidBehaviors.arrive(boid, targetLocation, 60, maxArriveForce)); // arrival
        // vec2.add(acceleration, acceleration, boidBehaviors.wander(boid, futureSteps)); // wandering
    }
    vec2.add(acceleration, acceleration, boidBehaviors.separate(boid, neighbors, boid.radius * 2, maxSeparationForce)); // seperation
    vec2.add(acceleration, acceleration, boidBehaviors.align(boid, neighbors, boid.radius * 4, maxAlignmentForce)); // alignment
    vec2.add(acceleration, acceleration, boidBehaviors.cohere(boid, neighbors, boid.radius * 4, maxCohesionForce)); // cohesion

var _vec2$add = vec2.add([], [boid.vX, boid.vY], acceleration);

boid.vX = _vec2$add[0];
    boid.vY = _vec2$add[1];

var _vec2$mul = vec2.mul([], [boid.vX, boid.vY], [frictionForce, frictionForce]);

boid.vX = _vec2$mul[0];
    boid.vY = _vec2$mul[1];

var _limit = limit([boid.vX, boid.vY], boid.speed);

boid.vX = _limit[0];
    boid.vY = _limit[1];
}

var Boid = function() {
    function Boid(x, y, radius) {
        _classCallCheck(this, Boid);

this.id = Math.floor(random() * 0xffffff * +new Date()).toString(36);
        this.x = x;
        this.y = y;
        this.vX = random() * 2 - 1;
        this.vY = random() * 2 - 1;
        this.speed = boidSpeed;
        this.radius = radius;
        this.cacheEl = this.cache(this.radius * 2, this.radius * 2);
        this.rotation = 0;
        this.futureHeading = Math.PI / 2;
    }

Boid.prototype.update = function update(neighbors, targetLocation) {
        applyForces(this, neighbors, targetLocation);

var _vec2$add2 = vec2.add([], [this.x, this.y], [this.vX, this.vY]);

this.x = _vec2$add2[0];
        this.y = _vec2$add2[1];

this.rotation = Math.atan2(this.vY, this.vX);
    };

Boid.prototype.cache = function cache(width, height) {
        var cacheEl = document.createElement('canvas');
        cacheEl.width = width;
        cacheEl.height = height;
        var cacheCtx = cacheEl.getContext('2d');
        cacheCtx.beginPath();
        cacheCtx.strokeStyle = '#333';
        cacheCtx.lineWidth = 1;
        var gradientX = Math.cos(0) * this.radius + this.radius;
        var gradientY = Math.sin(0) * this.radius + this.radius;
        var gradient = cacheCtx.createRadialGradient(gradientX, gradientY, 0, gradientX, gradientY, this.radius * 2);
        gradient.addColorStop(0.55, 'white');
        gradient.addColorStop(0, 'red');
        cacheCtx.fillStyle = gradient;
        var stepCount = 3;
        var stepIncrement = Math.PI * 2 / stepCount;
        for (var stepIndex = 0; stepIndex < stepCount + 1; stepIndex++) {
            var xPos = Math.cos(stepIndex * stepIncrement) * this.radius + this.radius;
            var yPos = Math.sin(stepIndex * stepIncrement) * this.radius + this.radius;
            cacheCtx.lineTo(xPos, yPos);
        }
        cacheCtx.stroke();
        cacheCtx.fill();
        cacheCtx.closePath();
        return cacheEl;
    };

Boid.prototype.render = function render(ctx) {
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation);
        ctx.drawImage(this.cacheEl, 0, 0, this.radius * 2, this.radius * 2, -this.radius, -this.radius, this.radius * 2, this.radius * 2);
        ctx.rotate(-this.rotation);
        ctx.translate(-this.x, -this.y);
    };

return Boid;
}();

编译

CSS

HTML

boid-where-prohibited

CANVAS

编辑器支持Emmet

快捷键

boid-where-prohibited

CANVAS

CANVAS 跟着鼠标走的圈圈群

CANVAS 跟着鼠标位置撒落的粒子

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：