p5.js绘制旋转的正方形


Posted in Javascript onOctober 23, 2019

使用p5.js绘制旋转的正方形,供大家参考,具体内容如下

要还原的效果图

p5.js绘制旋转的正方形

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

首先建立画布大小,按照比例应该是5:3

function setup() {
 createCanvas(500, 300);
}

设定矩形绘制格式,以及边线粗细

function setup() {
 createCanvas(500, 300);
 rectMode(100);
 strokeWeight(4);
}

让我们根据画布坐标先把静态的图形画出来

(关于颜色的rgb数据可以通过ps取色器获得)

只需要用到rect()进行绘制即可

p5.js绘制旋转的正方形

仔细观察可以发现,图中的矩形为圆角矩形,绘制圆角矩形可以直接在rect()里加入四个角的弧度
以左一黑色矩形为例

rect(77.5,122.5, 55, 55, [5], [5], [5], [5]);

[ ]里的则是每个角的圆角弧度,按顺序分别是左上,右上,左下,右下

经过修改后的图像

p5.js绘制旋转的正方形

目前基本图形已经构建好了,目前我们需要做的就是让他旋转起来
这里需要用到几个函数

translate()
rotate()

我们用translate()将旋转中心设定为矩形中心,再调用rotate()让图像旋转起来
但是我们会发现一个问题,经过设定后,启动程序,我们会发现整个图形进行了旋转,这并没有达到我们想要的效果,所以现在需要使用到push()和pop()两个函数将矩形分隔开来

push();
angle=angle+0.01;
let c=angle+PI;
translate(100,150);
rotate(c);
stroke(255,255,255);
fill(0,0,0);
rect(-22.5-22.5, 55, 55, [5], [5], [5], [5]);
pop();

运行即可让左边第一个矩形旋转起来。要介绍的是,angle后所加的数值(此处为0.01)所代表的含义为旋转速率的大小

如果需要反向旋转,将rotate()中的参数转换为负数即可

按照第一个矩形将另外三个矩形也更改过来,就可以得到图中的效果啦!

最后完成的效果↓

p5.js绘制旋转的正方形

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
对javascript继承的理解
Oct 11 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
vue组件实例解析
Jan 10 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
代码整洁之道(重构)
Oct 25 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
p5.js实现简单货车运动动画
Oct 23 #Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 #Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 #Javascript
p5.js临摹旋转爱心
Oct 23 #Javascript
JavaScript 作用域scope简单汇总
Oct 23 #Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 #Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
You might like
php smarty函数扩展
2010/03/15 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
使用JS动态显示文本
2017/09/09 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
js+css实现打字效果
2020/06/24 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
python实现多线程端口扫描
2019/08/31 Python
如何写python的配置文件
2020/06/07 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
你们项目是如何进行变更控制的
2015/08/26 面试题
历史学专业推荐信
2013/11/06 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
社区活动策划方案
2014/08/21 职场文书
学生保证书
2015/01/16 职场文书
教师学期个人总结
2015/02/11 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
工作时间调整通知
2015/04/24 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
对PyTorch中inplace字段的全面理解
2021/05/22 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android