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 ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
Openlayers实现图形绘制
Sep 28 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
twig里使用js变量的方法
2016/02/05 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
three.js 入门案例详解
2018/01/23 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
使用Python对Access读写操作
2017/03/30 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
python能开发游戏吗
2020/06/11 Python
图书室标语
2014/06/21 职场文书
经典毕业生求职信
2014/07/12 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
通知函格式范文
2015/04/27 职场文书
项目备案申请报告
2015/05/15 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers