P5.js创意编程临摹作品+拓展

动态艺术

互动媒体这门课生动有趣，老师带我们从另外一个角度认识艺术的世界，从编程，从数学的角度发现艺术的美。
动态的艺术最为令人陶醉，在该课程老师的要求下，从给定动态艺术图片中选择了一个较为简单的动态图进行临摹：

观察规律

首先从这张旋转的图，旋转很有美感。颜色的变换也很有层次感。
美丽都是有规律的，这个图也不例外。我们取截图仔细观察：

仔细观察可以看出来下面几条规律：
1、如果把相同颜色的小圆形（这里暂且把它看作圆）看作形成一个圈，那么这个静止的图形从里到外按颜色区分就是有，8个圆圈
2、从里到外（最里面四个小圆）到外面的大圆圈每一圈小圆的数量都是递增4个。 也就是从四个增加到32个
3、每一圈的小圆形都是均匀分布
4、再次观察动图可知，每一圈的转动速度略微有所减少
5、每一圈的小圆其实更接近与椭圆而且有模糊的效果。
通过总结以上这些规律，我们开始用P5.js进行创意艺术编程。
首先是生成 8个圈的圆形
只要弄清楚如何生成一个圆上均匀分布的点 ，初步的形状就可以生成：
画一个圆，打个草稿（转换为P5画布的坐标系）：

for(j=0;j<8;j++)
{
for(i=0;i<(4*(j+1));i++)
{
ellipse(midx+R*sin(i*thta+rota),midy-R*cos(i*thta+rota),8,7); //添加了旋转的thta  rota 度数
}
R=R+13;

要实现旋转，也比较容易，因为p5里面draw函数是循环调用的，在生成时候改变旋转角度的，递增的改变就能实现旋转，（sin，cos函数是周期）

var midx=300;
var midy=300;
var PI=3.1415;
var thta=24/180*PI;
var th=0.7/180*PI;
var R=50;
var count=0;
var flag=0;
//var th=[0.3/180*PI,0.5/180*PI,0.7/180*PI,0.9/180*PI,1.1/180*PI,1.3/180*PI,1.5/180*PI,1./180*PI]
function setup() {
createCanvas(600, 600);
}

function draw() {
var X=0;
var Y=0;

var i,j;
R=10;
//var th=0.3/180*PI;
background(0,0,0,150);
for(j=0;j<8;j++)
{
thta=(360/(4*(j+1)))/180*PI;
for(i=0;i<(4*(j+1));i++)
{
var rota=th*(9-j)*0.09;
fill(red,yellow,blue,220);
ellipse(midx+R*sin(i*thta+rota),midy-R*cos(i*thta+rota),8,7);
//th=th+0.1/180*PI;
}
th=th+0.7/180*PI;
R=R+13;
}
}

var rota=th*(9-j)*0.09; 控制了每圈旋转速度的递减。
关于颜色的渐变，我尝试了数值上很多关系，始终没用很好的完美临摹，最终还是选择了笨办法，用if语句给每一圈的圆形赋颜色（如果有人可以简单实现颜色变化，可以在评论区留言！感激不尽），生成的也是类似椭圆，并有了一点模糊的效果：

拓展

通过给生成小圆一点点创意的小改动，就会产生令人意外的效果。

ellipse(midx+R*sin(i*thta+rota),midy-R*cos(i*thta+rota),sin(i*thta+rota)*12,cos(i*thta+rota)*12);

如果仔细观察就可以发现这个动态的变换比较多样：
继续进行创意的改动，在颜色上加上一个sin，cos函数：

几次改动发现，sin函数，cos函数对于draw函数这个循环调用的函数而言，具有得天独厚的优势，因为函数的周期性，生成的图像变换总有一定的规律可循！

• 点赞
• 收藏
• 分享
• 文章举报