前言

我是一个很新的新人欢迎大家查漏补缺有不足地方口下留情 🙃

介绍

首先附上p5.js的官网 p5js.org/zh-Hans/ 国内可能会比较慢一点建议科学。现在官网也支持中文所以对初学者还是比较友好。

效果

刚开始肯定很多人对p5.js 比较陌生话不多说直接上链接让你们体验一下p5.js的效果 openprocessing.org/user/159668… 这是国外大佬用p5.js实现的一些艺术图形没错这些都是js写

基础

Editor 是可以在现在编辑实时查看效果
Download 是吧p5.js 下载到本地
Reference 里面有常用的APi解释

下载

提供了三种常见方式完整版压缩版 CDN 可以直接选择需要的版本

开始

一个常见的p5.js demo都是由setup 与 draw 两个方法组成

function setup() { //setup函数，每次程序开始运行时执行一次，用于初始化。
  createCanvas(600, 600);//生成一个400x400的画布
} 
function draw() { //draw函数，每秒运行60次，不断地在画布上绘制图形
  background(220);//绘制背景，颜色为RGB(220,220,220)
}

上面代码在浏览器是这个效果我们按照reference的基础图形尝试着往画布上添加几个基础图形

    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); //四分之一圆
    }

你会发现每个图形后面都有参数大多都遵循 x轴、y轴、长、宽、颜色等具体参数参考官方reference

事件

事件比较重要因为很多时候p5.js都是用来做游戏所以交互很重要

接下来我们尝试让图形动起来思路大概就是把坐标提出变量改变变量值就可以实现运动

function draw() { 
    background(220);
    ellipse(mouseX,mouseY,60,60);//一个圆跟随这鼠标运动
    }

调色板案例

那我们来点高级点拖动鼠标改变背景rgb值生成调色板

    let r = 0;
    let b = 255;

     function setup(){
        createCanvas(600,400);
     }
     function draw(){
         //map相当于映射 等比区间
         r = map(mouseX,0,600,0,255);
         b = map(mouseY,0,400,255,0);
         background(r,0,b);
         noStroke()
         fill(250,200,200,80)
         ellipse(mouseX,mouseY,50,50);
     }

随着鼠标移动背景会跟随改变颜色其中这个map挺重要很多时候都会用到意思是等比区间链接在此 p5js.org/zh-Hans/ref… 它的参数大概是

v1 目标值
v2 参考值1最小值
v3 参考值1最大值
v4 参考值2最小值
v5 参考值2最大值
返回映射后的数字

转盘案例

    let angle = 0;
    //创建画布
    function setup(){
	createCanvas(400,400);
        background(220);
    }

    //创建图案
# function draw(){
        let x = map(cos(angle),-1,1,0,width);
        let y = map(sin(angle),-1,1,0,height);
        line(200,200,x,y);
        ellipse(x,y,20,20);
        angle += 0.02;
    }

技术点

其中用到了高中最常见的数学sin cos配合map 详细细参见官方reference
是由线与圆构成不断该表线的坐标与圆的坐标就会转
由于draw方法是每次执行六十次所以+=0.02刚好转一圈形成一个圆
这些数学方法官方都有API 可以直接参考 p5.js 代码没有这么冗余只要你有想法可以有无线可能建议新手下一个案例直接上手贪吃蛇案例可以体验一下碰撞检测毕竟这才是核心附上B站学习链接www.bilibili.com/video/BV1j5…

总结

首先感谢大家看到这里我是一个新人前端去年毕业目前担任某大厂的前端工程师主要是做的广告所以很多时候会要做动画实现一些简单游戏交互像Pxi TweenMax 都是常见的动画库如果大家感兴趣后期可以出一篇 Animate + PIXI/TweenMax + Canvas实现马里奥吃金币的小游戏教程。

p5.js 入门到实现一个简单转盘

前言

介绍

效果

基础

下载

开始

事件

调色板案例

转盘案例

总结