闪电编程入门课-试听课闪电编程入门课-试听版本节课的目标是光速入门 p5.js ，然后用它整活！编程就是给计算机下达一

第一节课：用代码画画——与计算机对话的第一次创作

本节课专为零基础美术生设计，通过 JavaScript 带你走进编程世界。我们专注于用编程思维解决问题，最终完成一个简单的互动艺术作品。

一、什么是编程？

想象你正在教一个机器人画画：

你需要告诉它第一步画什么，第二步画什么——代码顺序
你需要明确说明用什么颜色、画多大、在什么位置 ——变量、参数
如果画错了怎么办，这些都需要一步步说清楚 ——执行流程

这就是编程！我们用计算机能理解的语言，给出一系列指令，让它完成我们想要的任务。编程，就是为计算机编写一份详细的步骤说明书

二、准备工作

我们将使用一个简单的在线编辑器，无需安装任何软件：

打开浏览器，访问：闪电编程班练习区 - 码上掘金

（备用网址：editor.p5js.org/）

你会看到三个主要区域：
- HTML：构建网站页面结构（就像画架）
- CSS：设置页面样式（就像色盘）
- JavaScript：编写页面交互逻辑（就像绘画步骤）
我们今天的重点是JavaScript，简称JS。

核心目标：

理解编程就是给计算机下达一系列精确的“绘画指令”。
掌握最基本的p5.js “武器库”：
- 设置画布 (createCanvas)
- 设置背景色 (background)
- 画一个圆 (ellipse)
- 画一个矩形 (rect)
初步建立“坐标”和“函数”的概念。
完成一幅简单的数字艺术作品。

三、你的第一个 p5.js 程序

什么是p5.js

引用官网的话：p5.js 是个 JavaScript 的创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何人！

可以点击p5.js 官网寻找更多信息

小白解释版：

JavaScript是一门编程语言，p5.js就是在这门语言上的咒语库（多种法术张口就用，力量强大。Harry Potter里的索命咒：阿瓦达啃大瓜！）

本节课的目标是光速入门 p5.js ，然后用它整活！

让我们从绘制一个简单的形状开始，逐步理解代码的工作方式。

步骤 1：绘制第一个形状

让我们用p5.js，告诉计算机如何画一个圆:

“首先，我们要告诉助手，我们需要多大的画纸。”——createCanvas()
“现在画纸是黑的，我们来给它涂个背景色。”——background()
“在画纸的指定位置，画一个指定大小的圆。”——circle()

createCanvas(600, 600); // 告诉计算机：请准备一张宽400像素，高400像素的画纸
background(180, 180, 180) // 画布背景色 background(r, g, b)
circle(260, 60, 100) // 画一个圆形，坐标为(260,60)，半径为100

点击运行按钮（▶️），你会看到一个灰色的正方形画布和一个白色圆形。

问：上面的代码如何理解？

步骤 2：认识代码结构

首先区分【模板代码】与【核心代码】：

模板代码：

setup()和draw()是每一个p5.js程序都会有的代码

setup(): p5.js 的初始化过程,程序开始时运行一次，就像绘画前的准备工作。
- createCanvas(): 创建画布，传入画布的宽高
- background(): 设置背景色，可以分别传入 r、g、b
draw(): p5.js 的绘画过程，在setup()之后重复运行，里面的代码会以60帧每秒的速度执行（看作是无限翻页动画本，每秒 60 页。）

核心代码：

（真正呈现画面的代码，被draw(){ }的大括号包围）

circle(60，60，100): 创建圆形的函数，括号内的3个参数分别代表：圆心x坐标：60、圆心y坐标：60、直径：100。

动手实践：

尝试修改第一个数字（x 坐标），看看圆会如何移动
尝试修改第二个数字（y 坐标），观察变化
尝试修改第三个数字，改变圆的大小

步骤三：画出点、线、面

相信学艺术的大家已经画了无数次点线面，那么怎么用p5.js编程来画点线面呢？

（把下面的代码复制到云端练习区闪电编程班练习区，看看发生了什么）

  function setup() {
    createCanvas(600, 600)
    background(220, 220, 220)
  }

  function draw() {
    point(100, 100)  //画一个点，确定坐标
    strokeWeight(10) // 点的大小
  }

点：point

模板代码都是重复的，真正变化的代码只有一行：

point(x, y, [z])

point() 接收3个参数，其中 x 和 y 是必传参；如果是在 2D 画布里，z 不需要传。

x 表示点在 x 轴的坐标
y 表示点在 y轴的坐标

线：line

如何画一根线段：

line(x1, y1, x2, y2)

使用 line() 方法会自动将起点和终点连接起来，形成一根线段。

x1 和 y1 代表起点坐标
x2 和 y2 代表终点坐标

三角形：triangle

如何画一个三角形：

triangle(x1, y1, x2, y2, x3, y3)

三角形有3个点，每个点需要用 2个坐标(x和y) 来描述，所以 triangle() 一共要传入6个参数。

填充颜色：fill

  fill(255, 0, 0)   //设置填充色为红色

fill()：设置形状内部的颜色
(255, 0, 0)：RGB 颜色模式，分别代表红色、绿色、蓝色的亮度（0-255）

四、认识函数，神奇的锤子

在编程里面，我们有一把非常厉害的神奇锤子，只需要写下你想要创造的东西名字，加一个括号，用神奇锤子一敲，当！就能立马出现你想要的东西，就一个圆形、一个画布。这个锤子的名字呢，就是函数

一、什么是函数？

函数是一段预先编写好的、具有特定功能的代码块。它就像美术创作中的 “专用工具”：比如画圆的圆规、裁纸的尺子，无需每次重复制作工具，只需直接使用就能完成对应工作。

在编程中，函数的核心价值是 “复用”：比如我们需要画 10 个圆，不用重复写 10 遍画圆的基础代码，只需多次调用ellipse()函数即可。
举个熟悉的例子：

createCanvas(800, 600); // 调用“创建画布”函数，生成800×600的画布
ellipse(250, 250, 100); // 调用“画椭圆”函数，在(250,250)位置画直径100的圆

这里的createCanvas和ellipse是 “函数名”（代表函数的功能），后面的括号()是 “调用符号”—— 写函数名 + 括号，就相当于 “使用这个工具”。

二、函数从哪里来？—— 认识 p5.js 库

我们目前使用的ellipse()、line()、fill()等函数，并非需要自己编写，而是来自p5.js 库。

可以把 “库” 理解为一个 “编程工具包”：就像美术生的画箱里会提前准备好画笔、颜料、调色盘一样，p5.js 库为艺术创作预先封装了大量绘图相关的函数，涵盖 “画基本形状”“调整颜色”“处理交互” 等常用功能。

三、什么是参数？—— 函数的 “具体指令”

只写函数名 + 括号，有时无法完成精准任务。比如调用triangle()画三角形时，必须告诉它 “三个顶点在哪里”； —— 这些函数完成任务所需的 “具体信息”，就是参数。

参数写在函数名后面的括号 () 中。参数决定了函数执行任务的具体方式。

例如，使用 ellipse() 函数画一个圆时，必须告诉它：

圆心的水平位置（x 坐标）
圆心的垂直位置（y 坐标）
圆的宽度
圆的高度

这些具体要求就是通过参数传递的：ellipse(200, 200, 100, 100)

总结：

函数的本质：预先编写好的 “功能代码块”，用于实现特定任务（如画图、设置颜色）；
函数的用法：函数名 + 括号()，括号内可添加参数传递具体信息；
函数的来源：我们目前使用的绘图函数多来自 p5.js 库，无需自己编写；
核心价值：通过 “调用函数” 避免重复写代码，还能像搭积木一样组合多个函数实现复杂效果。

六、创作挑战与总结

挑战：
现在，请大家发挥创意，用我们今天学的指令：

createCanvas(w, h)
background(r, g , b)
circle(x, y, r)
triangle(x1, y1, x2, y2, x3, y3)
fill(r, g, b)

尝试画一个简单的笑脸表情或者任何你喜欢的小图案。

function setup() {
  // 1. 创建画布：宽400，高400
  createCanvas(400, 400);
   // 2. 设置背景为浅黄色（像画纸）
  background(255, 255, 200);
}

function draw() {
  // 3. 设置填充颜色为黄色（笑脸的脸）
  fill(255, 255, 0);

  // 4. 画脸：一个大圆，中心在(200, 200)，直径300
  circle(200, 200, 300);

  // 5. 设置眼睛颜色为黑色
  fill(0);

  // 6. 画左眼
  circle(150, 180, 30);

  // 7. 画右眼
  circle(250, 180, 30);

  // 8. 设置鼻子颜色为棕色
  fill(139, 69, 19);

  // 9. 画三角形鼻子（三个点坐标）
  triangle(200, 200, 180, 240, 220, 240);

  // 10. 设置嘴巴颜色为红色
  fill(255, 0, 0);

  // 11. 用一个倒三角形画“微笑”的嘴巴（可选：也可以画小圆弧）
  triangle(180, 260, 220, 260, 200, 290);
}

总结：

编程是什么？ 是给计算机的精确指令集。
我们今天学了什么？ 如何设置画布、背景，如何画圆、点线面，以及如何设置颜色。
核心概念：
- 函数： 一把神奇的锤子，像 ellipse(), rect() 这样的具体单词，一个单词对应一把武器/一个复杂动作。
- 参数： 括号里的数字，用来控制函数的细节，比如位置、大小、颜色。
展望： 下节课我们将学习如何使用循环创建重复图案，以及如何用代码生成复杂的艺术效果！

课后小作业

在p5.js编辑器里，尝试不看我给的例子，自己从头开始写代码，画一个由不同颜色的图形组成的简单图案。

五、扩展：用p5.js创作（整活）

1.涂鸦画板

按住鼠标在画布上拖动，会在鼠标位置创建 "颜料粒子"，完成不同颜色的涂鸦。

2.鼠标烟花秀

鼠标悬停到画布上，会出现多彩的烟花。

按照下面的方式对代码进行修改，可以观察到：

版本	改动位置	原代码 → 新代码	一句话效果
① 方形碎片	第 19 行	`circle(s.x,s.y,s.s);`	`rect(s.x,s.y,s.s,s.s);`	粒子变正方形
② 海洋蓝调	第 14 行	`c:frameCount%360,`	`c:random(180,220),`	随机冷蓝色系
③ 爆炸反向	第 21 行	`s.x+=s.v; s.y+=s.v;`	`s.x-=s.v2; s.y-=s.v2;`	星星向外飞散
④ 旋转风车	新增 1 行	在 `circle`前加：`push();translate(s.x,s.y);rotate(frameCount*0.02);`	并把 `circle`改成`rect(0,0,s.s,s.s);`最后加`pop();`	粒子原地旋转