P5——p5.js的概念和环境搭建

最新推荐文章于 2024-08-18 09:46:22 发布

_洋

最新推荐文章于 2024-08-18 09:46:22 发布

阅读量1.4k

点赞数 1

分类专栏： p5.js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/mantou_riji/article/details/128729633

版权

p5.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

p5.js是什么
p5.js环境引入
- cdn引入
- 下载文件
代码结构

p5.js是什么

p5.js是一个以 Processing语言（java的图形化语言）为基础的JavaScript 库，经常用于互联网数据可视化和互动艺术创作。它继承了Processing语言的初衷，通过简单的编程即可表达数字创意。

p5.js环境引入

cdn引入

cdn地址：https://cdnjs.com/libraries/p5.js
eg：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>

下载文件

可以将cdn对应的文件下载到本地进行引入。
官网下载：https://p5js.org/zh-Hans/download/

代码结构

主要分成两个函数来完成代码的编写：

setup() 主要用于设置程序初始状态的代码（画布大小、刷新频率、色彩模式）
draw() 主要用于图形绘制的功能代码（色彩填充、绘制图像）

代码基本结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      width="device-width,"
      initial-scale="1.0,"
      maximum-scale="1.0,"
      user-scalable="0"
    />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="../p5/p5.min.js"></script>
    <script src="../p5/addons/p5.dom.min.js"></script>
    <script src="../p5/addons/p5.sound.min.js"></script>
    <!-- <script src="sketch.js"></script> -->
  </head>
  <body>
    <script>
      function setup() {
        // 设置程序初始状态的代码（画布大小、刷新频率、色彩模式）
      }

      function draw() {
        // 图形绘制的功能代码（色彩填充、绘制图像）
      }
    </script>
  </body>
</html>