p5.js map映射
本文简介
带尬猴,我嗨德育处主任
p5.js
为开发者提供了很多有用的方法,这些方法实现起来可能不难,但却非常实用,能大大减少我们的开发时间。
什么是映射
从 p5.js 文档 中可以看到对映射的说明
好家伙,使用映射来说明映射。
还是用图来表示比较好懂~
绿线的长度是10,红线的长度是20。根据比例来计算,绿线上的点可以在红线上转换成对应的点。
map() 语法
除了普通的映射规则外,p5.js
的 map()
方法还提供了映射后最大值和最小值的限制。
语法如下:
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轴 方向的值动态修改画布灰度背景。
<script>
function setup() {
createCanvas(300, 200)
}
function draw() {
let gray = map(mouseX, 0, windowWidth, 0, 255, true)
background(gray)
}
</script>
mouseX
是 p5.js
提供的,它返回鼠标当前位置的 x坐标
值。我在 《# p5.js 光速入门》 里有讲到。
再举个例子
根据当前鼠标所在位置x轴设置画布背景色的色调,根据鼠标所在位置y轴设置画布背景色的饱和度。
<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
提供的环境变量。
mouseX
和 mouseY
是鼠标当前所在坐标。
windowWidth
和 windowHeight
是当前浏览器窗口的宽高。
这4个环境变量写在 draw()
方法里可以根据设置好的帧率去捕捉变量的变化。
map()
映射结合3D图形也能玩出很多花样,在之后讲解3D图形的文章里我会结合 map()
举例。
推荐阅读
点赞 关注 收藏 = 学会了
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanffhgi
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24