试验作品 / 创意编程 / 代码片段
JS原型链可视化

基于Airglass.js

图像区域切割

基于Airglass.js

极坐标配置雷达地图

地图布置题目体验设计

趣玩周易64卦

太极图随机测卦、爻辞

游戏感排行榜

Canvas排行榜动效设计

3D地理信息雷达

基于Three.js

类星系关系可视化

Canvas事件触发机制研究

科技感波动蜂窝

探索重复的力量

奖杯喝彩

Canvas绘制复杂形状

萤光漂浮

Canvas动效

近期发布的想法探索我的全部想法→
2020年
1月21日
1.4分钟

我的个站全端开发日志

个人网站

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

2020年
1月19日
0.9分钟

书法练习合集

国学书法

书法练习合集

2020年
1月14日
1.9分钟

尤克里里指弹《小情歌》前奏

涂鸦尤克里里

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

2020年
1月5日
11.1分钟

Fabric.js矩阵变换

Fabricjs

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

2020年
1月2日
8.4分钟

搭建React Native编写Android/iOS原生应用环境

ReactAndroidSDKXcodeAndroidStudioiOSReactNativeExpoCLI

前端是个广义的概念,前端是离用户最近的一端,Web前端,移动端,桌面端等等。一套代码,多端共用,这已不是新鲜事,许多框架都在努力构建着大前端的未来,RN也是如此,从Web前端开发平滑步入桌面前端和移动前端原生应用软件开发。

2019年
12月30日
13.9分钟

用Koa重构网站后端

Koa

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

2019年
12月29日
5.6分钟

记录博客搜索想法功能实现过程

AirglassCanvas数据可视化

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

2019年
12月22日
4.0分钟

AntV/F2使用记录

数据可视化AntV

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

2019年
12月6日
25.8分钟

文章目录速查

JavaScriptAirglassCanvasNodejsCSS数据可视化微信公众号FabricjsWebSocketHTML5

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

2019年
11月29日
9.2分钟

可视化想法出现频率

独立作品AirglassCanvas数据可视化

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

2019年
11月27日
2.1分钟

申请微博开放平台网页应用

Nodejs

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

2019年
11月25日
1.9分钟

观央视纪录片《苏东坡》有感

国学

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

2019年
11月24日
3.3分钟

微信公众号开发前的准备

微信公众号

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

2019年
10月30日
5.3分钟

基于Airglass重构图像标注工具

独立作品Airglass

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

2019年
10月25日
11.1分钟

生命游戏开发记录

CanvasAirglass游戏独立作品

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

2019年
10月17日
4.0分钟

Airglass.js现已支持关键帧动画

Airglass动效GIF动画

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

2019年
10月6日
9.8分钟

探索JS原型链规律性可视化

JavaScript独立作品Airglass数据可视化大屏

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

2019年
10月4日
4.2分钟

定制地图与雷达波动效

CanvasAirglass数据可视化

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

2019年
9月23日
9.4分钟

节点关系可视化

CanvasAirglass数据可视化

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

2019年
9月12日
6.9分钟

Airglass初体验

Airglass

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

2019年
9月10日
3.8分钟

Airglass.js开发笔记:最佳实践前奏

Airglass

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

2019年
9月9日
2.3分钟

Airglass.js开发笔记:订阅

Airglass

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

2019年
9月8日
3.9分钟

Airglass.js开发笔记:监听

Airglass

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

2019年
9月6日
2.0分钟

Airglass.js开发笔记:起步

AirglassTypescript工程与管理

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

2019年
9月5日
7.8分钟

Fabric.js扩展自定义类

CanvasFabricjs

Fabric.js在 util 命名空间中提供了各种有用的工具函数,其中就包括创建类的函数。使用该函数创建的类,能继承开发者指定的父类的特性,并且还能重写父类的方法以及为新创建的类定义新的方法。比如你可以创建继承了 Fabric 中既有的矩形的新类,并且你可以让新创建类在画布上渲染时,在绘制矩形的基础上再绘制一段文本。

2019年
8月26日
5.5分钟

探索Web前端获取音视频流录制视频

独立作品WebAPI

最近整理我的一些独立项目,考虑用音视频的形式记录感想,起初在用Mac系统自带的录屏软件,后来计划能不能用web前端技术开发一款在线录制音视频的工具,小有成果,先用文字形式记录下来。

2019年
8月22日
2.4分钟

在线图像标注工具

独立作品Canvas

基于canvas技术在图像上绘制多边形,最终得到包含透明通道的裁切后的base64编码图像,以及全部标注点位置坐标数据。

2019年
8月13日
5.1分钟

ThreeJS项目导入Blender3D模型

BlenderThreejs

开源3D制作软件Blender上个月发布2.8版本,用户界面有巨大改变。迫不及待上手新版blender的3D建模与UV贴图。

2019年
8月1日
2.6分钟

我的常用命令行工具安装汇总

NodejsGITGulpNPMdeno命令行

偶尔需要更新命令行工具版本或者更换电脑的时候,许多命令行工具的安装和配置细节已经记不清,所以汇总记录下来。

2019年
7月25日
6.3分钟

图解Arduino流水灯制作过程

涂鸦硬件Android

先回顾Arduino基础,搭配涂鸦图解数字信号与模拟信号,逐步引导了解如果使用Arduino开发板制作了ED流水灯效果。

2019年
7月19日
3.8分钟

图解Arduino硬件开发入门

涂鸦硬件Arduino

由于Ruff的不成熟给开发带来诸多不便,弃坑Ruff拥抱Arduino,从点亮一排LED入门Arduino开发板的学习吧。

2019年
7月10日
1.8分钟

如何完成网站备案

个人网站

阿里云通知我shuaihua.cc无法实名认证,修改了几处备案信息重新备案,并注册shuaihuajun.com新域名,记录我是如何成功备案的。

2019年
7月2日
1.9分钟

理发

生活有道理

和多数人一样,换过数不清的理发店。沟通的误解之美。自2019年初夏起,我尝试自己动手修剪头发。入手一套理发工具,在洗漱台,一手拿电推子,另一只拿一面镜子照后脑勺。我对发型的要求是干净利索,短寸即可,拿自己做实验,掌握修剪头发的技能何乐而不为。在分岔路上做选择,就和选择去理发店还是选择自己动手一样。即使一时不知道自己想要什么,你一定知道自己不想要什么。去掉你不想要的,最后能留下的都是你心头好的。

2019年
6月13日
17.1分钟

我读《瓦尔登湖》

读书书单

1845年7月4日,恰好独立日,梭罗独自走进位于马萨诸塞州康科德镇瓦尔登湖旁的一处森林里。1847年9月6日,梭罗带走了瓦尔登湖。

2019年
6月11日
3.7分钟

微信公号开发: 接收事件推送

Nodejs微信公众号

微信用户与公众号发生交互时,用户操作通过事件推送形式通知开发者在开发者中心设置的服务器,开发者可获取并处理消息。

2019年
6月3日
1.2分钟

世界

生活有道理

事情好玩的地方在于,他(我)们的目的只是赚钱,并不是让我(他)们真正的得到什么实质的东西。 我比任何人都蠢笨,理解不了为何舍近求远购买我本就拥有的东西。 我比任何人都没钱,催着我买了扔了再买,快消品让我支付不起。

2019年
5月18日
0.8分钟

葱花鸡蛋薄脆早餐煎饼诞生记

生活有道理

要养成按时吃早餐的好习惯。把自己做葱花鸡蛋煎饼的过程画了下来,做法和步骤都炒鸡简单,薄薄的香脆煎饼动手做起来。

2019年
5月15日
2.8分钟

Rollup使用指南

Rollup

Rollup常用于构建JavaScript库。Rollup推荐ES6模块导入/出语法。基于Tree-Shaking去除库中导入的冗余代码。生成多种兼容的代码格式。

2019年
5月12日
1.1分钟

JavaScript中如何使用模块开发

JavaScript前端ES6

将不同功用的代码封装到不同js文件中,每一个文件都可以看作是一个模块,模块与模块之间通过ES2015导入导出语法联系。

2019年
5月6日
4.3分钟

如何给文章设计精美封面

UED设计PhotoshopIllustrator

从我在自己博客网站写下第一篇文章时起,就有先为每篇文章设计一张精美封面的习惯,如今也有100多张了,本篇记录我是如何制作封面的。

微博登录  Github登录
2015-2020年各月发布想法速查:3D可视化
主题想法泡泡
有工作推介或咨询请加我微信 😄
有疑惑加微信交流
有收获可支付宝小额赞赏 😘
有收获可支付宝小额赞赏
精选想法
Airglass.js项目
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
可视化
生活自有“道”理
我的涂鸦
[项目] 在线音/视频流录制工具
[项目] 在线音/视频流录制工具
[项目] Web Audio模块连接
[项目] Web Audio模块连接
[项目] 在线图像取色/配色工具
[项目] 在线图像取色/配色工具
[图解]JavaScript
[图解]JavaScript
[图解]Mithril
[图解]Mithril
[图解]企业项目管理可视化方案
[图解]企业项目管理可视化方案
旧站shuaihua.cc四季概念
旧站shuaihua.cc四季概念
十二生肖&文章标签对应关系
十二生肖&文章标签对应关系
常逛网站
读书369古诗文网中國哲學書国学导航