我如何使用 GitHub Copilot 学习 p5.js

介绍

因为我大力倡导使用 GitHub Copilot 和其他形式的 AI 辅助编程，人们经常问我同样的问题：“GitHub Copilot 会阻碍学习吗？它会限制我学习代码的能力吗？我会过度依赖它吗？”

对学习受阻、编程能力有限以及过度依赖的担忧不无道理。然而，根据我的经验，有意识地使用 GitHub Copilot 实际上提升了我的编程技能。我是一位经验丰富的 JavaScript 开发人员，我利用 GitHub Copilot 来提高 Python 的读写和调试能力。虽然我成功地将现有的编程技能与 GitHub Copilot 的代码生成功能结合起来，但我并不擅长用语言解释我是如何将其用作学习工具的。在与开发人员朋友的交流中，甚至在最近的一次会议演讲中，我都感觉自己无法提供令人信服的证据来证明它对我有效，并且对其他人也有效！我无法清晰地表达自己的想法，这让我感觉自己像是在盲目地为一家公司的产品代言，仅仅因为我在那里工作。我想证明它作为学习工具的价值，而不是作为开发者的拐杖。无论我们喜欢与否，生成式人工智能都已成为现实并不断发展。我们可以选择畏缩不前，也可以选择学习如何利用它来造福社会。

在这篇博文中，我旨在有效地阐述这种方法。写作有助于我整理思路，因此我分享我的见解，希望能对他人有所帮助。虽然我写作的主要目的是为了自己，但我相信，使用公司提供的工具并分享最佳实践也是有效开发者布道的一部分。通过了解如何负责任地将 GitHub Copilot 用作学习工具，读者可以探索更多 AI 辅助编程的应用场景。在本文中，我将以我目前使用 p5.js 的经验为例，阐述如何使用 GitHub Copilot 来学习编程语言或框架。

p5.js是什么？我为什么要学习它？

P5.js 是一个开源的 JavaScript 库，用于进行创意编程，其重点是使编程变得易于上手和包容。

我选择学习 p5.js，是为了重新点燃我沉寂已久的创造力。自从学会编程后，我就停止了发挥自己的创造力。我逐渐明白，创造性编程的目的是创造富有表现力的作品，而非仅仅追求功能性，而这正是我生活中所需要的。我渴望创作纯粹的表达性作品，不受迎合大众或满足功能性需求的束缚。摆脱诸如修复 bug 会影响公司财务状况，或担心博客文章中对我的演示作品实用性的潜在批评等顾虑，让我感到无比自由。

什么是GitHub Copilot？

它是一款人工智能结对编程工具，能够从注释和代码中提取上下文信息，并立即建议单个代码行和整个函数！

如果您想了解更多信息，以下是我之前撰写的一些关于 GitHub Copilot 的文章：

以下是一些我没写过的关于GitHub Copilot的其他信息丰富的文章：

我如何学习编程概念

在深入探讨如何使用 GitHub Copilot 进行学习之前，我想先澄清一些关于学习编程概念的误解。根据我的经验，开发者们往往有一套固定的编程学习方法，这可能会让他们对 GitHub Copilot 的学习方式有所抵触。每个人的学习方式都不同。有些人通过实践学习，有些人则通过观察学习。然而，我认为我们想象中学习编程语言的方式与实际学习编程语言的方式之间存在差异。以下是一些例子：

预期——学习编程很简单

回想起我的编程学习经历，我记得那是一段非常直接的经历，大概是这样的：

我听了一位讲师（大学、训练营或在线视频）介绍一个概念。
我观看了讲师演示这个概念。
我把课堂上学到的知识运用到了作业中。

现实情况是——软件工程是一个非线性的职业发展道路，涉及多个步骤。

事实上，编程是一个持续的、非线性的过程。“知识诅咒”或“知识偏见”常常让我们忘记学习编程的真实过程。“知识诅咒”指的是这样一种认知偏差：拥有某一领域知识或专长的人，往往难以记住或准确评估新手或仍在学习该领域知识的人所面临的困难和挑战。

我刚开始教初学者编程的时候，有时会感到很沮丧。为什么他们不能很快理解盒模型呢？我给他们展示了一个既有趣又全面的图示。他们应该能明白才对。

后来我才意识到，当初我刚开始学编程的时候，CSS盒模型对我来说有多么令人困惑。我记得有些资深工程师至今还会把内边距和外边距搞混。而且我还记得，我每天都还在为其他一些概念而苦恼（比如，我仍然会把useEffect钩子和Promise.all()方法搞混）。

实际上，学习编程包括排查故障、阅读文档、复制代码片段、浏览 Stack Overflow，以及在作业中应对代码运行不正常带来的挫败感。学习过程中的这一方面常常被忽视，但却是掌握一门新的编程语言或框架时常见的经历。即使在今天，当我使用新技术时，仍然会遇到类似的挫折。

期望——要想提高代码编写能力，就多写代码。

对于希望提高编码技能或学习新编程概念的新手和经验丰富的开发人员来说，最常见的建议之一就是编写更多代码。

现实情况是——通过阅读代码来提高你的编程技能。

编写更多代码固然有益，但阅读代码更胜一筹。我的朋友拉蒙·乌伊多布罗向我推荐了一本名为《程序员的大脑》的书。

菲莉安·赫尔曼斯 (Felienne Hermans) 的演讲《每个程序员都需要了解的认知知识》(What Every Programmer Needs to Know about Cognition) 中提到，菲莉安承认编写代码固然重要，但她也强调，我们这个领域对阅读代码的重视程度不够，相关的指导也不足。她认为应该个性化学习，这样才能更好地理解代码，提升短期记忆、工作记忆和长期记忆，从而成为更优秀的程序员。观看菲莉安的演讲，了解更多信息！

我认为，虽然你可能无法总是理解代码片段，但阅读代码是有帮助的，这样你就可以识别代码符号，并随着时间的推移减少被代码压垮的感觉。

期望——你必须理解你编写的每一行代码的原因。

虽然我认为代码理解能力至关重要，但总会有我们看不懂代码的时候，而这种理解能力是可以随着时间推移而提高的。我以前做软件工程师时，最让我感到沮丧的事情之一就是我的同事希望我能理解我写的每一行代码。

对方：你为什么写这个？
我：我也不确定。这是我在网上看到的。我觉得这个方法挺有意思的，但我不太明白。
对方：别随便抄袭网上的东西。

你或许会同意我以前的同事的观点，他们说的也有一定的道理，但请阅读下一段，了解为什么我并不完全同意这种想法。

现实情况是——复制代码和流程助长了仪式化学习。

我发现很多工程师喜欢先了解“为什么”，再去了解“怎么做”。而我呢，则更喜欢先学习如何做某件事，然后再去理解为什么要做这件事。这样更容易理解。就像我之前提到的，每个人的学习方式都不一样。

举个例子：从 2018 年 1 月到 3 月，整整三个月，我虽然知道如何将代码推送到 GitHub，但却完全不理解那些命令的含义。我为什么要输入它们？我一头雾水。我只知道需要在终端输入这些命令才能把代码上传到 GitHub。然而，每当遇到问题，比如因为没有仓库访问权限而无法推送，或者遇到合并冲突时，我都会上网搜索相关问题，了解解决方案以及每个命令的工作原理。几个月后，我终于明白了这些命令的含义，也知道如何解决与这些命令相关的问题。这种方法并没有阻碍我的学习，因为我现在就职于目前最流行的 Git 仓库托管服务商。

这并非一种人为创造的学习方法。这种方法被称为仪式化学习。它指的是遵循一系列指令或步骤，而无需理解其背后的原理或原因。随着时间的推移，当你积累更多经验并接触更多相关内容时，你的理解会逐渐加深。

GitHub Copilot 如何帮助我学习

为了清晰起见（也为了让我自己感觉高大上），我将使用 GitHub Copilot 学习新编程概念的框架命名为：AI 驱动学习。它包含 5 个步骤：

概念伪编码
语法熟悉
迭代
人工智能橡皮鸭
自主申请

让我们深入了解每个步骤，以了解它们的含义以及如何应用它们！

概念伪编码

在为 2022 年 GitHub Universe 主题演讲规划我的部分时，我发现了概念伪代码的重要性。我与CEO 的技术顾问Jonathan Carter合作，目标是创建一个有趣且直观的 GitHub Copilot 演示，使其能够在规定的 5 分钟时间内完成。

在 Slack 的头脑风暴会议上，我突然灵光一闪！为什么不利用 p5.js 创建一个镜像来展示 GitHub Copilot 的功能呢？Jonathan 很喜欢这个想法，一切准备就绪。但有一个小小的难题——我之前从未用过 p5.js。我当初为什么会提出这个建议呢？不过，一丝希望浮现。也许我能很快上手？它能有多难？或许不到一个小时就能学会。现在我看着 p5.js 的代码示例，却发现里面有很多数字，这让我很困惑。这是数学吗？

在与 Jonathan 几次尝试交换屏幕截图和屏幕录像后，我们制定了一个方案，在文件顶部添加一条注释，向 GitHub Copilot 提供我们希望它构建的内容的上下文信息。注释内容如下：

/* 
Draw a  draw a green house, 
with a blue roof, 
a red door,
 and two windows 
*/

这帮助我分解了 p5.js 创建的不同元素。

就像变魔术一样，GitHub Copilot 完全按照指令执行了。

这个过程帮助 GitHub Copilot 理解了我们期望的结果，也帮助我这个程序员更清晰地认识到自己想要实现的目标。虽然伪代码在大学、编程训练营和面试中经常被强调，但一旦进入行业，它往往会被忽视。通过编写提示性的注释，为 GitHub Copilot 提供上下文信息，开发者可以更深入地思考应用程序的功能和结构。

为了进一步说明这一点，让我们通过安装p5.js和GitHub Copilot并编写一个高级提示来绘制一个冰淇淋蛋筒，从而创建一个我们自己的示例：


/* draw a light brown ice cream cone with

- a scoop of light pink ice cream

- a red cherry on top

*/

语法熟悉

在您输入评论或代码后，GitHub Copilot 可能会建议一些代码。我们称之为“幽灵文本”。您可以按 Tab 键接受这些幽灵文本。虽然许多开发者承认使用 Tab 键浏览代码可以提高效率，但他们也担心不手动输入代码会降低他们对语法的记忆，尤其对于初学者而言。

意图在这里起着关键作用。虽然你无需主动输入代码，但让 GitHub Copilot 生成代码可以让你接触到该语言的语法和典型文件结构。在这个阶段，你无需完全理解代码，但持续接触有助于避免感到陌生。这种接触能帮助你的大脑更有效地分解代码，从而加深理解。

为了更好地说明我的观点，我将理解复杂词汇与通过熟悉语法来理解代码进行类比。

我不怕生僻或晦涩的词汇。或许朗读它们并非我的强项，但我的大脑能够很快理解词义，这得益于我中学时学过拉丁语。比如，“soporific”这个词，我可以推断出它的意思是使人昏昏欲睡。“sopor”的前半部分是拉丁语，意思是“深度睡眠”。“fic”的后半部分是拉丁语，意思是“创造”。即使不熟悉拉丁语，这篇文章的读者或许也能推断出这一点。他们可能从“fiction”（虚构作品）这个词中认出“fic”，而“fiction”也意味着凭空创造或构思。

就像我之前掌握的拉丁语知识能帮助我根据前缀和后缀解读复杂的单词一样，熟悉代码语法也能帮助你推断含义和上下文。语法学习还能带来其他好处，它能让开发者接触到各种可以跨语言应用的编程概念。虽然具体的语法可能有所不同，但其基本原理却保持一致。这种接触能够拓宽开发者的思维，鼓励他们探索不同的方法和解决方案，并促进知识的迁移。

请看这个 GIF 动画，GitHub Copilot 生成了绘制冰淇淋甜筒的代码：

虽然 GitHub Copilot 并没有生成完美的冰淇淋甜筒，但我从中了解了一些关于文件语法和结构的知识：

P5.js 文件以设置函数开头。
设置函数使用了一个名为 createCanvas 的方法，我可以推断该方法会初始化我们创建所需的画布。
P5.js 文件还使用一个名为 draw 的函数，我们绘图的所有元素都将存放在这里。
我可以通过调用 background 方法并传入 RGB 颜色代码来确定背景颜色。
我可以通过指定形状名称并传入数字来创建三角形、椭圆和弧线等形状。不过，目前我还不完全确定这些数字的具体作用。我猜测它们决定了形状的大小和位置。
我可以使用 fill 方法并传入 RGB 颜色代码来给形状着色。

通过有意识地熟悉语法，开发人员可以利用他们先前的知识，进行推断，并在不同的编程概念之间建立有意义的联系。

迭代

在与开发者朋友的交流中，GitHub Copilot 生成的代码存在缺陷的问题经常被提及。他们认为这会误导初学者，并让他们养成不良的编程习惯。我承认，盲目信任代码生成器生成的错误代码确实会误导初学者。然而，我认为无论是否使用 GitHub Copilot，接触不完善的代码都是学习过程中不可或缺的一部分。在探索一门新的编程语言时，尤其是在职业生涯初期，我经常会从 Stack Overflow 复制代码，浏览文档，然后随意粘贴代码片段。有时，我复制的代码甚至无法运行，但它仍然提供了一个起点，帮助我理解当前的问题。随着时间的推移，我会学习更好的实践方法，并逐步提升自己的技能。

同样的原理也适用于 GitHub Copilot。在上面的例子中，GitHub Copilot 试图生成一个浅粉色冰淇淋球，上面放一颗樱桃。然而，生成的三角形尖角朝上，而通常情况下，圆锥的尖角是朝下的。虽然可以说 GitHub Copilot 误导了我，但如果没有它的指导，我根本不知道该如何创建一个三角形。这给了我一个调试和迭代生成代码的机会，使我能够学习并加深理解。

虽然我可能不完全理解所使用的数值符号，但我可以修改这些值以达到想要的结果。

请查看下面的 GIF 动画，了解我是如何调整数值以使三角形沿所需方向翻转的：

当 GitHub Copilot 提供包含少量错误或缺陷的代码建议时，它允许学习者采用实践操作的方式。通过尝试运行建议的代码，识别并解决遇到的问题，并随后改进代码以纠正错误，学习者可以获得在给定框架内编写和编辑代码的实践经验。

人工智能橡皮鸭

经过反复尝试，我终于得到了想要的结果，但我仍然不太理解其中的数值表示法，也不明白它为什么有效。我现在明白每个三角形的数字代表顶点数，但我不知道具体的公式。在这种情况下，我很想和比我更懂行的人交流，以便更好地理解，但我不想打扰任何人。或许我可以上网搜索，但搜索结果并不总是能解答我的疑问。

幸运的是，我可以使用名为 Copilot Chat 的工具与我的 AI 结对程序员进行对话。在 GitHub，我们有一套名为 Copilot X 的 Copilot 工具集。这些工具旨在帮助开发者超越编辑器的局限，因为我们深知开发者的工作远不止编写代码。Copilot X 中的一款产品就是 Copilot Chat。Copilot Chat 是一款 IDE 扩展，提供类似 ChatGPT 的体验。它利用编辑器中打开文件的上下文，提供类似 ChatGPT 的体验。根据我的经验，高亮显示相关的代码行可以提升 Copilot Chat 的性能。Copilot Chat 可以生成代码、单元测试、解释等等。点击此处了解 Copilot Chat 2023 年 6 月的最新更新。试试 Copilot Chat 的斜杠命令，充分发挥它的优势！

针对我们目前的情况，我将使用 Copilot Chat 来帮助我更好地理解生成的 p5.js 代码。我会提出一些澄清性的问题，例如：

你能给我解释一下这行代码吗？triangle(100, 200, 300, 200, 200, 400);

所以该方法的结构就是这样的吗triangle(x1, y1, x2, y2, x3, y3)？

画布有多大？我如何知道每个坐标的位置？

通过与 Copilot Chat 的交流，我学到了一些 p5.js 的基础知识：

createCanvas(400, 400) 方法用于定义画布的宽度和高度。
画布中笛卡尔坐标系的运用
三角形函数的顶点顺序为：x1、y1、x2、y2 和 x3、y3
arc 函数的表示法：arc(centerX, centerY, width, height, startAngle, stopAngle)
创建省略号的语法：ellipse(centerX, centerY, width, height)

如果您想创建此修改后的图形，以下是代码：

/* draw a light brown ice cream cone with

- a scoop of light pink ice cream

- a red cherry on top

*/

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

function draw() {
    // light blue background

    background(200, 220, 255);

    // light brown ice cream cone

    fill(255, 200, 100);

    triangle(100, 200, 300, 200, 200, 400);

    // light pink ice cream half-circle

    fill(255, 200, 200);

    arc(200, 200, 200, 200, PI, TWO_PI);

    // red cherry

    fill(255, 0, 0);

    ellipse(200, 100, 30, 30);
}

凭借新获得的知识，我准备挑战自我，创造更多！

自主申请

现在我已经学会了如何绘制形状并控制形状的位置，尤其是三角形，我准备迎接一项更具挑战性的任务：绘制我父母的国旗。圭亚那国旗的主要特征是不同大小和颜色的三角形。

这是我尝试画的圭亚那国旗。

以下是该标志的代码：

// draw a Guyanese flag

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

function draw() {
    // background is green
    background(0, 153, 0);
    stroke(0);
    strokeWeight(2);
    flag();
}

function flag() {
    yellowTriangle();
    redTriangle();
}

function yellowTriangle() {
   // yellow triangle and white outline
   stroke(255, 255, 255);
   strokeWeight(4);
   fill(255, 255, 0);
   triangle(0, 400, 0, 5, 715, 200);
}

function redTriangle() {
    // red triangle and black outline
    stroke(0, 0, 0);
    strokeWeight(7);
    fill(255, 0, 0);
    triangle(0, 400, 0, 5, 350, 200);
}

我继续运用形状操控的知识，制作了一个戴着高顶礼帽、长着胡萝卜鼻子、还带有几个按钮的雪人。在探索动画和用户交互的过程中，GitHub Copilot 和 Copilot Chat 帮了我很大的忙。这让我能够添加一个由随机生成的绿色方块组成的背景，现在用户可以通过在画布上拖动鼠标来绘制随机的棕色线条。

看看我做的雪人！

以下是可供您自行修改的代码：

// draw a snowman

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

function draw() {
    // background is dark blue

    // background(0, 0, 102);

    stroke(0);

    strokeWeight(2);

    snowman();
}

function snowman() {
    changeBackground();

    // call all functions

    body();

    eyes();

    nose();

    buttons();

    hat();

    arms();
}

function body() {
    // snowman body
    fill(255, 255, 255);
    ellipse(200, 300, 150, 150);
    ellipse(200, 200, 100, 100);
    ellipse(200, 120, 75, 75);
}

function eyes() {
    // snowman eyes
    fill(0, 0, 0);
    ellipse(185, 110, 10, 10);
    ellipse(215, 110, 10, 10);
}

function nose(){
    // snowman nose
    fill(255, 102, 0);
    triangle(200, 120, 200, 130, 220, 125);
}

function buttons() {
    // snowman buttons
    fill(250, 0, 0);
    ellipse(200, 180, 10, 10);
    ellipse(200, 200, 10, 10);
    ellipse(200, 220, 10, 10);
}

function hat() {
    // snowman hat
    fill(250, 0, 0);
    rect(150, 65, 100, 20);
    rect(170, 33, 60, 30);
}

// create snowman arms

function arms() {
    stroke(102, 51, 0);
    strokeWeight(5);
    line(150, 200, 100, 150);
    line(250, 200, 300, 150);

}

function changeBackground() {
    // make the background be random green squares
    for (var i = 0; i &lt; 100; i++) {
        fill(0, 255, 0);
        rect(random(400), random(400), random(50), random(50));
        frameRate(2);
    }
  }

  // draw with mouse

function mouseDragged() {
    fill(0);
    ellipse(mouseX, mouseY, 10, 10);
    return false;
}

基于我对形状操控和动画的理解，我开始尝试创作一幅3D绘图，并没有预设具体的计划或目标。我让p5.js的生成特性引导我，专注于开发3D元素、添加阴影和光照效果。

这是我的3D作品。它提供了空间！

请查看以下代码：

// create a 3d sphere with WEBGL and p5.js

let angleX = 0;

let angleY = 0;

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

function draw() {
    // background is dark blue
    background(0, 0, 102);
    // set up lighting
    ambientLight(60, 60, 60);
    pointLight(255, 255, 255, 80, -100, 100);
    // set up material properties
    specularMaterial(250);
    shininess(20);
    rotateX(angleX);
    rotateY(angleY);
    // draw 3D sphere
    noStroke();
    fill(255, 204, 0);
    sphere(100);
    // draw 3D torus
    noFill();
    stroke(255, 204, 0);
    torus(200, 200);
    angleX += 0.01;
    angleY += 0.02;
}

经过之前的学习，我现在能够独立运用所学的知识和概念进行编码。通过反复练习伪代码、熟悉语法、迭代开发以及进行人工智能模拟测试，我对 p5.js 的基础知识有了直观的理解。

结论

无论你是编程新手还是经验丰富的专业人士，学习和精通编程都是一个持续成长的过程。重要的是要认识到，学习很少是一条直线，它通常涉及多种认知方法，而这些方法往往被忽视。从复制粘贴代码片段到探索新概念，这些方法在我们作为程序员的成长过程中都扮演着重要的角色。通过有意识地运用 GitHub Copilot 等 AI 工具以及其他 AI 结对编程工具，我们可以提升学习体验，并充分利用生成式 AI 的强大功能。

总而言之，人工智能驱动学习包括：

概念伪编码，
语法熟悉化
迭代，
AI橡皮鸭
以及自主学习。

试试 GitHub Coplot，试试我的方法，并分享你对塑造编程未来以及重新定义我们对学习和编程的思考方式的看法。

文章来源：https://dev.to/github/how-im-using-github-copilot-to-learn-p5js-39gh

菜单

分享

我如何使用 GitHub Copilot 学习 p5.js

我如何使用 GitHub Copilot 学习 p5.js

目录

介绍

p5.js是什么？我为什么要学习它？

什么是GitHub Copilot？

我如何学习编程概念

预期——学习编程很简单

现实情况是——软件工程是一个非线性的职业发展道路，涉及多个步骤。

期望——要想提高代码编写能力，就多写代码。

现实情况是——通过阅读代码来提高你的编程技能。

期望——你必须理解你编写的每一行代码的原因。

现实情况是——复制代码和流程助长了仪式化学习。

GitHub Copilot 如何帮助我学习

概念伪编码

语法熟悉

迭代

人工智能橡皮鸭

自主申请

结论

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码

分享

我如何使用 GitHub Copilot 学习 p5.js

我如何使用 GitHub Copilot 学习 p5.js

目录

介绍

p5.j​​s是什么？我为什么要学习它？

什么是GitHub Copilot？

我如何学习编程概念

预期——学习编程很简单

现实情况是——软件工程是一个非线性的职业发展道路，涉及多个步骤。

期望——要想提高代码编写能力，就多写代码。

现实情况是——通过阅读代码来提高你的编程技能。

期望——你必须理解你编写的每一行代码的原因。

现实情况是——复制代码和流程助长了仪式化学习。

GitHub Copilot 如何帮助我学习

概念伪编码

语法熟悉

迭代

人工智能橡皮鸭

自主申请

结论

p5.js是什么？我为什么要学习它？