314人阅读 评论(0)

# 基础类

(function(window) {
var Vector2 = function(x, y) {
this.x = x || 0;
this.y = y || 0;
};
Vector2.prototype = {
set: function(x, y) {
this.x = x;
this.y = y;
return this;
},
sub: function(v) {
return new Vector2(this.x - v.x, this.y - v.y);
},
multiplyScalar: function(s) {
this.x *= s;
this.y *= s;
return this;
},
divideScalar: function(s) {
if (s) {
this.x /= s;
this.y /= s;
} else {
this.set(0, 0);
}
return this;
},
length: function() {
return Math.sqrt(this.lengthSq());
},
normalize: function() {
return this.divideScalar(this.length());
},
lengthSq: function() {
return this.x * this.x + this.y * this.y;
},
distanceToSquared: function(v) {
var dx = this.x - v.x,
dy = this.y - v.y;
return dx * dx + dy * dy;
},
distanceTo: function(v) {
return Math.sqrt(this.distanceToSquared(v));
},
setLength: function(l) {
return this.normalize().multiplyScalar(l);
}
};
window.Vector2 = Vector2;
} (window));

(function (window) {
var Ball = function (r, v, p, cp) {
this.velocity = v;
this.position = p;
this.collectionPosition = cp;
}
Ball.prototype = {
collection: function (v) {
this.velocity = this.collectionPosition.sub(this.position).setLength(v);
},
disband: function () {
this.velocity = new Vector2(MathHelp.getRandomNumber(-230, 230), MathHelp.getRandomNumber(-230, 230));
}
}
window.Ball = Ball;
} (window));

collection: function (v) {
this.velocity = this.collectionPosition.sub(this.position).setLength(v);
},

setLength: function (l) {
return this.normalize().multiplyScalar(l);
}

this.velocity = this.collectionPosition.sub(this.position).normalize().multiplyScalar(v);

normalize是获取单位向量，也可以改成：

this.collectionPosition.sub(this.position).divideScalar(this.length()).multiplyScalar(v);

this.collectionPosition

.sub(this.position)                获取小球所在位置指向小球的向量；

.divideScalar(this.length()) 获取小球所在位置指向小球的向量的单位向量；
.multiplyScalar(v);               设置该向量的长度。

(function (window) {
var MathHelp = {};
MathHelp.getRandomNumber = function (min, max) {
return (min + Math.floor(Math.random() * (max - min + 1)));
}
window.MathHelp = MathHelp;
} (window));

# 粒子生成

var ps = [], balls = [];
function init(tex) {
balls.length = 0;
ps.length = 0;
cxt.clearRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = "rgba(0,0,0,1)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = "rgba(255,255,255,1)";
cxt.font = "bolder 160px 宋体";
cxt.textBaseline = 'top';
cxt.fillText(tex, 20, 20);
//收集所有像素
for (y = 1; y < canvas.height; y += 7) {
for (x = 1; x < canvas.width; x += 7) {
imageData = cxt.getImageData(20 + x, 20 + y, 1, 1);
if (imageData.data[0] > 170) {
ps.push({
px: 20 + x,
py: 20 + y
})
}
}
};
cxt.fillStyle = "rgba(0,0,0,1)";
cxt.fillRect(20, 20, canvas.width, canvas.height);
//像素点和小球转换
for (var i in ps) {
var ball = new Ball(2, new Vector2(0, 0), new Vector2(ps[i].px, ps[i].py), new Vector2(ps[i].px, ps[i].py));
balls.push(ball);
};
cxt.fillStyle = "#fff";
for (i in balls) {
cxt.beginPath();
cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
//解散：生成随机速度
for (var i in balls) {
balls[i].disband();
}
}

var time = 0;
var cyc = 15;
var a = 80;
var collectionCMD = false;
setInterval(function () {
cxt.fillStyle = "rgba(0, 0, 0, .3)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = "#fff";
time += cyc;
for (var i in balls) {
if (collectionCMD === true && balls[i].position.distanceTo(balls[i].collectionPosition) < 2) {
balls[i].velocity.y = 0;
balls[i].velocity.x = 0;
}
}
if (time === 3000) {
collectionCMD = true;
for (var i in balls) {
balls[i].collection(230);
}
}
if (time === 7500) {
time = 0;
collectionCMD = false;
for (var i in balls) {
balls[i].disband();
}
}
for (var i in balls) {
cxt.beginPath();
cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
balls[i].position.y += balls[i].velocity.y * cyc / 1000;
balls[i].position.x += balls[i].velocity.x * cyc / 1000;
}
},
cyc);

# 这你也敢叫人工智能？ok，未完待续......

0
0

【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐（算法+实战）--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
个人资料
• 访问：900641次
• 积分：10574
• 等级：
• 排名：第1526名
• 原创：92篇
• 转载：1171篇
• 译文：11篇
• 评论：28条
评论排行
最新评论