var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); var Grewer = {
init: function() {
this.getWindowSize();
canvas.width = this.w;
canvas.height = this.h;
this.num = 50;
this.range = 100;
this.arr = [];
this.add(); },
getWindowSize: function() {
//获取窗口宽度
if (window.innerWidth) { //兼容火狐,谷歌,safari等浏览器
this.w = window.innerWidth;
} else if ((document.body) && (document.body.clientWidth)) { //兼容IE浏览器
this.w = document.body.clientWidth;
} //获取窗口高度
if (window.innerHeight) {
this.h = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
this.h = document.body.clientHeight;
}
},
update: function(obj) {
obj.x += obj.vx;
obj.y += obj.vy; if (obj.x < 0 || obj.x > this.w) {
obj.vx *= -1;
}
if (obj.y < 0 || obj.y > this.h) {
obj.vy *= -1;
}
},
add: function() { var i = this.num;
while (i--) {
var particles = {
x: (Math.random() * this.w) | 0,
y: (Math.random() * this.h) | 0,
vx: (Math.random() - .5) * 1,
vy: (Math.random() - .5) * 1,
}
this.arr.push(particles);
}
},
checkDist: function(a, b, dist) {
var x = a.x - b.x,
y = a.y - b.y; return x * x + y * y <= dist * dist;
},
print: function(obj) {
ctx.beginPath();
ctx.arc(obj.x, obj.y, 2, 0, 2 * Math.PI);
ctx.fillStyle = '#ddd';
ctx.fill();
} }
var G = Object.create(Grewer);
G.init();
var Ganim = function() {
window.requestAnimationFrame(Ganim); ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, G.w, G.h); var length = G.num;
for (var i = 0; i < length; i++) {
var o1 = G.arr[i]
G.update(o1);
G.print(o1); for (var j = i + 1; j < length; ++j) { var o2 = G.arr[j];
if (G.checkDist(o1, o2, G.range)) {
ctx.strokeStyle = '#ddd';
ctx.beginPath();
ctx.moveTo(o1.x, o1.y);
ctx.lineTo(o2.x, o2.y);
ctx.stroke();
}
} }
}
Ganim();

旧版本

demo:https://grewer.github.io/JsDemo/particles/

github:https://github.com/Grewer/JsDemo/tree/master/particles

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); var Grewer = {
init: function() {
this.getWindowSize();
canvas.width = this.w;
canvas.height = this.h;
this.num = 70;
this.range = 80;
this.arr = [];
this.add();
},
getWindowSize: function() {
//获取窗口宽度
if (window.innerWidth) { //兼容火狐,谷歌,safari等浏览器
this.w = window.innerWidth;
} else if ((document.body) && (document.body.clientWidth)) { //兼容IE浏览器
this.w = document.body.clientWidth;
} //获取窗口高度
if (window.innerHeight) {
this.h = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
this.h = document.body.clientHeight;
}
},
update: function(obj) {
obj.x += obj.vx;
obj.y += obj.vy; if (obj.x < 0 || obj.x > this.w) {
obj.vx *= -1;
}
if (obj.y < 0 || obj.y > this.h) {
obj.vy *= -1;
}
},
add: function() { var i = this.num;
while (i--) {
var particles = {
x: (Math.random() * this.w) | 0,
y: (Math.random() * this.h) | 0,
vx: (Math.random() - .5) * 1,
vy: (Math.random() - .5) * 1,
r: ((Math.random() * 2) | 0) + 1
}
this.arr.push(particles);
}
},
checkDist: function(a, b, dist) {
var x = a.x - b.x,
y = a.y - b.y; return x * x + y * y <= dist * dist;
},
print: function(obj) {
ctx.beginPath();
ctx.arc(obj.x, obj.y, obj.r, 0, 2 * Math.PI);
ctx.fillStyle = '#cccccc';
ctx.fill();
} }
var G = Object.create(Grewer);
G.init();
var Ganim = function() {
window.requestAnimationFrame(Ganim); ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, G.w, G.h); var length = G.arr.length;
for (var i = 0; i < length; i++) {
var o1 = G.arr[i]
G.update(o1);
G.print(o1); for (var j = i + 1; j < length; ++j) { var o2 = G.arr[j];
if (G.checkDist(o1, o2, G.range)) {
ctx.strokeStyle = '#cccccc';
ctx.beginPath();
ctx.moveTo(o1.x, o1.y);
ctx.lineTo(o2.x, o2.y);
ctx.stroke();
}
} }
}
G.arr.push({
x: 1,
y: 1,
vx: 0,
vy: 0,
r: 1
})
document.addEventListener('mousemove', function(e) {
G.arr[G.num].x = e.clientX;
G.arr[G.num].y = e.clientY;
}, false)
Ganim();

手写particles的更多相关文章

  1. 【Win 10 应用开发】手写识别

    记得前面(忘了是哪天写的,反正是前些天,请用力点击这里观看)老周讲了一个14393新增的控件,可以很轻松地结合InkCanvas来完成涂鸦.其实,InkCanvas除了涂鸦外,另一个大用途是墨迹识别, ...

  2. JS / Egret 单笔手写识别、手势识别

    UnistrokeRecognizer 单笔手写识别.手势识别 UnistrokeRecognizer : https://github.com/RichLiu1023/UnistrokeRecogn ...

  3. 如何用卷积神经网络CNN识别手写数字集?

    前几天用CNN识别手写数字集,后来看到kaggle上有一个比赛是识别手写数字集的,已经进行了一年多了,目前有1179个有效提交,最高的是100%,我做了一下,用keras做的,一开始用最简单的MLP, ...

  4. 【转】机器学习教程 十四-利用tensorflow做手写数字识别

    模式识别领域应用机器学习的场景非常多,手写识别就是其中一种,最简单的数字识别是一个多类分类问题,我们借这个多类分类问题来介绍一下google最新开源的tensorflow框架,后面深度学习的内容都会基 ...

  5. caffe_手写数字识别Lenet模型理解

    这两天看了Lenet的模型理解,很简单的手写数字CNN网络,90年代美国用它来识别钞票,准确率还是很高的,所以它也是一个很经典的模型.而且学习这个模型也有助于我们理解更大的网络比如Imagenet等等 ...

  6. 使用神经网络来识别手写数字【译】(三)- 用Python代码实现

    实现我们分类数字的网络 好,让我们使用随机梯度下降和 MNIST训练数据来写一个程序来学习怎样识别手写数字. 我们用Python (2.7) 来实现.只有 74 行代码!我们需要的第一个东西是 MNI ...

  7. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  8. springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

    首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...

  9. 为sproto手写了一个python parser

    这是sproto系列文章的第三篇,可以参考前面的<为sproto添加python绑定>.<为python-sproto添加map支持>. sproto是云风设计的序列化协议,用 ...

随机推荐

  1. commons-pool与commons-pool2连接池(Hadoop连接池)

    commons-pool和commons-pool2是用来建立对象池的框架,提供了一些将对象池化必须要实现的接口和一些默认动作.对象池化之后可以通过pool的概念去管理其生命周期,例如对象的创建,使用 ...

  2. Scrapy框架--Requests对象

    Scrapy使用request对象来爬取web站点. request对象由spiders对象产生,经由Scheduler传送到Downloader,Downloader执行request并返回resp ...

  3. Java可变参数以及一个简单应用

    可变参数: Java1.5增加了新特性:可变参数:适用于参数个数不确定,类型确定的情况,java把可变参数当做数组处理. 注意:可变参数必须位于最后一项. 原因:当可变参数个数多余一个时,必将有一个不 ...

  4. Ubuntu14.04LTS下安装Node.js&NPM以及个人博客hexo的初始化配置

    什么是hexo Hexo 是一款基于node 的静态博客网站生成器作者 :tommy351是一个台湾的在校大学生...相比其他的静态网页生成器而言有着,生成静态网页最快,插件丰富(已经移植了大量Oct ...

  5. Linux文件系统的层级结构

    Linux文件系统的层级结构   文件结构 倒置的树状结构 :Linux的哲学思想是一切皆文件,把几乎所有资源统统抽象为文件形式:包括硬件设备,甚至通信接口等 根目录 :linux的文件起始均从唯一的 ...

  6. web前端——10个妨碍进步的学习方式

    1.前言 从事web前端的人很多,每个人的学习方式,学习习惯基本不会一模一样!关于web前端(或者直接互联网),大家都知道,是做到老,学到老的一个行业.之前写文章的时候,我说过很多学习的方式和建议.今 ...

  7. 多线程之Map:Hashtable HashMap 以及ConcurrentHashMap

    1.Map体系参考:http://java.chinaitlab.com/line/914247.htmlHashtable是JDK 5之前Map唯一线程安全的内置实现(Collections.syn ...

  8. 在C#中winform程序中应用nlog日志工具

    在C#中winform程序中应用nlog日志工具,配置文件简单应用. 文件名 nlog.config,请注意修改属性为"始终复制",发布时候容易遇到不存在文件的错误提示. 通过Nu ...

  9. 【20171027中】alert(1) to win 第13,14,15,16题

    第13题 题目: function escape(s) { var tag = document.createElement('iframe'); // For this one, you get t ...

  10. 使用spark-streaming实时读取Kafka数据统计结果存入MySQL

    在这篇文章里,我们模拟了一个场景,实时分析订单数据,统计实时收益. 场景模拟 我试图覆盖工程上最为常用的一个场景: 1)首先,向Kafka里实时的写入订单数据,JSON格式,包含订单ID-订单类型-订 ...