前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >p5.js map映射

p5.js map映射

作者头像
德育处主任
发布2023-03-12 10:44:41
3.7K0
发布2023-03-12 10:44:41
举报
本文简介

p5.js 为开发者提供了很多有用的方法,这些方法实现起来可能不难,但却非常实用,能大大减少我们的开发时间。

本文将通过举例说明的方式来讲解 映射 map() 方法。

什么是映射

p5.js 文档 中可以看到对映射的说明

说明:从一个范围内映射一个数字去另一个范围。

好家伙,使用映射来说明映射。

还是用图来表示比较好懂~

01.jpg
01.jpg

绿线的长度是10,红线的长度是20。根据比例来计算,绿线上的点可以在红线上转换成对应的点。

map() 语法

除了普通的映射规则外,p5.jsmap() 方法还提供了映射后最大值和最小值的限制。

语法如下:

代码语言:javascript
复制
map(value, start1, stop1, start2, stop2, [withinBounds])
  • value: 数值型;需要转换的值
  • start1: 数值型;原始值的最小值
  • stop1: 数值型;原始值的最大值
  • start2: 数值型;映射后的最小值
  • stop2: 数值型;映射后的最大值
  • withinBounds: 布尔型;限制映射后的值。默认值是 false

用个表格举例说明一下

我用到的公式是:let res = map(value, 0, 100, 0, 10, withinBounds)

value 原始值

withinBounds 限制

res 结果

0

true

0

0

false

0

40

true

4

40

false

4

600

true

10

600

false

60

举个例子

根据鼠标当前位置所在的 x轴 方向的值动态修改画布灰度背景。

02.gif
02.gif
代码语言:javascript
复制
<script>
  function setup() {
    createCanvas(300, 200)
  }
  function draw() {
    let gray = map(mouseX, 0, windowWidth, 0, 255, true)
    background(gray)
  }
</script>

mouseXp5.js 提供的,它返回鼠标当前位置的 x坐标 值。我在 《# p5.js 光速入门》 里有讲到。

再举个例子

根据当前鼠标所在位置x轴设置画布背景色的色调,根据鼠标所在位置y轴设置画布背景色的饱和度。

03.gif
03.gif
代码语言:javascript
复制
<script>
  function setup() {
    createCanvas(320, 200) // 创建画布
    colorMode(HSB) // 设置颜色模式为 HSB
  }
  function draw() {
    let H = map(mouseX, 0, windowWidth, 0, 360, true)
    let S = map(mouseY, 0, windowHeight, 0, 100, true)

    background(H, S, 100)
  }
</script>

这个例子中使用了几个 p5.js 提供的环境变量。

mouseXmouseY 是鼠标当前所在坐标。

windowWidthwindowHeight 是当前浏览器窗口的宽高。

这4个环境变量写在 draw() 方法里可以根据设置好的帧率去捕捉变量的变化。

map() 映射结合3D图形也能玩出很多花样,在之后讲解3D图形的文章里我会结合 map() 举例。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是映射
  • map() 语法
  • 举个例子
  • 再举个例子
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档