p5.js 变换操作
theme: smartblue
本文正在参加「金石计划」
本文简介
带尬猴,我嗨德育处主任
在 canvas
里,变换是基础功能。很多基于 canvas
封装的库都有这功能,比如 《Fabric.js 变换视窗》。
变换是针对画布进行全局调整的一种能力,它可以对画布进行全局移动、缩放、旋转等操作。
p5.js
同样具备变换功能,而且还封装了很多方便的函数去实现变换功能。本文就简单介绍一下 p5.js
的变换操作方法。
为了方便讲解~~(我懒)~~,本文使用 CDN
的方式引入 p5.js
。如果你在项目中使用 npm
的方式安装 p5.js
,可以参考 《p5.js 使用npm安装p5.js后如何使用?》 的用法。
平移 translate
平移是最简单的操作,使用 translate()
方法就可以移动画布坐标系(上下左右四个方向)。
translate()
使用语法:
```js // 语法1 translate(x, y, [z])
// 语法2 translate(vector) ```
先看看语法1,参数 x
、 y
、z
都接受数值型
数据,其中 x
和 y
是必传的,z
是在3d场景中才会用到。
x
的值为负数时向左平移,正数则向右平移。y
的值为负数时向上平移,正数则向下平移。
语法2接受的参数是一个平移向量,这个语法在入门阶段用得不多。
```js function setup() { createCanvas(180, 180) background(200) // 正方形 square(0, 0, 40) }
function draw() { // 移动画布 translate(60, 60) // 正方形 square(0, 0, 40) } ```
你也可以试试语法2的方式
js // 省略部分代码 translate(createVector(60, 60))
在画布只有1个元素的情况下,也可以使用 translate()
的方式实现 《p5.js 使用npm安装p5.js后如何使用?》 一文中最后的那个效果。
```js let count = 0
function setup() { createCanvas(400, 400) background(200) }
function draw() { // 移动画布 let x = Math.sin(count) * 100 + 200 let y = Math.cos(count) * 100 + 200 translate(x, y) // 正方形 square(0, 0, 20)
count += 0.1 } ```
缩放 scale
p5.js
提供 scale()
方法可以缩放画布。
语法是这样的:
js scale(s, [y], [z])
参数s
可以是数值型
、数值型数组
、p5.Vector
这几个类型。在入门阶段不要搞得那么复杂,我们只需知道可以传入数值型就行。
使用 scale()
方法时需要分几种情况。
情况1:只传1个参数
当只传入1个参数时,这个参数代表 x、y、z
轴的缩放百分比。
情况2:传入2个以上参数
当传入2个或者3个参数时,就分别代表 x
、y
、z
轴的缩放百分比。
如果传入大于0小于1的值就是缩小,大于1的值就是放大。
```js function setup() { createCanvas(400, 400) background(200) square(50, 50, 100) }
function draw() { scale(0.5) // 正方形 square(50, 50, 100) } ```
最后需要注意一点,如果多次使用 scale()
,每次使用都会根据上一次的结果进行百分比缩放。
如果不希望基于上一次的操作进行缩放,可以使用 pop()
和 push()
打破这个规则。
pop()
和 push()
用法请看 《p5.js 状态》
旋转 rotate
旋转分为2D和3D,本文只讲2D的旋转。3D的旋转放在之后讲3D案例的文章再讲解。
旋转使用的方法名叫 rotate()
,语法如下:
js rotate(angle)
angle
是旋转弧度。注意,是弧度!
但对于受过九年义务教育的我来说,用角度去计算会更加直观。
如果你也想用角度的方式来计算,可以使用下面这条公式:
角度 * Math.PI / 180
比如我希望画布旋转45度,就可以这样表达:45 * Math.PI / 180
```js function setup() { createCanvas(400, 400) background(200) }
function draw() { let angle = 45 * Math.PI / 180 rotate(angle) // 设置旋转角度 // 正方形 square(0, 0, 100) } ```
默认是以左上角为旋转中心,如果想改变旋转中心,可以使用 translate
进行修改。
```js function setup() { createCanvas(400, 400) background(200) }
function draw() { translate(200, 150)
let angle = 45 * Math.PI / 180; rotate(angle) // 正方形 square(0, 0, 100) } ```
倾斜 shear
p5.js
提供了 shearX(angle)
和 shearY(angle)
方法可以让画布斜切。
从这两个方法的字面意思可以看出,shearX()
和 shearY()
分别对应 x轴 和 y轴 方向的斜切。
参数 angle
同样代表弧度,如果要用更加直观的角度表示,同样可以使用 角度 * Math.PI / 180
这条公式进行转换。
```js function setup() { createCanvas(400, 400) background(200) }
function draw() { shearX(45 * Math.PI / 180) shearY(45 * Math.PI / 180) // 正方形 square(0, 0, 100) } ```
其他方法
如果以上方法你觉得不好用,你觉得还是像原生 canvas
的 transform()
方法更好用的话,可以使用 p5.js
提供的 applyMatrix()
方法。这个方法和 canvas
的 transform()
方法差不多,这里就不再啰嗦讲解了。
推荐阅读
p5.js 变换操作相关推荐
- p5.js 编程临摹动态图形(互动媒体技术作业)
p5.js 编程临摹动态图形(互动媒体技术作业) 动态图形的规律分析 p5.js 代码历程 走过的弯路 拓展 总结 动态图形的规律分析 从老师的动态图形参考资料中,我选择了以下图形进行临摹: 初次见面 ...
- 用p5.js实现一个小动画——故宫橘猫赏秋图
用p5.js实现一个小动画--故宫橘猫赏秋图 互动媒体第二次作业要求我们手绘一幅动画,再用代码实现出动画.由于时间原因,手绘并没有画动画,而是以插画的形式画了一张,然后p5实现了动画. 这里先放效果图 ...
- 一个基于p5.js的绘画系统
一个基于p5.js的绘画系统 一.实现效果 本系统基于p5.js完成,具有一般绘画系统的特点,作画者可以通过选择不同的笔刷完成自己的作品.作画者可以根据自己的需要选择静态或动态效果,在动态效果下可以看 ...
- 用P5 JS绘制动态绚丽烟花——动态篇
上一节我们探究了绘制静态图像手绘与码绘的差异,但是万事万物,变化万千,有很多东西仅仅用静态是无法描述的. 正如恩格斯所言:"整个自然界,从最小的东西到最大的东西,从沙粒到太阳,从原生生物到人 ...
- P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...
- P5.JS绘制动态图形
P5.JS绘制动态图形 一.平台 第一次使用p5.js进行码绘,此次直接使用P5.JS官网的在线编辑器进行编写,完成后点击file->download即可保存到本地. 在正式绘制之前,我经过小小 ...
- p5.js动态图形临摹以及拓展
p5.js动态图形临摹以及拓展 动态图形原图 原图分析 代码分析与公式推导 分析 推导 成果展示 临摹 拓展作品 拓展1 拓展2 动态图形原图 本次选择临摹图形为该图 原图分析 可以看出,图形底层由六 ...
- p5.js创意绘图(2)自画像
利用p5.js画一幅自画像,效果如下: 1.按下键盘"M"(music)键,音乐停止播放:再次按下"M"键,音乐重新开始播放. 2.按下键盘"S&qu ...
- .playground文件_部署可教学机器:Circuit Playground Express,Arduino,P5.js,TinyUSB
.playground文件 什么是可教学机? (What is Teachable Machine?) Teachable Machine is a web-based tool that makes ...
最新文章
- 调用链系列四:调用链上下文传递
- 栈和队列的区别 | 每日趣闻
- 潘建伟团队又创世界纪录!实现500公里量级现场光纤量子通信
- Java 编译期与运行期,别傻傻分不清楚!
- oracle awr报告生成_分享AWR报告的生成和简单分析方法
- C++/OpenCV:Error: Assertion failed ((unsigned)i0 < (unsigned)(size.p[0] * size.p[1]))
- 怎么用vc采集ni卡数据_作家型INFJ的N灵感采集 | INFJ自我成长
- 计算机组成原理知识点
- Linux离线安装pyhive使用 python连接hive
- vscode快速下载方法
- React 脚手架使用
- 批处理——详解%~dp0 %~nx0
- androd欢迎页播放视频和广告页面
- C#实现QQ窗体的步骤和总结
- Pycharm安装、使用的一些操作
- filter_input
- spring boot自动化配置
- 坐标系之间的简单变换
- 计算机二级office公式汇总,计算机二级Office2010Eexcel公式汇总
- 脑波震动(二):全身脑波震动