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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
浅析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数组总结篇(一)
2008/09/30 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
laravel请求参数校验方法
2019/10/10 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Vue组件创建和传值的方法
2018/08/17 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
八项规定整改方案
2014/02/21 职场文书
学校师德师风整改措施
2014/10/27 职场文书
婚庆答谢词
2015/01/04 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书