使用p5 js临摹动态图形

最新推荐文章于 2021-02-26 15:45:51 发布

预见的遇见

最新推荐文章于 2021-02-26 15:45:51 发布

阅读量585

点赞数

本文链接：https://blog.csdn.net/weixin_44051776/article/details/102649840

版权

本文介绍了如何使用p5.js临摹动态图形，详细解析了背景长方形和旋转正方形的绘制过程，通过frameCount实现平滑旋转，并探讨了如何进行图形拓展，包括正方形的移动和鼠标交互。在实践中深化了对p5.js API的理解。

摘要由CSDN通过智能技术生成

选取的临摹图片

**
在这里插入图片描述

图片规律

1 背景是由5个不同颜色的长方形组成
2 有4个正方形在整体图形的中线处旋转并只露出一半
3 1号3号正方形是顺时针旋转，而2号4号是逆时针旋转

编写代码

这里需要注意的是后写的图形是会覆盖到先写的图形上的，开始以为没注意这一点所以出现了正方形是全露在外面的情况。

绘制背景：

createCanvas(1000,700);
	  background(0);
	  rectMode(CENTER);

第一个长方形：

fill(87,33,7);
	rect(100, 350, 200,700);//绘制第一个长方形

绘制长方形比较简单，只需要确定中心和宽度与长度即可。RGB则是在ps中使用颜色取样工具确定的。

第一个正方形：

push();
	translate(200,350);
	rotate(frameCount / 30.0);
	fill(255);
	rect(0, 0, 110, 110, 10);
	fill(0);
	rect(0, 0, 100, 100, 10);
	pop()//绘制第一个正方形

正方形的旋转使用了rotate（），默认会绕着原点旋转，并且正数是顺时针，负数是逆时针。而角度开始尝试使用时间，但效果并不理想。之后再查询资料后使用了frameCount，这个变量记录着从程序一开始的帧数。使用这个变量旋转时十分流畅。这里还使用了push（）和pop（）函数来确保画完的图像是一个完整的整体。
之后的长方形和正方形也大同小异。
下面是所有的代码：

function setup() {
   
	  createCanvas(1000,700);
	  background(0);
	  rectMode(CENTER);
	}
 
function draw() {
   
              
	fill(87,33,7);
	rect(100, 350, 200,700);//绘制第一个长方形

	push();
	translate(200,350);
	rotate(frameCount / 30.0);
	fill(255);
	rect(0, 0, 110, 110, 10);
	fill(0);
	rect(0, 0, 100, 100, 10);
	pop()</