企业官网建设流程全解析

• 教程
• 文档
• 示例工程

本文是 Coding Train《Code! Programming with p5.js》初学者系列第 1.2 节的配套技术指南，核心主题是 p5.js 官方在线编辑器（Web Editor）的搭建与使用。在 Coding Train 的课程体系与本仓库的代码示例中，Web Editor 是贯穿始终的创作载体——几乎每一节课都附有一个可直接打开运行的在线素描（sketch）项目 ID。读完本文，你将掌握 Web Editor 的项目结构、核心文件（index.html / sketch.js / style.css）、基础绘图流程、多文件组织方法与控制台调试技巧，并能对照本仓库内的大量 P5 示例理解这套工作流。

课程背景：Web Editor 在初学者系列中的定位

本节内容对应_beginners/p5js/1.2-p5js-web-editor.md，是《Code! Programming with p5.js》系列的第二个视频（video_number: 1.2），发布于 2018-09-06，原文档正文一句话概括其目标："In this video, I cover getting set up with and using the p5.js Web Editor."——即围绕 Web Editor 的搭建与使用展开。

整个系列面向计算机编程零基础人群（见 _beginners/p5js/index.md），通过 p5.js 这一面向视觉展示的创意计算环境，讲解变量、条件判断、循环、函数与对象等编程基础。p5.js 运行于浏览器，天然适合在桌面、笔记本、平板与智能手机上展示，因此"打开浏览器就能写代码"的 Web Editor 就成了系列课程的默认开发环境，也是初学者绕开本地安装环节的第一站。

Web Editor 是什么：零安装、浏览器即开即用的创作环境

原文档的tools字段明确列出了本课使用的工具：p5.js Web Editor（官方在线编辑器）。它的核心价值在于：

• 零配置启动：无需下载 Processing IDE、无需配置 Node.js 或本地服务器，打开浏览器即可开始写 p5.js 代码并实时看到运行结果；
• 标准项目骨架：新建素描时会自动生成标准的 p5.js 项目文件结构，与仓库中各 P5 示例的目录组织完全一致；
• 云端保存与分享：作品自动保存在云端，并可通过链接公开分享。

原文档的web_editor: H1898NvwX字段即为本课配套的官方 Web Editor 项目 ID，读者可直接打开该素描对照学习。类似的字段遍布整个课程目录，例如 1.3-shapes-and-drawing.md 的HJ1WjEPwQ、1.4-color.md 的rJ9MQSwvm、1.6-code-comments.md 的H1mj3SwD7、2.1-mousex-mousey.md 的IeblvUQrf等——这说明"在 Web Editor 中打开对应素描"是每节课的标准学习动作。

此外，原文档links字段还收录了一个名为Flip p5 Editor的辅助工具（书签脚本，由 CodingTrain 组织维护），用于辅助调整编辑器界面布局，属于可选的进阶小工具，初学者可暂不关注。

认识 Web Editor 生成的标准项目结构

Web Editor 新建素描后会自动生成一个多文件项目，其结构与本仓库中大量 P5 示例完全同构。以 CodingChallenges/CC_001_StarField/P5/index.html 为例，可以看到标准的入口文件：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>StarField_p5.js</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/addons/p5.sound.min.js"></script> <script type="text/javascript" src="sketch.js"></script> <script type="text/javascript" src="Star.js"></script> <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style> </head> <body> </body> </html>

从这个文件可以拆解出 Web Editor 项目（以及所有 p5.js 项目）的通用骨架：

Web Editor 界面通常分为左侧文件列表、中间代码编辑区、右上预览区与下方控制台（Console）几个区域，播放/停止按钮控制素描的运行与暂停。理解上述文件结构后，就能在编辑器中自如地切换文件、组织代码。

第一个素描：setup() 与 draw() 的基础流程

p5.js 的一切绘图围绕两个生命周期函数展开：setup()（仅在程序启动时执行一次，用于初始化画布）与draw()（默认每秒执行约 60 次，构成逐帧动画循环）。这在 Web Editor 中同样是最基本的骨架。

以仓库中的经典示例为例，CodingChallenges/CC_001_StarField/P5/sketch.js 展示了完整的写法：

let stars = []; let speed; function setup() { createCanvas(600, 600); for (let i = 0; i < 800; i++) { stars[i] = new Star(); } } function draw() { speed = map(mouseX, 0, width, 0, 50); background(0); translate(width / 2, height / 2); for (let i = 0; i < stars.length; i++) { stars[i].update(); stars[i].show(); } }

更基础的一个示例来自 Tutorials/P5JS/p5.js/08/8.01_p5.js_What_is_HTML/sketch.js，仅用三行代码即可完成"创建画布 + 每帧清屏 + 绘制一个红色矩形"：

function setup() { createCanvas(200, 200); } function draw() { background(0); fill(255, 0, 0); rect(100, 100, 50, 50); }

初学者在 Web Editor 中的第一个练习，就是把上述代码粘贴到sketch.js，点击播放按钮观察结果，然后尝试修改createCanvas(200, 200)的尺寸、fill(255, 0, 0)的颜色值或rect(...)的位置参数。后续课程（如 1.3-shapes-and-drawing.md 讲解坐标系与图形绘制、1.4-color.md 讲解 RGB 颜色与fill()/stroke()透明度）都会在这一骨架之上逐步扩展。

多文件组织：把代码拆分到独立的 JavaScript 文件

随着项目变大，把所有逻辑堆在sketch.js里会难以维护。Web Editor 支持像管理普通项目一样新增多个 JavaScript 文件，这也是本仓库大量示例采用的组织方式。

原文档与 6.4-files-web-editor.md 一节直接相关——后者专门讲解如何在 p5.js Web Editor 中将代码组织到多个 JavaScript 文件（其配套素描 ID 为vcgtnfG7）。

仓库中最典型的多文件示例是 CodingChallenges/CC_005_Space_invaders/P5/，其index.html按顺序引入了 4 个脚本：

<script type="text/javascript" src="sketch.js"></script> <script type="text/javascript" src="flower.js"></script> <script type="text/javascript" src="drop.js"></script> <script type="text/javascript" src="ship.js"></script>

对应的分工非常清晰：

• sketch.js：主循环，负责setup()、draw()与全局状态；
• flower.js：外星人（敌人）的类定义；
• drop.js：子弹的类定义；
• ship.js：玩家飞船的类定义。

这种"主文件 + 按职责拆分的类文件"模式，恰好与课程第 6 章面向对象编程（ES6 class）的内容衔接——6.1-opp-intro.md、6.2-classes.md 等课程都会引导在 Web Editor 中新建类文件。在 Web Editor 中新增文件后，只需保证index.html中的<script>引入顺序正确（先引入被依赖的文件或按需排列），即可像本地项目一样工作。

调试与错误处理：Console 与错误信息

初学者写代码难免出错，Web Editor 内置的控制台（Console）是定位问题的第一工具。原课程系列的 1.5-errors-and-console.md 一节专门讲解了 p5.js 控制台与错误消息的阅读方法。

在实践中可以掌握的要点：

• 语法错误：如括号不匹配、漏写分号，Web Editor 会在代码区标注错误位置，并在控制台输出错误类型与行号；
• 运行时错误：如调用未定义的变量或函数，控制台会给出堆栈信息，帮助定位是哪个函数、哪一行触发的；
• console.log()主动输出：在代码中插入console.log(变量)是观察程序内部状态最直接的手段，也是后续课程（如第 2 章变量、第 7 章数组）反复使用的调试技巧；
• print()的 p5.js 等价写法：p5.js 提供print()作为console.log()的别名，在 Web Editor 中同样会输出到控制台。

分享、展示与社区作品：Web Editor 的链接生态

Web Editor 的另一大优势是分享便利。仓库文档中大量收录了社区学习者的作品链接，从这些链接的模式可以看出 Web Editor 提供的公开访问形态：

• https://editor.p5js.org/<用户名>/sketches/<ID>：素描的源码编辑页；
• https://editor.p5js.org/<用户名>/full/<ID>：全屏运行页；
• https://editor.p5js.org/<用户名>/present/<ID>：演示展示页。

例如 1.1-introduction.md 的contributions部分就收录了社区成员提交的 "First p5.js rectangle face"、"First p5.js random circles"、"Drawing face with colours" 等作品链接，2.1-mousex-mousey.md 也收录了大量社区基于该课创作的变体作品。这说明 Web Editor 不仅是一个编码环境，还是一个作品发布与学习交流的载体——你在 Web Editor 中完成的素描，可以一键生成链接分享给他人，也可以作为后续课程的contributions（社区贡献）提交到 Coding Train 仓库中（详见 _Guides/community-contribution-guide.md）。

与仓库 P5 示例的对应关系：在线编辑与本地文件的对照学习

本仓库（website-archive，Coding Train 网站第一版的存档）中的CodingChallenges/、learning/等目录下保存了大量 p5.js 示例的本地副本，它们与 Web Editor 中的素描在结构上完全一致。因此你可以在两条路径之间自由对照：

1. 在 Web Editor 中学习：打开各课程文档web_editor字段对应的素描，直接修改运行，零成本试错；
2. 在仓库中阅读源码：通过 CodingChallenges/ 目录下的P5子目录（如 CC_001 至 CC_167 的 P5 版本）查看完整源码与静态资源，理解项目从"一个空的 Web Editor 素描"逐步成长为完整作品的代码演进过程。

这种"在线编辑 + 本地源码"的双通道学习方式，正是本仓库作为课程存档的最大价值：文档负责讲思路，源码负责给答案。

小结与下一步

通过本课（p5.js Web Editor）的学习，你已经掌握了：

• Web Editor 的定位与优势：零安装、浏览器即开即用、云端保存与分享；
• 标准项目结构：index.html+sketch.js（+style.css+ 按需拆分的多文件）；
• 核心生命周期：setup()一次性初始化、draw()逐帧刷新；
• 多文件组织与<script>引入顺序；
• 控制台调试与错误阅读的基本方法；
• 素描链接的分享形态（sketches/full/present）。

接下来可以沿着课程目录继续前进：setup()/draw()与坐标图形（1.3-shapes-and-drawing.md）、RGB 颜色与透明度（1.4-color.md）、代码注释（1.6-code-comments.md），随后进入第 2 章的变量与交互（mouseX/mouseY，见 2.1-mousex-mousey.md）。每一步都可以回到 Web Editor 中边改边看，让代码即时可见。

• 教程
• 文档
• 示例工程