p5.js (1) 第一幅“码绘”

主题

互动媒体课的实验内容——从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程的方式临摹，并进行拓展要求。

编程语言：p5.js
编程工具：Sublime Text、p5.js在线编辑器

动态图形临摹

临摹原图

截取静态一刻~

变化规律

观察静态图片会注意到，图片是一个大正方形被分成了均分成8*8个小正方形，颜色为黑色与米色交替；而它们的变化可以分成4个方面总结——

• 规律1：底色为黑色，所有米色的小方块进行缩小放大；
• 规律2：底色为米色，所有黑色的小方块进行缩小放大；
• 规律3：小方块缩放时，是由左上角向右下角沿对角线方向一排排变化过去的，形成浪潮的感觉；
• 规律4：米色方块与黑色方块的变化交替进行。

基于此，我们可以得到以下实现思路——

方块缩放 - 方块浪潮 - 交替变化

实现过程

缩放

观察可得，小方块的变化是由原规格缩小到约一半再放大至原规格，我本来对此毫无头绪，后来突然想到了一个函数

$cosx$

$cosx$函数取绝对值时，在 $0$ 到 $\pi$ 的变化正是由1变化到0在变化到1的过程，与我们需要的变化一致。

于是用时间函数与余弦函数结合的方式编写一个函数实现方块的动态缩放（以白色方块为例）

//画米色缩放小正方形
//x，y为方块中心点坐标，a为最大，time为时间
function drawWHITEcube(x,y,a,time)

效果图及完整代码如下——

function setup()
{
 	createCanvas(400, 400);
}

//画米色缩放小正方形
function drawWHITEcube(x,y,a,time)
{
	rectMode(CENTER);
	var an=abs(cos((time)*PI));
	an=an*a;
	fill(200);
	rect(x,y,an,an);
}

function draw()
{
 	background(0);
 	noStroke();
  	var Millis = millis();
  	var Second = millis()/1000;
  	var a=50;
  	drawWHITEcube(100,100,a,Second);
}

浪潮

实现缩放之后就要让同色方块浪潮波动起来

• 浪潮效果即是同一时刻不同排的方块处在不同的规格，且随排的递增，规格称递增或递减。
• 缩放用的是时间与余弦结合的方式实现，所以这里可以通过对时间进行递增实现规格的递增。（当然也可以处理余弦函数啦！）
• 而且观察可得，无论是黑色或是米色，浪潮缩放结束后都要有一点停顿时间，留给另一种颜色的方块变化，所以程序中还要注意停顿，通过取余处理设置范围可以实现。

以米色方块为例

//画白色缩放小正方形
function drawWHITEcube(x,y,a,time)
{
	rectMode(CENTER);
	if(time<0.5)
	{
		var an=abs(cos((time)*PI*2));
		an=an*a+a;
	}
	else
	{
		an=2*a;
	}
	fill(255);
	rect(x,y,an,an);
}

在每次调用此函数时，要进行时间的递增和取余处理

Second=Second+delta;
yu=Second%2;

效果图及代码如下——
（因完整代码冗长，且后续都是仅坐标不同的重复操作，所以此处只展示前三排的代码）

function setup()
{
  createCanvas(400, 400);
}

//画白色缩放小正方形
function drawWHITEcube(x,y,a,time)
{
	rectMode(CENTER);
	if(time<0.5)
	{
		var an=abs(cos((time)*PI*2));
		an=an*a+a;
	}
	else
	{
		an=2*a;
	}
	fill(255);
	rect(x,y,an,an);
}


function draw()
{
	// 获得毫秒数
	var Millis = millis();
	// 获得秒数，相比second()，能获得小数点后的部分
	var Second = millis()/3000;

	background(127);
	noStroke();

	var delta=0.0625; 
	var yu=Second%2;
	var a=25;
	//左上角第一个
	drawWHITEcube(25,25,a,yu);
 	//第二排
	Second=Second+delta;
	yu=Second%2;
	drawWHITEcube(125,25,a,yu);
	drawWHITEcube(75,75,a,yu);
	drawWHITEcube(25,125,a,yu);
	//第三排
	Second=Second+delta;
	yu=Second%2;
	drawWHITEcube(225,25,a,yu);
	drawWHITEcube(175,75,a,yu);
	drawWHITEcube(125,125,a,yu);
	drawWHITEcube(75,175,a,yu);
	drawWHITEcube(25,225,a,yu);

	/*******此处省略后几排方块的代码*******/
}

交替

最后一步，使黑色、米色两种颜色的缩放浪潮交替展示，就能得到原图的效果了！
时间线的设置——

• $1$ 个时间单位分成 $2$ 部分
• 前半部分用于米色方块的浪潮效果，黑色方块浪潮停顿
• 后半部分用于黑色方块的浪潮效果，米色方块浪潮停顿

代码组成——

• 两种颜色方块浪潮代码的结合，加上$if$语句对时间线做判断分时绘制浪潮
• 绘制每排的方块时可以使用$for$循环或者直接一个一个输入方块坐标

原代码冗长相似就不全部粘贴啦！
以米色方块绘制函数为例——

//画淡色缩放小正方形
function drawWHITEcube(x,y,a,time)
{
	rectMode(CENTER);
	if(time<0.5)
	{
		var an=abs(cos((time)*PI*2));
		an=an*a+a;
	}
	else if(time>1&&time<1.5)
	{
		an=abs(cos((time-1)*PI*2));
		an=an*a+a;
	}
	else
	{
		an=2*a;
	}
	fill(200);
	rect(x,y,an,an);
}

主绘函数

function draw()
{
	var Millis = millis();
	var Second = millis()/4000;

	var delta=0.0625; 
	var yu=Second%2;
	var a=25;

	if(****************)
	{
		background(0);
		noStroke();

		/*******米色方块绘制******/
	}
	else if(****************)
	{
		background(200);
		noStroke();

		/******黑色方块绘制******/
	}
}

最终效果

（我这里的时间设置的还不够好，交替变化会有突兀的地方，但暂时没有找到好的解决办法）

动态图形拓展

• 拓展图是在临摹图的基础上改写而成的
• 因为在临摹时我没能找到对角线浪潮的总结概括性规律，所以绘制大多是用直接输入坐标完成的
• 拓展图中的变化可以自定义，我便用了$for$循环来完成动态变化~

效果展示

• 拓展1
  
• 拓展2
  
• 两者都是用$for$循环实现
• 用到的缩放函数还是最初编写的缩放函数
• 两者唯一的差别就是时间差取的不一样

for(x=25;x<=375;x+=50)
{
	Second=Second+delta;
	for(y=25;y<=375;y+=50)
	{
		Second=Second+delta;
		drawWHITEcube(x,y,a,Second);
	}
}

拓展一

var delta=0.1; 

拓展二

var delta=0.0625; 

一点参数的不同，做出的动态变化效果就会很不一样~

最后

第一次用p5.js编程，多是探索，知识储备不足，代码也很幼稚冗长（我好菜），继续学习进步吧！
发现错误请指正！

以上！