相思资源网 Design By www.200059.com

一、什么是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入门教程和基本形状绘制

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

标签:
p5.js入门教程,p5.js教程

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“p5.js入门教程和基本形状绘制”

暂无p5.js入门教程和基本形状绘制的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。