使用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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
vue监听滚动事件的方法
Dec 21 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
NOT NULL 和NULL
2007/01/15 PHP
基于php无限分类的深入理解
2013/06/02 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
vue中appear的用法
2017/08/17 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python实现快速计算词频功能示例
2018/06/25 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
用Python解数独的方法示例
2019/10/24 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
2014年道德讲堂实施方案
2014/03/05 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
大学新生入学教育方案
2014/05/16 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
经济纠纷起诉状
2015/05/20 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
图文详解nginx日志切割的实现
2022/01/18 Servers