创意编程-创意自画像

作品展示

作品特点

1. 鼠标控制眼珠和眉毛的朝向（始终朝向鼠标位置）
2. 鼠标控制嘴巴大小（根据鼠标Y轴方向的位置决定，鼠标从下到上，嘴巴从小到大）
3. 鼠标控制手挥动（根据鼠标Y轴方向的位置决定，鼠标从下到上，手臂从下到上挥动）
4. 鼠标控制下雪的密度（根据鼠标Y轴方向的位置决定，鼠标从下到上，下雪密度从小到大）
5. 整体做出一个没下雪的时候情绪低落的样子，雪越大越开心的效果（大概吧）

函数作用说明

1. 利用fill()函数控制填充颜色，noFill()不填充；stroke()函数控制边框颜色，strokeWeight()控制边框宽度，noStroke()无边框
2. line()直线，bezier()曲线,ellipse()椭圆/圆，rect()矩形
3. beginShape()->vertex()画顶点->quadraticVertex()画曲线顶点->endShape()自定义形状（主要用于画头发）
4. translate()移动坐标原点，rotate()旋转坐标轴

源代码

let snowflakes = [];

function setup() {
  // put setup code here
  createCanvas(600,600);//创建画布
}

function draw() {
  // put drawing code here  
  background(139);//背景色设置为灰色 
  drawMe();
  drawSnow();
}

function drawMe(){
	
	drawClothes();//衣服
	drawStar(300,400,20,40,5);//星星
	drawLHand();//左手
	drawRHand();//右手
	
	noStroke();
	fill(255,228,181);//脸
	ellipse(300,200,200,200);
	fill(255,228,181);//耳朵
	ellipse(400,200,50,50);
	ellipse(200,200,50,50);
	drawEyes();//眼睛
	fill(255,150,122);//鼻子
	triangle(300,190,290,230,310,230);
	
	drawMouth();//嘴巴
	drawBrow();//眉毛
	drawHair();//头发
	drawGlasses();//眼镜
	
}

function drawEyes(){//眼睛
	noStroke();
	fill(255,255,255);
	ellipse(340,180,30,30);
	ellipse(260,180,30,30);
	var deltax=(mouseX-300)/300*7.5;
	var deltay=(mouseY-200)/400*8;
	fill(0);
	ellipse(340+deltax,180+deltay,15,15);
	ellipse(260+deltax,180+deltay,15,15);
}

function drawBrow(){//眉毛
	noFill();
	stroke(0);
	strokeWeight(3);
	var deltax=(mouseX-300)/300*8;
	var deltay=(mouseY-200)/400*5;
	bezier(250+deltax,155+deltay,260+deltax,145+deltay,260+deltax,145+deltay,270+deltax,155+deltay);
	bezier(330+deltax,155+deltay,340+deltax,145+deltay,340+deltax,145+deltay,350+deltax,155+deltay);
}

function drawHair(){//头发
	noStroke();
	fill(139,69,0);//头发
	beginShape();
	vertex(195,174);vertex(200,210);vertex(210,160);vertex(212,170);
	vertex(230,130);vertex(230,140);vertex(240,120);vertex(270,130);
	vertex(270,120);vertex(340,140);vertex(340,130);vertex(380,145);
	vertex(380,135);vertex(385,150);vertex(385,140);vertex(390,170);
	vertex(392,160);vertex(400,210);vertex(405,174);
	quadraticVertex(400,90,300,90);
	quadraticVertex(200,90,195,174);
	endShape();
}

function drawMouth(){//嘴巴
	noStroke();
	fill(255,150,122);
	var deltay=(600-mouseY)/600*20+10;
	ellipse(300,260,40,deltay);
}

function drawGlasses(){//眼镜
	noFill();
	stroke(0);
	strokeWeight(5);
	rect(230,160,60,40);
	rect(310,160,60,40);
	line(290,180,310,180);
	line(370,180,396,174);
	line(230,180,204,174);
}

function drawClothes(){//衣服
	noStroke();
	fill(135,206,235);
	triangle(300,100,210,480,390,480);
	fill(255,165,79);
	rect(240,480,50,80);
	rect(310,480,50,80);
	fill(50,50,50);
	rect(240,560,50,20);
	rect(310,560,50,20);
	ellipse(240,570,20,20);
	ellipse(360,570,20,20);
	fill(139);
	rect(240,280,120,20);
	fill(255,228,181);
	ellipse(300,300,40,20);
}

function drawStar(x,y,radius1,radius2,npoints){//星星
  noStroke();
  fill(238,238,0);
  translate(300,400);
  rotate(-PI/2);
  star(0,0,20,40,5);
  rotate(PI/2);
  translate(-300,-400);
}

function star(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

function drawRHand(){//右手
	var angle=(mouseY-300)/600/3*PI;
	translate(350,340);
	rotate(angle);
	stroke(135,206,235);
	strokeWeight(50);
	line(0,0,100,0);
	noStroke();
	fill(255,228,181);
	ellipse(100,0,60,60);
	rotate(-angle);
	translate(-350,-340);
	
}

function drawLHand(){//左手
	var angle=(mouseY-300)/600/3*PI;
	translate(250,340);
	rotate(-angle);
	stroke(135,206,235);
	strokeWeight(50);
	line(0,0,-100,0);	
	noStroke();
	fill(255,228,181);
	ellipse(-100,0,60,60);
	rotate(angle);
	translate(-250,-340);
	
}

function drawSnow(){//雪
	let t = frameCount / 60;
	var density=(600-mouseY)/600*10;
	for (let i = 0; i < random(density); i++){
		snowflakes.push(new snowflake());
		}
	for (let flake of snowflakes){
		flake.update(t);
		flake.display();
		}
}

function snowflake(){
	this.posX = 0;
	this.posY = random(-50, 0);
	this.initialangle = random(0, 2 * PI);
	this.size = random(2, 5);
	this.radius = sqrt(random(pow(width / 2, 2)));
	this.update = function(time) {
    let w = 0.6;
	let angle =this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);
    this.posY += pow(this.size, 0.5);
	if (this.posY > height){
		let index = snowflakes.indexOf(this);
		snowflakes.splice(index, 1);
		}
		};
	this.display = function(){
		fill(240);
		noStroke();
		ellipse(this.posX, this.posY, this.size);
		};
}

相关参考

其中星星和雪花飘落的效果参考了官方文档，然后自己对其中一些参数做了调整。
星星: https://p5js.org/zh-Hans/examples/form-star.html
雪花: https://p5js.org/zh-Hans/examples/simulate-snowflakes.html

心得

最麻烦的还是画头发吧，调整坐标调整到崩溃，其他的部分只需要注意画的时候代码的顺序（图形遮挡顺序）就可以了。自己没什么美术功底，人物比较丑，交互性和动态上也只是做了比较简单的效果，总体来说还是挺有意思的。