使用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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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下escape解码函数的实现方法
2010/08/08 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python迭代和迭代器详解
2016/11/10 Python
python复制文件到指定目录的实例
2018/04/27 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python join方法使用详解
2019/07/30 Python
使用python实现滑动验证码功能
2019/08/05 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Django celery异步任务实现代码示例
2020/11/26 Python
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
2014年信访维稳工作总结
2014/12/08 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
机关工会工作总结2015
2015/05/26 职场文书
八年级数学教学反思
2016/02/17 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
详解Java实践之适配器模式
2021/06/18 Java/Android
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python