使用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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 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模板原理讲解
2013/11/13 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
Python变量作用范围实例分析
2015/07/07 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
事业单位请假制度
2014/01/13 职场文书
创新比赛获奖感言
2014/02/13 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
天猫活动策划方案
2014/08/21 职场文书
党员先进事迹材料
2014/12/19 职场文书
法律意见书范文
2015/06/04 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS