0x00 简介

p5.js 是学习编码和艺术创作的友好工具。p5.js 欢迎艺术家、设计师、初学者、教育工作者以及其他任何人使用！

https://p5js.org/

1x00 Vscode 下载

官网地址：https://code.visualstudio.com/

下载完之后是这样的：

1x01 Vscode 安装

只有两步需要调整，其余部分点击下一步即可：

• 自定义选择安装路径
• 选择需要附加的功能

1x02 Vscode 配置 Live Server

如图所示，安装完成后重启 Vscode。

2x00 开始一个 p5.js 项目

在你想要放置项目的位置新建一个文件夹，名称随意，如图操作。

新建 index.html、style.css、script.js 三个文件。

三个文件内容分别如下，分别复制并保存：

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.5/lib/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />
</head>
<body>
  <main></main>
  <script src="script.js"></script>
</body>
</html>

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

2x01 运行！

如图：

默认的小方形就会显示到浏览器里。

2x02 结束！

到此就配置完了，记得不要输错文件名。