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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
浅析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
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
javascript操作cookie
2017/01/17 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python__new__内置静态方法使用解析
2020/01/07 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python新手学习函数默认参数设置
2020/06/03 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python面向对象实现方法总结
2020/08/12 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
幼儿园家长会欢迎词
2014/01/09 职场文书
高中军训广播稿
2014/01/14 职场文书
捐书寄语赠言
2014/01/18 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
超市员工辞职信范文
2015/05/12 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
2016新年致辞
2015/08/01 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
深入理解pytorch库的dockerfile
2022/06/10 Python