使用p5.js临摹动态图片


Posted in Javascript onNovember 04, 2019

本文实例为大家分享了p5.js临摹动态图片的具体代码,供大家参考,具体内容如下

1、临摹图片

使用p5.js临摹动态图片

2、图像运动规律

原图中一共有36个等大的四分之三圆形,按照一定的规律转动,可以等效为圆形不动,每个圆上有以其半径为边长的矩形在绕圆形的原点转动,每四个为一组,其他部分都是在重复这四个的转动规律

3、完整代码

function setup() 
{ 
 createCanvas(402,402); 
}
function draw()
{
 background(0); 
 var dx=0; 
 dx+=PI/180;
 var t=(millis()/5)*sin(dx);//返回自程序开始的毫秒数
 if(dx==PI) 
 { 
  dx=0;
 } 
 
 for(var i=0;i<6;i++)//每行每列六个圆形
 {  
  for(var j=0;j<6;j++)
  { 
   fill(255); 
   ellipse(i*66+36, j*66+36, 60, 60);//绘制半径30的圆形,间隔6
   fill(0); 
   translate(i*66+36, j*66+36);//矩形的移动,共四种运动状态
   if(i%2==0&&j%2==0) 
   {  
    rotate(-t); //逆时针旋转
    rect(0,0,30,30);//旋转的边长30黑色矩形
   }  
   else if(i%2==1&&j%2==0)
   { 
    rotate(t);//顺时针旋转
    rect(-30,0,30,30); 
   }  
   else if(i%2==1&&j%2==1) 
   {  
    rotate(-t); 
    rect(-30,-30,30,30); 
   }  
   else if(i%2==0&&j%2==1)
   {  
    rotate(t);
    rect(0,-30,30,30); 
   }  
   resetMatrix(); 
  } 
 }
}

4、临摹结果

使用p5.js临摹动态图片

5、拓展图像

使用p5.js临摹动态图片

运动规律:

一段螺旋型的运动弧线,中心颜色较深,越向外颜色越浅,形成一种线在向中心运动的趋势。绘制时是由无数个没有边框的圆形一起按照规律运动,形成线。

完整代码:

function setup()
{
 createCanvas(500, 500);
 noStroke(); 
}
function draw() {
 background(0); 
 for (var i =1;i <3000; i++)
 {
  drawcircle(255-0.1*i,255-0.1*i,255-0.1*i, i); 
  i++;
 }
}
function drawcircle( r, g, b, interval){
 fill(r, g, b);
 var x = 250; 
 var y = 250; 
 var t = millis() /3+ interval *0.5;
 var xi;
 var yi;i
 var radius = interval *15;
 xi = 0.01*radius * Math.cos(t * Math.PI/180);
 yi = 0.01*radius * Math.sin(t * Math.PI/180); 
 x += xi;
 y += yi;
 ellipse(x, y, 20,20);
}

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

Javascript 相关文章推荐
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
js表数据排序 sort table data
2009/02/18 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
微信小程序文字显示换行问题
2019/07/28 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python入门篇之正则表达式
2014/10/20 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
关爱残疾人演讲稿
2014/05/24 职场文书
学校创先争优活动总结
2014/08/28 职场文书
公证委托书格式
2014/09/13 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
求职自我推荐信
2015/03/24 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
利用python做表格数据处理
2021/04/13 Python