华山资源网

p5.js实现动态图形临摹
网络编程 2024/11/15 佚名
3 1

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<5;i++){  //循环绘制圆
   for(var j=0;j<5;j++)
  { 
 ellipse(i*60+75,j*60+75,50,50);//绘制椭圆(x,y,宽,高)   
 }
  }
}

效果图

p5.js实现动态图形临摹

2.添加颜色

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

function drawsbkg()
{
 background(0);  
 fill(255);  
 for(var i=0;i<5;i++){ 
  for(var j=0;j<5;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;
  
 }
   ellipse(i*60+75,j*60+75,50,50);//绘制椭圆(x,y,宽,高)   
  }
 }
}

效果图

p5.js实现动态图形临摹

3.单独圆的变化状态

p5.js实现动态图形临摹

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

p5.js实现动态图形临摹

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

p5.js实现动态图形临摹

例如：紫色区域为单独圆，部分被覆盖，白色部分为覆盖区域（实际为黑色），则该区域可视为右半边半圆与右半边紫色圆弧部分（2）之差

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

function setsphere(i,j,p,mcolor)
{ 
 ellipse(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<5;i++){     
 for(var j=0;j<5;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; 
 }
 }

效果图

p5.js实现动态图形临摹

拓展

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

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;
 } 
}
case 0:   
 getcolor(mark0)   
 fill(mcolor);   
 setsphere(i,j,t%400,mcolor);   
 break;     
case 1:   
 getcolor(mark0+1)   
 fill(mcolor);   
 setsphere(i,j,(t-40)%400,mcolor);   
 break;

效果图

p5.js实现动态图形临摹

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com