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