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匿名函数的一种应用 代码封装
Jun 27 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
js操作滚动条事件实例
Jan 29 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Cookies 和 Session的详解及区别
2017/04/21 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
微信小程序日历效果
2018/12/29 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
24岁生日感言
2014/01/13 职场文书
请假条范文大全
2014/04/10 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
贷款工资证明范本
2015/06/12 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书