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进行拖拽
Jul 20 Javascript
js调用flash的效果代码
Apr 26 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
VSCode搭建React Native环境
May 07 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
TS 类型兼容教程示例详解
Sep 23 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读取txt文本文件并分页显示的方法
2015/03/11 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python高级property属性用法实例分析
2019/11/19 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
培训自我鉴定
2014/01/31 职场文书
数学教学随笔感言
2014/02/17 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
诚信考试承诺书
2014/03/27 职场文书
新闻发布会主持词
2014/03/28 职场文书
合作意向协议书范本
2014/03/31 职场文书
体育节口号
2014/06/19 职场文书
捐书倡议书
2014/08/29 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python