Fundamentals of Intelligent Programming

Creative Programmingtowards Future

面向未来的数智编程基础与创意氛围编程

Get StartedView Syllabus

p5.js 环境配置p5.js Environment Setup

VS Code、扩展与本地预览。跟着学习页读完概念、改一段代码，就会得到今天的小作品。VS Code, extensions, and local preview. Read the concepts, edit a line of code, and finish today's small work.

完成 VS Code、p5.js 2.x Project Generator 扩展与 Live Server 本地预览环境配置。Set up VS Code, the p5.js 2.x Project Generator extension, and Live Server for local preview.
进入今天学习Start today 先看材料View materials
实时运行Live previewp5.js 环境配置 · starter sketchp5.js Environment Setup · starter sketch

今天要掌握什么What you will learn today

先读目标，再记关键积木，最后进入编辑器完成挑战。Read the goal, note the key blocks, then enter the editor to complete the challenge.

本课目标Lesson goal

完成 VS Code、p5.js 2.x Project Generator 扩展与 Live Server 本地预览环境配置。Set up VS Code, the p5.js 2.x Project Generator extension, and Live Server for local preview.

VS Code、扩展与本地预览VS Code, extensions, and local preview

关键积木Key blocks
VS Code代码编辑器 / Code editorCode editor
p5.js 2.x Project Generator创建 p5.js 项目 / Create p5.js projectsCreate p5.js projects
Live Server本地实时预览 / Local live previewLocal live preview
动手挑战Hands-on challenge

按 Step 1 到 Step 4 完成环境配置，并在浏览器中打开一个 p5.js 项目。Complete Steps 1 to 4 and open a p5.js project in the browser.

去编辑器Open editor