p5.js入门教程和基本形状绘制
一、什么是p5.js
最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js。
主讲老师就是开发者之一……还是挺激动的。
p5.js是一个为艺术家、设计师而开发的Javascript库,可以看作是Processing的Web版本。如果有Processing学习经验的话,p5.js上手会非常快。
至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者。
我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫。
二、使用p5.js
p5.js拥有在线的代码编辑器,网址如下:
左边输入代码,点击运行按钮,就可以在右边看到代码运行效果。
你可以注册一个p5.js帐号,每次你的代码都可以保存在官方网站,无论是修改、测试或展示都十分方便。
下图是用ellipse()函数画了一个圆:
三、上手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,宽,高,起始角度,终止角度) }
效果如下图所示:
当然,线条色和填充色都是可以替换的,也可以修改线条粗细:
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); }
效果如下图所示:
五、查阅Reference
p5.js提供了许多函数用来进行创作,并且许多函数都有多种重载函数,这里不一一讲解。
p5.js官网提供了Reference,对每一种函数都进行了详细的解释,可以通过查阅这些函数的用法来进一步学习p5.js,网址如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 如何设计开发好一个 HTTP API?
- [WCF权限控制]基于Windows用户组的授权方式[下篇]
- Spring读书笔记——bean解析
- 10个大数据误区,看看你中了几个?
- 从数据到代码——通过代码生成机制实现强类型编程[上篇]
- Spring读书笔记——bean加载
- Java8-初识Lambda
- 我的WCF之旅(5):面向服务架构(SOA)和面向对象编程(OOP)的结合——如何实现Service Contract的重载(Overloading)
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[下篇]
- 谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持
- WCF技术剖析之二十九:换种不同的方式调用WCF服务[提供源代码下载]
- 我的WCF之旅(4):WCF中的序列化[下篇]
- [WCF权限控制]模拟(Impersonation)与委托(Delegation)[上篇]
- Android EclipseIDE技巧
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法