p5.js是啥?
是前端页面的小插件，可以做出很多有趣的东西，是processing的延伸版
processing又是啥？
一个算法编程软件，好奇？给你传送门 https://processing.org
很厉害的样子！没听说过！
p5.js介绍完毕！
昂？ 这就完了？小编也太偷懒了吧？看看别人家的小编，学习学习
好吧~！官网传送门 http://p5js.org
就这些吧，不能再多了
取关，拉黑！再见！再也不见！！！
车已经起步，小心跳车摔了~~！
首先默认大家见过html，js，css ，如果不懂大家也接着看吧
我们需要创建一个html页面和一个js文件
- index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>p5.js</title>
<script src="https://cdn.bootcss.com/p5.js/0.8.0/p5.min.js"></script>
<script language="javascript" type="text/javascript" src="myp5.js"></script>
<style>
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>
- myp5.js
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
fill(142,39,24);
textSize(233);
textAlign(CENTER);
text("大家好",width *0.5, height *0.5)
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
双击打开index.html文件，会出大家好页面
恭喜！可以开始玩耍了
网页展示效果（自适应宽高）
听说程序员有*规则潜**(○｀ 3′○)，编写第一个程序都会写hello world，你至少应该写个中文“你好世界”吧？“大家好”是什么鬼？
“大家好”这里的“大家”可以理解为“世界”，咱们说起来更自然+顺嘴+贴切，所以“你好世界”这种字对字的翻译咱们还是弃用吧！
你写是什么鬼，看不懂
咱们今天不讲 index.html文件
先来看看 myp5.js文件
看到了三个模块
- setup (执行一次，用来写初始化参数)
- draw（无限循环，通过这个特性，就可以做出动画了）
- windowResized（实现网页全屏自适应）
function setup() {}
function draw() {}
function windowResized() {}
通过createCanvas(宽度，高度)，我们可以创建画布的宽高尺寸，我们在这个区域玩耍
可以是具体的数字800，也可以是全屏宽度windowWidth
function setup()
{
createCanvas(windowWidth, windowHeight);
}
text("大家好") ，我们可以设置我们想显示的文字，
文字在代码当中叫做字符串，要写在双引号内部“”，
我们还要设置我们的文字显示的位置，
width表示整个页面的宽度，heidht表示整个页面的高度。
width 乘以 0.5 电脑自动计算宽度的一半
height 乘以 0.5 电脑自动计算高度的一半
在2D平面当中，左右方向为x轴，上下方向为y轴
所以现在重新来看这段话含义，text("大家好", width *0.5，height *0.5)
我想在页面显示大家好，而且要让文字位置在页面的中间位置
function draw()
{
text("大家好",width *0.5, height *0.5)
}
我们发现，如果只写text，文字不是居中位置
因为只写text时候，他的中心点是在文字的左上角1位置
我们要把左上角1位置挪到文字的中心
怎么办呢？
用到textAlign()功能，括号内填写CENTER【居中】，RIGHT【居右】，LEFT【居左】
function draw() {
textAlign(CENTER);
text("大家好",width *0.5, height *0.5)
}
我们发现文字太小了，想放大一点
我们用到textSize()，括号内数字就是用来调整文字的大小
function draw() {
textSize(233);
textAlign(CENTER);
text("大家好",width *0.5, height *0.5)
}
我们还发现，文字的颜色是黑色啊，而小编的颜色是故宫红
我们要用到fill()，表示填充颜色的意思
function draw() {
fill(142,39,24);
textSize(233);
textAlign(CENTER);
text("大家好",width *0.5, height *0.5)
}
我们看到fill填充功能内部有三个数字
fill采用的是光源RGB颜色模式，也就是R=红色，G=绿色，B=蓝色
红色范围：0~255
绿色范围：0~255
蓝色范围：0~255
我去~~!给我们讲颜色啊？ 看不懂啊~！对颜色不敏感！！！
如果红绿蓝三个颜色配色比例为1：1：1，那么会出现神奇的颜色
都是0就是黑色，都是255就是白色，如果是其他的数字就是灰色
神奇不？
你既然学会了配黑色，白色，灰色
恭喜！恭喜！又学到了
如果我们用红色和绿色按照1：1能配出什么样的神奇颜色呢？
我们自己动手撸
fill(255,255,0);
哇塞，你既然又学会了一个配色方法，纯红色+纯绿色，按照1：1配出来的是黄色
而且还要告诉你一个劲爆消息，咱们配出来的神奇黄色与蓝色既然就是传说中的互补色
互补色！互补色！互补色！
对！你没有看错，不要激动，你一不小心竟然学会了互补色
互补色是啥？
就是两种颜色对比最强的我们称为互补色
那么又有一个问题，红色的互补色是啥？
我的妈呀，青色竟然是红色的互补色
赶紧看看绿色的互补色是啥
哇塞！ 紫色竟然是绿色的互补色
话说绿花丛中一点红，改成绿花丛中一点紫应该更凸显
我们综合一张图来看
最常用的就是互补色
除了互补色还是什么颜色关系？
关系多了去了~~~！！
我们再谈一个，叫和谐色
什么叫和谐色？就是不同颜色之间的明度和纯度一样的时候，我们看到的画面虽然色彩很多，但是画面给人的感觉就是很和谐，没有一个颜色会吸引你的注意力，我们在穿衣服的时候就可以通过这个原理，让黑黑的皮肤与衣服颜色的明度与纯度达到相同，从而让人视线从你的皮肤移开。
同样的，如果你想显得你的皮肤白，你可以穿互补色的衣服，从而让你的皮肤与衣服颜色由鲜明的分界线。包括身材显瘦，我们通过系腰带，腰带的颜色与衣服的颜色互补，从而让人眼睛聚焦到腰带颜色，从而让你整体看起来身材不错的目的
这个时候你又问了，你刚才讲的RGB模式怎么体现颜色的颜明度和纯度呢？
RGB颜色模式是无法观察到明度和纯度， 我们需要转换到另外一种颜色模式叫做HSB
H表示颜色名字：红色，绿色，蓝色，通过0~360来代表颜色
S表示颜色纯度：纯色，通过添加白色来稀释纯，用百分比100%表示
B表示颜色亮度：亮度，通过添加黑色来降低亮度，用百分比100%表示
那这个HSB颜色模式如何在p5.js中使用呢？
在setup模块中添加颜色模式colorMode，告诉电脑你要用HSB颜色模式 ，我不想用RGB了
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100);
}
我们可以看到此时fill中数字不再是RGB颜色了
fill(233,0,0);
这个时候现实的的是233这个颜色，纯度是0，亮度是0，所以我们看到的是黑色
哇塞，又学到新知识了
又有一个新问题！！！！！
小编是如何调出故宫色的？难道要经过几年的颜色搭配训练？？！
我不要~~！我不要~~！我不要学几年！！！！
我们可以*载下**一个取色软件
然后搜索故宫图片
最后用取色软件吸取图片中的颜色
复制RGB颜色参数到我们填充色当中即可
我去~~！你个偷懒鬼!!还以为你是配色大师
原来是“窃色大盗”~~！！志同道合，我喜欢( •̀ ω •́ )✧
......
最后咱们来看看最后一个模块windowResized
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
我们通过这个模块内部添加resizeCanvas功能，重置窗口宽高的尺寸，
从而让我们的画面自适应网页的窗口的大小。
如果不用windowResized，那么你设置全屏的时候会出现滚动条，
丑了一点，如果你不介意也可以。
到此！
本篇文章就算结束了
p5.js的基本用法大家应该稍微了解了
以后直接讲案例，大家应该很快能适应
大家也可以到官网自学