以下仅列出点开即用的Web端作品，web前端技术延伸领域——包括服务端/移动端/桌面端/硬件编程作品在 一个教程 公众号查看。
©️转载请署名作者并注明本站。禁止商用。
创意编程作品集（部分）
2024 年
...
2023 年
风场
- 风速风向
- Turf.js 反项距离加权插入网格点
- Canvas 像素操作生成UV方向风场图
- leaflet-velocity 插件
等值面
- 等值面图
- Turf.js 反项距离加权插入网格点
- Canvas 像素操作生成图片
- Leaflet.js ImageOverlay
2022 年
ECMAScript / DOM / BOM 原型链可视化
- 原生 Canvas API 实现
- JS 标准内置对象继承关系（原型链）可视化
- 支持自定义表达式
KML 数据优化工具
- 支持导入、操作 KML 文件，CodeMirror 代码编辑器
- 用于解决画出的 KML 线段不连续问题
- 交互地图渲染引擎基于 Leaflet.js
- 自动检测半径内待优化端点
3D瓦片
- Cesium.js
- Blender
课程表组件
- Vue.js
- 支持任务的创建、修改、删除操作
- 动态时间线标识此刻时间
- 当天高亮
- 已开源支持二次定制开发
室内实时定位可视化
- D3.js
- 用于定位设备实时可视化定位人员、设备位置
- 支持可视化定位装置的信号强度📶
- 信号标志防遮挡算法
2021 年
康威生命游戏
- 原生 Canvas API 实现
- WebAssembly 技术用于像素点颜色运算
- C 源代码
- Emscripten SDK 转换工具
河师大理科群1号
- Three.js
- Blender
- Shader
2020 年
甘特图在线编辑工具
- 原生 Canvas
- 拖拽空白处即创建新任务，拖动两端即修改起止时间
- 支持导入导出 JSON、导出甘特图片
GIS石家庄建筑与交通
- Three.js
- maptalk.js
- Blender
- Shader
2019 年
石家庄城市地标与轨道交通
- Three.js
- Blender/BlenderGIS
- Shader
LableMe 图像标注工具
- 原生 Canvas API 实现
- 支持下载裁切图片 —— PNG文件、base64编码
- 支持导出图片标注数据 —— JSON记录所有标记点坐标、标记区域的黑白掩码
2018 年
历史的叶子
- React.js
- 受“轴心时代”现象启发创作，研究特定时期出现大量杰出思想家哲学家与社会事件的关系
- 支持鼠标左右拖拽和键盘 ↑↓←→ 操作
趣玩周易
- 原生 Canvas
- 点击八卦的触发音来自 尤克里里 扫弦音色
- 周易六十四卦完整卦名、卦象、卦辞、爻辞
2017 年
可视化小组内部系统
- HTML5/CSS3
- Canvas
防作弊人造监听卫星网安比武竞赛星际主题
- Three.js
- Blender
网安渗透模式地图编辑
- Canvas
- D3.js
答题关卡可视化快速实现
- Canvas
- D3.js
点位分布世界地图
- Canvas
2016 年
星际主题传送门
- HTML5/CSS3/Photoshop
- D3.js
实时排行榜网安竞赛电子主题
- Canvas
竞赛结果展示
- Canvas
庆祝时刻奖杯动效网安竞赛
- Canvas
电路动效渗透模式电子主题
- Canvas
法向量
- Canvas