p5.js实现动态图形复制

P5.js实现动态图形复制的具体代码，供大家参考。具体内容如下

复制的动态图形

动态图形的复制主要在于从图形中寻找规律，包括颜色变化、空间变化、几何关系、数学规律等。只有掌握了规律，图形才能还原。同时，增加新的法律会有不同的效果。

观察规则

1.空间分布：整体由5行5列形状大小相同的圆圈组成。2.颜色规则：与对角线平行的同一条线上的所有球都有相同的颜色。3.单圈动态变化规律：隐蔽后逐渐显现，隐蔽过程是匀速过程。4.整体动态变化规律：从右上方到左下方进行个别动态变化，与对角线平行的同一条线上颜色相同的圆变化状态相同，相邻对角线之间的间隔相同。

复制

1.基本空间布局

循环生成5行5列的圆

函数setup() { createCanvas(400，400)；}函数draw(){ noStroke()；//没有笔画drawsbkg()；} function drawsbkg(){ background(0)；//底色填充(255)；for(var I=0；i5；I ){ //画圆画圆为(var j=0；j5；j ) {椭圆(i*60 75，j*60 75，50，50)；//绘制椭圆(x，y，宽度，高度)}}渲染

2.添加颜色

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

function drawsbkg(){ background(0)；填充(255)；for(var I=0；i5；I){ for(var j=0；j5；j){ var m=I j；开关(m) { case 0:fill(color(97，44，142))；打破；案例1:fill(颜色(22，116，188))；打破；case 2:fill(颜色(1，163，150))；打破；案例3:fill(颜色(129，196，64))；打破；case 4:fill(颜色(245，181，47))；打破；case 5:fill(颜色(237，91，52))；打破；case 6:fill(颜色(234，35，94))；打破；case 7:fill(颜色(186，34，129))；打破；案例8:fill(颜色(97，44，142))；打破；}椭圆(i*60 75，j*60 75，50，50)；//绘制椭圆(x，y，宽度，高度)}}渲染

3.单个圆的变化状态

分析：单个圆的显示部分和覆盖部分不是直线或半径与原圆相同的圆弧，而是像月牙一样的覆盖和显示在原基础上发生变化，即边界线是以圆的上顶点和下顶点为起点的圆弧，高度为50，宽度不断变化，起止角为/2或-/2。

例如，如果紫色区域是单个圆，部分被覆盖，白色部分是被覆盖区域(实际上是黑色)，则白色区域可以视为右半白色半圆(2)和左弧形被覆盖部分(1)的总和

例如，如果紫色区域是单个圆，部分被覆盖，白色部分是覆盖区域(实际上是黑色)，那么这个区域可以被视为右半半圆和右半紫色弧部分(2)之间的差异

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

函数setsphere(i，j，p，mcolor){ ellipse(i*60 75，j*60 75，50，50)；封面(i*60 75，j*60 75，p，mco lor)；}功能盖(I，j，p，MC olor){ if(p=100 p=150){ fill(0)；弧(I，j，50，50，-HALF_PI，HALF _ PI)；填充(MC olor)；弧(I，j，150-p，50，-HALF_PI，HALF _ PI)；} else if(p=150 p=200){ fill(0)；弧(I，j，50，50，-HALF_PI，HALF _ PI)；填充(0)；弧(I，j，p-150，50，HALF_PI，-HALF _ PI)；} else if(p 200 p 300){ fill(0)；弧(I，j，50，50，-HALF_PI，HALF _ PI)；填充(0)；弧(I，j，50，50，HALF_PI，-HALF _ PI)；} else if(p=300 p=350){ fill(0)；弧(I，j，50，50，HALF_PI，-HALF _ PI)；填充(MC olor)；弧(I，j，50，50，-HALF_PI，HALF _ PI)；填充(0)；弧(I，j，350-p，50，-HALF_PI，HALF _ PI)；} else if(p=350 p=400){ fill(0)；弧(I，j，50，50，HALF_PI，-HALF _ PI)；填充(MC olor)；弧(I，j，50，50，-HALF_PI，HALF _ PI)；填充(MC olor)；弧(I，j，p-350，50，HALF_PI，-HALF _ PI)；} }4.调整不同变化状态的间隔

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

for(var I=0；i5；I){ for(var j=0；j5；j){ var m=I j；开关(m){ case 0: fill(颜色0)；mcolor=color0setsphere(i，j，t@0，MC olor)；打破；案例1:填充（颜色1);mcolor=color1setsphere(i，j，(t-40)@0，MC olor)；打破；案例2:填充（颜色2);mcolor=color2setsphere(i，j，(t-80)@0，MC olor)；打破；案例3:填充（颜色3);mcolor=color3setsphere(i，j，(t-120)@0，MC olor)；打破；案例4:填充（颜色4);mcolor=color4setsphere(i，j，(t-160)@0，MC olor)；打破；案例5:填充（颜色5);mcolor=color5setsphere(i，j，(t-200)@0，MC olor)；打破；案例6:填充（颜色6);mcolor=color6setsphere(i，j，(t-240)@0，MC olor)；打破；案例7:填充(颜色7)；mcolor=color7setsphere(i，j，(t-280)@0，MC olor)；打破；案例8:填充（颜色8);mcolor=color8setsphere(i，j，(t-320)@0，MC olor)；打破；} } 效果图

拓展

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

函数get color(mark){让color 0=color(97，44，142)；让color1=color(22，116，188)；让color2=color(1，163，150)；让color3=color(129，196，64)；让color4=color(245，181，47)；让color5=color(237，91，52)；让color6=color(234，35，94)；让color7=color(186，34，129)；让color8=color(97，44，142)；开关（标记% 8){ case 0: color=color 0；打破；case 1:mcolor=color1打破；案例2:mcolor=color2打破；case 3:mcolor=color3打破；案例4:mcolor=color4打破；案例5:mcolor=color5打破；案例6:mcolor=color6打破；案例7:mcolor=color7打破；case 8:mcolor=color8打破；} } case 0: get color(mark0)fill(mco lor)；setsphere(i，j，t@0，MC olor)；打破；案例1:获取颜色(mark0 1)填充(mco lor)；setsphere(i，j，(t-40)@0，MC olor)；打破；效果图

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