当前位置: 首页 > news >正文

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 从入门到膨胀》


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

相关文章:

p5.js map映射

本文简介 带尬猴&#xff0c;我嗨德育处主任 p5.js 为开发者提供了很多有用的方法&#xff0c;这些方法实现起来可能不难&#xff0c;但却非常实用&#xff0c;能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 map() 方法。 什么是映射 从 p5.js 文档 中可…...

idea提交代码冲突后,代码意外消失解决办法

敲了大半天的代码&#xff0c;解决冲突后&#xff0c;直接消失了当时慌的一批CCCCC 右击项目Local History ----show History 找到最近提交的内容右击选择Revert,代码全回来了...

爬虫批量下载科研论文(SciHub)

系列文章目录 利用 eutils 实现自动下载序列文件 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、获取文献信息二、下载文献PDF文件参考 前言 大家好✨&#xff0c;这里是bio&#x1f996;。…...

explain查询sql执行计划返回的字段的详细说明

当使用EXPLAIN命令查看SQL语句的执行计划时&#xff0c;会返回一张表格&#xff0c;其中包含了该SQL语句的执行计划。下面是每个字段的详细分析&#xff1a; id&#xff1a;执行计划的唯一标识符。如果查询中有子查询&#xff0c;每个子查询都会有一个唯一的ID。在执行计划中&a…...

讯飞输入法13.0发布,推出行业首款生成式AI输入法

&#x1f989; AI新闻 &#x1f680; 讯飞输入法13.0发布&#xff0c;推出行业首款生成式AI输入法 摘要&#xff1a;科大讯飞在2023年全球开发者节上发布了全新讯飞输入法13.0版本&#xff0c;其中最大的亮点是推出了行业首款生成式AI输入法。这次升级将生成式AI能力融入输入…...

35. 搜索插入位置、Leetcode的Python实现

博客主页&#xff1a;&#x1f3c6;看看是李XX还是李歘歘 &#x1f3c6; &#x1f33a;每天分享一些包括但不限于计算机基础、算法等相关的知识点&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知识点&#x1f4d6;是你想要的&#x1f497; ⛽️今…...

使用 DDPO 在 TRL 中微调 Stable Diffusion 模型

引言 扩散模型 (如 DALL-E 2、Stable Diffusion) 是一类文生图模型&#xff0c;在生成图像 (尤其是有照片级真实感的图像) 方面取得了广泛成功。然而&#xff0c;这些模型生成的图像可能并不总是符合人类偏好或人类意图。因此出现了对齐问题&#xff0c;即如何确保模型的输出与…...

cocosCreator 之 crypto-es数据加密

版本&#xff1a; 3.8.0 语言&#xff1a; TypeScript 环境&#xff1a; Mac 简介 项目开发中&#xff0c;针对于一些明文数据&#xff0c;比如本地存储和Http数据请求等&#xff0c;进行加密保护&#xff0c;是有必要的。 关于加密手段主要有&#xff1a; 对称加密 使用相…...

Leetcode---368周赛

题目列表 2908. 元素和最小的山形三元组 I 2909. 元素和最小的山形三元组 II 2910. 合法分组的最少组数 2911. 得到 K 个半回文串的最少修改次数 一、元素和最小的山形三元组I 没什么好说的&#xff0c;不会其他方法就直接暴力&#xff0c;时间复杂度O(n^3)&#xff0c;代…...

矢量图形编辑软件Illustrator 2023 mac中文版软件特点(ai2023) v27.9

illustrator 2023 mac是一款矢量图形编辑软件&#xff0c;用于创建和编辑排版、图标、标志、插图和其他类型的矢量图形。 illustrator 2023 mac软件特点 矢量图形&#xff1a;illustrator创建的图形是矢量图形&#xff0c;可以无限放大而不失真&#xff0c;这与像素图形编辑软…...

一、Docker Compose——什么是 Docker Compose

Docker Compose 是一个用来定义和运行多容器 Docker 应用程序的工具&#xff0c;他的方便之处就是可以使用 YAML 文件来配置将要运行的 Docker 容器&#xff0c;然后使用一条命令即可创建并启动配置好的 Docker 容器了&#xff1b;相比手动输入命令的繁琐&#xff0c;Docker Co…...

Java提升技术,进阶为高级开发和架构师的路线

原文网址&#xff1a;Java提升技术&#xff0c;进阶为高级开发和架构师的路线-CSDN博客 简介 Java怎样提升技术&#xff1f;怎样进阶为高级开发和架构师&#xff1f;本文介绍靠谱的成长路线。 首先点明&#xff0c;只写业务代码是无法成长技术的。提升技术的两个方法是&…...

记一次 .Net+SqlSugar 查询超时的问题排查过程

环境和版本&#xff1a;.Net 6 SqlSuger 5.1.4.* &#xff0c;数据库是mysql 5.7 &#xff0c;数据量在2000多条左右 业务是一个非常简单的查询&#xff0c;代码如下&#xff1a; var list _dbClient.Queryable<tb_name>().ToList(); tb_name 下配置了一对多的关系…...

PHP危险函数

PHP危险函数 文章目录 PHP危险函数PHP 代码执行函数eval 语句assert()语句preg_replace()函数正则表达式里修饰符 回调函数call_user_func()函数array_map()函数 OS命令执行函数system()函数exec()函数shell_exec()函数passthru() 函数popen 函数反引号 实列 通过构造函数可以执…...

【ARM Cortex-M 系列 4 番外篇 -- 常用 benchmark 介绍】

文章目录 1.1 CPU 性能测试 MIPS 计算1.1.1 Cortex-M7 CPI 1.2 benchmark 小节1.3.1 Geekbenck 介绍 1.3 编译参数配置 1.1 CPU 性能测试 MIPS 计算 每秒百万指令数 (MIPS)&#xff1a;在数据压缩测试中&#xff0c;MIPS 每秒测量一次 CPU 执行的低级指令的数量。越高越好&…...

web安全-原发抗抵赖

原发抗抵赖 原发抗抵赖也称不可否认性&#xff0c;主要表现以下两种形式&#xff1a; 数据发送者无法否认其发送数据的事实。例如&#xff0c;A向B发信&#xff0c;事后&#xff0c;A不能否认该信是其发送的。数据接收者事后无法否认其收到过这些数据。例如&#xff0c;A向B发…...

强化学习------PPO算法

目录 简介一、PPO原理1、由On-policy 转化为Off-policy2、Importance Sampling&#xff08;重要性采样&#xff09;3、off-policy下的梯度公式推导 二、PPO算法两种形式1、PPO-Penalty2、PPO-Clip 三、PPO算法实战四、参考 简介 PPO 算法之所以被提出&#xff0c;根本原因在于…...

node(三)express框架

文章目录 1.express介绍2.express初体验3.express路由3.1什么是路由&#xff1f;3.2路由的使用 1.express介绍 是一个基于Node平台的极简、灵活的WEB应用开发框架&#xff0c;官网地址&#xff1a;https://www.expressjs.com.cn/ 简单来说&#xff0c;express是一个封装好的工…...

linux find命令搜索日志内容

linux find命令搜索日志内容 查询服务器log日志 find /opt/logs/ -name "filename.log" | xargs grep -a "这里是要查询的字符"加上-a 是为了不报查出 binary 的错 服务器会返回 包含所查字符的整行日志信息...

CentOS 编译安装TinyXml2

安装 TinyXml2 Git 源码下载地址:https://github.com/leethomason/tinyxml2 步骤1&#xff1a;首先&#xff0c;你需要下载tinyxml2的源代码。你可以从Github或者源代码官方网站下载。并上传至/usr/local/source_code/ 步骤2&#xff1a;下载完成后&#xff0c;需要将源代码解…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...