p5.js map映射

本文简介

带尬猴,我嗨德育处主任


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

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



什么是映射

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

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

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


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

file

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



map() 语法

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

语法如下:

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 结果
0true0
0false0
40true4
40false4
600true10
600false60


举个例子

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

file

<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轴设置画布背景色的饱和度。

file

<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() 举例。



推荐阅读

👍《p5.js 光速入门》

👍《Canvas 从入门到劝朋友放弃(图解版)》

👍《Canvas 从进阶到退学》

👍《Fabric.js 从入门到膨胀》


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

N-129基于springboot,vue学生宿舍管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vuevue-element-admin 服务端技术&#xff1a;springboot,mybatis…

Redis 主从复制和哨兵监控,实现Redis高可用配置

文章目录 一、概述二、主从复制模拟说明三、准备配置文件四、启动Redis实例五、主从复制配置5.1 命令方式启用和取消主从复制5.2 配置文件方式启用和取消主从复制5.3 测试主从复制5.4 有其主从复制的其他参数配置 六、Sentinel 配置6.1 Sentinel 的作用6.2 Sentinel 监控说明6.…

关于网络安全运营工作与安全建设工作的一些思考

以下内容是个人成长过程中对于网络安全运营工作的理解和思考&#xff0c;希望通过这篇文章帮助大家更好的去做安全运营体系化建设&#xff0c;开始吧&#xff01; 文章目录 一、网络安全运营是什么&#xff1f;二、网络安全运营建设阶段第一阶段&#xff1a;设备限制阶段第二阶…

基于springboot实现校园交友网站管理系统项目【项目源码+论文说明】

基于springboot实现校园交友网站管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生…

iStat Menus v6.72

iStat Menus是一款Mac电脑上的系统监控工具&#xff0c;它可以帮助用户监测电脑的硬件和软件状况&#xff0c;提供实时的系统数据和统计信息。 其主要特点包括&#xff1a; 1.系统监测&#xff1a;iStat Menus可以监测CPU、内存、硬盘、网络、电池等系统参数&#xff0c;方便…

性能测试基本知识

性能测试基本知识 一、什么是性能测试 使用自动化工具&#xff0c;模拟不同的场景&#xff0c;对软件各项性能指标进行测试和评估的过程就是性能测试。 1. 后台处理程序的性能&#xff08;代码性能&#xff09; 2. 中间件、数据库、架构设计等是否存在瓶颈 3. 服务器资源消耗…

java springboot2.7 写一个本地 pdf 预览的接口

依赖方面 创建的是 接口web项目就好了 然后包管理工具打开需要这些 import org.springframework.core.io.FileSystemResource; import org.springframework.core.io.Resource; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; imp…

macOS Sonoma 14.1正式版发布 改善Apple Music界面 新增保修状态显示

10月26日消息&#xff0c;苹果今天为 macOS Sonoma 推出了 14.1 版本更新&#xff0c;本更新主要改善了 Apple Music 界面&#xff0c;设置中新增保修状态&#xff0c;并修复了多项错误内容。 经过几周的用户测试&#xff0c;Apple 正式向所有 Mac 用户发布了 macOS Sonoma 14.…

以“降本增效”为目标,智能视频监控能为企业带来哪些经济价值?

随着经济的发展和科技的进步&#xff0c;企业需要不断提升自身的品质和效率&#xff0c;以保持竞争优势。而智能视频监控技术正是一项值得考虑的工具&#xff0c;其对企业带来的降本增效效益可以通过以下几个方面来体现。 1、降低运行成本 EasyCVR智能视频监控平台可以实现远程…

ArcGIS中如何为跨带数据投影?

北京54、西安80高斯克吕格投影是我国常用的投影坐标系统,它们是一种分带投影方式,有3和6分带,不适合大范围内的投影使用。但是如果有份数据范围较大,跨越了多个度带,该选择哪个坐标系统进行投影转换呢? 在大范围内,常用的坐标系统有Albers等面积投影和Lambert等角投影,…

实现基于 Jenkins 的多服务器打包方案

实现基于 Jenkins 的多服务器打包方案 在实际项目中&#xff0c;我们经常会遇到需要将一个应用程序或服务部署到不同的服务器上的需求。而使用 Jenkins 可以很方便地自动化这个过程。 设置参数 首先&#xff0c;我们需要设置一些参数&#xff0c;以便在构建过程中指定要部署…

什么是云原生?土生土长?

“云原生”&#xff08;Cloud Native&#xff09;是一种构建和运行应用程序的方法&#xff0c;这种方法充分利用了云计算的优势。云原生应用程序是为云环境设计的&#xff0c;通常是在容器中运行&#xff0c;并被设计为在微服务架构中运行&#xff0c;这使得它们能够快速扩展和…

java.sql.SQLException: ORA-28000: the account is locked

1.遇到的问题 Oracle执行报下面的错误 java.sql.SQLException: ORA-28000: the account is locked 2.解决办法 登录sysdba管理账号&#xff0c;执行下面命令。 alter user demo account unlock&#xff1b;

驱动开发6 IO多路复用——epoll

核心操作&#xff1a;一棵树、一张表、三个接口 相关案例 #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <stdlib.h> #include <string.h> #include <sys…

Angular-04:指令

① 内置指令1.1 *ngIf 结构指令1.2 [hidden] 属性指令1.3. *ngFor 结构指令1.4 *ngSwitch 结构指令 ② 自定义指令用法 指令是angular操作dom的途径&#xff0c;分为属性指令和结构指令。属性指令&#xff1a;修改元素的外观或行为。使用 [ ] 包裹。结构指令&#xff1a;增加、…

Python 框架学习 Django篇 (六) ORM关联

像是上一章我们很少会通过页面点击去添加和绑定关系表&#xff0c;更多的时候都是通过django的语法实现&#xff0c;接下来我们做一个案例 django rom是怎么操作外键关系的 创建mode模型表 Django_demo/mgr/models.py # 国家表 class Country(models.Model):name models.Cha…

手把手教你部署Jenkins教程,小白也能学会(多图预警)!

背景 公司的前端、后端构建及部署工作都是人工去做&#xff0c;随着业务扩大&#xff0c;项目迭代速度变快&#xff0c;人员增多&#xff0c;各种问题都暴露出来&#xff0c;将通过一个简单案例分享一下基于Jenkins的前后端自动化工作流搭建的过程&#xff0c;搭建完这套工作流…

如何编辑pdf?推荐福昕高级pdf编辑器

这里写目录标题 安装教程1.双击FoxitPhantomPDF941_L10N_Setup.exe安装2.打开FiX UZ1文件夹 复制plugins文件夹和FoxitPhantomPDF.exe到安装目录中替换3. 双击Express2BusinessFix New.reg导入注册表 如何复制页面如何修改pdf的内容福昕高级pdf编辑器安装包 【Note】学校要求加…

小型洗衣机哪个牌子质量好?家用小洗衣机推荐

随着人们的生活水平的提升&#xff0c;越来越多小伙伴来开始追求更高的生活水平&#xff0c;一些智能化的小家电就被发明出来&#xff0c;而且小型洗衣机是其中一个。现在通过内衣裤感染到细菌真的是越来越多&#xff0c;所以我们对内衣裤的清洗频次会高于普通衣服&#xff0c;…