使用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之锁定表格栏位
Jun 29 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
微信小程序实现多选功能
Nov 04 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php 获取本地IP代码
2013/06/23 PHP
destoon官方标签大全
2014/06/20 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
python中类与对象之间的关系详解
2020/12/16 Python
给儿子的表扬信
2014/01/15 职场文书
先进集体事迹材料
2014/02/17 职场文书
学生评语集锦
2015/01/04 职场文书
领导新年致辞2016
2015/07/29 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
Python turtle编写简单的球类小游戏
2022/03/31 Python