p5.js实现动态图形临摹


Posted in Javascript onOctober 23, 2019

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实现动态图形临摹

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

Javascript 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
js实现登录与注册界面
Nov 01 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 #Javascript
微信小程序 生成携带参数的二维码
Oct 23 #Javascript
使用p5.js临摹动态图形
Oct 23 #Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 #Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
JavaScript实现图片轮播特效
Oct 23 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP 七大优势分析
2009/06/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Django 视图层(view)的使用
2018/11/09 Python
python自动点赞功能的实现思路
2020/02/26 Python
python游戏开发的五个案例分享
2020/03/09 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
Python 爬虫性能相关总结
2020/08/03 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
司法助理专业自荐书
2014/06/13 职场文书
医德医魂心得体会
2014/09/11 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
就业推荐表导师评语
2014/12/31 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
导游词之崇武古城
2019/10/07 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle