paper.js模仿精子动画效果

代码语言:html

所属分类:动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script src="http://repo.bfw.wiki/bfwrepo/js/paper.js"></script>
    <title>Paper.js — Tadpoles</title>
</head>
<body class="fullscreen">

    <article>
        <div class="paperscript">
           
            <script type="text/paperscript" canvas="canvas-1">
                // Adapted from Flocking Processing example by Daniel Schiffman:
                // http://processing.org/learning/topics/flocking.html

                var Boid = Base.extend({
                    initialize: function(position, maxSpeed, maxForce) {
                        var strength = Math.random() * 0.5;
                        this.acceleration = new Point();
                        this.vector = Point.random() * 2 - 1;
                        this.position = position.clone();
                        this.radius = 30;
                        this.maxSpeed = maxSpeed + strength;
                        this.maxForce = maxForce + strength;
                        this.amount = strength * 10 + 10;
                        this.count = 0;
                        this.createItems();
                    },

                    run: function(boids) {
                        this.lastLoc = this.position.clone();
                        if (!groupTogether) {
                            this.flock(boids);
                        } else {
                            this.align(boids);
                        }
                        this.borders();
                        this.update();
                        this.calculateTail();
                        this.moveHead();
                    },

                    calculateTail: function() {
                        var segments = this.path.segments,
                        shortSegments = this.shortPath.segments;
                        var speed = this.vector.length;
                        var pieceLength = 5 + speed / 3;
                        var point = this.position;
                        segmen.........完整代码请登录后点击上方下载按钮下载查看

网友评论0