p5.js 官方地址 https://p5js/

p5.js 是个 JavaScript 创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何其他人！p5.js 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。

p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外，您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图，这包括了 HTML5 物件如文字、输入框、视屏、摄像头及音频。

使用 p5.js Editor 制作您的第一个绘图。

1. 新建 index.html

2. index.html 内容保存为 

<html>
<head>
    <script src="https://cdn.jsdelivr/npm/p5@1.2.0/lib/p5.js"></script>
    <script>
        function setup() {
            createCanvas(400, 400);
        }

        function draw() {
            background(220);
            ellipse(50,50,80,80);
        }
    </script>
</head>
<body>
<main>
</main>
</body>
</html>

3. 浏览器访问 index.html, 完成

更多推荐

p5.js 入门教程