p5.js 基础学习

1. 简介

p5.js是一种易懂的、针对没有编程基础的艺术家和设计师做的编程语言,可以制作网页的图象、动画和交互作品,实现了web端的互动艺术创作,释放出互联网创意变成的魅力,以Processing为基础的JavaScript框架。

p5.js 官网: https://p5js.org/

2. 草图

在p5.js创作中,草图十分重要,不建议直接进行图形代码的编写,而应该在纸上绘制一些原型草图,然后再用代码把想要表现的图形呈现在屏幕上。

3. 编程结构

p5.js非常类似于create.js,但是p5.js 图形封装库更齐全,并针对设计作了优化,非常方便。

基本语法:

//初始化,只运行一次
function setup () {}


//绘制图形,每一帧都读取
function draw() {}

4. 案例一 鼠标描边

function setup() {
createCanvas(400, 400);
}
function draw() {
if(mouseIsPressed){
stroke(220);
}else{
stroke(0);
}
line(300,300,mouseX,mouseY);
}

效果描述:中心点是(300,300),鼠标移动描边,按下时是白色,不按下是黑色。截图如下:
在这里插入图片描述

5. 画布与基本形状

(列举部分,不齐全,可在官网上学习更多基本形状画法)

类型 语法
画布 createCanvas(width,height)
point(x,y)
线段 line(x1,y1,x2,y2)
三角形 trangle(x1,y1,x2,y2,x3,y3)
四边形 quad(x1,y1,x2,y2,x3,y3,x4,y4)
矩形 rect(x,y,width,height)
椭圆 ellipse(x,y,width,height)
圆弧线 arc(x,y,width,height)
贝塞尔曲线 Bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2)
自定义曲线

6. 绘图顺序和颜色填充

绘制顺序按照代码先后顺序,越前面的越在底层
颜色填充:fill,stroke。

7. 案例二 画两个小动物

function setup() {
createCanvas(500, 150);
background(0);
}
function draw(){
//左边的小动物
fill(255);
//point能独立存在,可被多面共享,不唯一。
//vertex不能独立存在,只能存在一个平面内,唯一。
beginShape();
vertex(125,150);
vertex(129,100);
vertex(110,90);
vertex(115,80);
vertex(130,85);
vertex(140,10);
vertex(147,30);
vertex(183,32);
vertex(190,12);
vertex(195,90);
vertex(210,100);
vertex(205,110);
vertex(195,105);
vertex(200,150);
endShape();
fill(0);
ellipse(153,60,6,6);
ellipse(176,60,6,6);
noFill();
ellipse(164,90,10,20);
//右边的小动物
fill(255);
beginShape();
vertex(270,150);
vertex(270,114);
vertex(250,110);
vertex(260,104);
vertex(270,105);
vertex(270,60);
vertex(260,50);
vertex(270,55);
vertex(300,55);
vertex(320,45);
vertex(310,55);
vertex(320,105);
vertex(330,100);
vertex(335,105);
vertex(323,113);
vertex(325,150);
endShape();
fill(0);
ellipse(280,80,3,7);
ellipse(290,80,3,7);
noFill();
arc(285,90,20,20,radians(20),radians(90));
}

截图:
在这里插入图片描述

8. 案例三 随机换色盘

function setup() {
createCanvas(500, 500);
background(0);
rectMode(CENTER);
colorMode(HSB,360,80,80);
}
function draw(){
for(let x=0;x<550;x+=50){
for(let y=0;y<550;y+=50){
stroke(random(360,80,80));
fill(random(360),80,80);
rect(x,y,random(50),random(50));
}
}
}

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读