当前位置：首页 > news >正文

快速绘制数据集终极指南：创意编程与Processing、p5.js集成教程

news 2026/3/26 19:56:00

快速绘制数据集终极指南：创意编程与Processing、p5.js集成教程

【免费下载链接】quickdraw-datasetDocumentation on how to access and use the Quick, Draw! Dataset.项目地址: https://gitcode.com/gh_mirrors/qu/quickdraw-dataset

Quick, Draw! Dataset是一个包含数百万手绘图像的开源数据集，为创意编程和机器学习项目提供了丰富的视觉素材。本指南将教你如何轻松获取、处理并在Processing和p5.js中使用这些有趣的手绘数据，开启你的创意编程之旅。

什么是Quick, Draw! Dataset？

Quick, Draw! Dataset源自Google的"快速绘制"游戏，包含来自全球用户的345个类别的手绘图像，从简单的"苹果"到复杂的"埃菲尔铁塔"，每个类别都有数千幅手绘作品。这些数据以多种格式提供，适合不同层次的开发者使用。

图：Quick, Draw! Dataset中的手绘图像示例，展示了多种类别和风格的手绘作品

数据集核心内容与结构

数据集包含以下关键组成部分：

类别列表：categories.txt文件中列出了全部345个手绘类别，从"aircraft carrier"到"zigzag"，覆盖日常生活、动物、植物、交通工具等多个领域。
数据格式：提供两种主要格式
- 简化版（Simplified）：文件体积小10倍，保留核心绘画信息
- 原始版（Raw）：包含完整的时间序列和更多细节点
示例代码：项目提供了多种解析工具，如examples/nodejs/simplified-parser.js和examples/nodejs/binary-parser.js，帮助开发者快速处理数据。

如何开始使用数据集？

1. 获取数据集

首先克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/qu/quickdraw-dataset

2. 了解数据格式

每个类别的手绘数据存储为ndjson格式（每行一个JSON对象），包含以下关键信息：

{ "key_id": "5891796615823360", "word": "nose", "countrycode": "AE", "timestamp": "2017-03-01 20:41:36.70725 UTC", "recognized": true, "drawing": [[[129,128,129,...]]] }

其中"drawing"字段包含手绘的坐标数据，是创意编程的核心资源。

3. 数据筛选与处理

使用项目提供的工具可以轻松筛选和处理数据。例如，筛选出加拿大用户绘制的"face"类别图像：

cat face.ndjson | ndjson-filter 'd.recognized == true && d.countrycode == "CA"' | head -n 1000 | ndjson-reduce > canadian-faces.json

在创意编程中使用数据集

Processing集成步骤

下载并安装Processing
使用Java的JSON库解析ndjson文件
利用 Processing 的绘图函数将"drawing"数据转换为可视化图像

p5.js网页实现

创建基本HTML结构
引入p5.js库
使用fetch API加载JSON数据
在draw()函数中绘制手绘路径

// p5.js示例代码片段 function drawDrawing(drawing) { background(255); stroke(0); strokeWeight(2); for (let stroke of drawing) { beginShape(); for (let i = 0; i < stroke[0].length; i++) { let x = stroke[0][i]; let y = stroke[1][i]; vertex(x, y); } endShape(); } }