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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
vue组件的写法汇总
Apr 12 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 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
PHP中的正规表达式(二)
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
Python输出带颜色的字符串实例
2017/10/10 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
经典c++面试题五
2014/12/17 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
超市商业计划书
2014/05/04 职场文书
施工安全责任书范本
2014/07/24 职场文书
钱学森电影观后感
2015/06/04 职场文书