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 相关文章推荐
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
vue中render函数的使用详解
Oct 12 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JS面试题中深拷贝的实现讲解
May 07 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 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
pdo中使用参数化查询sql
2011/08/11 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
公司司机岗位职责
2014/02/07 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书