p5.js入门教程和基本形状绘制


Posted in Javascript onMarch 15, 2018

一、什么是p5.js

最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js。

主讲老师就是开发者之一……还是挺激动的。

p5.js是一个为艺术家、设计师而开发的Javascript库,可以看作是Processing的Web版本。如果有Processing学习经验的话,p5.js上手会非常快。

至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者。

我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫。

二、使用p5.js

p5.js拥有在线的代码编辑器,网址如下:

http://alpha.editor.p5js.org/

左边输入代码,点击运行按钮,就可以在右边看到代码运行效果。

你可以注册一个p5.js帐号,每次你的代码都可以保存在官方网站,无论是修改、测试或展示都十分方便。

下图是用ellipse()函数画了一个圆:

p5.js入门教程和基本形状绘制

三、上手p5.js

当你新建了一个p5.js工程后,便会生成以下的代码:

function setup() { //setup函数,每次程序开始运行时执行一次,用于初始化。 
 createCanvas(400, 400);//生成一个400x400的画布 
}  
function draw() { //draw函数,每秒运行60次,不断地在画布上绘制图形 
 background(220);//绘制背景,颜色为RGB(220,220,220) 
}

p5.js程序总是从setup()开始执行,执行过一次setup()后,便进入draw()函数的不断循环调用。

可以发现,语法和JavaScript并没有什么太大的不同,只是多了很多特殊的函数以供调用罢了。

四、绘制基本图形

在p5.js中,绘制图形是件很容易的事情,有很多相关函数:

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
  ellipse(100,100,100,100);//绘制椭圆(x,y,宽,高) 
  triangle(150,150,150,200,200,200);//绘制三角形(x1,y1,x2,y2,x3,y3) 
  quad(180,100,200,150,270,150,250,100);//绘制四边形(x1,y1,x2,y2,x3,y3,x4,y4) 
  rect(30, 20, 50, 50);//绘制矩形(x,y,宽,高) 
  line(0,0,100,100);//绘制线段(x1,y1,x2,y2)起点至终点 
  arc(200, 50, 50, 50, 0, HALF_PI);//绘制弧(x,y,宽,高,起始角度,终止角度) 
}

效果如下图所示:

p5.js入门教程和基本形状绘制

当然,线条色和填充色都是可以替换的,也可以修改线条粗细:

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
   
  stroke(255,128,128); 
  strokeWeight(5); 
  fill(255,200,0); 
  ellipse(100,100,100,100); 
  triangle(150,150,150,200,200,200); 
   
  noStroke(); 
  fill(100,255,0); 
  quad(180,100,200,150,270,150,250,100); 
  rect(30, 20, 50, 50); 
   
  stroke(0); 
  line(0,0,100,100); 
  arc(200, 50, 50, 50, 0, HALF_PI); 
}

效果如下图所示:

p5.js入门教程和基本形状绘制

五、查阅Reference

p5.js提供了许多函数用来进行创作,并且许多函数都有多种重载函数,这里不一一讲解。

p5.js官网提供了Reference,对每一种函数都进行了详细的解释,可以通过查阅这些函数的用法来进一步学习p5.js,网址如下:

https://p5js.org/reference/

p5.js入门教程和基本形状绘制

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

Javascript 相关文章推荐
JavaScript控制Session操作方法
Jan 17 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 #Javascript
vue之浏览器存储方法封装实例
Mar 15 #Javascript
vue实现提示保存后退出的方法
Mar 15 #Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 #Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 #Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 #Javascript
iview中Select 选择器多选校验方法
Mar 15 #Javascript
You might like
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
js实现楼层导航功能
2017/02/23 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python编写一个闹钟功能
2017/07/11 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python3.8下载及安装步骤详解
2020/01/15 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
运动会稿件50字
2014/02/17 职场文书
办公设备采购方案
2014/03/16 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2014年团工作总结
2014/11/27 职场文书
先进工作者推荐材料
2014/12/23 职场文书
运动会新闻报道稿
2015/07/22 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android