使用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效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
JS实现音量控制拖动
Jan 15 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
浅析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/06/30 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php扩展开发入门demo示例
2019/09/23 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
PyTorch预训练的实现
2019/09/18 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
《赵州桥》教学反思
2014/02/17 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
国庆庆典邀请函
2015/02/02 职场文书
社区党务工作总结2015
2015/05/19 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android