p5.js 毕达哥拉斯树的实现代码


Posted in Javascript onMarch 23, 2018

本文介绍了p5.js 毕达哥拉斯树的实现代码,分享给大家,具体如下:

效果如下:

p5.js 毕达哥拉斯树的实现代码

主要方法

  1. translate()
  2. rotate()
  3. rect()
  4. push()
  5. pop()
  6. map()

主要思想

递归

草图

p5.js 毕达哥拉斯树的实现代码

过程分解

一、毕达哥拉斯树的递归函数

function Pythagorian(x){
 noStroke();
 fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色
 rect(0,0,x,x);//绘制当前的正方形
 
 if(x <= 3) return 0;//当正方形边长小于3时,结束递归

 /* 绘制右上角的正方形 */ 
 push();
 rotate(PI / 2 - t);//坐标轴顺时针旋转约37deg
 translate(0,-x/5 * 3 - x/5*4);//坐标轴向上平移3边+4边的长度
 Pythagorian(x/5*4);//递归调用毕达哥拉斯函数
 pop();
 
 /* 绘制左上角的正方形 */
 push();
 rotate( - t);//坐标轴逆时针旋转约53deg
 translate(0,-x/5 * 3);//坐标轴向上平移3边的长度
 Pythagorian(x/5*3);//递归调用毕达哥拉斯函数
 pop(); 
 
}

二、声明变量、创建画布

var a = 100; //最大正方形边长
var t;//4边所对应的角度
function setup(){
 t = 53.1301024 / 360 * 2 * PI;//约为53deg
 createCanvas(windowWidth, windowHeight);//创建画布
 background(255);
 noLoop();//draw()函数只执行一次
}

三、开始绘制毕达哥拉斯树

function draw(){
 translate(windowWidth/2, windowHeight - a * 2);//将坐标系平移至画布中间底部
 Pythagorian(a);//调用毕达哥拉斯递归函数
}

绘制毕达哥拉斯树完整代码

var a = 100;
var t;
function setup(){
 t = 53.1301024 / 360 * 2 * PI;
 createCanvas(windowWidth, windowHeight);
 background(255);
 noLoop();
}
function draw(){
 translate(windowWidth/2, windowHeight - a * 2);
 Pythagorian(a);
 
}
function Pythagorian(x){
 noStroke();
 fill(107, 142, 35,map(x, 0, a, 150, 255));
 rect(0,0,x,x);
 
 if(x <= 3) return 0;
 
 push();
 rotate(PI / 2 - t);
 translate(0,-x/5 * 3 - x/5*4);
 Pythagorian(x/5*4);
 pop();
 
 push();
 rotate( - t);
 translate(0,-x/5 * 3);
 Pythagorian(x/5*3);
 pop(); 
 
}

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

Javascript 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 #Javascript
浅谈Webpack 持久化缓存实践
Mar 22 #Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 #Javascript
Java设计中的Builder模式的介绍
Mar 22 #Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 #Javascript
收集前端面试题之url、href、src
Mar 22 #Javascript
vue 的keep-alive缓存功能的实现
Mar 22 #Javascript
You might like
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python实现ping的方法
2015/07/06 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
市场部管理制度
2014/02/02 职场文书
相亲大会策划方案
2014/06/05 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
学校工会工作总结2015
2015/05/19 职场文书
庆七一晚会主持词
2015/06/30 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
基于Python实现西西成语接龙小助手
2022/08/05 Golang