使用p5.js临摹动态图形


Posted in Javascript onOctober 23, 2019

一、临摹

最近正在学习用代码绘图,于是按照下面的动态图形自己临摹了一幅图形

使用p5.js临摹动态图形

临摹结果
观察发现,整个图案都是由基础的正六边形组成

首先创建一个画布

function setup() {
 createCanvas(400, 400);
}

画六边形的函数为

function polygon(x, y, radius, npoints) {//绘制正多边形函数
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

x,y分别表示六边形的位置,radius表示图形的边长,npoints表示图形的边数

发现六边形一直在绕着自己的中心旋转,并未发生其他变换,因此只需要将六边形批量创建,并使它不断旋转即可。

通过循环以及平移函数画出六边形

通过translate函数不断更改六边形的中心位置,

使用p5.js临摹动态图形

通过时间函数,达到不断旋转的效果

完整代码如下

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(10,10,10);
 var t=millis()/2000;
fill(123,0,0);
   for(var j=0;j<=4;j++){
  for(var h=0;h<=4;h++){
     push();
     translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
    rotate(t);
     polygon(0,0,40 ,6);    
     pop();
    }  
 }
 for(var i=0;i<=5;i++){
   for(var k=0;k<=5;k++){
   
     push();
     translate(width *i*0.2,height*k*0.34);
    rotate(t); 
      polygon(0,0,40 ,6);     
     pop();
   }
  }
  
 }

function polygon(x, y, radius, npoints) {//绘制正多边形函数
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

效果图

使用p5.js临摹动态图形

图形改编

只做了微小的改变,颜色可以随机切换,且有一个由小变大的过程

使用p5.js临摹动态图形

代码如下

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(0,10,200);
var t=5*millis()/1000;

//fill(211,0,0);
   for(var j=0;j<=4;j++){
  for(var h=0;h<=4;h++){
     push();
     translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
     rotate(frameCount / 22.0);
     let c2=random(100,255);
   
   fill(0,c2,0);  
    if (t<50)
    {polygon(0,0,t ,6);}
     if(t>50)
    {
     fill(255,0,0);
     polygon(0,0,50 ,6);
    }

     pop();
    }
  
 }
 for(var i=0;i<=5;i++){
   for(var k=0;k<=5;k++){
   
     push();
     translate(width *(0+i*0.2),height*(0+k*0.34));
     rotate(frameCount / 22.0);
     let c2=random(100,255);
  
   fill(0,c2,0);  
    if (t<50)
    {polygon(0,0,t ,6);}
    if(t>50)
    {
     fill(0,255,0);
      polygon(0,0,50 ,6);
     }
    
     pop();
   }
  }
  
 }

function polygon(x, y, radius, npoints) {//绘制正多边形函数
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

总结

本次实验让我对代码编程有了初步的了解,逐渐学回了分析问题和解决问题,虽然目前解决的都还是很简单的问题。做的图形也不够有创意,这门课程很有意思,希望后面自己可以抽出更多的时间来进行学习。

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

Javascript 相关文章推荐
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解Angular的8个主要构造块
Jun 20 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
layui多图上传实现删除功能的例子
Sep 23 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 #Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
JavaScript实现图片轮播特效
Oct 23 #Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 #Javascript
Vue实现数据请求拦截
Oct 23 #Javascript
You might like
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
浅析php创建者模式
2014/11/25 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
JavaScript模块详解
2017/12/18 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python fileinput模块使用实例
2015/05/28 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
个人简历自我鉴定
2013/10/11 职场文书
百度吧主申请感言
2014/01/12 职场文书
单位介绍信范文
2014/01/18 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android