陈帅华的个人网站 - 探索技术艺术与国学之美
3月10日
2020年
6.0分钟
非零与奇偶环绕规则
Canvas

非零环绕规则和奇偶环绕规则在Canvas和SVG中有很重要的用途,经常用它们制作有趣的剪纸效果。两种规则存在矛盾,所以开发者需要根据需求指定使用哪一种规则。一图胜千言,我画了两张涂鸦,分别解释这两种算法的原理。如何使用这两个规则的废话也不多说,代码也能胜千言,我会在下方拿出代码片段。

3月9日
2020年
13.9分钟
趣玩周易-微信小游戏最佳实践
微信小游戏

3月初开始接触微信小游戏,从注册、集成环境开发到上线流程,它都和微信小程序很相似,只有审核阶段比小程序繁琐。从技术角度讲,小游戏比小程序更纯粹,因为几乎所有和UI渲染相关的接口都是围绕Canvas技术,这也是我欣赏它的地方。知道就要做到,所以我决定把“趣玩周易”这个基于Canvas的网页端作品迁移到(或者说重新开发)微信小游戏中,在学习过程中,我会一边熟悉微信小游戏的API和研发流程,一边寻找“趣玩周易”的游戏模式。

2月16日
2020年
3.2分钟
HTTPie 学习指南
HTTP

HTTPie的正确发音是“aitch-tee-tee-pie”,一款拥有交互式用户界面的HTTP客户端请求命令行工具。它支持JSON和语法高亮,有和wget类似的下载功能,支持插件,而且任何系统下都能使用HTTPie。

2月14日
2020年
8.2分钟
Github Actions 学习指南
GitHub开发

基于持续继承和持续开发的软件开发的最佳实践,GitHub 推出 Actions 功能。监听围绕代码仓库管理的各种事件,比如 push 和 pull_request 事件,触发提前计划好的一系列步骤,即工作流。这些步骤用 YAML 文档记录。触发工作流包括了构建和测试。这些工作流可以在 GitHub 的服务器上执行,开发者也可以在自己的服务器响应从GitHub触发的事件来执行工作流。

2月14日
2020年
3.9分钟
Web Workers API 学习指南
WebAPI

善用类比法学习 Web Workers API,看透它们的共性,并找出它们各自的特性。学习任何新东西,都是在我们过去已知的经验之上。这种经验就有好处也有不好之处。从已有规则中学习,但又不被既定规则羁绊,才是好。凤凰浴火燃烧,从灰烬中涅槃重生。从灰烬中来,从淤泥中来,不受困于灰烬和淤泥。

2月12日
2020年
3.2分钟
趣玩周易六十四卦
独立作品

我从喜欢听《庄子》中的荒唐离奇故事,再到喜欢《老子》中深奥玄妙的理论,再到从《周易》中追溯国学的源头活水。我不打算把“趣玩周易64卦”做成一个像是解读《周易》的作品,而是我要给《周易》插上技术和艺术的翅膀,让他飞得更远,飞到更多人的生活里。当世界给你传来一张纸条,结合自己实践,相信值得你相信的内容,质疑值得你质疑的内容,不认死理儿。对与不对只在于适不适合你,因为我们的参考系都不相同。

1月27日
2020年
13.1分钟
我读《自私的基因》
书单

2020年,一场人类和病毒之间的较量注定会被载入史册,重读理查德·道金斯所著的《自私的基因》,基因为了获得永生,“操控”宿主不断繁衍和作出为适应新环境的变异进化。我们不得不承认人在大部分时候无法控制自己原始的本能,唯有教育、法律和道德才可约束他。书中内容对我启发良多,如同看魔术师变戏法,相比言之所达,那些没有说出口的才更引人深思,不要用人类狭隘的私欲与基因的“自私”抗衡。请保持一颗敬畏自然的心,顺应自然法则才是明智的选择。

1月22日
2020年
6.3分钟
开源直播软件OBS Studio入门教程
OBS Studio

OBS Studio 免费开源的视频录制与直播流软件,支持 Windows、macOS、Linux 操作系统,搭配 Soundflower 在 macOS 系统捕捉桌面音频,bilibili是国内知名的视频弹幕网站,本篇教程记录我使用 OBS Studio 与 Bilibili 直播的学习过程。

1月21日
2020年
3.0分钟
个站全端研发日志
个站研发

日志形式记录我的个人网站的前端用户界面和后端功能的更新。功能日志包括在线体验独立作品;按年月想法数量可视化;主题想法泡泡;涂鸦配音;文章搜索,GIF小动画和文章分类图标设计。

1月14日
2020年
1.9分钟
尤克里里指弹《小情歌》前奏
尤克里里音乐理论

尤克里里,琴身比吉他小巧,两手托起,抱于怀中;拨动琴弦,声音清脆高亢,夏威夷风情,不增吵闹,甚萌;四根琴弦,四根松紧琴弦的转轴,数十个品格,每一个品格为半个音阶,一二三四弦,自下而上,AECG;万物皆是由像震动琴弦的能量闭环组成的吗,我一次又一次在片刻之间创造宇宙,又在转瞬之际毁灭宇宙。

12月30日
2019年
14.0分钟
Koa学习指南
Koa

Koa 是一个新(相对Express算新的)的 web 框架,由 Express 幕后的原班人马打造。既然Koa继Express后打造,必定有其优势所在。我的博客后端基于Express框架开发。我觉得做任何事都需要一个契机,Koa应该就是重构后端代码的契机吧。

12月29日
2019年
5.7分钟
记录博客搜索想法功能实现过程
个站研发

随着写过的想法数量增多,想要快速锁定到过去写的某一篇想法变得越发困难。好在我在每一篇文章在创建之初都给他们设置了多个关键词。这篇文章记录我为博客实现搜索功能的过程。日后再对搜索功能做重构或增加新功能也都记录在这篇文章中。

12月22日
2019年
4.0分钟
AntV/F2使用记录
数据可视化AntV

在Ant/F2文档看到“视觉通道”这个词,并非第一次看到这词,但却是让我对数据可视化思考更深入的一次。延伸开来,数据除了可以被视觉化,其他的感官呢。听觉、触觉、味觉、嗅觉都可以和数据发生奇妙的映射反映。数据可被一切艺术化,更像是数据+新媒体艺术碰撞的火花。

12月6日
2019年
25.8分钟
文章目录速查
个站研发

纵观我自2015年至2019年发布的文章。经历了从青涩到熟练,从浅显到逐渐深入的改变。在2019年的最后一个月,我计划回过头来,完善写过的每一篇文章,并完成这篇目录速查。

11月29日
2019年
9.2分钟
可视化想法出现频率
数据可视化

我的博客主页有个可视化组件,它能动态呈现每月想法发布频率,灵感来自GitHub上代码提交频率图,不同的是,我的基本单位是月,GitHub的基本单位是天。一天提交许多次代码很常见,一天写很多篇文章很困难。

11月27日
2019年
10.2分钟
网站接入微博开放平台
微博开发

我发布想法以及访客在我的博客留言都需要登录GitHub账号。因为众所周知的原因,最近好几次我都无法正常访问GitHub,影响到我管理自己的博客。为了解决问题再次出现时的窘境,我向微博开放平台申请了网页应用,通过微博授权识别我和访客在我的博客的登录状态。

11月25日
2019年
1.9分钟
观央视纪录片《苏东坡》有感
生活

央视纪录片《苏东坡》,我已看三遍,每一遍看都有不一样的收获。我对苏东坡一生的遭遇;对他超脱的人生态度;对他在文学和艺术上的成就,让我产生共鸣、敬佩和感动。种种这些,对我当下正面临的困惑有所启示。

11月24日
2019年
3.3分钟
微信公众号开发前的准备
微信公众号

微信公众平台开发前的准备工作。包括申请微信公众号和启动测试账号,搭建基于Node开发的Web服务,MySQL创建用于存储开发数据的数据库等。

11月3日
2019年
11.1分钟
Fabric.js矩阵变换
Fabricjs

Fabric.js 支持矩阵变换。无论在 fabric.Canvas 实例中,或是在继承自 fabric.Object 的各种形状实例中,还是在 fabric.util 中提供的工具函数,都有设置或者获取矩阵变换的相应属性或方法。在 fabric 中,矩阵由一个包含6个数字元素的数组表示,这6个数字能一次性把坐标系的平移、旋转和缩放信息表示出来。

10月30日
2019年
5.3分钟
基于Airglass重构图像标注工具
独立作品

我又重新实现了一版依赖Airglass.js库的基于Canvas技术的功能包括多边形区域标注以及图像切割的实验项目,这篇想法记录开发过程。

10月25日
2019年
11.1分钟
生命游戏开发记录
独立作品

完善Airglass.js的继承机制,增加了extend方法,优化了Renderable和Effect两个基础可渲染类。采用常见规则借助Airglass.js实现出了生命游戏,与网络上其他版本不同的是,我使用了彩色格子。进一步加深了我对面向对象编程思维的理解与应用熟练度。

10月17日
2019年
4.0分钟
Airglass.js现已支持关键帧动画
Airglass

Airglass.js最近的更新中支持了关键帧动画,这依赖于canvas离屏渲染技术。开发者可以从序列图创建关键帧,也可以拷贝其他可渲染组件的关键帧,这适用于希望呈现相同效果的组件,以节省不必要的内存开销。我还在探索关键帧渲染与直接渲染之间的平衡点。

10月6日
2019年
9.9分钟
探索JS原型链规律性可视化
独立作品

我曾经用Illustrator绘制过JavaScript原型链可视化信息图,也曾在最近用iPad手绘过一副JavaScript原型链的涂鸦。如今我借助Airglass.js开发的NodeLink可视化组件动态演示JS核心参考中各值之间的信息传递与关联关系。

10月4日
2019年
4.2分钟
定制地图与雷达波动效
Canvas

地图是FUI界面中常出现的组件之一。我希望Airglass.js能处理好地图渲染,以及地图中丰富多样的动效,所以尝试用Airglass.js完成一个关于地图的最佳实践。在探索的中后期,我将Three.js纳入解决方案与Airglass.js来一次混搭。

9月23日
2019年
9.4分钟
节点关系可视化
数据可视化

经过了一周断断续续的探索,Airglass.js的第二个组件NodeLink终于大功告成。这期间我从Dribbble和Behance等设计网站借鉴了不少创意灵感,以及Blender操作界面给我的启发。在开始下一个组件的开发之前,我想通过这篇想法简单谈谈NodeLink组件。

9月12日
2019年
6.9分钟
Airglass初体验
Airglass

我用airglass.js初步完成了第一个最佳实践:创建和编辑多边形标注区域。做Demo的同时完善Airglass.js。我给渲染器类新增了击中检测实例方法,还增加了链式调用提升开发效率。同时新增多边形Polygon类,它是继矩形圆形后Airglass.js出现的第3个基本形状。接下来是对Demo无止境优化的漫漫长路。

9月10日
2019年
3.8分钟
Airglass.js开发笔记:最佳实践前奏
Airglass

我把Glass的集合称作舞台。理论上每一个舞台中Glass的数量是无上限的。我并不推荐一个舞台上有超过3个Glass。最理想的情况是,顶层Glass用来捕获外部事件与放置可交互元素,下层Glass用来放置数据驱动型的元素。

9月9日
2019年
2.3分钟
Airglass.js开发笔记:订阅
Airglass

Airglass有层叠玻璃的概念,为此我创建了Glass类,并让Renderer类继承Renderer。Glass类实现了处理原生与非原生的合成事件的订阅与退订功能。每一层渲染器都可以订阅其他任何渲染器发生的事件。最顶层的渲染器用来捕获和发布外部原生事件,就像最上层玻璃能感知光线穿过,层层传递给下层玻璃。

9月8日
2019年
3.9分钟
Airglass.js开发笔记:监听
Airglass

Airglass要做的是FUI/HUD风格UI组件库。用户界面自然少不了对界面交互的支持。利用事件委托的方式,canvas将监听到的鼠标和触摸事件派发给canvas中绘制的虚拟元素。我甚至让开发者能够订阅虚拟元素触发的各种定制化事件。从而实现用户操作canvas画布上虚拟UI的可能。

9月6日
2019年
2.0分钟
Airglass.js开发笔记:起步
AirglassTypescript工程与管理

Airglass是我在2017年的夏天想要启动的独立项目——基于Canvas技术开发一款支撑FUI/HUD视觉风格用户界面的基于面向对象思想与方便扩展组件的基础组件库。从本篇开始我会一边开发Airglass.js一边详解开发过程。

按月份速查已发布想法。查看3D柱状可视化
想法关键词
陈帅华个站动态先知道,请关注一个教程。
一个教程微信个人订阅号

Leo陈帅华 · 2月13日留言 · 去围观

测试

陈帅华 · 10月9日留言 · 去围观

系统升级到macOS Catalina后,终端默认使用zsh shell,虽然之前没有听说过这个命令行工具,不过需要认识新的配置文件.zshrc,默认的每启动一个命令行都会执行这个配置文件。所以source .bash_profile需要每次启动新命令行工具后自动执行一次。

jannylz · 9月11日留言 · 去围观

请问在线体验入口在哪里?可否标注矩形框,可以拖拽类型的