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实现一个简单三层神经网络的搭建(有代码) 废话不多说了,直接步入正题,一个完整的神经网络一般由三层构成:输入层,隐藏层(可以有多层)和输出层.本文所构建的神经网络隐藏层只有一层.一个神经网 ...
随机推荐
- addClass+siblings+removeClass用意:
$(this).addClass("li_add").siblings().removeClass("li_add").children('.floor2'). ...
- Using Xpath With Default XML Namespace in C#
If you have a XML file without any prefix in the namespace: <bookstore xmlns="http://www.con ...
- day3 前奏
1.第1个c语言 编辑---编译----运行 python@ubuntu:~/Desktop/pythons06$ vim -第1个c语言.c #include<stdio.h> int ...
- Nginx入门篇(六)之反向代理和负载均衡
一.Nginx负载均衡集群 介绍 负载均衡(Load Balance)集群提供了一种行之有效的办法,来扩展网络设备和服务器负载.带宽和吞吐量,同时加强了网络数据处理能力,提供了网络的灵活性和可用性. ...
- python-模块详解
模块: 模块的分类: 第三方模块/扩展模块:没在安装python解释器的时候安装的那些功能 自定义模块:你写的功能如果是一个通用的功能,那你就把它当做一个模块 内置模块:安装python解释器的时候跟 ...
- Spring Cloud(一):服务治理技术概览【Finchley 版】
Spring Cloud(一):服务治理技术概览[Finchley 版] 发表于 2018-04-14 | 更新于 2018-05-07 | Spring Cloud Netflix 是 Spr ...
- hdu6447
YJJ's Salesman Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- 作业MathExamV2.0
MathExam233 211614269 林凯 211601233张康凌 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时( ...
- 关于解决MySort
关于解决MySort 那天老师教给我们关于sort的用法以及String类中的split方法.在一定程度上告诉我们sort用法的原理和一些特别的用法后,老师叫我们用JAVA尝试去设计一个"M ...
- 网页调用vlc并播放网络视频
环境:windows/android/ios windows端保存以下内容为reg文件并运行 Windows Registry Editor Version 5.00 [HKEY_CLASSES_RO ...