数据可视化

如果你刚接触 p5.js，想画各种四边形（比如正方形、矩形、菱形），可以用 quad() 方法直接绘制。 quad是 "四边形" 的英文

用 p5.js 绘制矩形有个很方便的方法：react()。这个简单的函数能帮我们画出普通矩形、圆角矩形，甚至在 3D 模式下调整细节。

椭圆是圆形的 "灵活亲戚"—— 它可以是胖的、瘦的、横的、竖的，是创作中非常实用的图形元素。p5.js 的 ellipse() 函数能轻松绘制各种椭圆

刚接触 p5.js 时，要是想从最基础的图形入手，point () 会是个不错的选择。它就像一支小巧的画笔，能在画布上精准画出一个个 “点”—— 操作起来很简单，

线段是最基础的图形元素，就像画画时的 “线条”—— 用它可以勾勒轮廓、连接形状，甚至组合出复杂的图案。p5.js 的 line() 函数能轻松画出线段，语法比原生Canvas要好理解多了。

在 p5.js 中，square() 是一个用于绘制正方形的便捷函数。与使用 rect() 绘制正方形相比，square() 更加简洁，因为它只需要指定边长而不需要分别指定宽和高。

如果你刚接触 p5.js，想知道怎么画一个圆，那 circle() 函数就是最适合的入门工具。它简单到只需要 3 个参数就能画出一个圆，甚至能轻松扩展出彩色、动画

在 p5.js 中，arc() 函数用于绘制圆弧，它是创建各种圆形图形和动画的基础。圆弧本质上是椭圆的一部分，由中心点、宽度、高度、起始角度和结束角度等参数定义。

🖼️ 有时候在网页上看到一些很炫酷的小动画，比如loading特效，还能控制这个动画的状态，真的觉得很神奇。 大部分做后端的不想碰前端，做前端的不想碰动画特效

🌈 在数据可视化的世界里，图表是我们最常用的语言。但你是否曾被一张图表的配色误导？ 配色方案的选择往往被看作是一种艺术，但其实它更是一门科学。

本文介绍 Three.js 的基础方法：监听材质加载。 在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载结果。

p5.js 作为一款艺术类的 canvas 库，对颜色方面的支持是挺下功夫的，比如本文要介绍的渐变方法： lerpColor 的作用是混合两个颜色以找到一个介于它们之间的颜色

在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。 本文简单讲讲如何使用 P5.js 播放视频。

这次要介绍几个 p5.js 提供的画布相关的方法：创建画布时的相关配置、让画布绑定指定元素、 重置画布大、删除画布。

本文介绍Annotorious.js的使用方法，实现图片标签注释、框选注释、自定义选框样式、自定义选框形状……

Skeleton.css 是一个只有419行代码的基础库(包含响应式布局)。读懂这么精简的源码真的对小白走出新手村非常有帮助。

🪐 在 Matter.js 世界里，默认是没有边界的，也就是说你往一个方向把物体丢出去，超过画布边界后你可能就找不回那个物体了。本文讲解让丢出去的物体在另一边重新出现的方法～

🌅 本文介绍了如何使用p5.js开发点彩画派绘画工具。如果你对p5.js和点彩画派感兴趣，可以跟着本文动手试试～

🖼️ 本文主要讲解在p5.js中怎么设置背景图。背景图和普通的图片元素之间有哪些差异、使用背景图时有哪些注意点~

👍 OpenLayers.js快速入门教程。从基础概念到实际应用，轻松掌握OpenLayers.js的核心技能。通过实例演示和解释，帮助你迅速上手OpenLayers.js