<!-- title: 画一个圆，推开编程的门 -->
<!-- domain: programming -->
<!-- video: https://www.youtube.com/watch?v=FCMxA3m_Imc -->

# 画一个圆，推开编程的门：358万人看过的启蒙课深读

## 一、导语：为什么是画一个圆，而不是打印Hello World

2026年了，AI都能替人写代码了，还有必要聊“编程入门第一课”吗？我的看法是：恰恰是现在，最值得回头看看这一课。因为当“写代码”这个动作越来越便宜，“怎么和计算机打交道”这件事反而变得更重要——而所有人和计算机的第一次对话，几乎都逃不开同一类开场：写一条指令，让机器画点什么东西。

今天要深读的这条视频，是 Khan Academy（可汗学院）计算 courses 里的开场片《What is Programming?》，隶属于他们最经典的《Intro to JS: Drawing & Animation》（JS 入门：画图与动画）课程。据本站素材系统 2026-09-19 与 09-20 两天的抓取快照，这条视频的播放量在 357 万以上——一个没有悬念、没有反转、甚至没有音乐的短课，凭什么被三百多万人看过？我的判断是：它把“编程”这两个字的认知门槛，压到了几乎为零。这篇文章会把这条短片和它身后的整条课程设计拆开来看：它讲了什么、它为什么这样讲、它继承了四十多年教育传统里的哪些遗产、以及它没告诉你但你应该知道的那部分。

## 二、视频背景卡片

## 三、核心内容拆解

### 要点1：编程被压缩成一句话——给计算机写指令

【视频层面】这条开场片做的第一件事，是把“编程”从神坛上请下来：所谓 programming，就是给计算机写一组指令（instructions），计算机逐条执行，产出结果。没有更多玄学。课程选择的指令对象不是数据库、不是爬虫，而是一块画布——你写一条指令，画布上就多一个形状。

【延伸分析】这个定义看似平淡，其实是精心裁剪过的。它刻意绕开了三件初学者最容易翻车的事：配置开发环境、理解语言细节、面对报错信息。传统第一课“打印 Hello World”需要先搞懂字符串、控制台、程序入口这些概念；而“画一个椭圆”只需要让学习者接受一个事实：**我写的字，机器会照做**。先建立这个最朴素的因果，再谈其他，这是教学设计上的“先给糖，再给药”。

### 要点2：代码在左，画布在右——让因果可见

【视频层面】可汗学院这套 JS 课程最标志性的设计，是它的编辑器界面：左边是你写的代码，右边是实时运行的画布。视频讲解到哪里，右边就画到哪里；你随时可以暂停，随手改一行代码，右边立刻变样。

【延伸分析】这个“双窗格”布局值得单独一提，因为它解决的是学习编程最深的一个痛点：**反馈太慢**。初学者最大的恐惧不是难，而是“我不知道我写的东西到底发生了什么”。代码与结果同屏、因果链路短到零点几秒，学习者的大脑里就建立起“指令→效果”的直接映射。后来大量在线编程产品（各种交互式教程、在线 playground）都在抄这个形态，而可汗学院这套课程的骨架，用的是我们下面会讲到的那个老祖先。

### 要点3：改一个数字，就是一堂实验课

【视频层面】课程里最常出现的动作，不是“写出正确代码”，而是“改一个数字看看会怎样”：把半径改大，圆变胖；把坐标改小，图形挪窝。函数后面括号里的那几个数字——位置、宽高——就是最初的“参数”。

【延伸分析】我特别想强调这个设计的深意：它把编程课变成了**实验课**。学习者不是在“背诵语法”，而是在做物理学式的实验——提出猜想（改成 200 会怎样）、动手验证、观察结果。心理学家 Sherry Turkle 和 Seymour Papert 在上世纪九十年代就写过，有一类学习者天然是“拼装者”（bricolage）：不先搭理论框架，而是动手摆弄、边玩边懂。传统计算机教育偏爱“计划者”，而可交互画布第一个正式向“拼装者”敞开了大门。你在这条 358 万播放的短片里看到的每一次“改个数字试试”，都是这个教育哲学的回声。

### 要点4：这门课的路线图——从画图到动画到游戏

【视频层面】《Intro to JS: Drawing & Animation》只是可汗学院计算课程的第一站。顺着这条线往后，是《Advanced JS: Games & Visualizations》（进阶 JS：游戏与可视化）和《Advanced JS: Natural Simulations》（自然模拟），从静态画图走向逐帧动画、鼠标交互、小游戏。同一个画布，复杂度一格格往上叠。

【延伸分析】这条路线图背后有个技术心脏值得点破：动画的本质是**循环重绘**——程序每秒几十次（默认约 60 次）地擦掉画布重画一遍，只要每帧挪一点点，你的眼睛就被骗过去了。这个“draw 循环”正是所有游戏引擎的底层心脏，从俄罗斯方块到 3A 大作都逃不开。也就是说，这门入门课在第一周就把学习者领到了游戏工业的原理门口，只是用最温柔的方式说出来。

### 要点5：谱系课——这块画布不是凭空发明的

【延伸分析】（这一条大部分是我的补充，视频本身没时间讲。）可汗学院这套课的画布，用的是 Processing.js——2008 年由 John Resig（jQuery 之父）把艺术家编程语言 Processing 移植进浏览器的作品，Resig 本人后来在 2012 年加入可汗学院主导计算机课程。再往上追：Processing 是 Casey Reas 和 Ben Fry 2001 年在 MIT 媒体实验室造的，目标就是让艺术家不学工程也能用代码画画；而“用编程画画教小孩”这个想法的祖师爷，是 1967 年的 LOGO 语言和它的“海龟画图”——Papert、Feurzeig、Solomon 让一个小海龟听指令爬出图形，Papert 在 1980 年的《Mindstorms》里把它升华为“建造主义”（constructionism）：知识是做出来的，不是灌进去的。这条谱系里还有 Scratch（MIT 媒体实验室 Resnick 团队，2007 年公开），以及 2014 年 Lauren McCarthy 做的开源分支 p5.js。Resnick 总结这类工具的设计原则是九个字：低门槛、高天花板、宽墙——容易上手、能走多远不设限、玩法不设一种。可汗学院这条短片，就是站在五十多年教育技术史肩膀上的那一格台阶。

### 要点6：甜头与代价——画布教不会的那部分

【延伸分析】（有观点的部分。）作为从业视角，我必须给这条课泼半盆冷水：可视化入门的巨大甜头，反过来也是它的天花板。画布教会的是“指令→效果”，但没有教“抽象”——当你想写的东西不再是“画一个圆”，而是“管理一千件商品的库存”时，画布消失了，反馈从一张图变成一堆报错。大量学习者在“画完圆”到“写下第一个数据结构”之间坠崖，这不是他们的错，是课程的断崖。所以我给它的定位是：**它是最好的第一口，不是完整的饭**。第一口的意义是建立“我能行”的自我预期，这个心理账户里的存款，比多背十个语法点值钱得多。

### 要点7：AI 时代回头看，这一课反而更值钱了

【延伸分析】最后把时间拉回 2026 年。当 AI 能一句话生成一整个应用，“学编程还有用吗”成了年度焦虑。我的答案是：这条 358 万人看过的开场片，恰恰给出了 AI 时代最该保留的两个能力——**下指令的表达力**（把“我想要什么”说成机器可执行的明确指令，这正是今天所有提示词工程的雏形）和**改参数看反馈的实验习惯**（AI 给了代码，人要会做实验验证它对不对）。你会发现，AI 时代的高效开发者，工作姿势和那个对着画布改数字的孩子一模一样：提出假设→执行→观察→修正。五十年前的海龟、二十年前的 Processing、今天的大模型，变的只是画布，不变的是这个循环。

## 四、知识结构图

```mermaid
flowchart TD
    A["编程是什么：给计算机写指令"] --> B["指令层：代码"]
    A --> C["效果层：画布"]
    B --> D["ellipse 画椭圆"]
    B --> E["rect 画矩形"]
    B --> F["fill 填颜色"]
    C --> G["即时反馈循环"]
    D --> G
    E --> G
    F --> G
    G --> H["改一个参数 看一次结果"]
    H --> I["静态画图"]
    H --> J["动画：循环重绘"]
    H --> K["交互：鼠标事件"]
    H --> L["游戏与可视化"]
```

这条课程背后的技术谱系，用一张图看更清楚：

```mermaid
flowchart TD
    M1["1967：LOGO 海龟画图"] --> M2["1980：Mindstorms 建造主义"]
    M2 --> M3["2001：Processing 艺术家语言"]
    M3 --> M4["2007：Scratch 积木块"]
    M3 --> M5["2008：Processing.js 进浏览器"]
    M5 --> M6["可汗学院：浏览器里的画板课"]
    M3 --> M7["2014：p5.js 开源分支"]
```

## 五、实战启示

**如果你想入门编程（或者被劝退过一次）**：别再从“装环境”开始了。直接搜可汗学院的 Intro to JS 课程，或者用 p5.js 的在线编辑器（p5js.org，打开浏览器就能写），把第一晚的目标定为“画出一个我自己调出来的图”。规则只有一条：每写一行，就看一眼结果。用这条 358 万人验证过的路径，先拿到“我能行”，再谈别的。

**如果你是家长或老师**：这条课最值得抄的不是 JavaScript，而是它的**反馈设计**——把“知识点清单”换成“反馈循环”。孩子改一个数字、立刻看到一个变化，这比讲十遍“变量很重要”都有效。评价一个编程课的好坏，先看学生动手后几秒能看到结果：秒级反馈的课，基本不会太差。

**如果你是带新人的工程师、或者正在用 AI 写代码**：把“改参数看反馈”变成肌肉记忆。新人的第一周，与其读架构文档，不如给一个有实时预览的小改动（改样式、改一行逻辑）让他先建立因果感；用 AI 生成代码后，最可靠的动作也是同一个——跑起来，改个输入，看输出对不对。工具换了几代，工程师的“实验姿势”五十年没变过。

## 六、延伸学习路径

1. **可汗学院计算课程主线**（khanacademy.org/computing）：从 Drawing & Animation 到 Games & Visualizations 再到 Natural Simulations，一条线走完“画图→动画→模拟”。
2. **p5.js**（p5js.org）：Processing 的开源 JS 分支，对艺术家和初学者最友好，在线编辑器零安装。
3. **Scratch**（scratch.mit.edu）：如果是给更小的孩子，积木式编程的低门槛之王。
4. [Learn To Code Like a GENIUS and Not Waste Time — The Coding Sloth](https://www.youtube.com/watch?v=q-_ezD9Swz4)：300 多万播放的编程学习方法课，补上“入门之后怎么学不浪费时间”的方法论。
5. [Programming Basics: Statements & Functions — CrashCourse CS #12](https://www.youtube.com/watch?v=l26oaHV7D40)：换一个视角补基础概念——语句与函数（本站 2026-09-21 已有专文深读，可对照阅读）。

## 七、一句话总结

这条短课最大的价值，是把“编程”翻译回了它本来的样子——写下指令、看到结果、改一个数字再来一次：五十年来所有编程教育的甜头，都是从画一个圆开始的。
> 本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵**爱卫生**（微信ID: gprshome201101）维护，聚焦5G/6G核心网、3GPP标准解读、通信前沿技术深度分析。
> 出版作品有《5G核心网原理与实践》《IMS原理与实践》等4本通信专业书籍。知识星球「51学通信」提供深度技术答疑和行业洞察。

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)
