使用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关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python简单日志处理类分享
2015/02/14 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python得到电脑的开机时间方法
2018/10/15 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python如何实现DES加密
2020/09/21 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
自我检讨书范文
2015/01/28 职场文书
调任通知
2015/04/21 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL