# 【p5.js】作业二——创意自画像

p5.js&课程作业 专栏收录该内容
7 篇文章 0 订阅

# 实现步骤

## 绘制静态

beginShape();
vertex(x1,y1);
bezierVertex(x2,y2,x3,y3,x4,y4);
endShape();


function drawground(){
var c1 = color(164,153,195);
var c2 = color(190,200,220);
}

function setGradient(x, y, w, h, c1, c2,axis) {
noFill();
if (axis == Y_AXIS) {  // Top to bottom gradient
for (var i = y; i <= y+h; i++) {
var inter = map(i, y, y+h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x+w, i);
}
}
else if (axis == X_AXIS) {
for (var k = x; k <= x+w; k++) {
var interk = map(k, x, x+w, 0, 1);
var ck = lerpColor(c1, c2, interk);
stroke(ck);
line(k, y, k, y+h);
}
}
}


## 交互

### 眼睛跟随鼠标移动效果

function draweye(){
var dx=mouseX/50;
var dy=mouseY/100;
noStroke();
fill(255,255,255);
ellipse(160+dx,409+dy,10,10);
ellipse(338+dx,421+dy,10,10);
}


### 背景雪花效果

p5.js官网上有源码，稍微改动了下让雪花能与鼠标产生一些互动
snowflakes

### 背后光圈点击发光效果

function setgh(x,y,x1,y1,c1,c2)
{
if (flag){
for(var i = 0; i<= x1/5; i++)
{
var inter = map(i, 0, 50, 0, 1);
var c = lerpColor(c1, c2, inter);
fill(c);
ellipse(x,y,x1-i,y1-i);
}
}
}


• 0
点赞
• 0
评论
• 5
收藏
• 一键三连
• 扫一扫，分享海报

10-29 276
10-20 259

12-29 435
12-16 777
05-26 1066
12-30 1026
12-29 685
11-12 5592
11-03 267
12-30 697
12-30 1310
11-24 1867
11-24 1438
10-21 304
11-21 654
11-24 1528
12-16 890
11-23 482