乐趣区

关于前端:p5js-使用npm安装p5js后如何使用

jiezi

本文简介

点赞 + 关注 + 珍藏 = 学会了

在《p5.js 光速入门》中都是应用 CDN 的形式去应用 p5.js 的，不太合乎当下的开发习惯。

不论是应用 Vue 还是 React，咱们日常我的项目大部分应该都是应用脚手架的形式进行开发了，依照《p5.js 光速入门》的形式在 module 模式下应用 p5.js，如果不出意外的话必定是会出意外的！

所以，本文会把《p5.js 光速入门》缺省的 module 开发模式补全。

环境搭建

为了不便，我将应用 vite 搭建一个原生我的项目。

创立我的项目

# 1、创立我的项目
npm create vite@latest

# 2、我的项目命名
? Project name: » p5-demo

# 3、抉择框架。这里抉择 Vanilla 创立一个原生我的项目
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

# 4、抉择开发语言。我选了 JS，你看本人需要进行抉择吧
? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript

# 5、初始化并运行我的项目
  cd p5-demo
  npm install
  npm run dev

我的项目就这样创立进去了。

装置 p5.js

进入 p5-demo 我的项目后，应用以下命令装置 p5.js

npm install p5 --save

装置实现后再应用 npm run dev 运行我的项目。

创立画布

在创立画布前，须要先引入 p5.js。引入后能够尝试输入 p5.js 的版本。

关上 main.js 输出以下内容

import p5 from 'p5' // 引入 p5

console.log(p5.VERSION) // 输入以后应用 p5.js 的版本

关上浏览器的控制台能够看到以后应用的 p5.js 版本，在写本文时所用的是 v1.5.0

此时如果你打算像《p5.js 光速入门》那样间接应用 setup() 创立画布是不可能的了，因为在 module 模式下引入的 p5.js 的 setup() 办法并不会间接绑定到 window 上。

你可能会猜 p5.setup() 总能够了吧？

在控制台输入看看 console.log(p5.setup)，会发现输入的是 undefined。

好了，不饶了。

在 module 模式应用 p5.js，须要这样写：

import p5 from 'p5'

let count = 0

const s = (sketch) => {sketch.setup = function() {sketch.createCanvas(400, 400) // 创立画布，传入画布尺寸
    sketch.background(120) // 设置画布背景色
  }

  sketch.draw = function() {let x = Math.sin(count) * 100 + 200
    let y = Math.cos(count) * 100 + 200
    sketch.circle(x, y, 50) // 创立圆形
    count += 0.1
  }
}

new p5(s)

这个例子中，我画了个圆形让它本人转圈圈。

在 module 模式下开发，能够应用 import p5 from 'p5' 的形式引入 p5.js。

应用 new p5(sketch) 的形式创立 p5 程序。

sketch 是传入到 new p5() 的参数，这个参数是一个函数。正如下面的例子中，在这个函数中就能够应用 setup()、draw() 等办法了。

将画布绑定到指定元素里

在应用 new p5() 创立进去的画布都是放在页面的尾部。

在 index.html 文件输出以下内容

<div id="app">
  <div>123</div>
  <div>456</div>
</div>
<script type="module" src="/main.js"></script>

在 main.js 文件输出以下内容

import p5 from 'p5'

const s = (sketch) => {sketch.setup = function() {sketch.createCanvas(400, 400)
    sketch.background(120)
  }
}

new p5(s)

关上浏览器能够看到，画布是绑定在页面的尾部的。

如果想将画布绑定在指定元素里，能够在 new p5() 办法里传入第二个参数，这个参数能够是元素的 ID，也能够是元素自身。

比方：

在 index.html 文件输出以下内容

<div id="app">
  <div>123</div>
  <div id="palette"></div>
  <div>456</div>
</div>
<script type="module" src="/main.js"></script>

在 main.js 文件输出以下内容

import p5 from 'p5'

const s = (sketch) => {sketch.setup = function() {sketch.createCanvas(400, 400)
    sketch.background(120)
  }
}

new p5(s, 'palette')

此时再关上浏览器看看页面

此时画布就插入到指定元素里了。

举荐浏览

👍《p5.js 光速入门》

👍《Fabric.js 从入门到收缩》

👍《console.log 也能插图！！！》

👍《纯 CSS 红砖背景墙》

👍《纯 CSS：动静突变背景【一分钟学会】》

👍《这 18 个网站能让你的页面背景炫酷起来》

点赞 + 关注 + 珍藏 = 学会了
代码仓库

退出移动版