会议小程序签到_p5.js完成动态图形描摹

摘要: p5.js完成动态性图型摹仿 本文关键为大伙儿详尽详细介绍了p5.js完成动态性图型摹仿,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们能够...

p5.js实现动态图形临摹       这篇文章主要为大家详细介绍了p5.js实现动态图形临摹,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

临摹的动态图形

对于动态图形临摹主要在于从图形中寻找规律,包括颜色变化、空间变化、几何关系、数学规律等等,把握规律之后才可以还原图形,同时,添加新的规律也会出现不一样的效果。

观察规律

1.空间分布:整体由5行5列形状大小相同的圆构成
2.颜色规律:在与对角线平行的同一线上的所有小球颜色相同
3.单个圆动态变化规律:逐渐被掩盖后又逐渐出现,掩盖过程为匀速过程
4.整体动态变化规律:自右上到左下依次进行个体的动态变化,在与对角线平行的同一线上的颜色相同的圆变化状态一致,相邻斜线之间间隔相同

临摹

1.基本空间布局

循环生成5行5列圆

function setup() {
 createCanvas(400, 400);
function draw() {
 noStroke(); //没有描边 
 drawsbkg();
function drawsbkg(){
 background(0); //底色
 fill(255); 
 for(var i=0;i i++){ //循环绘制圆
 for(var j=0;j j++)
 elli凡科抠图e(i*60+75,j*60+75,50,50);//绘制椭圆(x,y,宽,高) 
}

效果图

2.添加颜色

通过凡科抠图打开原图获取颜色RGB参数,循环中根据行列条件控制颜色

function drawsbkg()
 background(0); 
 fill(255); 
 for(var i=0;i i++){ 
 for(var j=0;j j++)
 var m=i+j;
 switch(m)
 case 0:fill(color(97,44,142));break;
 case 1:fill(color(22,116,188));break;
 case 2:fill(color(1,163,150));break;
 case 3:fill(color(129,196,64));break;
 case 4:fill(color(245,181,47));break;
 case 5:fill(color(237,91,52));break;
 case 6:fill(color(234,35,94));break;
 case 7:fill(color(186,34,129));break;
 case 8:fill(color(97,44,142));break;
 elli凡科抠图e(i*60+75,j*60+75,50,50);//绘制椭圆(x,y,宽,高) 
}

效果图

3.单独圆的变化状态

分析:单独圆显示部分与掩盖部分并不是直线或是与原有圆同半径大小的圆弧,而是在原有原基础上做类似月牙变化的掩盖与显示,即交界线为以圆上顶点、下顶点为起始点,高度50,宽度不断变化,起始终止夹角为π/2或-π/2的圆弧。

例如:紫色区域为单独圆,部分被覆盖,白色部分为覆盖区域(实际为黑色),则白色区域可视为右半边白色半圆(2)与左侧圆弧覆盖部分(1)之和

例如:紫色区域为单独圆,部分被覆盖,白色部分为覆盖区域(实际为黑色),则该区域可视为右半边半圆与右半边紫色圆弧部分(2)之差

以上为每个圆动态变化过程经历的两个阶段,每个圆的变化过程分为四个阶段:本身颜色圆形,黑色月牙自右向左覆盖,圆消失(变成黑色),原色月牙自右向左恢复。
控制每段过程发生的时间

function setsphere(i,j,p,mcolor)
 elli凡科抠图e(i*60+75,j*60+75,50,50); 
 cover(i*60+75,j*60+75,p,mcolor);
function cover(i,j,p,mcolor)
 if(p =100 p =150)
 fill(0); 
 arc(i, j, 50, 50, -HALF_PI, HALF_PI); 
 fill(mcolor); 
 arc(i, j, 150-p, 50, -HALF_PI, HALF_PI); 
 else if(p =150 p =200) 
 fill(0); 
 arc(i, j, 50, 50, -HALF_PI, HALF_PI); 
 fill(0); 
 arc(i,j, p-150, 50, HALF_PI, -HALF_PI); 
 else if(p 200 p 300)
 fill(0); 
 arc(i, j, 50, 50, -HALF_PI, HALF_PI); 
 fill(0); 
 arc(i, j, 50, 50, HALF_PI, -HALF_PI); 
 else if(p =300 p =350)
 fill(0); 
 arc(i, j, 50, 50, HALF_PI, -HALF_PI); 
 fill(mcolor); 
 arc(i, j, 50, 50, -HALF_PI, HALF_PI); 
 fill(0); 
 arc(i, j, 350-p, 50, -HALF_PI, HALF_PI); 
 else if(p =350 p =400) 
 fill(0); 
 arc(i, j, 50, 50, HALF_PI, -HALF_PI); 
 fill(mcolor); 
 arc(i, j, 50, 50, -HALF_PI, HALF_PI); 
 fill(mcolor); 
 arc(i, j, p-350, 50, HALF_PI, -HALF_PI); 
}

4.调整不同变化状态的间隔

每一斜线方向变化状态同步,相邻两条斜线变化间隔相同。

for(var i=0;i i++){ 
 for(var j=0;j j++) 
 var m=i+j; 
 switch(m) 
 case 0: 
 fill(color0); 
 mcolor=color0; 
 setsphere(i,j,t%400,mcolor); 
 break; 
 case 1: 
 fill(color1); 
 mcolor=color1; 
 setsphere(i,j,(t-40)%400,mcolor); 
 break; 
 case 2: 
 fill(color2); 
 mcolor=color2; 
 setsphere(i,j,(t-80)%400,mcolor); 
 break; 
 case 3: 
 fill(color3); 
 mcolor=color3; 
 setsphere(i,j,(t-120)%400,mcolor); 
 break; 
 case 4: 
 fill(color4); 
 mcolor=color4; 
 setsphere(i,j,(t-160)%400,mcolor); 
 break; 
 case 5: 
 fill(color5); 
 mcolor=color5; 
 setsphere(i,j,(t-200)%400,mcolor); 
 break; 
 case 6: 
 fill(color6); 
 mcolor=color6; 
 setsphere(i,j,(t-240)%400,mcolor); 
 break; 
 case 7: 
 fill(color7); 
 mcolor=color7; 
 setsphere(i,j,(t-280)%400,mcolor); 
 break; 
 case 8:
 fill(color8); 
 mcolor=color8; 
 setsphere(i,j,(t-320)%400,mcolor); 
 break; 
 } 

效果图

拓展

每个小球有更丰富的颜色变化,并且颜色变化伴随状态变化,即在循环中绘制每个圆之前,先要获取颜色信息,控制颜色随时间周期变化。

function getcolor(mark)
 let color0=color(97,44,142); 
 let color1=color(22,116,188);
 let color2=color(1,163,150);
 let color3=color(129,196,64);
 let color4=color(245,181,47);
 let color5=color(237,91,52);
 let color6=color(234,35,94);
 let color7=color(186,34,129);
 let color8=color(97,44,142);
 switch(mark%8)
 case 0:mcolor=color0;break; 
 case 1:mcolor=color1;break; 
 case 2:mcolor=color2;break; 
 case 3:mcolor=color3;break; 
 case 4:mcolor=color4;break; 
 case 5:mcolor=color5;break; 
 case 6:mcolor=color6;break; 
 case 7:mcolor=color7;break; 
 case 8:mcolor=color8;break;
}

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:真正免费建站