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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
轻量级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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
smarty中post用法实例
2014/11/28 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
php和html的区别点详细总结
2019/09/24 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
运动会稿件100字
2014/02/21 职场文书
保护水资源的标语
2014/06/17 职场文书
超级礼物观后感
2015/06/15 职场文书
地震捐款简报
2015/07/21 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫