本文实例为大家分享了p5.js临摹动态图片的具体代码,供大家参考,具体内容如下
<强> 1,临摹图片
<强> 2,图像运动规律
原图中一共有36个等大的四分之三圆形,按照一定的规律转动,可以等效为圆形不动,每个圆上有以其半径为边长的矩形在绕圆形的原点转动,每四个为一组,其他部分都是在重复这四个的转动规律
<强> 3,完整代码
函数设置()
{
createCanvas (402402);
}
画()函数
{
背景(0);
var/dx=0;
dx +=π/180;
var t=(米尔斯()/5)* sin (dx);//返回自程序开始的毫秒数
如果(dx==π)
{
dx=0;
}
(var=0; i<6,我+ +)//每行每列六个圆形
{
(var j=0; j<6; j + +)
{
填满(255);
椭圆(我* 66 + 36,j * 66 + 36岁,60岁,60);//绘制半径30的圆形、间隔6
填充(0);
翻译(我* 66 + 36,j * 66 + 36);//矩形的移动,共四种运动状态
如果(我% 2==0,和j % 2==0)
{
旋转(- t);//逆时针旋转
矩形(0,0,30、30);//旋转的边长30黑色矩形
}
else if(% 2==1,和j % 2==0)
{
旋转(t);//顺时针旋转
矩形(-30,0,30、30);
}
else if(% 2==1,和j % 2==1)
{
旋转(- t);
矩形(-30、-30、30、30);
}
else if(% 2==0,和j % 2==1)
{
旋转(t);
矩形(0 -30 30、30);
}
resetMatrix ();
}
}
}
<强> 4,临摹结果
<强> 5,拓展图像
一段螺旋型的运动弧线,中心颜色较深,越向外颜色越浅,形成一种线在向中心运动的趋势。绘制时是由无数个没有边框的圆形一起按照规律运动,形成线。
完整代码:
函数设置()
{
createCanvas (500、500);
noStroke ();
}
函数画(){
背景(0);
(var i=1;我& lt; 3000;我+ +)
{
drawcircle(255 - 0.1 * 255 - 0.1 *我,我255 - 0.1 *我,我);
我+ +;
}
}
函数drawcircle (r, g, b,间隔){
填充(r, g, b);
var x=250;
var y=250;
var t=米尔斯()/3 +间隔* 0.5;
var习;
var易,我
var=间隔*半径15;
ξ=0.01 * *半径数学。因为(t * Math.PI/180);
易=0.01 * *半径数学。罪(t * Math.PI/180);
x +=xi;
y +=易;
椭圆(x, y, 20、20);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
