canvas - 简单的神经网络
1.国际惯例,先上效果图
一下效果图使用三次贝塞尔曲线进行连线,代码中有直接使用直线连线的代码,可直使用。
2.查看演示请看 这里。
3 代码
html:
<canvas id="canvas" width="1920" height="1080"></canvas>
js: 这代码看起来可以说十分直白了,注释不放过任何一个角落。
var canvas = document.getElementById('canvas');
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
var PI = Math.PI;
// 点的数量
var point_count = 100;
// 存放点的数组
var point_list = new Array(point_count);
// 最大点间距
var max_space = 50;
// 每次更新位置最大的行进距离
var max_speed = 1;
// 点的半径
var point_r = 3;
// 线宽
var lineWidth = 1;
var strokeStyle = '#2779D7';
var fillStyle = '#2779D7'; for (var i = 0; i < point_count; i++) {
point_list[i] = {
// x 轴位置
x: Math.round(Math.random() * (width - point_r * 2)),
// y 轴位置
y: Math.round(Math.random() * (height - point_r * 2)),
// x 轴速度
speedX: Math.random() * max_speed * 2 - max_speed,
// y 轴速度
speedY: Math.random() * max_speed * 2 - max_speed,
}
} function update() {
point_list.forEach(function (value) {
// 更新位置信息
value.x += value.speedX;
value.y += value.speedY;
// 超出屏幕后 在屏幕另一侧对应位置出现
// if (value.x > width + max_space) value.x = -max_space;
// if (value.x < -max_space) value.x = width + max_space;
// if (value.y > height + max_space) value.y = -max_space;
// if (value.y < -max_space) value.y = height + max_space;
// 碰壁反弹
if (value.x > width || value.x < 0) value.speedX = -value.speedX;
if (value.y > height || value.y < 0) value.speedY = -value.speedY;
})
} function draw() {
var arr = point_list;
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = strokeStyle;
ctx.fillStyle = fillStyle;
ctx.lineWidth = lineWidth;
for (var i = 0; i < arr.length; i++) {
ctx.beginPath()
ctx.globalAlpha = 1
ctx.arc(arr[i].x, arr[i].y, point_r, 0, PI * 2)
ctx.fill()
for (var j = i + 1; j < arr.length; j++) {
// 计算每两个点的距离, 三角形的斜边 的平方 = 两直角边平方和
var s = max_space - Math.sqrt((arr[j].x - arr[i].x) * (arr[j].x - arr[i].x) + (arr[j].y - arr[i].y) * (arr[j].y - arr[i].y));
// 计算的两点之间线的透明度,如果距离小于最大距离 透明度为 1 , 如果大于 最大距离小于 1.5倍最大距离,透明度线性衰减,大于1.5倍时透明度为0
var opc = (s >= 0 ? 1 : (s < - max_space / 2) ? 0 : 1 - s / - max_space * 2);
// 通过线透明度判断是否需要画线,如果透明度大于零,就划线。
if (opc > 0) {
ctx.beginPath();
ctx.globalAlpha = opc;
// 画直线
// ctx.moveTo(arr[i].x, arr[i].y);
// ctx.lineTo(arr[j].x, arr[j].y);
// 画贝塞尔曲线
ctx.moveTo(arr[i].x, arr[i].y);
ctx.bezierCurveTo(arr[i].x, arr[i].y + (arr[j].y - arr[i].y) * 0.5, arr[i].x + arr[j].x - arr[i].x, arr[i].y + (arr[j].y - arr[i].y) * 0.5, arr[j].x, arr[j].y);
ctx.stroke();
}
}
}
// 更新位置
update();
}
function loop() {
// 循环程序
draw();
setTimeout(loop, 1000/60)
}
window.onload = loop;
()
canvas - 简单的神经网络的更多相关文章
- tensorflow学习笔记四:mnist实例--用简单的神经网络来训练和测试
刚开始学习tf时,我们从简单的地方开始.卷积神经网络(CNN)是由简单的神经网络(NN)发展而来的,因此,我们的第一个例子,就从神经网络开始. 神经网络没有卷积功能,只有简单的三层:输入层,隐藏层和输 ...
- tensorflow笔记(二)之构造一个简单的神经网络
tensorflow笔记(二)之构造一个简单的神经网络 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7425200.html ...
- TensorFlow入门,基本介绍,基本概念,计算图,pip安装,helloworld示例,实现简单的神经网络
TensorFlow入门,基本介绍,基本概念,计算图,pip安装,helloworld示例,实现简单的神经网络
- C++从零实现简单深度神经网络(基于OpenCV)
代码地址如下:http://www.demodashi.com/demo/11138.html 一.准备工作 需要准备什么环境 需要安装有Visual Studio并且配置了OpenCV.能够使用Op ...
- 用pytorch1.0快速搭建简单的神经网络
用pytorch1.0搭建简单的神经网络 import torch import torch.nn.functional as F # 包含激励函数 # 建立神经网络 # 先定义所有的层属性(__in ...
- 用pytorch1.0搭建简单的神经网络:进行多分类分析
用pytorch1.0搭建简单的神经网络:进行多分类分析 import torch import torch.nn.functional as F # 包含激励函数 import matplotlib ...
- 用pytorch1.0搭建简单的神经网络:进行回归分析
搭建简单的神经网络:进行回归分析 import torch import torch.nn.functional as F # 包含激励函数 import matplotlib.pyplot as p ...
- ensorflow学习笔记四:mnist实例--用简单的神经网络来训练和测试
http://www.cnblogs.com/denny402/p/5852983.html ensorflow学习笔记四:mnist实例--用简单的神经网络来训练和测试 刚开始学习tf时,我们从 ...
- Python实现一个简单三层神经网络的搭建并测试
python实现一个简单三层神经网络的搭建(有代码) 废话不多说了,直接步入正题,一个完整的神经网络一般由三层构成:输入层,隐藏层(可以有多层)和输出层.本文所构建的神经网络隐藏层只有一层.一个神经网 ...
随机推荐
- CF 1064 D. Labyrinth
D. Labyrinth http://codeforces.com/contest/1064/problem/D 题意: n*m的矩阵,只能往左走l次,往右走r次,上下走无限制,问能走到多少个点. ...
- java 文件过滤
public class TestFileio { public static void main(String[] args) { File file = new File("D:/upl ...
- 【JUC源码解析】CyclicBarrier
简介 CyclicBarrier,一个同步器,允许多个线程相互等待,直到达到一个公共屏障点. 概述 CyclicBarrier支持一个可选的 Runnable 命令,在一组线程中的最后一个线程到达之后 ...
- bilibili携手WeTest,保障视频类应用优质适配体验
WeTest 导读 中国移动视频用户规模越来越大,各类移动视频APP也百家争鸣, B站作为国内知名的年轻人文化社区,bilibili在推出移动端时,除了坚持自身的独特定位以外,对其APP的质量也十分重 ...
- JS基础循环语句练习
最近这几天一直在做题做题做题,很恶心,很头疼,都快吐了,但是自己的逻辑还是初见成效的,很久不动脑了,有点锈住了,大家也一起来开发下自己的大脑 有关简单排序的小循环 <script> var ...
- 三边定位 c#
MATLAB是美国MathWorks公司出品的商业数学软件,用于算法开发.数据可视化.数据分析以及数值计算的高级技术计算语言和交互式环境,主要包括MATLAB和Simulink两大部分. 项目中用到三 ...
- 强化学习读书笔记 - 13 - 策略梯度方法(Policy Gradient Methods)
强化学习读书笔记 - 13 - 策略梯度方法(Policy Gradient Methods) 学习笔记: Reinforcement Learning: An Introduction, Richa ...
- Mac系统STF自动化环境搭建及部署踩坑记录
因为公司需要寻找一个免root的自动化测试方案,所以以前做的老方案需要被替代.一阵搜寻找到了这个框架,但是部署起来很是折腾,搞了一下午终于搞定,顺便记录一下过程,有需要的自取. 转载请注明出处:htt ...
- python 的入门
时光匆匆,大一的时间过的很快,从大一上学期学的c开始,就感觉出c的结构很复杂,但是不可否认,学习c和汇编等涉及到系统底层知识才会有可能开发出属于自己知识产权的东西,然而,python以其简约性,丰富的 ...
- sql 命令使用简单记录
半个月前就想记下用过的SQL命令的!!! 主题: 按时间查询: https://blog.csdn.net/hejpyes/article/details/41863349 左关联: se ...