手写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 = 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的更多相关文章
- 【Win 10 应用开发】手写识别
记得前面(忘了是哪天写的,反正是前些天,请用力点击这里观看)老周讲了一个14393新增的控件,可以很轻松地结合InkCanvas来完成涂鸦.其实,InkCanvas除了涂鸦外,另一个大用途是墨迹识别, ...
- JS / Egret 单笔手写识别、手势识别
UnistrokeRecognizer 单笔手写识别.手势识别 UnistrokeRecognizer : https://github.com/RichLiu1023/UnistrokeRecogn ...
- 如何用卷积神经网络CNN识别手写数字集?
前几天用CNN识别手写数字集,后来看到kaggle上有一个比赛是识别手写数字集的,已经进行了一年多了,目前有1179个有效提交,最高的是100%,我做了一下,用keras做的,一开始用最简单的MLP, ...
- 【转】机器学习教程 十四-利用tensorflow做手写数字识别
模式识别领域应用机器学习的场景非常多,手写识别就是其中一种,最简单的数字识别是一个多类分类问题,我们借这个多类分类问题来介绍一下google最新开源的tensorflow框架,后面深度学习的内容都会基 ...
- caffe_手写数字识别Lenet模型理解
这两天看了Lenet的模型理解,很简单的手写数字CNN网络,90年代美国用它来识别钞票,准确率还是很高的,所以它也是一个很经典的模型.而且学习这个模型也有助于我们理解更大的网络比如Imagenet等等 ...
- 使用神经网络来识别手写数字【译】(三)- 用Python代码实现
实现我们分类数字的网络 好,让我们使用随机梯度下降和 MNIST训练数据来写一个程序来学习怎样识别手写数字. 我们用Python (2.7) 来实现.只有 74 行代码!我们需要的第一个东西是 MNI ...
- 手写原生ajax
关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
- springmvc 动态代理 JDK实现与模拟JDK纯手写实现。
首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用 ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...
- 为sproto手写了一个python parser
这是sproto系列文章的第三篇,可以参考前面的<为sproto添加python绑定>.<为python-sproto添加map支持>. sproto是云风设计的序列化协议,用 ...
随机推荐
- 笨鸟先飞之ASP.NET MVC系列之过滤器(05结果过滤器)
概念介绍 结果过滤器看名字就知道这个过滤器是针对方法所产生结果的,结果过滤器,主要在我们的动作方法结果返回前后执行. 如果我们需要创建结果过滤器需要实现IResultFilter接口. namespa ...
- Opencv基础课必须掌握:滑动条做调色盘 -OpenCV步步精深
滑动条做调色盘 我们来想一下这个程序需要什么,首先需要一个窗口显示一切=.=(︿( ̄︶ ̄)︿废话一样): 说到调色盘除了画板也就是窗口(默认为黑色),调色就要涉及三种颜色 红色Red(我们用R表示), ...
- Java基础总结--变量、运算符总结
---变量基本概述----变量作用:就是用来存储数据变量的声明:变量类型 变量名;变量类型---区分不同类型的数据,变量名--按名访问变量变量名(规则):见名识意,第一个字母小写后面驼峰规则变量的作用 ...
- LeetCode 55. Jump Game (跳跃游戏)
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- LeetCode 27. Remove Element (移除元素)
Given an array and a value, remove all instances of that value in place and return the new length. D ...
- Vue源码学习02 初始化模块init.js
接上篇,我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是 ...
- json格式转化成map
public static Map<String, Object> parseJSON2Map(String jsonStr) { Map<String, Object> ma ...
- Ionic3 遇到的一些错误- Error: Your isarray platform does not have Api.js
执行:ionic cordova resources android --icon -i 生成应用图标时,出现下面的错误: 尝试解决方案: 删掉整个项目,重新创建,竟然好了....
- C++ 设计模式 依赖倒置原则 简单示例
C++ 设计模式 依赖倒置原则 简单示例 /** * 依赖倒置原则(Dependency Inversion Principle) * 依赖于抽象(接口),不要依赖具体的实现(类),也就是针对接口编程 ...
- Node.js Web 模块
什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL,与客 ...