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 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
Vue底层实现原理总结
Feb 17 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
js制作提示框插件
Dec 24 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python中的index()方法使用教程
2015/05/18 Python
python 常用的基础函数
2018/07/10 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python实现图像拼接
2020/03/05 Python
基于python 凸包问题的解决
2020/04/16 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
《苏珊的帽子》教学反思
2014/04/07 职场文书
安全生产管理责任书
2014/04/16 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
培训班开班主持词
2015/07/02 职场文书